本文例項為大家分享了微信小程式實現選單左右聯動的具體程式碼，供大家參考，具體內容如下

今天記錄一個個人寫的二級聯動示例。

下面是效果圖：

功能實現關鍵是使用控制元件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>

注：純個人編寫，用於記錄

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。