微信小程式實現聯動選單
阿新 • • 發佈:2021-09-26
最近為了實現課程設計,也做了一些前端的東西,今天想要做一個聯動選單來實現一些功能。實現了,也來做做筆記。
第1步:瞭解一下
左右側選單其實簡單來講就是把一個區域分成左右兩個部分。關於元件,我覺得可以直接去微信開發文件看。通過程式碼,我覺得應該是可以理解的。話步多講,直接上程式碼。(首先說明一點的是,我還是個剛剛接觸前端的小白,可能有些寫得不太好得,往各位博友多多指出改進得建議,相互學習)
第2步:先看一下效果啦
執行效率還是可以的很快,無卡頓現象。
第3步:實現(程式碼)
這裡我只放了其中一部分,也是可以直接實現的,沒有問題,可以根據自己的需要修改。
wxml
<!-- 左側滾動欄 --> <view www.cppcns.comclass ='total'> <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'> <view class='all clear'> <block wx:key="lists" wx:for="{{lists}}"> <view bindtap='jumpIndex' data-menuindex='{{index}}'> <view class='text-style'> <text class="{{indexId==index?'active1':''}}">{{item}}</text> <text class="{{indexId==index?'active':''}}"></text> owhtRSnzmp </view> </view> </block> </view> </scroll-view> </view> <!--右側欄--> <view class="right"> <!--判斷indexId值顯示不同頁面--> <view wx:if="{{indexId==0}}"> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'> <view class='all clear'> <block wx:key="lists_r0" wxhttp://www.cppcns.com:for="{{lists_r0}}"> <view bindtap='jumpIndexR0' data-menuindex='{{index}}'> <view class='text-style2'> <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text> <text class="{{indexIdr0==index?'active3':''}}"></text> </view> </view> </block> </view> </scroll-view> </view> <view wx:if="{{indexId==1}}"> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'> <view class='all clear'> <block wx:key="lists_r1" wx:for="{{lists_r1}}"> <view bindtap='jumpIndexR0' data-menuindex='{{index}}'> <view class='text-style2'> <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text> <text class="{{indexIdr0==index?'active3':''}}"></text> </view> </view> </block> </view> </scroll-view> </view> </view> </view>
wxss
.under_line{ width: 100%; border-top: 1rpx solid #efefef; } .left { border-top: 1rpx solid #efefef; border-right: 1rpx solid #efefef; } .text-style { width: 200rpx; height: 140rpx; line-height: 140rpx; text-align: center; font-size: 34rpx; font-family: PingFangSC-Semibold; color: rgba(51,51,1); } .active3 { display: block; width: 500rpx; height: 6rpx; background: rgb(88,123,193); position: relative; left: 0rpx; bottom: 30rpx; } .active2 { color: rgb(88,193); } .active1 { color: #96C158; } .active { display: block; width: 50rpx; height: 6rpx; background: #96C158; position: relative; left: 75rpx; bottom: 30rpx; } .scrollY { width: 210rpx; position: fixed; left: 0; top: 0; border-right: 1rpx solid #efefef; } .right{ border-top: 1rpx solid #efefef; border-left: 1rpx solid rgba(0,0.0); margin-left: 2rpx; } .scrollY2 { width: 520rpx; position: fixed; right: 0; top: 0; border-left: 1rpx solid rgba(0,0); margin-left: 2rpx; } .text-style2 { width: 520rpx; height: 140rpx; line-height: 140rpx; text-align: left; font-size: 34rpx; font-family: PingFangSC-Semibold; color: rgba(51,1); } .button_call{ height: 90rpx; width: 90rpx; position: fixed; bottom: 150rpx; right: 13rpx; opacity: 0.7; z-index: 100; }
Page({ /** * 頁面的初始資料 */ data: { lists: [ "主類1","主類2","主類3","學生工作部","黨委部門","校工與教務","離退休工作處","保衛處","財務與審計","實驗室與裝置","人事處","學院","直屬單位","其他" ],lists_r0: [ "主類1的子類1","主類1的子類2","主類1的子類3","主類1的子類4",lists_r1: [ "主類2的子類1","主類2的子類2","主類2的子類3","主類2的子類4",indexId: 0,indexIdr0: 0,indexIdr0: 1,},// 左側點選事件 jumpIndex(e) { let index = e.currentTarget.dataset.menuindex let that = this that.setData({ indexId: index }); },jumpIndexR0(e) { let index = e.currentTarget.dataset.menuindex let that = this that.setData({ indexIdr0: index }); },/** * 生命週期函式--監聽頁面載入 */ onLoad: function(options) { var that = this wx.getSystemInfo({ success: function(res) { that.setData({ winHeight: res.windowHeight }); } }); },/** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function() { },/** * 生命週期函式--監聽頁面顯示 */ onShow: function() { },/** * 生命週期函式--監聽頁面隱藏 */ onHide: function() { },/** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function() { },/** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function() { },/** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function() { },/** * 使用者點選右上角分享 */ onShareAppMessage: function() { } })
json
{ "usingComponents": { },"navigationBarBackgroundColor":"自己想要的背景色","navigationBarTitleText": "電話查詢","navigationBarTextStyle":"black","enablePullDownRefresh": true }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。