uniapp 实现 tab 点击滚动 代码及逻辑

<template>

  <view class="tab-container">

    <scroll-view scroll-x scroll-with-animation class="tabs" :scroll-left="scrollLeft">

      <view class="tab" :class="{'active':currentTab ===index }" v-for="(item,index) in tabs" :key="index" @tap="switchTab(index)">

        {{item.name }}

</view>

    </scroll-view>

    <button v-for="(i,v) in tabs[currentTab].subTags" @click="tiao">{{i}}</button>

  </view>

</template>

<script>

import RecommendInfoApi from "@/api/RecommendInfoList";

export default {

  data() {

    return {

      tabs:[],

currentTab:0,// 当前选中的tab索引

      scrollLeft: -1,// scroll-view的scroll-left值

      tabRects:[],

scrollRect:[],

screenWidth:0,

indexId:0,

isFirstLoad:true,

isFirstSwitchTab:true,

initialTabIndex:0,// 初始需要滚动到的.tab索引

    };

},

onLoad(option) {

    this.indexId=Number(option.id)

  },

onShow() {

    this.getShareRecommendInfo()

    this.initialTabIndex =this.indexId;// 设置初始需要滚动到的.tab索引

    if (this.indexId &&this.isFirstSwitchTab) {

      this.switchTab(this.indexId);

this.isFirstSwitchTab =false;

}

  },

methods:{

    async getShareRecommendInfo() {

      uni.showLoading();

try {

        const res =await RecommendInfoApi.getShareRecommendInfo();

const recommendInfoList =res.data.data.getShareRecommendInfoList;

this.tabs =recommendInfoList

        if (this.isFirstLoad) {

          this.calculateTabPositions();

this.isFirstLoad =false;

}

        uni.hideLoading();

} catch (error) {

        console.error('Failed to fetch share recommend info:',error);

}

    },

switchTab(index) {

      console.log(index)

      this.currentTab =index;

this.adjustScroll();// 点击tab后调整scroll-view的位置

      const tabRect =this.tabRects[index];

if (tabRect &&this.scrollRect) {

        const screenWidth =tabRect.left -(this.scrollRect.width -tabRect.width) /2;

this.scrollLeft =screenWidth;

} else {

        this.scrollLeft =0;

}

    },

calculateTabPositions() {

      wx.nextTick(() =>{

        const query =wx.createSelectorQuery().in(this);

query.selectAll(".tab").boundingClientRect();

query.select(".tabs").boundingClientRect();

query.exec((rects) =>{

          this.tabRects =rects[0];

this.scrollRect =rects[1];

if (this.initialTabIndex >=0 &&this.initialTabIndex

            const tabRect =this.tabRects[this.initialTabIndex];

if (tabRect &&this.scrollRect) {

              const screenWidth =tabRect.left -(this.scrollRect.width -tabRect.width) /2;

this.scrollLeft =screenWidth;

}

          }

        });

});

},

adjustScroll() {

      this.scrollLeft =0;// 每次切换tab时重置scroll-left值

    },

tiao(){

      uni.navigateTo({

        url:"/pages/shopcart/navcart",

fail(err) {

          console.log(err);

},

});

}

  },

};

</script>

<style scoped>

.tab-container {

  width:100%;

height:40px;

background-color:#f8f8f8;

}

.tabs {

  width:100%;

white-space:nowrap;

overflow-x:auto;

}

.tab {

  display:inline-block;

padding:0 24rpx;

color:#333;

background:pink;

border-radius:36rpx;

transition:opacity 0.3s ease-in-out;/* Add transition animation */

  margin:0 10rpx;

height:70rpx;

font-size:30rpx;

font-weight:400;

line-height:70rpx;

}

.tab:nth-child(1){

  margin-left:24rpx;

}

.tab.active {

  color:#ff0000;

font-weight:700;

}

</style>