您好,登錄后才能下訂單哦!
今天小編給大家分享一下微信小程序如何實現(xiàn)側(cè)邊導航欄的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
效果圖
wxml
<view class='productNav'> <!-- 左側(cè) --> <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> <!-- 右側(cè) --> <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; }
以上就是“微信小程序如何實現(xiàn)側(cè)邊導航欄”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。