解决微信小程序左右侧菜单联动问题

微信小程序左右侧菜单联动左侧点击切换出现问题

问题：比如下图我点击左侧的切换菜单当中的奶茶系列，但是它样式选中的是咖啡系列。但是我只写左侧菜单栏的切换事件时它切换是没有问题，加入滚动事件就出现了问题，但是滚动事件滚动时左边的事件切换也是对应的，所以我不知道为什么样式不是选中对应的标题，请帮我找出问题并改正，谢谢。

img

问题代码
<!-- 左侧菜单 -->
  <scroll-view scroll-y class="left_menu" scroll-into-view="{{leftId}}"
  >
    <view 
    class="menu_item {{currentIndex==productType.id? 'active':''}}"
    wx:for="{{catesList}}"
    wx:key="*this"
    wx:for-item="productType"
    data-index="{{productType.id}}"
    bindtap="lefyClickFn"
    id="left{{productType.id}}"
    >{{productType.name}}</view>
  </scroll-view>
<!-- 右侧商品数据 -->
  <scroll-view scroll-y class="right_content"
  scroll-into-view="{{rightId}}" bindscroll="rightScroll" scroll-with-animation="true">
    <view class="productType rightblockscroll"
    wx:for="{{catesList}}"
    wx:for-item="productType"
    wx:key="*this"
    id="right{{productType.id}}"
    >
    <view class="product_title">
     {{productType.name}}
    </view>
    <view class="product_list"
    wx:for="{{productType.productList}}"
    wx:for-item="product"
    wx:key="id"
    >
      <navigator url="/pages/product_detail/product_detail?id={{product.id}}">
       <image mode="widthFix" src="{{baseUrl+'/image/product/'+product.proPic}}" ></image>
       <view class="right">
       <view class="product_name">{{product.name}}</view>
       <!-- <view class="product_stock">库存：{{product.stock}}</view> -->
       <view class="product_price">¥{{product.price}}</view>
      </view>
      </navigator>
      <view class="buyMore" bindtap="handleCartAdd" data-id="{{productType.id}}" data-pid="{{product.id}}">
       <view class="shopAdd iconfont icon-shiwu-gouwuche" >
       </view>
      </view>
      </view>
    </view>
  </scroll-view>



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  data: {
    baseUrl: '',
    currentIndex:1,//当前选中菜单的索引
    rightId:'right1',//左侧菜单id
    leftId:'left1',//右侧商品id
    catesList:[],
    heightArr:[],//右侧高度数组
    productNum:0,//单个商品数量
    totalNum:0,//商品总数量
    index:0,
    pindex:0,
    cart:[],
  },
//左侧菜单点击切换事件
  lefyClickFn(e){
    // console.log(e)
    const {index}=e.currentTarget.dataset;
    console.log("currentIndex:"+index)
    this.setData({
      currentIndex:index,
      leftId:'left'+index,
      rightId:'right'+index
    })
  },
  //右侧滚动事件
  rightScroll(e){
    // console.log(e)
    let st=e.detail.scrollTop;
    // console.log("st:"+st)
    let myArr=this.data.heightArr;
    console.log("myArr:"+myArr)
    for(let i=0;i<myArr.length;i++){
      if(st>=myArr[i] && st<myArr[i+1]){
        // console.log("myArr"+"i"+":"+myArr[i])
        // console.log("myArr"+"i+1"+":"+myArr[i+1])
        let j=i+1
        // console.log("currentIndex:"+j)
          this.setData({
            currentIndex:j,
            leftId:'left'+j,
          })
        return;
      }
    }
  },
    //获取右侧区块的高度(操作dom)
  onReady: function () {
    let _this=this;
    let initArr=[0];//初始数组
    let initNum=0;//初始数值
    //  image的mode属性会二次渲染 导致获取的高度和实际高度不一致 至于setTimeout的延迟是多少这个你要测试了 100毫秒 或者 setTimeout函数不设置时间或者时间为0的话 都可以试试 具体要看是否能达到想要的效果
    setTimeout(()=>{//设置定时器以免取不到数据
      const query = wx.createSelectorQuery().in(this);//创建节点选择器
      // query.select('#rightScrollView').scrollOffset();
      query.selectAll('.rightblockscroll').boundingClientRect();//选中样式为rightblock
      query.selectViewport().scrollOffset();
      query.exec(function(res){
        // console.log(res[0]);
        //拿到每一个区块高度，并存起来
        res[0].map(val=>{
          console.log(val.height)
          initNum+=val.height;//实现高度累加
          // console.log("heightArr:"+initNum)
          initArr.push(initNum);//将累加出来的高度放入数组
        })
        console.log(initArr);
        _this.setData({
          heightArr:initArr,
        })
      })
    },1000)
  },

引用 皆我百晓生 小程序回复内容作答：

根据你提供的代码，我发现问题可能出在以下几个地方：

  1. 在左侧菜单点击切换事件lefyClickFn中，index应该是productType.id而不是e.currentTarget.dataset.index。所以你可以尝试修改为如下代码：
lefyClickFn(e){
  const {index}=e.currentTarget.dataset;
  console.log("currentIndex:"+index)
  this.setData({
    currentIndex:index,
    leftId:'left'+index,
    rightId:'right'+index
  })
},
  1. 在右侧滚动事件rightScroll中，你在设置currentIndex时使用的是j，但是实际应该是i+1，因为数组的索引从0开始，所以右侧的索引应该从1开始。所以你可以尝试修改为如下代码：
rightScroll(e){
  let st=e.detail.scrollTop;
  let myArr=this.data.heightArr;
  for(let i=0;i<myArr.length-1;i++){
    if(st>=myArr[i] && st<myArr[i+1]){
      let j=i+1
      this.setData({
        currentIndex:j,
        leftId:'left'+j,
      })
      return;
    }
  }
},
  1. 最后，在onReady生命周期函数中，你可以将setTimeout的时间延迟调整为0，以免出现取不到数据的情况。代码如下：
onReady: function () {
  let _this=this;
  let initArr=[0];
  let initNum=0;
  setTimeout(()=>{
    const query = wx.createSelectorQuery().in(this);
    query.selectAll('.rightblockscroll').boundingClientRect();
    query.selectViewport().scrollOffset();
    query.exec(function(res){
      res[0].map(val=>{
        console.log(val.height)
        initNum+=val.height;
        initArr.push(initNum);
      })
      console.log(initArr);
      _this.setData({
        heightArr:initArr,
      })
    })
  }, 0)
},

通过以上修改，应该能够解决你遇到的问题。希望能对你有所帮助！

我找到问题了我把滑动模块拿到的高度减去标题就可以了，initNum+=val.height-19.2

img