uni-app实现tabs与内容的上下滚动相联动

一、需求说明

• 点击顶部tabs，页面滚动到指定元素的位置
• 页面滚动，tabs对应元素高亮选中
• tabs吸顶

       一开始自己尝试用u-tabs配合页面监听，达到哪个元素的高度时就让哪个tab项选中，虽然马马虎虎能跳，但是tabs切换不够丝滑。有时甚至会出现乱跳的现象，使用体验很差。

        后面在DCloud插件市场找到了个符合要求的组件，爱了呀~

二、使用组件

scroll-tabs： https://ext.dcloud.net.cn/plugin?id=7849

组件参数具体看文档，这里给到我的使用实例：

Dom:

<scrollTabs :tabs="dataList" :tabOptions="{label: 'name', activeColor: '#222', barColor:'#ff9f0f'}" :offsetTop="60+statusBarHeight" 
	:scrollTop="scrollTop" :sticky="true" :itemOffsetTop="105+statusBarHeight" :stickyTop="stickyTop" :clickScroll="clickScroll" 
	@onChange="tabChange">
	<view class="container-item" v-for="(item, index) in dataList" :class="'tabs'+index">
		<view class="item-title">
			<text>{
   
   {item.name.charAt(0)+' '+item.name.charAt(1) +'（' + item.total + '）'}}</text>
		</view>
		<view class="item-body">
			<u-cell v-for="(subItem, subIndex) in item.subDataList" :border="false">
				<view slot="icon" class="cell-icon">
					<i class="iconfont icon-file-pdf-fill"></i>
				</view>
				<view slot="title" class="cell-title">
					{
   
   {subItem.name}}
				</view>
				<view slot="value" class="cell-value" >
					<i class="iconfont icon-xinxi"></i>
				</view>
			</u-cell>
		</view>
	</view> 
</scrollTabs>

JS:

import scrollTabs from "@/components/scroll-tabs/scroll-tabs/scroll-tabs.vue"
export default {
    
    
	components: {
    
    scrollTabs},
	data() {
    
    
		return {
    
    
			stickyTop: 0,
			offsetTop: 0,
			clickScroll: false,
			statusBarHeight: 0,
			scrollTop: 0,
			id: null,
			dataList: [
				{
    
    
					name: '推荐',
					total: '234',
					scroll_id: 'tabs0',
					subDataList: [
						{
    
    
							name: '内容',
							total: '41',
						},
						{
    
    
							name: '内容',
							total: '39',
						},
						{
    
    
							name: '内容',
							total: '75',
						},
						{
    
    
							name: '内容',
							total: '24',
						},
						{
    
    
							name: '内容',
							total: '45',
						},
						{
    
    
							name: '内容',
							total: '52',
						},
					]
				},
				{
    
    
					name: '娱乐',
					total: '234',
					scroll_id: 'tabs1',
					subDataList: [
						{
    
    
							name: '内容',
							total: '41',
						},
						{
    
    
							name: '内容',
							total: '39',
						},
						{
    
    
							name: '内容',
							total: '52',
						},
						{
    
    
							name: '内容',
							total: '52',
						},
					]
				},
				//更多的静态数据这里就不放了，可以自己编
			]
		}
	},
	methods: {
    
    
		navigateBack(){
    
    
			uni.navigateBack();
		},
		clickSearch(){
    
    
			console.log('点击搜索');
		},
		tabChange(){
    
    
			if(!this.clickScroll){
    
    
				this.clickScroll = true;
			}
		},
	},
	created() {
    
    
		// 获取状态栏高度
		let that = this;
		uni.getSystemInfo({
    
    
			success:function(e){
    
    
				that.stickyTop = e.statusBarHeight + 44 +'px';
				that.statusBarHeight = e.statusBarHeight;
			}
		})
	},
	onPageScroll(e){
    
    
		this.scrollTop = e.scrollTop;
		this.clickScroll = true;
	}
}

样式就不放了，这里不是重点。

使用特别说明：

由于用到了“自定义导航栏”和“吸顶”，所以元素定位的高度上可能有偏差。所以用到offsetTop和itemOffsetTop
要在不同的设备上都能达到高度不多不少的效果，就要加上设备的状态栏高度

三、效果图

滚动之后，tabs吸顶；同时根据页面滚动位置，对应tabs项元素高亮