uni-app scroll-view 仿饿了么菜单关联滚动

效果如下：

视频

如果是视频列表可以参考
http://t.csdn.cn/pawUt

scroll.vue页面

<template>
  <view class="scroll-box">
    <scroll-view scroll-y="true" @touchmove.native.stop scroll-with-animation class="scroll-left"
      :scroll-top="scrollTop" :scroll-into-view="itemId">
      <view class="scroll-left-item" v-for="(item, i) in allData" @tap.stop="swichMenu(i)"
        :class="{ 'scroll-left-item-active': current == i }" :key="i">
        <view class="name">{{ item.name }}</view>
        根据自己的逻辑来写
      </view>
    </scroll-view>
    <scroll-view scroll-y="true" class="scroll-right" :scroll-top="scrollRightTop" scroll-with-animation
      @scroll="rightScroll">
      <view class="scroll-right-item" v-for="(item, i) in allData" :class="'class' + item.id" :id="'item' + i" :key="i">
        <view class="scroll-right-item-header">
          {{ item.name }}
        </view>
        <view class="right-li" v-for="(child, index) in item.chidren" :key="index">
          {{child.name}}
          根据自己的逻辑来写
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import scrollList from "./scrollMixin.js";
export default {
  mixins: [scrollList],
  name:'',
  components: {

  },
  props: {

  },
  data() {
    return {
        allData: [{
            name: '分类名称1',
            id: 1,
            chidren: [{
                name: '子项123',
                id: 11
              },
              {
                name: '子项123',
                id: 12
              },
              {
                name: '子项123',
                id: 13
              },
              {
                name: '子项123',
                id: 14
              }
            ]
          },
          {
            name: '分类名称1',
            id: 2,
            chidren: [{
                name: '子项123',
                id: 21
              },
              {
                name: '子项123',
                id: 22
              },
              {
                name: '子项123',
                id: 23
              },
              {
                name: '子项123',
                id: 24
              }
            ]
          },
          {
            name: '分类名称1',
            id: 3,
            chidren: [{
                name: '子项123',
                id: 31
              },
              {
                name: '子项123',
                id: 32
              },
              {
                name: '子项123',
                id: 33
              },          
              {
                name: '子项123',
                id: 34
              }
            ]
          },
          {
            name: '分类名称1',
            id: 4,
            chidren: [{
                name: '子项123',
                id: 31
              },
              {
                name: '子项123',
                id: 32
              },
              {
                name: '子项123',
                id: 33
              },          
              {
                name: '子项123',
                id: 34
              }
            ]
          }
        ]
    };
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  onLoad(options) {

  },
  onShow() {

  },
  methods: {

  },
};
</script>

<style scoped lang="less">
@leftWidth: 162px;
.scroll-box{
  background: #e3f5f5;
  height: calc(100vh - 86rpx - var(--status-bar-height));
  overflow: hidden;
  padding-left: @leftWidth;
  box-sizing: border-box;
  .scroll-left{
    width: @leftWidth;
    height: 100%;
    overflow: hidden;
    background: #cef7f7;
    position: fixed;
    top: calc(86rpx + var(--status-bar-height));
    left: 0rpx;

    font-size: 30rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    .scroll-left-item{
      height: 200rpx;
      line-height: 200rpx;
      text-align: center;
      &-active {
        background: rgb(166, 255, 236);
      }
    }
  }
  .scroll-right {
    width: calc(100vw - @leftWidth);
    height: calc(100vh - 86rpx - var(--status-bar-height));
    .right-li{
      height: 200rpx;
      padding: 20rpx;
      // box-shadow: 0rpx 0rpx 10rpx #74fafa;
    }
    .scroll-right-item-header{
      font-size: 40rpx;
    }
  }
}    
</style>

scrollMixin.js

export default {
  data () {
    return {
      scrollTop: 0, // 左侧的滚动位置
      current: 0, // 左侧当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      arr: [],
      oldScrollTop: 0, // 右侧上次的滚动位置
      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
      itemId: '', // 栏目右边scroll-view用于滚动的id
      timer: null, // 定时器
    }
  },
  methods: {
    // 点击左边的栏目切换
    async swichMenu(index) {
      if(this.arr.length == 0) {
        await this.getMenuItemTop();
      }
      if (index == this.current) return;
      this.scrollRightTop = this.oldScrollTop;
      this.$nextTick(function(){
        this.scrollRightTop = this.arr[index];
        this.current = index;
        this.leftMenuStatus(index);
      })
    },
    // 设置左边菜单的滚动状态
    async leftMenuStatus(index) {
      this.current = index;
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('scroll-left', 'menuHeight');
        await this.getElRect('scroll-left-item', 'menuItemHeight');
      }
      // 将菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
    },
    // 右边菜单滚动
    async rightScroll(e) {
      this.oldScrollTop = e.detail.scrollTop;
      if(this.arr.length == 0) {
        await this.getMenuItemTop();
      }
      if(this.timer) return ;
      if(!this.menuHeight) {
        await this.getElRect('scroll-left', 'menuHeight');
      }
      setTimeout(() => { // 节流
        this.timer = null;
        // scrollHeight为右边菜单垂直中点位置
        let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
        for (let i = 0; i < this.arr.length; i++) {
          let height1 = this.arr[i];
          let height2 = this.arr[i + 1];
          // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
          if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
            this.leftMenuStatus(i);
            return ;
          }
        }
      }, 10)
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.' + elClass).fields({
          size: true
        }, res => {
          // 如果节点尚未生成，res值为null，循环调用执行
          if (!res) {
            setTimeout(() => {
              this.getElRect(elClass);
            }, 10);
            return;
          }
          this[dataVal] = res.height;
          resolve();
        }).exec();
      })
    },
    // 观测元素相交状态
    async observer() {
      this.allData.map((val, index) => {
        let observer = uni.createIntersectionObserver(this);
        // 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
        // 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
        observer.relativeTo('.scroll-right', {
          top: 0
        }).observe('#item' + index, res => {
          if (res.intersectionRatio > 0) {
            let id = res.id.substring(4);
            this.leftMenuStatus(id);
          }
        })
      })
    },
    // 获取右边菜单每个item到顶部的距离
    getMenuItemTop() {
      new Promise(resolve => {
        let selectorQuery = uni.createSelectorQuery();
        selectorQuery.selectAll('.scroll-right-item').boundingClientRect((rects) => {
          // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
          if(!rects.length) {
            setTimeout(() => {
              this.getMenuItemTop();
            }, 10);
            return ;
          }
          rects.forEach((rect) => {
            // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
            this.arr.push(rect.top - rects[0].top);
            resolve();
          })
        }).exec()
      })
    },
  }
}