uniapp的scroll-view实现左右两栏同步滚动及点击锚点跳转

这篇文章废话不多，只列出关键代码，其余布局自行实现，效果就是如下图，左侧类型列表，右侧上下滚动区域

 

关键代码：

1、scroll-view中加滚动监听和锚点属性，以及每个字item设置一个动态ID用于锚点

<scroll-view :scroll-y="true" :scroll-into-view="scrollIntoView" :scroll-with-animation="true"
             class="flex1 overflow-auto mT30" @scroll="handleRightScroll">

　　<view :id="'towerType'+index"  v-for="(item, index) in towerTypeList" :key="index">

　　　
　　</view>

</scroll-view>



2、左侧类型点击的时候，设置右侧滚动到指定锚点

const clickTowerType = (item, index) => {

　　towerIndex.value = index  

  　scrollIntoView.value = 'towerType' + index
}

3、右侧滚动的时候，监听滚动设置左侧类型的高亮状态

首先定义参数

const towerIndex = ref(0)

const contentPositions = ref([]) //存放右侧布局的滚动位置

其次，在右侧数据加载完毕后，计算每个条目的滚动距离，存放在contentPositions里边

nextTick(() => {
  calculatePositions()
})

// 计算右侧条目滚动距离
const calculatePositions = () => {
  let topPos = 0
  towerTypeList.value.forEach((_, index) => {
    const query = uni.createSelectorQuery();
    query.select(`#towerType${index}`).boundingClientRect(rect => {
      if (index === 0) {//顶部布局的距离
        topPos = rect.top
      }
      contentPositions.value[index] = {
        top: rect.top - topPos,
        bottom: rect.bottom - topPos
      }
    }).exec();
  });
}

最后，监听右侧scroll-view的滚动，设置左侧高亮

// 右侧滚动时同步左侧高亮
const handleRightScroll = (e) => {
  const scrollTop = e.detail.scrollTop;
  for (let i = 0; i < contentPositions.value.length; i++) {
    if (scrollTop >= contentPositions.value[i].top &&
        scrollTop < contentPositions.value[i].bottom) {
      towerIndex.value = i;
      break;
    }
  }
}

~到此完毕~