uniapp 实现tab栏切换时内容自动滚动到相对应的位置，页面滚动时tab栏自动变化_使用u-tabs实现滚动

业务需求如下

代码如下

<template>
  <div class="slidertab">
    <!-- 滑动的tab -->
    <div class="u_tabs">
      <!--  -->
      <div
        class="tab_item"
        v-for="(item, index) in list1"
        :key="index"
        @click="changeScrollTop(item, index)"
        :class="{ active: currentActive === index }"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- 内容滑动的时候动态更改 -->
    <div class="u_contetns">
      <div class="items" v-for="(item, index) in list1" :key="index">
        <div :class="'item' + index" style="height:200px">
          <h2>{{ item.val }}</h2>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      list1: [
        {
          name: '关注',
          val: '关注'
        },
        {
          name: '推荐',
          val: '推荐'
        },
        {
          name: '电影',
          val: '电影'
        },
        {
          name: '科技',
          val: '科技'
        },
        {
          name: '音乐',
          val: '音乐'
        },
        {
          name: '美食',
          val: '美食'
        },
        {
          name: '文化',
          val: '文化'
        },
        {
          name: '财经',
          val: '财经'
        },
        {
          name: '手工',
          val: '手工'
        }
      ],
      preActive: 0,
      currentActive: 0,
      //   为了解决点击滑动的bug，点击的时候，滑动里面不处理任何逻辑
      isClick: false
    }
  },
  onPageScroll (obj) {
    const { scrollTop } = obj
    this.scrollTochang(scrollTop)
  },
  mounted () {
    this.$nextTick(() => {
      //   此时把每个dom的距离拿出来
      this.list1.forEach((item, index) => {
        uni
          .createSelectorQuery()
          .select('.u_contetns')
          .boundingClientRect(data => {
            //目标节点、也可以是最外层的父级节点
            uni
              .createSelectorQuery()
              .select(`.item${index}`)
              .boundingClientRect(res => {
                //最外层盒子节点
                item.scrollTop = res.top - data.top
              })
              .exec()
          })
          .exec()
      })
    })
  },
  methods: {
    changeScrollTop (item, index) {
      this.isClick = true
      const that = this
      const { scrollTop } = item
      this.currentActive = index
      uni.pageScrollTo({
        duration: 80 * Math.abs(this.currentActive - this.preActive),
        scrollTop,
        complete () {
          that.isClick = false
        }
      })
      this.preActive = this.currentActive
    },
    scrollTochang (scrollTop) {
      if (this.isClick) return
      const idx = this.list1.findIndex(item => scrollTop <= item.scrollTop)
      if (this.currentActive === idx) return
      this.currentActive = idx
      this.preActive = this.currentActive
    }
  },
  options: { styleIsolation: 'shared' }
}
</script>
 
<style lang="scss" scoped>
.slidertab {
  background: #f5f9fd;
  border-radius: 16px 16px 0px 0px;
  padding: 0 32px;
  .u_tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    background-color: #fff;
    .tab_item {
      flex: 1;
      background-color: #fff;
      line-height: 100px;
      &.active {
        background-color: rgb(55, 185, 169);
      }
    }
  }
}
</style>