本文實例為大家分享了微信小程序?qū)崿F(xiàn)左右列表聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

直接上代碼：

wxml界面:

<view class='header'> <text class='headerClass'>分類</text><text class='headerPin'>/品牌</text> <view class="search"> <image src='/images/搜索.png'></image><text>搜索商品</text> </view> </view> <view class='main'> <view class='left'> <scroll-view scroll-y="true" style="height: 1100rpx" scroll-into-view="true" scroll-with-animation="true"> <block wx:for="{{leftText}}" wx:for-list="item"> <view class="{{classfiySelect == item.id?'active':''}}" data-id='{{item.id}}' bindtap='left_list'> <text>{{item.text1}}</text> </view></block></scroll-view></view><view class='right'> <scroll-view scroll-y="true" style="height: 1100rpx" bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true"><block wx:for="{{rightData}}" wx:for-list="item"><view class='itemTitle' id="{{'inToview'+item.id}}">{{item.title}}</view><view bindtap='particulars' class='listItem' data-id='{{item.id}}'> <block wx:for="{{item.frist}}"><view class='listItem2' data-text="{{}}"> <view class='img'> <image src='{{item.url}}'></image> </view> <view class='listText'> <text>{{item.text}}</text><text class='money'>¥{{item.money}}</text><view><text>已售{{item.sum}}</text><button size='mini' bindtap='particulars'>立即搶購</button></view> </view> </view> </block></view> </block> </scroll-view></view></view>

js界面：

// pages/class/class.jsPage({  /** * 頁面的初始數(shù)據(jù) */ data: { classfiySelect: "", leftText: [{ id: "01", text1: "美妝專區(qū)", }, { id: "02", text1: "面部清潔", }, { id: "03", text1: "洗護專區(qū)", }, { id: "04", text1: "面膜", }, { id: "05", text1: "口紅", }, { id: "06", text1: "美妝專區(qū)", }, { id: "07", text1: "面部清潔", }, { id: "08", text1: "洗護專區(qū)", }, { id: "09", text1: "面膜", }, { id: "010", text1: "口紅", }, { id: "011", text1: "美妝專區(qū)", }, { id: "012", text1: "面部清潔", }, { id: "013", text1: "洗護專區(qū)", }, { id: "014", text1: "面膜", }, { id: "015", text1: "口紅", }, { text1: "美妝專區(qū)", }, { text1: "面部清潔", }, { text1: "洗護專區(qū)", }, { text1: "面膜", }, { text1: "口紅", },  ], rightData: [{ id: "01", title: "美妝專區(qū)", frist: [{  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  id:1,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  id: 2,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  }, ], }, { id: "02", title: "面部清潔", frist: [{  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  }, ], }, { id: "03", title: "洗護專區(qū)", frist: [{  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  }, ], }, { id: "04", title: "面膜", frist: [{  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  }, ], }, { id: "05", title: "口紅", frist: [{  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  }, ], }, { id: "06", title: "美妝專區(qū)", frist: [{  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  },  {  url: "/images/85309.jpg",  text: "卡姿蘭補水套裝",  money: 200,  sum: 20,  }, ], }, ], },  /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function(options) { this.setData({ classfiySelect: this.data.leftText[0].id }) },  /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function() {  },  /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function() {  },  /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function() {  },  /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function() {  },  /** * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function() {  },  /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function() {  },  /** * 用戶點擊右上角分享 */ onShareAppMessage: function() {  }, //滾動觸發(fā) scroll: function(e) { var scrollTop = e.detail.scrollTop, h = 0, classfiySelect; var that = this; that.data.leftText.forEach(function(clssfiy, i) { var _h =26 + that.length(clssfiy['id'])*102; if (scrollTop >= h){ classfiySelect = clssfiy['id']; } h +=_h; console.log(h); }) that.setData({ classfiySelect: classfiySelect, }) }, //求每一欄高度 length: function(e) { var that = this; var rightData = that.data.rightData; for (var i = 0; i < rightData.length; i++) { if(rightData[i]['id']==e){ return rightData[i]['frist'].length;  } } }, //點擊左邊事件 left_list: function(e) { var that = this; var l_id = e.currentTarget.dataset.id; that.setData({ rigId: l_id, }) }, //跳轉(zhuǎn)詳情界面 particulars:function(e){  }})