小程序自定义底部导航栏样式
1.微信app.json文件中全局配置小程序API"tabBar": {"color": "#fff","selectedColor": "red","backgroundColor": "skyblue","list": [{"
·
1.微信app.json文件中全局配置小程序API
"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
})
},
更多推荐
所有评论(0)