view class= u-sticky offsetTop=60+statusBarHeight bgColor=white u-tabs list=equtabList lineWidth=30 activeStyle= fontSize 15px color #303133 fontWeight bold transform scale10
要实现滑动到相应的位置时,对应的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钩子函数中移除监听事件
原文地址: https://www.cveoy.top/t/topic/isns 著作权归作者所有。请勿转载和采集!