一、 在目录下创建文件如下图：
网络异常，图片无法展示
|
tabbar.js：
// pages/tabbar/tabbar.js const app = getApp(); Component({ /** * 组件的属性列表 */ properties: { tabbar: { type: Object, value: { "backgroundColor": "#ffffff", "color": "#333", "selectedColor": "#fca89d", "borderStyle": "white", "list": [{ "pagePath": "/pages/index/index", "text": "首页", "iconPath": "http://192.168.2.61/wap/rm/images/in.png", "selectedIconPath": "http://192.168.2.61/wap/rm/images/ined.png" }, { "pagePath": "/pages/mry/mry", "text": "美容院", "iconPath": "http://192.168.2.61/wap/rm/images/mei.png", "selectedIconPath": "http://192.168.2.61/wap/rm/images/meied.png" }, { "pagePath": "/pages/shop/shop", "text": "商城", "iconPath": "http://192.168.2.61/wap/rm/images/shop.png", "selectedIconPath": "http://192.168.2.61/wap/rm/images/shoped.png" }, { "pagePath": "/pages/mine/mine", "text": "我的", "iconPath": "http://192.168.2.61/wap/rm/images/min.png", "selectedIconPath": "http://192.168.2.61/wap/rm/images/mined.png" } ], } } }, /** * 组件的初始数据 */ data: { }, /** * 组件的方法列表 */ methods: { } })
tabbar.json:
{ "component": true, "usingComponents": { } }
tabbar.wxml:
<!--pages/tabbar/tabbar.wxml--> <view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}"> <block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}"> <navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{tabbar.selectedColor}}" open-type="navigate"> <view class='special-wrapper'> <image class="tabbar_icon" src="{{item.iconPath}}"></image> </view> <image class='special-text-wrapper'></image> <text class="txt">{{item.text}}</text> </navigator> <navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab"> <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image> <text class="txt">{{item.text}}</text> </navigator> </block> </view>
tabbar.wxss:
/* pages/tabbar/tabbar.wxss */ .tabbar_box { display: flex; flex-direction: row; justify-content: space-around; position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; height: 98rpx; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .tabbar_box.iphoneX-height { padding-bottom: 66rpx; } .tabbar_nav { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20rpx; height: 100%; position: relative; } .tabbar_icon { width: 40rpx; height: 40rpx; margin:7rpx 0; } .special-wrapper .tabbar_icon { width: 84rpx; height: 84rpx; } .special-text-wrapper { width: 45rpx; height: 45rpx; } .txt{font-size: 26rpx;}
二、然后需要在以下全局文件做下修改
app.js:
//app.js App({ onLaunch: function () { // 隐藏自带的tabbar wx.hideTabBar(); }, editTabbar: function () { let tabbar = this.globalData.tabBar; let currentPages = getCurrentPages(); let _this = currentPages[currentPages.length - 1]; let pagePath = _this.route; (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath); for (let i in tabbar.list) { tabbar.list[i].selected = false; (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true); } _this.setData({ tabbar: tabbar }); }, globalData: { systemInfo: null, //客户端设备信息 userInfo: null, tabBar: { "backgroundColor": "#ffffff", "color": "#333", "selectedColor": "#fca89d", "borderStyle": "white", "list": [{ "pagePath": "/pages/index/index", "text": "首页", "iconPath": "http://192.168.2.61/wap/rm/images/in.png", "selectedIconPath": "http://192.168.2.61/wap/rm/images/ined.png" }, { "pagePath": "/pages/mry/mry", "text": "美容院", "iconPath": "http://192.168.2.61/wap/rm/images/mei.png", "selectedIconPath": "http://192.168.2.61/wap/rm/images/meied.png" }, { "pagePath": "/pages/shop/shop", "text": "商城", "iconPath": "http://192.168.2.61/wap/rm/images/shop.png", "selectedIconPath": "http://192.168.2.61/wap/rm/images/shoped.png" }, { "pagePath": "/pages/mine/mine", "text": "我的", "iconPath": "http://192.168.2.61/wap/rm/images/min.png", "selectedIconPath": "http://192.168.2.61/wap/rm/images/mined.png" } ], } } })
app.json:
"tabBar": { "backgroundColor": "#ffffff", "color": "#333", "selectedColor": "#fca89d", "borderStyle": "white", "list": [ { "pagePath": "pages/index/index" }, { "pagePath": "pages/mry/mry" }, { "pagePath": "pages/shop/shop" }, { "pagePath": "pages/mine/mine" } ] }
三 、需要引入的tabbar,如index.wxml
index.wxml:
<tabbar tabbar="{{tabbar}}"></tabbar>
index.json:
{ "usingComponents": { "tabbar": "/component/tabbar/tabbar" } }
index.js：
const app = getApp()； Page({ data: { tabbar: {}, }, onLoad: function () { app.editTabbar(); } })
最后， 效果图：
网络异常，图片无法展示
|
