微信小程式實現選單左右聯動
阿新 • • 發佈:2020-05-20
本文例項為大家分享了微信小程式實現選單左右聯動的具體程式碼,供大家參考,具體內容如下
今天記錄一個個人寫的二級聯動示例。
下面是效果圖:
功能實現關鍵是使用控制元件scroll-view,下面直接上示例程式碼。
頁面對應的js檔案:
Page({ data: { select_index:0,scroll_height:0,left: [{ id: 1,title: '選項一' },{ id: 2,title: '選項二' },{ id: 3,title: '選項三' },{ id: 4,title: '選項四' },{ id: 5,title: '選項五' },{ id: 6,title: '選項六' },{ id: 7,title: '選項七' } ],right:[ { id: 1,title: '選項一',content:[ { title:"產品一" },{ title: "產品二" },{ title: "產品三" },{ title: "產品四" },] },title: '選項二',content: [ { title: "產品一" },title: '選項三',title: '選項四',title: '選項五',title: '選項六',title: '選項七',] } ] },// 右邊scroll-view滑動事件 scroll:function(e){ var h = e.detail.scrollTop var scroll_height = 0; var select_index; for (var i = 0; i < this.data.right.length; i++) { if (scroll_height >= h){ select_index = i; break; } scroll_height += this.data.right[i].content.length * 64 + 48; } this.setData({ select_index: i,}); },//左邊點選事件 left_tap:function(e){ var scroll_height = 0; for (var i = 0; i < e.target.dataset.index;i++){ scroll_height += this.data.right[i].content.length * 64 + 48; } console.log(scroll_height) this.setData({ scroll_height: scroll_height,select_index: e.target.dataset.index,}); } })
頁面對應的wxml檔案:
<view class='main'> <view class='left'> <scroll-view scroll-y="true" scroll-with-animation="true"> <block wx:for="{{left}}" wx:for-index="index"> <view class='{{select_index==index?"active":""}}' data-index="{{index}}" bindtap='left_tap'>{{item.title}}</view> </block> </scroll-view> </view> <view class='right'> <scroll-view scroll-y="true" scroll-top="{{scroll_height}}" bindscroll="scroll" scroll-with-animation="true"> <block wx:for="{{right}}"> <view class='block'> <view style='background: lightgrey;'>{{item.title}}</view> <view class='list'> <block wx:for="{{item.content}}"> <view>{{item.title}}</view> </block> </view> </view> </block> </scroll-view> </view> </view>
注:純個人編寫,用於記錄
為大家推薦現在關注度比較高的微信小程式教程一篇:《微信小程式開發教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。