请问，为什么我点击tab栏时，自动滚动没有过渡效果，特别生硬的直接跳过去。

Answer 1

晓之蛇 2023-02-07 10:49:03

你看看scroll-view组件中设置 scroll-with-animation=true 没有

Answer 2

Sunday 2022-07-10 15:34:01

你好

你是如何进行跳转的？你的 tab 配置是什么？ 或者可以直接参考下课程的源代码

• 提问者 qq_麦角_0 #1

  就是点击tab导航栏上的选项， :scroll-left="scrollLeft" 发生变化后自动滚动的有些生硬
  
    methods: {
      //导航栏点击事件active
      onTbaClick(index) {
        //点把导航栏时，把当前index值赋值给activeIndex
        this.activeIndex = index;
        this.tabToIndex();
      },
      //退据当前的activeIndex,计算滑块的滚动位置
      tabToIndex() {
        const index = this.activeIndex;
        this.slider = {
          left: this.tabList[this.activeIndex]._slider.left,
        };
        this.scrollLeft = index * this.defaultConfig.underLineWidth;
      },
      //更新tab的宽度
      updateTabWidth() {
        let data = this.tabList;
        if (data.length === 0) return;
        //uniApp 中拿到渲染之后的dom
        //获取 dom的固定写法
        const query = uni.createSelectorQuery().in(this);
        data.forEach((item, index) => {
          query
            .select("#_tab_" + index)
            .boundingClientRect((res) => {
              item._slider = {
                left:
                  res.left + (res.width - this.defaultConfig.underLineWidth) / 2,
              };
              if (data.length - 1 === index) {
                this.tabToIndex();
              }
            })
            .exec();
        });
      },
    },