微信小程序实现购物页面左右联动

<view class="pro-container"> <scroll-view class="left-menu" scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}">  <view class="menu-item {{index===currentActiveIndex?'menu-active':''}}" wx:for="{{item}}" wx:key="{{item.index}}" id="{{index}}" catchtap='changeMenu' >{{item.typename}}</view> </scroll-view> <scroll-view v-if="item!=''" class="right-pro" bindscroll = "scroll" scroll-y scroll-with-animation="true" scroll-top="{{rightProTop}}">  <view class="pro-item" wx:for="{{item}}">    <view class="item-header">{{item.typename}}</view>    <view class="pro-item-container">      <view wx:for="{{item.shop_goods}}" wx:key="{{index}}" class="pro-item-item">       <image lazy-load="true" src="{{item}}"></image>      <text>{{item.goodname}}</text>     </view>    </view>  </view> </scroll-view></view>

.left-menu{ position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  width: 180rpx;  background-color: #f8f8f8;  font-size: 32rpx;}::-webkit-scrollbar{ width: 0; height: 0; color: transparent;}.left-menu .menu-item{ width: calc(100% - 16rpx); height: 80rpx; padding:0 8rpx; line-height: 80rpx; text-align: center;}.left-menu .menu-item.menu-active{ border-left:8rpx solid red; padding-left: 0; background-color: #fff;} /* 右边商品区域 */.right-pro{ position: absolute; left: 180rpx; top:0; bottom: 0; width:calc(100% - 180rpx); background-color: #fff;  display: flex; overflow: hidden;}.right-pro .pro-item{ padding:20rpx;}.right-pro .item-header{ display: inline-block; font-size: 30rpx; line-height: 40rpx; color: #fff; background-color: red; padding:0rpx 30rpx;  margin: 10rpx auto;}.right-pro .pro-item-container{ font-size: 28rpx;}.pro-item-item{ width: calc((100% - 180rpx) / 2 ); display:inline-block; }.right-pro .pro-item-container image{ width: 100rpx; height: 100rpx; display: block; margin: 0 auto;}.right-pro .pro-item-container text{ display: block; text-align: center;}

let proListToTop = [], menuToTop = [], MENU = 0, windowHeight,timeoutId;// MENU ==> 是否为点击左侧进行滚动的，如果是，则不需要再次设置左侧的激活状态Page({ data: {  proList: [],  item: [],  item2:[   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },   {    "typename": "服饰",   },  ],  currentActiveIndex: 0 }, onLoad: function (options) {  // ---------------------------ajax----------------------  var utilMd5 = require('../../utils/md5.js');  var md5 = utilMd5.hexMD5;  var timestamp = new Date().getTime();  var that = this;  var jsonStr = JSON.stringify({ "shopid": "34" });  var token = md5(jsonStr + timestamp) + timestamp;  wx.request({   url: "https://api.jvjiewang.com/Home/Shop/goods",   data: {    jsonStr: jsonStr,    token: token   },   method: 'POST',   header: {    "Content-Type": "application/x-www-form-urlencoded"   },   success: function (res) {    console.log(res.data.respond);    var items = res.data.respond;    that.setData({     item: items    })   }  })//----------------------------ajax----------------------  // 确保页面数据已经刷新完毕~  setTimeout(() => {   this.getAllRects()  }, 200) }, changeMenu(e) {  // 改变左侧tab栏操作  if (Number(e.target.id) === this.data.currentActiveIndex) return  MENU = 1  this.setData({   currentActiveIndex: Number(e.target.id),   rightProTop: proListToTop[Number(e.target.id)]  })  this.setMenuAnimation(Number(e.target.id)) }, scroll(e) {  for (let i = 0; i < proListToTop.length; i++) {   if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {    return this.setDis(i)   }  }  // 找不到匹配项，默认显示第一个数据  if (!MENU) {   this.setData({    currentActiveIndex: 0   })  }  MENU = 0 }, setDis(i) {  // 设置左侧menu栏的选中状态  if (i !== this.data.currentActiveIndex + 1 && !MENU) {   this.setData({    currentActiveIndex: i - 1   })  }  MENU = 0  this.setMenuAnimation(i) }, setMenuAnimation(i){  // 设置动画，使menu滚动到指定位置。  let self = this    if (menuToTop[i]) {   console.log(11111)   // 节流操作   if(timeoutId){    clearTimeout(timeoutId)   }   timeoutId = setTimeout(()=>{    console.log(12138)    self.setData({     leftMenuTop: (menuToTop[i].top - windowHeight)    })   },50)  } else {   if (this.data.leftMenuTop === 0) return   this.setData({    leftMenuTop: 0   })  } }, getActiveReacts(){  wx.createSelectorQuery().selectAll('.menu-active').boundingClientRect(function (rects) {   return rects[0].top  }).exec() }, getAllRects() {   // 获取商品数组的位置信息  wx.createSelectorQuery().selectAll('.pro-item').boundingClientRect(function (rects) {   rects.forEach(function (rect) {    proListToTop.push(rect.top)   })  }).exec()   // 获取menu数组的位置信息  wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) {   wx.getSystemInfo({    success: function (res) {     windowHeight = res.windowHeight / 2     rects.forEach(function (rect) {      menuToTop.push({       top: rect.top,       // animate:rect.top > windowHeight       })     })    }   })  }).exec() }, // 获取系统的高度信息 getSystemInfo() {  let self = this  wx.getSystemInfo({   success: function (res) {    windowHeight = res.windowHeight / 2   }  }) }})