从零开始的小程序之购物 页左右联动

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

//wxml

.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;
}

//wxss

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

wxjs