要实现滑动到相应的位置时,对应的tab页也会改变至选中样式,可以通过监听滚动事件来实现。以下是修改后的代码:

<view class="">
  <u-sticky :offsetTop="60+statusBarHeight" bgColor="white">
    <u-tabs :list="equtabList" lineWidth="30" :activeStyle="{
      fontSize: '15px',
      color: '#303133',
      fontWeight: 'bold',
      transform: 'scale(1.05)'
    }" :inactiveStyle="{
      fontSize: '14px',
      transform: 'scale(1)'
    }" @click="changeItem"></u-tabs>
  </u-sticky>

  <view class="card-item" v-if="inspectionListtotal0 != 0" id="cardItem0">
    <!-- 省略部分代码 -->
  </view>
  
  <view class="card-item" v-if="inspectionListtotal1 != 0" id="cardItem1">
    <!-- 省略部分代码 -->
  </view>
  
  <view class="card-item" v-if="inspectionListtotal2 != 0" id="cardItem2">
    <!-- 省略部分代码 -->
  </view>
  
  <view class="card-item" v-if="inspectionListtotal3 != 0" id="cardItem3">
    <!-- 省略部分代码 -->
  </view>
  
  <view class="card-item" v-if="inspectionListtotal4 != 0" id="cardItem4">
    <!-- 省略部分代码 -->
  </view>
  
  <view class="card-item" v-if="inspectionListtotal5 != 0" id="cardItem5">
    <!-- 省略部分代码 -->
  </view>
</view>

<script>中添加滚动事件的监听:

export default {
  data() {
    return {
      activeTab: 0, // 当前选中的tab索引
      equtabList: ['全部', '锅炉', '场车', '起重机械', '压力容器', '压力管道'],
      statusBarHeight: 0, // 状态栏高度
      scrollTop: 0, // 页面滚动的距离
      inspectionListtotal0: 0, // 全部的数量
      inspectionListtotal1: 0, // 锅炉的数量
      inspectionListtotal2: 0, // 场车的数量
      inspectionListtotal3: 0, // 起重机械的数量
      inspectionListtotal4: 0, // 压力容器的数量
      inspectionListtotal5: 0, // 压力管道的数量
      inspectionList0: [], // 全部的列表数据
      inspectionList1: [], // 锅炉的列表数据
      inspectionList2: [], // 场车的列表数据
      inspectionList3: [], // 起重机械的列表数据
      inspectionList4: [], // 压力容器的列表数据
      inspectionList5: [], // 压力管道的列表数据
    };
  },
  methods: {
    // 滚动事件监听
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
      // 获取各个card-item距离页面顶部的高度
      const cardItem0 = uni.createSelectorQuery().select('#cardItem0');
      const cardItem1 = uni.createSelectorQuery().select('#cardItem1');
      const cardItem2 = uni.createSelectorQuery().select('#cardItem2');
      const cardItem3 = uni.createSelectorQuery().select('#cardItem3');
      const cardItem4 = uni.createSelectorQuery().select('#cardItem4');
      const cardItem5 = uni.createSelectorQuery().select('#cardItem5');
      cardItem0.boundingClientRect((rect) => {
        if (rect.top <= 60) {
          this.activeTab = 0;
        }
      }).exec();
      cardItem1.boundingClientRect((rect) => {
        if (rect.top <= 60) {
          this.activeTab = 1;
        }
      }).exec();
      cardItem2.boundingClientRect((rect) => {
        if (rect.top <= 60) {
          this.activeTab = 2;
        }
      }).exec();
      cardItem3.boundingClientRect((rect) => {
        if (rect.top <= 60) {
          this.activeTab = 3;
        }
      }).exec();
      cardItem4.boundingClientRect((rect) => {
        if (rect.top <= 60) {
          this.activeTab = 4;
        }
      }).exec();
      cardItem5.boundingClientRect((rect) => {
        if (rect.top <= 60) {
          this.activeTab = 5;
        }
      }).exec();
    },
    // 点击tab切换
    changeItem(index) {
      this.activeTab = index;
      // 滚动到对应的card-item位置
      const cardItem = uni.createSelectorQuery().select(`#cardItem${index}`);
      cardItem.boundingClientRect((rect) => {
        uni.pageScrollTo({
          scrollTop: rect.top,
          duration: 300,
        });
      }).exec();
    },
    // 点击打开文件
    openFile(item) {
      // 点击打开文件的逻辑
    },
  },
  mounted() {
    // 获取状态栏高度
    uni.getSystemInfo({
      success: (res) => {
        this.statusBarHeight = res.statusBarHeight;
      },
    });
    // 监听滚动事件
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0,
    });
    uni.$on('pageScroll', this.onPageScroll);
  },
  destroyed() {
    uni.$off('pageScroll', this.onPageScroll);
  },
};

onPageScroll方法中,通过uni.createSelectorQuery().select('#cardItem0')等方法获取各个card-item元素距离页面顶部的高度,然后根据滚动的距离判断当前应该选中的tab页,并通过this.activeTab来控制选中样式。同时,在changeItem方法中,点击tab切换时,通过uni.pageScrollTo方法滚动到对应的card-item位置。

注意:需要在mounted钩子函数中添加监听滚动事件的逻辑,并在destroyed钩子函数中移除监听事件

view class= 			u-sticky offsetTop=60+statusBarHeight bgColor=white				u-tabs list=equtabList lineWidth=30 activeStyle=						fontSize 15px						color #303133						fontWeight bold						transform scale10

原文地址: https://www.cveoy.top/t/topic/isns 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录