1、准备
tabbar按钮的设计详情可查看上一篇博客：
https://blog.csdn.net/Twinkle_sone/article/details/113981042?spm=1001.2014.3001.5501
2、组件封装
（1）tabbartbn.wxml
这里只是将原本的页面代码抽取过来：
<!-- --------------------------底部按钮--------------------------- --> <view class="tabBar"> <block wx:for="{{tabinf}}" wx:key="index" > <view class="tabBar-item" bindtap="changeTab" data-id="{{item.id}}"> <view> <image wx:if="{{tabind != item.id}}" class="tabBar-icon" src='{{item.img}}'> </image> <image wx:if="{{tabind == item.id}}" class="tabBar-icon" src='{{item.img1}}'> </image> </view> <view class="" bindtap="changeTab" data-id="{{item.id}}" style="color:{{tabind == item.id ? 'blue' : 'grey'}};">{{item.title}}</view> </view> </block> </view> <!-- --------------------------底部按钮--------------------------- -->
（2）tabbartbn.wxss
还是将原来的css代码拿过来。
.tabBar-icon{ width:54rpx; height: 54rpx; } .tabBar{ width:100%; position: fixed; bottom:0; padding:10rpx; margin-left:-4rpx; background:pink; font-size:24rpx; color:#8A8A8A; box-shadow: 3rpx 3rpx 3rpx 3rpx #aaa; z-index: 9999; display: flex; } .tabBar-item{ float:left; width: 100%; text-align: center; overflow: hidden; }
（3）tabbartbn.js
重点是在js代码的修改上
// components/tabbarbtn/tabbarbtn.js Component({ /** * 组件的属性列表 */ properties: { //接收父组件传来的值 tabinf:{ type:Array, value:[] } }, /** * 组件的初始数据 */ data: { tabind:0, }, /** * 组件的方法列表 */ methods: { //切换tab页 changeTab(e){ let ind = e.currentTarget.dataset.id; this.setData({ tabind:ind, }) //发送事件监听,父组件触发事件时，子组件传递参数ind给父组件 this.triggerEvent('changeTabs',{ind}) }, } })
3、组件调用
1、test.wxml
<!-- 调用tabbarbtn组件，需要先在json文件中引用 tabinf = "{{tabinf}}" 将tabinf值传递给子组件 bind:changeTabs="changeTabs" 绑定子组件的changeTabs方法 --> <tabbarbtn id = "tabbarbtn" tabinf = "{{tabinf}}" bind:changeTabs="changeTabs"></tabbarbtn> <view wx:if="{{tabind == 0}}"> page0 </view> <view wx:if="{{tabind == 1}}"> page1 </view> <view wx:if="{{tabind == 2}}"> page2 </view> <view wx:if="{{tabind == 3}}"> page3 </view>
2、test.json
{ "usingComponents": { "tabbarbtn":"../../../components/tabbarbtn/tabbarbtn" } }
3、test.js
Page({ /** * 页面的初始数据 */ data: { tabind:0, tabinf:[ { //原始图标图片 img:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png', //点击激活状态时的图标图片 img1:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png', //按钮id id:0, //按钮图标下方显示文字 title:'页面0' }, { img:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png', img1:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png', id:1, title:'页面1' }, { img:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png', img1:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png', id:2, title:'页面2' }, { img:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png', img1:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png', id:3, title:'页面3' } ] }, //接收子组件传来的参数 changeTabs(e){ this.setData({ tabind:e.detail.ind }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
4、效果
