小程序怎么自定义tabBar组件封装

这篇文章主要介绍“小程序怎么自定义tabBar组件封装”，在日常操作中，相信很多人在小程序怎么自定义tabBar组件封装问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”小程序怎么自定义tabBar组件封装”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

具体内容如下

新建组件：在component下新建一个tabBar

组件的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="tabChange">  <cover-image class="lazy" data-src="{{tabbarIndex === index ? item.selectedIconPath : item.iconPath}}"></cover-image>  <cover-view >{{item.text}}</cover-view> </cover-view></cover-view>

组件的index.wxss结构如下：

.tab-bar {  position: fixed;  bottom: 0;  left: 0;  right: 0;  height: 60px;  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: 28px;  height: 28px;  margin-bottom: 2px;}.tab-bar-item cover-view {  font-size: 10px;}

组件的index.js结构如下：

// pages/components/tabBar/index.jsComponent({    options: {    multipleSlots: true //在组件定义时的选项中启用多slot支持  },  properties: {    list: {      type: Array,      value: []    },    selectedColor:{      type: String,      value:''    },    color:{      type: String,      value:''    },  },    data: {    tabbarIndex: 0//默认显示第一个tab元素  },  lifetimes: {    attached() {}  },    methods: {    //组件的点击事件    tabChange(e) {      //获取到底部栏元素的下标      let index = e.currentTarget.dataset.index;      this.setData({        tabbarIndex:index,      })      //triggerEvent获取组件的事件      //onMyEvent 页面传过来的点击事件名称      this.triggerEvent('onMyEvent',{        tabbarIndex:index,      })    },  }})

组件的index.json结构如下：

{  "component": true,  "usingComponents": {}}

组件在页面中的使用
7、页面的json代码如下：

{  "navigationBarTitleText": "测试",  "usingComponents": {    "mp-tabbar": "../components/tabBar/index"  }}

页面的wxml代码如下：

//当选中tab1时页面显示的内容<view wx:if="{{tabbarIndex == 0}}">111111</view>//当选中tab2时页面显示的内容<view wx:if="{{tabbarIndex == 1}}">222222</view>//当选中tab3时页面显示的内容<view wx:if="{{tabbarIndex == 2}}">333333</view><mp-tabbar list="{{list}}" id='tabComponent' bind:onMyEvent="tabChange"></mp-tabbar>

页面的js代码如下：

Page({  data: {    tabbarIndex:0,//默认第一个tab元素    color: "#555555",    selectedColor: "#2ea7e0",    //底部栏    list: [{        "text": "市场",        "iconPath": "/images/bazaar.png",        "selectedIconPath": "/images/bazaar_selected.png",      },      {        "text": "充值",        "iconPath": "/images/recharge.png",        "selectedIconPath": "/images/recharge_selected.png",      }, {        "text": "车队",        "iconPath": "/images/market.png",        "selectedIconPath": "/images/market_selected.png",      }    ]  },    onShow: function () {    this.tabComponent = this.selectComponent('#tabComponent');    let selectedColor = this.data.selectedColor;    let color = this.data.color;    this.tabComponent.setData({      selectedColor: selectedColor,      color:color   })   console.log(this.tabComponent.data.tabbarIndex)  },  //获取组件传递出来的数据  tabChange:function(e){    let index = e.detail.tabbarIndex;    this.setData({      tabbarIndex:index    })    console.log(e.detail.tabbarIndex)  }})

到此，关于“小程序怎么自定义tabBar组件封装”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！