文章目录需求分析1. app.json 开启 custom2. 添加入口文件3. 编写自定义 tabBar 代码第一种带右上角徽标数字第二种不带右上角徽标数字【自己实现的】需求自定义 tabBar分析用到了 vant-tabbar1. app.json 开启 custom{tabBar:{custom:true,list:[{pagePath:pages/home/home,text:首页,iconPath:/images/home.png,selectedIconPath:/images/home-active.png},{pagePath:pages/message/message,text:消息,iconPath:/images/message.png,selectedIconPath:/images/message-active.png}]},}2. 添加入口文件文件夹名一定是custom-tab-bar当 custom 参数为 true 时小程序就会自动识别 custom-tab-bar 里面的文件并将其渲染出来。3. 编写自定义 tabBar 代码第一种带右上角徽标数字app.json中新增{usingComponents:{my-test1:/components/test1/test1,my-test2:/components/test2/test2,my-test3:/components/test3/test3,my-test4:/components/test4/test4,my-test5:/components/test5/test5,van-button:vant/weapp/button/index,my-numbers:./components/numbers/numbers,van-tabbar:vant/weapp/tabbar/index,van-tabbar-item:vant/weapp/tabbar-item/index},}index.wxmlvan-tabbar active{{active}}bind:changeonChangeactive-color#13A7A0van-tabbar-item wx:for{{list}}wx:keyindexinfo{{item.info ? item.info : }}image sloticonsrc{{ item.iconPath }}modeaspectFitstylewidth: 25px; height: 25px;/image sloticon-activesrc{{ item.selectedIconPath }}modeaspectFitstylewidth: 25px; height: 25px;/{{item.text}}/van-tabbar-item/van-tabbarindex.wxss.van-tabbar-item{--tabbar-item-margin-bottom:0,}index.js// custom-tab-bar/index.js// 导入import{storeBindingsBehavior}frommobx-miniprogram-bindingsimport{store}from../store/storeComponent({// 挂载behaviors:[storeBindingsBehavior],// 全局数据操作storeBindings:{store,fields:{sum:sum,active:activeTabBarIndex},actions:{updateActive:updateActiveTabBarIndex}},/** * 组件的方法列表 */methods:{onChange(event){// event.detail 的值为当前选中项的索引// this.setData({ active: event.detail });this.updateActive(event.detail);wx.switchTab({url:this.data.list[event.detail].pagePath,})},}})store.jsexportconststoreobservable({// 需要挂载的数据 -- 数据字段numA:1,numB:3,name:我是夜阑的狗,activeTabBarIndex:0,// 计算属性 -- get为修饰符getsum(){returnthis.numAthis.numB;},// actions 函数专门来修改 store 中数据的值updateNum1:action(function(step){this.numAstep;}),updateNum2:action(function(step){this.numBstep;}),updateName:action(function(name){this.namename;}),updateActiveTabBarIndex:action(function(index){this.activeTabBarIndexindex;})})第二种不带右上角徽标数字【自己实现的】app.json中新增{usingComponents:{my-test1:/components/test1/test1,my-test2:/components/test2/test2,my-test3:/components/test3/test3,my-test4:/components/test4/test4,my-test5:/components/test5/test5,van-button:vant/weapp/button/index,my-numbers:./components/numbers/numbers,van-tabbar:vant/weapp/tabbar/index,van-tabbar-item:vant/weapp/tabbar-item/index},}index.wxmlviewclasstab-barviewclasstab-bar-itemwx:for{{list}}wx:keyindexdata-path{{item.pagePath}}data-index{{index}}bindtapswitchTabimageclasstab-bar-iconsrc{{selected index ? item.selectedIconPath : item.iconPath}}modeaspectFit/textclasstab-bar-text {{selected index ? selected : }}{{item.text}}/text/view/view或van-tabbar active{{ active }}bind:changeonChangevan-tabbar-item iconhome-o标签/van-tabbar-itemvan-tabbar-item iconsearch标签/van-tabbar-itemvan-tabbar-item iconfriends-o标签/van-tabbar-itemvan-tabbar-item iconsetting-o标签/van-tabbar-item/van-tabbarindex.wxss.tab-bar{position:fixed;bottom:0;left:0;right:0;height:180rpx;background:#FEFBF3;display:flex;padding:28rpx 40rpx 53rpx;box-sizing:border-box;border-top:1rpx solid #E8DDD0;}.tab-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}.tab-bar-icon{width:60rpx;height:60rpx;margin-bottom:12rpx;}.tab-bar-text{font-weight:400;font-size:28rpx;color:#896A33;}.tab-bar-text.selected{font-weight:bold;font-size:28rpx;color:#896A33;}index.jsComponent({data:{selected:0,color:#896A33,selectedColor:#896A33,list:[{pagePath:/pages/home/home,text:首页,iconPath:/assets/images/tabbar_home.png,selectedIconPath:/assets/images/tabbar_selected_home.png},{pagePath:/pages/pray/pray,text:祈愿,iconPath:/assets/images/tabbar_pray.png,selectedIconPath:/assets/images/tabbar_selected_pray.png},{pagePath:/pages/live/live,text:视频,iconPath:/assets/images/tabbar_live.png,selectedIconPath:/assets/images/tabbar_selected_live.png},{pagePath:/pages/message/message,text:留言,iconPath:/assets/images/tabbar_message.png,selectedIconPath:/assets/images/tabbar_selected_message.png},{pagePath:/pages/profile/profile,text:我的,iconPath:/assets/images/tabbar_user.png,selectedIconPath:/assets/images/tabbar_selected_user.png}]},attached(){},methods:{switchTab(e){constdatae.currentTarget.datasetconsturldata.path wx.switchTab({url})}}})index.json{component:true}home.js在每个页面中添加该段代码表示当前所选中的 tabBar 项/** * 页面显示时更新 tabBar 选中状态 */onShow(){if(typeofthis.getTabBarfunctionthis.getTabBar()){this.getTabBar().setData({selected:0});}}
微信小程序自定义tabBar
文章目录需求分析1. app.json 开启 custom2. 添加入口文件3. 编写自定义 tabBar 代码第一种带右上角徽标数字第二种不带右上角徽标数字【自己实现的】需求自定义 tabBar分析用到了 vant-tabbar1. app.json 开启 custom{tabBar:{custom:true,list:[{pagePath:pages/home/home,text:首页,iconPath:/images/home.png,selectedIconPath:/images/home-active.png},{pagePath:pages/message/message,text:消息,iconPath:/images/message.png,selectedIconPath:/images/message-active.png}]},}2. 添加入口文件文件夹名一定是custom-tab-bar当 custom 参数为 true 时小程序就会自动识别 custom-tab-bar 里面的文件并将其渲染出来。3. 编写自定义 tabBar 代码第一种带右上角徽标数字app.json中新增{usingComponents:{my-test1:/components/test1/test1,my-test2:/components/test2/test2,my-test3:/components/test3/test3,my-test4:/components/test4/test4,my-test5:/components/test5/test5,van-button:vant/weapp/button/index,my-numbers:./components/numbers/numbers,van-tabbar:vant/weapp/tabbar/index,van-tabbar-item:vant/weapp/tabbar-item/index},}index.wxmlvan-tabbar active{{active}}bind:changeonChangeactive-color#13A7A0van-tabbar-item wx:for{{list}}wx:keyindexinfo{{item.info ? item.info : }}image sloticonsrc{{ item.iconPath }}modeaspectFitstylewidth: 25px; height: 25px;/image sloticon-activesrc{{ item.selectedIconPath }}modeaspectFitstylewidth: 25px; height: 25px;/{{item.text}}/van-tabbar-item/van-tabbarindex.wxss.van-tabbar-item{--tabbar-item-margin-bottom:0,}index.js// custom-tab-bar/index.js// 导入import{storeBindingsBehavior}frommobx-miniprogram-bindingsimport{store}from../store/storeComponent({// 挂载behaviors:[storeBindingsBehavior],// 全局数据操作storeBindings:{store,fields:{sum:sum,active:activeTabBarIndex},actions:{updateActive:updateActiveTabBarIndex}},/** * 组件的方法列表 */methods:{onChange(event){// event.detail 的值为当前选中项的索引// this.setData({ active: event.detail });this.updateActive(event.detail);wx.switchTab({url:this.data.list[event.detail].pagePath,})},}})store.jsexportconststoreobservable({// 需要挂载的数据 -- 数据字段numA:1,numB:3,name:我是夜阑的狗,activeTabBarIndex:0,// 计算属性 -- get为修饰符getsum(){returnthis.numAthis.numB;},// actions 函数专门来修改 store 中数据的值updateNum1:action(function(step){this.numAstep;}),updateNum2:action(function(step){this.numBstep;}),updateName:action(function(name){this.namename;}),updateActiveTabBarIndex:action(function(index){this.activeTabBarIndexindex;})})第二种不带右上角徽标数字【自己实现的】app.json中新增{usingComponents:{my-test1:/components/test1/test1,my-test2:/components/test2/test2,my-test3:/components/test3/test3,my-test4:/components/test4/test4,my-test5:/components/test5/test5,van-button:vant/weapp/button/index,my-numbers:./components/numbers/numbers,van-tabbar:vant/weapp/tabbar/index,van-tabbar-item:vant/weapp/tabbar-item/index},}index.wxmlviewclasstab-barviewclasstab-bar-itemwx:for{{list}}wx:keyindexdata-path{{item.pagePath}}data-index{{index}}bindtapswitchTabimageclasstab-bar-iconsrc{{selected index ? item.selectedIconPath : item.iconPath}}modeaspectFit/textclasstab-bar-text {{selected index ? selected : }}{{item.text}}/text/view/view或van-tabbar active{{ active }}bind:changeonChangevan-tabbar-item iconhome-o标签/van-tabbar-itemvan-tabbar-item iconsearch标签/van-tabbar-itemvan-tabbar-item iconfriends-o标签/van-tabbar-itemvan-tabbar-item iconsetting-o标签/van-tabbar-item/van-tabbarindex.wxss.tab-bar{position:fixed;bottom:0;left:0;right:0;height:180rpx;background:#FEFBF3;display:flex;padding:28rpx 40rpx 53rpx;box-sizing:border-box;border-top:1rpx solid #E8DDD0;}.tab-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}.tab-bar-icon{width:60rpx;height:60rpx;margin-bottom:12rpx;}.tab-bar-text{font-weight:400;font-size:28rpx;color:#896A33;}.tab-bar-text.selected{font-weight:bold;font-size:28rpx;color:#896A33;}index.jsComponent({data:{selected:0,color:#896A33,selectedColor:#896A33,list:[{pagePath:/pages/home/home,text:首页,iconPath:/assets/images/tabbar_home.png,selectedIconPath:/assets/images/tabbar_selected_home.png},{pagePath:/pages/pray/pray,text:祈愿,iconPath:/assets/images/tabbar_pray.png,selectedIconPath:/assets/images/tabbar_selected_pray.png},{pagePath:/pages/live/live,text:视频,iconPath:/assets/images/tabbar_live.png,selectedIconPath:/assets/images/tabbar_selected_live.png},{pagePath:/pages/message/message,text:留言,iconPath:/assets/images/tabbar_message.png,selectedIconPath:/assets/images/tabbar_selected_message.png},{pagePath:/pages/profile/profile,text:我的,iconPath:/assets/images/tabbar_user.png,selectedIconPath:/assets/images/tabbar_selected_user.png}]},attached(){},methods:{switchTab(e){constdatae.currentTarget.datasetconsturldata.path wx.switchTab({url})}}})index.json{component:true}home.js在每个页面中添加该段代码表示当前所选中的 tabBar 项/** * 页面显示时更新 tabBar 选中状态 */onShow(){if(typeofthis.getTabBarfunctionthis.getTabBar()){this.getTabBar().setData({selected:0});}}
