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

<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
   }
  })
 }
})