小程序自定义底部导航栏样式 - 好文

1.微信app.json文件中全局配置小程序API
<https://developers.weixin.qq.com/miniprogram/dev/framework/config.html>
"tabBar": { "color": "#fff", "selectedColor": "red", "backgroundColor":
"skyblue", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, {
"pagePath": "pages/logs/logs", "text": "分类" } ] }
2.自定义底部导航栏
<view class='tabitem'> <view style='height:1px;margin-bottom:
5px;background: #ccc;'></view> <view style="font-size:0px;width: {{ itemWidth
}}px" wx:for="{{tabarr}}" class="view-flex-column
{{tab==index?'tabbarActive':''}}" wx:key="unique" data-idx='{{index}}'
bindtap='tabbartap'>  <image wx:if="{{ index!=2 && index
!= tab }}" style="border-bottom:2px solid #000;" class="tabimg" src="{{
item.img }}" style="width:44rpx;height:44rpx;"></image> 
<image class="activeimg" wx:if="{{ tab==index && index !=2 }}" src="{{
item.activeimg }}" style="width:44rpx;height:44rpx;"></image>  <image bindtap="click" class="activeimg" wx:if="{{ index==2 }}" src="{{
item.img }}" style="width:80rpx;height:80rpx; position: relative;"></image>
<text style="font-size:28rpx; margin: 0; padding: 8rpx 0 0 0;">{{ item.text
}}</text> </view> </view> <view wx:if="{{ tab == 0 }}" style="height:{{
contentHeight }}px;overflow-y: scroll"> <wardrobe address="{{ addr }}"
longitudeAndlat="{{ latAndlng }}"></wardrobe> </view> <view wx:if="{{ tab == 1
}}" style="height:{{ contentHeight }}px;"> <brand address="{{ addr }}"
longitudeAndlat="{{ latAndlng }}"></brand> </view> <view wx:if="{{ tab == 3 }}"
style="height:{{ contentHeight }}px;overflow-y: scroll"> <car></car> </view>
<view wx:if="{{ tab == 4 }}" style="height:{{ contentHeight }}px;overflow-y:
scroll"> <me></me> </view> data: { tabarr: [ { img:
'../images/bottom/icon-1.png', activeimg:
'../images/bottom/icon-1-clicked.png', text: '首页' }, { img:
'../images/bottom/icon-2.png', activeimg:
'../images/bottom/icon-2-clicked.png', text: '分类' }, { img:
'../images/bottom/icon-3.png', text: '' }, { img:
'../images/bottom/icon-4.png', activeimg:
'../images/bottom/icon-4-clicked.png', text: '购物车' }, { img:
'../images/bottom/icon-5.png', activeimg:
'../images/bottom/icon-5-clicked.png', text: '我的' } ], tab: 0, //
设置 title: ['首页', '分类', '', '购物车', '我的'], }, //点击切换事件 tabbartap(e) {
var that = this; if (e.currentTarget.dataset.idx != 2){
that.setData({ tab: e.currentTarget.dataset.idx }); //
为组件添加顶部标题 wx.setNavigationBarTitle({ title:
this.data.title[e.currentTarget.dataset.idx], }) } }, //动态计算
onLoad: function (options) { console.log(wx.getSystemInfoSync().windowWidth
/ this.data.tabarr.length) this.setData({ itemWidth:
wx.getSystemInfoSync().windowWidth / this.data.tabarr.length,
contentHeight: wx.getSystemInfoSync().windowHeight -54 }) },

热门工具换一换