一. 基本思路及注意事项

• 左侧右侧独立布局,使用scroll-view标签表格,开启scroll-y属性,设置scroll-into-view="{{'a'+foodFlag}}"
• 设置kindFlag,以此判断动态类名逻辑,实现高亮
• 设置foodFlag,以此判断右侧信息模块,实现模块滑动
• 左侧通过kindFlag,定义左侧点击事件bindtap="tabKind",传递参数,修改kindFlag,实现右侧跳转指定类目
• 右侧定义bindscroll="scrollList"事件,通过wx.createSelectorQuery()获取信息盒子位置数组
• 重构数组,判定下滑上滑临界值,修改kindFlag,实现滑动控制高亮显示
• 注意 滑动事件kindFlag需要转换为数字 否则会出现滑动失效问题

二. 代码注释详解

1. onLoad获取元素位置信息

• 在onLoad中获取保存临界值
• 注意要在页面构建之后进行,否则无法获取

onLoad(options) {
    const query = wx.createSelectorQuery();
    // 获取所有.foodList元素位置信息的数组
    query = query.selectAll('.foodList').boundingClientRect();
    query.exec((res) => {
      // 重构为只包含距离顶部高度的数组并保存
      this.setData({
        tops: res[0].map(item => item.top)
      });
    })
}

2. 左侧点击事件

tabKind(e) {
    // 修改kindFlag与foodFlag
    this.setData({
      foodFlag: e.currentTarget.id,
      kindFlag: e.currentTarget.id,
    })
  },

3. 右侧滚动事件

  scrollList(e) {
    // 取出滚动高度
    let {
      scrollTop
    } = e.detail
    // 获取kindFlag  需要转换为数字 否则会出现滑动失效问题
    let kindFlag = Number(this.data.kindFlag)
    // 判断下滑临界点与滚动距离
    if (scrollTop + 200 > this.data.tops[kindFlag + 1]) {
      // 拦截最大值
      if (kindFlag < this.data.tops.length - 2) {
        // 标识自增
        kindFlag++
      } else {
        // 强制赋值
        kindFlag = this.data.tops.length - 2
      }
      // 刷新高亮
      this.setData({
        kindFlag: kindFlag
      })
    }
    // 判断上滑临界点与滚动距离
    if (scrollTop - 20 <= this.data.tops[kindFlag - 1]) {
       // 拦截最小值
      if (kindFlag > 0) {
        // 标识自减
        kindFlag--
      } else {
        // 强制赋值
        kindFlag = 0
      }
      // 刷新高亮
      this.setData({
        kindFlag: kindFlag
      })
    }
  },