前言

目前做的Taro小程序，其中需要实现内容联动的功能。该页面左侧表示商品类别，右侧表示商品。点击左侧的商品分类菜单，右侧的内容需要滑动对应的商品分类下；滑动右侧的商品列表，左侧对应的商品分类会选中高亮显示，感觉挺麻烦的就想着来记录下，因为这只是一个大概的过程，所以不会很详细，见谅

思路

1.首先利用小程序自己的# scroll-view滑块组件随便写点结构和样式

注意
两个滑块放在一个盒子里滑动会受影响

解决

先获取高度，然后再把高度赋值给 scroll-view 标签

// 获取屏幕可以使用区域的高度
async getWidth() {
    const res = await Taro.getSystemInfo();
    this.setState({
      wh: res.windowHeight,
    });
  }

2.首先左边模块点击高亮效果

  添加点击事件，把点击的下标传过去，创建一个变量存储传过来的下标，然后操作className就可以了

3.实现左边点击右边移动相对应的位置

获取右边每一个dom到顶部的距离，然后存储到一个数组里
在你的左边的点击事件里面把  '' 自己创建的数组[你传过来的下标] '' 存到state里面
把刚存的数据赋值给右边 scroll-view 标签的 scrollTop属性(可以去官方文档看属性说明)

  getRtDomsTop() {
    let forArr: {}[] = [];
    // 小程序文档有说明 搜索 createSelectorQuery
    const query = Taro.createSelectorQuery();
    query.selectAll(".rt-info（自己右边dom的class或id）").boundingClientRect();
    query.exec(function (res) {
      console.log(res[0]);
      res[0].forEach((v) => {
        forArr.push(v.top);
      });
    });
    // 赋值到自己创建的数组里
    this.setState({
      rightDomsTop: forArr,
    });
  }

4.右边滑动左边高亮

给右边 scroll-view 标签 添加滚动事件 onScroll={ ()=>this.事件名() }（官方文档有）
获取事件的 $event

 rtScroll(e) {
     // 打印 事件源就知道了
    const scrollTop = e.detail.scrollTop;
    // 我自己 右边每个dom高度的数组
    const scorllArr = this.state.rightDomsTop;
     // 判断
    if (scrollTop < scorllArr[scorllArr.length - 1] - this.state.wh(最开始获取可用屏幕的高度)) {
    // 遍历每一项
      for (let i = 0; i < scorllArr.length; i++) {
          // 判断是否在第一个距离内
        if (scrollTop >= 0 && scrollTop < scorllArr[0]) {
          this.setState({
            active: 0,
          });
          // 不在第一个距离内
        } else if (scrollTop >= scorllArr[i - 1] && scrollTop < scorllArr[i]) {
          this.setState({
            active: i,
          });
        }
      }
    }
  }

完结