微信小程序实现侧边导航栏
本文实例为大家分享了微信小程序实现侧边导航栏的具体代码,供大家参考,具体内容如下
效果图
wxml
<view class='productNav'> <!-- 左侧 --> <view class='left'> <view class="{{active==0?'selected':'normal'}}" id="0" bindtap='switchNav'>为您推荐</view> <view class="{{active==1?'selected':'normal'}}" id="1" bindtap='switchNav'>电脑</view> <view class="{{active==2?'selected':'normal'}}" id="2" bindtap='switchNav'>手机</view> </view> <!-- 右侧 --> <view class='right'> <view class='type'> <!-- current:当前所在滑块的 index --> <!-- vertical:滑动方向是否为纵向 --> <swiper current='{{currentTab}}' vertical='{{true}}'> <!-- catchtouchmove 阻止弹窗后滚动穿透 --> <swiper-item id="0" catchtouchmove="false"> 为您推荐 </swiper-item> <swiper-item id="1" catchtouchmove="false"> 手机 </swiper-item> <swiper-item id="2" catchtouchmove="false"> 电脑 </swiper-item> </swiper> </view> </view> </view>
js
Page({ data: { active:0, currentTab:0 }, switchNav: function (e) { var page = this; var id = e.target.id; if (this.data.currentTab == id) { return false; } else { page.setData({ currentTab: id }); } page.setData({ active: id }); } })
wxss
.productNav{ display: flex; flex-direction: row; font-family: "Microsoft YaHei" } .left{ width: 25%; font-size: 30rpx; background-color: #f4f4f4; } .left view{ text-align: center; height: 90rpx; line-height: 90rpx; } .selected{ background-color: #fff; border-left: 2px solid #E54847; font-weight: bold; color: #E54847; } .normal{ background-color: #f4f4f4; border-bottom: 1px solid #f2f2f2; } .right{ width:75%; margin: 0; } swiper{ height: 500px; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)