对于刚接触小程序的小白来说,总是难免会遇到各种坑,唯独只有记录下来踩坑的过程,才能在后期避免在同一个地方不断的跌倒。tabbar导航是最常见的展现形式,但是为了展现自己独有的特色,往往会设计的稍微与众不同,首先要实现通用的tabbar效果,其次还要有个性化的样式,这就难到刚接触的大部分人。 刚接触小程序只能在网上搜索,其次翻阅官方文档,目前感觉官方文档部分还是稍微有点乱,每次想找个接口或者组件,总感觉不只一个地方,就比如这个tabbar。
原始的tabbar属于扩展能力:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
自定义的tabbar却在指南里:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html对于新手来说这样的操作完全不适应,也搞不懂为什么不能放在一起,明明就是一类东西及他的扩展,哎,一家独大的东西只能去适应。
直接上自定义tabbar:
一、按照官方的定义,首先需要在app.json里配置tabbar数据,官方的标准直接看以上链接就可以,自己通过尝试,发现只要配置最重要的配置就可以:
"pages": [
"pages/logs/logs",
"pages/index/index",
"pages/user/user",
"pages/list/list"
],
"tabBar": {
"custom": true, //自定义tabbar必须指定当前属性为true
"list": [
{
"pagePath": "pages/logs/logs"
},
{
"pagePath": "pages/list/list"
},
{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/user/user"
}
]
},
"usingComponents": {}
需要在页面展现的tabbar对应的页面,必须在这里进行配置,否则点击tab切换会报错:
switchTab:fail can not switch to no-tabBar page
意思就是要切换的页面没有在tabbar里进行配置,所有页面也必须在pages里面进行配置。
所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
二、在根目录新建目录 custom-tab-bar , 目录下面建立 index.js , index.wxss , index.json , index.wxml , 名字必须是这样的,不能定义其他的,至于为什么,目前不知道。
index.wxml
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>
index.wxss
/* custom-tab-bar/tabbar.wxss */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
}
.tab-bar-item cover-view {
font-size: 10px;
}
index.js
// custom-tab-bar/tabbar.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
selected: 0,
color: "#f60",
selectedColor: "#3cc51f",
color: "#7A7E83",
"selectedColor": "#f00",
"borderStyle": "black",
backgroundColor: "#ffffff",
list: [
{
pagePath: "/pages/logs/logs",
text: "首页",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png"
},
{
"pagePath": "/pages/user/user",
text: "用户",
iconPath: "/image/icon_component.png",
selectedIconPath: "/image/icon_component_HL.png"
}, {
pagePath: "/pages/list/list",
text: "列表",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png"
},
{
"pagePath": "/pages/index/index",
text: "会员中心",
iconPath: "/image/icon_component.png",
selectedIconPath: "/image/icon_component_HL.png"
}
]
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
console.log("切换index>>>"+data.index);
wx.switchTab({ url })
this.setData({
selected: data.index
})
}
}
})
这个页面必须配置完整的数据,tabbar展示的数据从这里的list获取,switchTab方法就是切换tab事件,都很容易看懂,就不详细说明。
三、在pages里建立对应的tab切换页面,就是第一步配置的页面,必须存在。(页面的位置不一定要在pages里,可以自己归纳,只要配置路径正确就可以)
基础的搭建到此为止,可以运行起来了,编译试试,会发现,tabbar效果有了,但是切换的时候,第一次点击tab页面切换了,但是tab图标和文字颜色效果没有变化,点击第二次才会有效果,这个应该是点击之后没有在tab页面设定tabbar的 select index,不知道是不是bug,这里需要在每一个tab页面的onShow里添加如下方法:
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 3 //这里的数字设置当前页面在tabbar里对应的序列,从0开始
})
}
}
此时再次编译,大功告成。
四、如果需要导航样式个性化处理的,可以修改index.wxml , index.wxss 结合数据状态进行操作,譬如:
这里因为只是修改页面和样式文件,每家都不一样,就不展示代码了。