本文已参与「新人创作礼」活动，一起开启掘金创作之路
一、tabBar切换
1.为什么使用tabBar
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。
2.注意事项（官网提示）
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
- tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
- tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
- 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
3.如何使用
tabBar是全局文件，需要在 pages.json配置
根据自己的要求来配对，我这里是有四个页面，分别是首页、分类、购物车、我的
pagePath是写页面地址，这里的页面地址推荐在pages中创建
iconPath是写图片地址，图片放到static中寻找路径即可，我们每次点击切换后，为了更好的展示效果，图片都会有点击前点击后的状态，这里的图片是点击前
selectedIconPath这里就是放点击后的图片
text自己起名字
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tabbar/index.png",
"selectedIconPath": "static/tabbar/indexSelected.png",
"text": "首页"
}, {
"pagePath": "pages/class/class",
"iconPath": "static/tabbar/class.png",
"selectedIconPath": "static/tabbar/classSelected.png",
"text": "分类"
},{
"pagePath": "pages/cart/cart",
"iconPath": "static/tabbar/cart.png",
"selectedIconPath": "static/tabbar/cartSelected.png",
"text": "购物车"
},{
"pagePath": "pages/my/my",
"iconPath": "static/tabbar/my.png",
"selectedIconPath": "static/tabbar/mySelected.png",
"text": "我的"
}]
}
二、下拉框
下拉框非常的简单，只需要一行代码就行，需要学会看官网的介绍，这单词我是记不住
在 pages.json中的globalStyle加上"enablePullDownRefresh":true即可，默认是关闭
如果想要改名字，需要先将"navigationBarTitleText": "uni-app"注释掉，再到globalStyle中的navigationBarTitleText改掉名字
还有很多样式可以根据官网的注释进行修改，得到自己想要的样子
编辑
编辑
三、搜索框导航
1.兼容APP、H5的方式
编辑
在常见titleNView配置代码示例中可以看到基本样式的代码，我们需要组合一下
在pages.json中配置，想做得好看，就需要组合一下样式，可在button中添加，不过需要注意的是，不管添加文字，矢量图片，默认都是右浮动，可以把其中一个改成左浮动，这里我使用的是阿里巴巴矢量图库的图片，下载文件，引入即可有需要的小伙伴我可以免费提供一个文件夹。
编辑
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "小余努力搬砖",
"app-plus": {
"titleNView": {
"searchInput": {
"backgroundColor": "#f4f4f4",
"borderRadius": "6px",
"placeholder": "请输入搜索内容",
"disabled": true
},
"buttons": [
{
"fontSrc": "/static/font/iconfont.ttf",//矢量图片引入路径
"float": "left",
"text": "\ue67a", //引入图片一定要带u
"fontSize": "24px",//大小
"color": "#666666"
},
{
"float": "right",
"text":"\ue661",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "24px",
"color": "#666666"
}
]
}}}
为了达到跳转的效果，我要在页面同级创建文件夹，为搜索页面，我们要主页使用页面生命周期onNavigationBarSearchInputClicked
来跳转到我们先要的页面
onNavigationBarSearchInputClicked(){
uni.navigateTo({
url:'../search/search'
})
}
2.兼容小程序
需要与pages同级创建一个components文件夹，创建一个插槽，这里不是创建页面不需要在pages.json注册，这里需要写一个宽度撑开，不然样式会出现问题，一般都是750rpx
<template>
<view class='slot'>
<slot name='left'></slot>
<slot name='center'></slot>
<slot name='right'></slot>
</view>
</template>
<script>
export default {
name:"search-slot",
data() {
return {
};
}
}
</script>
<style scoped>
.slot{
width: 750rpx;
display: flex;
}
</style>
直接在页面注册，但是这里不需要再去引用，直接就可以写入，这里会看到 包裹着代码，这里如同媒体查询一样，是一个判断MP就是只会在小程序下才会显示，还有很多的判断条件，不在一一列举，因为通是想兼容app/h5/小程序，一起写，在h5页面上就会出现两个导航栏，这是非常错误的样式，所以通过这个来规定什么时候会出现，这里的图标还是引入的阿里巴巴矢量图库，有想要到小伙伴私聊
<!--#ifdef MP -->
<search-slot class='flex'>
<view class="left" slot='left'>
<text class="iconfont icon-xiaoxi"></text>
</view>
<view class="center" slot='center'>
<text class="iconfont icon-sousuo" @click="search"></text>
</view>
<view class="right" slot='right'>
<text class="iconfont icon-richscan_icon"></text>
</view>
</search-slot>
<!--#endif-->
这里也同样需要点击搜索导航跳转搜索页面，是通过@click绑定事件完成的，路径还是同样的方法
methods: {
search(){
uni.navigateTo({
url:'../search/search'
})
}}
css样式代码
<style>
.flex {
display: flex;
height: 88rpx;
line-height: 88rpx;
align-items: center;
}
.left {
width: 44rpx;
flex: 0 0 44px;
align-items: center;
text-align: center;
}
.center {
flex: 1;
height: 60rpx;
line-height: 60rpx;
background-color: #eee;
text-align: center;
color: #ccc;
}
.right {
width: 44rpx;
flex: 0 0 44px;
align-items: center;
text-align: center;
}
</style>
编辑
\
