微信小程序常用纵向滑动菜单（点击侧边菜单定位）

js代码

Page({
  data  : {
      // 左侧的id
    leftId: 'left0',
    // 左侧当前项
    leftActiveNum: 0,
    // 右侧id
    rightId: 'right0',
    // 每块商品区块高度
    heaghtArr : [],
},
// 左侧点击事件
  leftClickFn(e) {
    this.setData({
      leftActiveNum: e.target.dataset.myid,
      leftId: 'left' + e.target.dataset.myid,
      rightId: 'right' + e.target.dataset.myid,
    })
  },
  // 右侧滚动事件
  rightScrollFn( e ){
    let st = e.detail.scrollTop; // 获取当前滚动到的位置
    let myArr = this.data.heightArr;// 获取所有商品区块高度
    
    for( var i = 0; i < myArr.length; i++){
      // 判断当前滚动位置是否超出区块累加高度并且小于下一区块高度来修改scroll-into-view的Id
      if( st >= myArr[i] && st < myArr[i+1] ){
        this.setData ({
          leftId : 'left'+i,
          leftActiveNum : i,
        })
        return ;
      }
    }
  },
  // 生命周期
  onReady() {
    let _this = this;
    setTimeout( function () {
      let initArr = [0]; // 初始的数组
      let initNum = 0; // 初始的数值
      const query = wx.createSelectorQuery()
      query.selectAll('.rightblock').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function (res) {
        res[0].map( val => {
          initNum += val.height; // 每一块高度累加
          initArr.push(initNum - 15); // 将累加出来的高度push到数组中
        })
      })
      _this.setData({
        heightArr : initArr,
      })
      
    } , 300 )
  }
})

wxml代码

<!-- 轮播图 -->
<Banner backgroundArr="{{swiperArr}}"></Banner>

<view class="main">
  <!-- 左侧 -->
  <scroll-view scroll-y="true" class="left" scroll-into-view="{{leftId}}">
    <view bindtap="leftClickFn" data-myid="{{item.id}}"  wx:for="{{menuArr}}" wx:key="*this" id="left{{item.id}}" class="scroll-view-item {{leftActiveNum == item.id ? 'active' : ''}}">{{item.title}}</view>
  </scroll-view>
  <!-- 右侧 -->
  <scroll-view scroll-with-animation="true" scroll-y="true" class="right" bindscroll="rightScrollFn" scroll-into-view="{{rightId}}">
    <view wx:for="{{menuArr}}" wx:key="*this" id="right{{item.id}}" class="scroll-view-item rightblock">
      <view class="title">{{item.title}}</view>
      <view class="content">
        <view class="box" wx:for="{{item.subArr}}" wx:key="*this" wx:for-item="items">
          <image src="{{items.imgSrc}}" mode="widthFix"></image>
          <text>{{items.imgDesc}}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

wxss代码

.left{
  border-right: 1rpx solid #000;
  width: 25%;
  float: left;
  height: calc(100vh - calc(100vw/1080*520));
  box-sizing: border-box;
}

.left view{
  border-bottom: 1rpx solid #000;
  height: 80rpx;
  line-height: 80rpx;
  background: #fff;
  text-align: center;
  position: relative;
}

.left view::before{
  content: "";
  background: #fff;
  width: 8rpx;
  height: 80rpx;
  position: absolute;
  left: 0;
  top: 0;
}

.left view.active::before{
  background: #333999;
}

.right{
  height: calc(100vh - calc(100vw/1080*520));
  float: right;
  width: 75%;
  padding:0 2%;
  box-sizing: border-box;
}

.right .title{
  height: 60rpx;
  line-height: 60rpx;
}

.right .content{
  background: #fff;
  padding: 1%;
  padding-right: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.box{
  width: 32%;
  margin-right: 1%;
  text-align: center;
  margin-bottom: 10rpx;
}

.box image{
  width: 90%;
}

.box text{
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 28rpx;
  display: block;
  white-space: nowrap;
}

效果图