小程序 自定义 tabBar

tabBar

自定义 tabBar

1、自定义tabBar 的一般实现步骤

自定义 tabBar 分为 3 大步骤，分别是：

① 配置信息

在 app.json 中的 tabBar 项指定 custom 字段，“custom”:ture
在项目根目录下创建custom-tab-bar文件夹, 并创建index组件

{ 
"tabBar"：{"custom":true   // 必填"color": "#000000", "selectedColor": "#000000","backgroundColor": "#000000", "list": [{ "pagePath": "page/component/index", "text": "组件" },{"pagePath": "page/API/index", "text": "接口" }] },"usingComponents": {} }}
}

② 添加 tabBar 代码文件

在项目根目录下创建custom-tab-bar文件夹, 并创建index组件

custom-tab-bar/index.js 
custom-tab-bar/index.json 
custom-tab-bar/index.wxml 
custom-tab-bar/index.wxss

③ 编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar
接口，可获取当前页面下的自定义 tabBar 组件实例。

2、基于vant-weapp 组件库来渲染底部tabbar

• 在 app.json/index.json 文件中，注册组件

   "usingComponents": { "van-tabbar": "@vant/weapp/tabbar/index", "van-tabbar-item": "@vant/weapp/tabbar-item/index" }

• 在组件的 wxml 文件中使用组件

<van-tabbar active="{{ active }}" bind:change="onChange"> <van-tabbar-item info="3"> <image slot="icon" src="/images/tabs/home.png" mode="aspectFit" style="width: 25px; height: 25px;"/><image slot="icon-active" src="/images/tabs/home-active.png" mode="aspectFit" style="width: 25px; height: 25px;" />自定义 van-tabbar-item> 
van-tabbar>

• 组件 js 文件中，书写逻辑

Page({  data: {active: 0, 将app.json的中的tabBar的list节点的内容粘贴过来 循环遍历生成tabbar，也可以手动绘制tabbar,直接使用sum },onChange(event) { // event.detail 的值为当前选中项的索引 this.setData({ active: event.detail }); }, });

• 重置 vant 组件库的样式

.van-tabbar-item { 重置css变量的值为0 --tabbar-item-bottom(0) 
}
// 样式不生效，需要在组件的js文件中，添加解除样式隔离的配置Component({ options: { // 解除样式隔离 styleIsolation: 'shared' } })

• 渲染数组徽标

可以将三个tabbar手动渲染出来，不使用循环遍历生成

• 在 tabbar 组件中使用 store 中的数据

1.导入mobx第三方包，导入store 
2.使用behavior挂载按需加载的第三方包的方法`storeBindingsBehavior`
3.进行数据的绑定
//添加数据绑定节点
storeBindings:{store,fields:{sum:'sum'},actions:{}
},
4.监听sum的变化，当变化的时候为info赋值//添加侦听器节点
observers:{'sum':function(val){this.setData({sum:val })}
}
5.在组件的js文件中处理tabbar的change事件
onChange(e){//e.detail的值为当前选中项的索引this.setData({active:e.detail})wx.switchTab({//这个url必须以/根路径开头 url:this.data.list[e.detail].pagePath })
}
6.将组件内部的数据声明移除掉，声明在store中
-由于van-tabbar组件内部修改了active的值而我们通过change事件也去修改了active的值，
使tabbar的展示出现了bug-**解决办法：将数据放在容器中，通过映射去使用容器的数据和修改数据的方法**//store.js中
exportconststore=observable({numA:1,numB:2,activeTabBarIndex:0,getsum(){returnthis.numA+this.numB }//定义actives方法，用来修改store中的数据 ...updateActiveTabBarIndex:active(function(index){  this.activeTabBarIndex=index 
})
})
//组件的index.js中
Component({//将容器中的方法挂载在behaviors节点？？behaviors:['storeBindingsBehavior'],storeBindings:{//指定使用的容器store,//容器中的数据 fields:{sum:'sum',active:'activeTabBarIndex'    },//容器中修改数据的方法actions:{//自定义方法：'容器中的方法'updateActive:'updateActiveTabBarIndex'    }},methods:{onChange(e){//e.detail的值为当前选中项的索引//this.setData({active:e.detail})//使用容器中的方法，更新active的值this.updateActive(e.detail)      //实现tabbar的跳转 wx.switchTab({//这个url必须以/根路径开头 url:this.data.list[e.detail].pagePath})} }
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！