小程序自定义导航栏 Myth丶恋晨 2021-09-19 04:20 450阅读 0赞 ![20190430101936723.png][] <view class='dia-non' style="{ {tabid=='0'?'display:block':''}}">首页</view> <view class='dia-non' style="{ {tabid=='1'?'display:block':''}}">发现页</view> <view class='dia-non' style="{ {tabid=='2'?'display:block':''}}">我的页</view> <view class='tab-bt_bo' wx:for='{ {tab_list}}' wx:key=""> <block wx:for='{ {item.list}}'> <view class='tab-nr_bo' data-tabid='{ {index}}' bindtap='tabon_top'> <image class='tab-img' wx:if="{ {tabid==index}}" src="{ {item.img1}}"></image> <image class='tab-img' wx:else src="{ {item.img}}"></image> <view class='tab-text' style="{ {tabid==index?'color:#f4643a':'color:#b8b8b8'}};">{ {item.text}}</view> </view> </block> </view> /* 自定义导航栏 */ .tab-bt_bo{ width: 100%; background: #fff; /* height: 100rpx; */ display: flex; flex-direction: row; position: fixed; bottom: 0rpx; /* padding-top:1rpx ; */ font-size: 24rpx } .tab-img{ width:40rpx; height: 40rpx; /* background: #ccc */ position: relative; bottom: -10rpx } .tab-nr_bo{ position: relative; flex: 1; width: 100%; text-align: center } .tab-swiper{ width: 100%; height: 100vh; } .dia-non{ display: none; padding-bottom: 60rpx } data:{ tabid:0; // 自定义导航栏 tab_list: [{ bg_color: '#ccc', list: [{ text: '首页', img: '/img/home1.png', img1: '/img/home2.png', }, { text: '发现', img: '/img/find1.png', img1: '/img/find2.png', }, { text: '我的', img: '/img/my1.png', img1: '/img/my2.png', }, ] } tabon_top: function(e) { this.setData({ tabid: e.currentTarget.dataset.tabid }) }, [20190430101936723.png]: /images/20210724/7df443b2443e45aab05e02c40bb2d941.png
还没有评论,来说两句吧...