本文实例为大家分享了微信小程序自定义标签栏组件的具体代码，供大家参考，具体内容如下

以下代码保存在开源代码库地址

先看一看目录

模板文件夹里存放标签栏模板模板/模板。页面结构

模板名称='tabBar '视图类=' tabBar ' block wx : for=' { { tabBar } } ' wx : for-item=' item ' wx : key=' tabBar '视图类='tabBar-item '导航器open-type=' redirect ' URL=' { { item }。页面路径} } '视图图像类=' icon ' src=' { { item。图标路径} } '/图像/视图视图类='{{item.current==1？tab bartext ' : ' ' } } ' { { item。文本} }/视图/导航器/视图/块/视图/模板模板。半铸钢钢性铸铁(Cast Semi-Steel)。图标{ width :54 rpx h8 : 54 rpx }。标签栏{宽度：100%；位置：固定；底部：0;padding:10rpx左边距：-4r px；背景# f7f 7fa font-size :20 rpx；color : # 8a8a 8 abox-shadow : 6rpx 6rpx 6rpx 6rpx # AAA；} .tabBar-item { float : left；宽度：25%;文本对齐：中心；飞越：隐藏；}/*当前字体颜色*/.tabBartext { color:red }模板. js

//初始化数据function tabbarinit(){ return[{ ' current ' :0，' page path ' : '/pages/index/index '，' iconPath': '/imgs/home.png '，' selectedicinpath ' : '/imgs/home _ on。png '，' text': '主页}，{ '当前' : 0，'页面路径' : '/页面/新闻/新闻'，'图标路径' : '/imgs/message。png '，' selectedicinpath ' : '/imgs/message _ on。png '，' text': '资讯}，{ '当前' : 0，'页面路径' : '/页面/类别/类别'，'图标路径' : '/imgs/类别。png '，' selectedicinpath ' : '/imgs/category _ on。png '，' text': '分类}，{ 'current': 0，' pagePath': '/pages/buy/buy '，' iconPath': '/imgs/buy.png '，' selectedicinpath ' : '/imgs/buy _ on。png '，' text': '购物} ]}//tabbar主入口函数tabbar main(BindName=' tabb data '，id，target){ var=target；var BiNDDATa={ }；var OTA bbar=tabbarinit()；OTA bbar[id]['图标路径']=OTA bbar[id][' selectedicinpath ']//换当前的图标OTA bbar[id][' current ']=1；bindData[bind name]=OTA bbar。setdata({ BindDATa })；}模块。导出={ tabbar : tabbar main }到此改组件完成，然后讲解一下使用方法。我们先把样式载入到app.wxss

@ import '/template/template。wxss '；在指数文件夹

index.wxml

导入src='http:/./模板/模板。wxml/template为=' tabBar ' data=' { { tabBar : bind data。tabBar } } '/index。射流研究…

const app=GetApp(var)模板=require('././模板/模板。js’)；页面({ data : } }，onLoad:函数(){ template.tabbar('tabBar '，0，this)//0表示第一个tabbar }，})news.wxml与index.wxml一样新闻。射流研究…如下

const app=GetApp(var)模板=require('././模板/模板。js’)；页面({ data : } }，onLoad:函数(){ template.tabbar('tabBar '，1，this)//1表示第二个tabbar }，})效果如图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。