uniapp tab切换及tab锚点效果(兼容wx小程序及H5端)

tab切换锚点效果及滚动时激活相应的tab

效果如下

1. H5端

2. 小程序端

代码实现-重要几点

1. 渲染页面循环数组时，每一个item都需要给不重复的id

//topicList后端返回的数据
<view :id="'a' + (i + 1)" v-for="(v,i) in topicList" :key="v.id">
1
2

2. tab使用uviewUI库实现的，list值里面每一个元素也需要给上id值。如[‘1-20’,‘21-40’,…]，那么21-40给的是第21个item的id。
   这里也可以去动态计算，如后端返回76条，一个tab数值间隔为20，那么76则是[‘1-20’,‘21-40’,‘41-60’,‘61-76’]，注意数组的最后一个，结尾是76而不是80

<template>
	<u-tabs :list="tabList" :current="currentTab" @change="changeTab" :bar-style="{'bottom':'6rpx'}"></u-tabs>
</template>

// 根据后端返回数据总条数计算tab
getTopicTab() {
	// this.topicList.length这是渲染数据总条数，20是每个tab数值间隔值，cycleIndex则是针对数据总条数一共有几个tab
	let cycleIndex = Math.ceil(this.topicList.length / 20); // 向上取整6.01 -> 7
	let tabArr = [];
	for(let i = 1; i <= cycleIndex; i++) {
		tabArr.push({
			value: 20 * i,
			name: ((20 * (i - 1)) + 1) + '-' + (i == cycleIndex ? this.topicList.length : (20 * i)),
			id: '#a' + ((20 * (i - 1)) + 1)
		});
	};
	this.tabList = tabArr;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 监听页面滚动周期onPageScroll，针对滚动时，该激活哪个tab。
4. 接下来就是一些dom元素高度计算，使用uni.createSelectorQuery()获取JQ对象，然后使用select(id/class名).boundingClientRect获取当前id的item距离顶部的top值；根据顶部基准的top值和item的top值，之间的差值，通过uni.pageScrollTo滚动页面
5. 计算高度值时，需要注意，顶部是否有其他dom元素，有也需要将该dom元素高度，考虑在内
   

实现思路

1. 进入页面时，循环渲染数据之后，获取每个tab对应item距离顶部的距离，用数组distanceArr存起来(后面会用到)。这个顶部以谁基准呢，以页面中最外层的view为基准。如上图，(H5端)最外层dom元素的class名为page-content(后面计算高度会用到)，(wx小程序端)最外层dom元素的class名为page-risk
2. 根据后端返回数据总条数，渲染数据，给每个item赋值不同的id。如上述 代码实现 的第1点
3. 根据后端返回数据总条数，动态计算tab，渲染this.tabList。如上诉 代码实现 的第2点
4. 点击tab，锚点到相应位置。在点击时拿到被点击item的index，this.tabList[index]这样就拿到了，当前被点击tab的数据(value,name,id)。计算dom高度：1).先获取顶部基准的top值，uni.createSelectorQuery().select(‘.page-risk’).boundingClientRect(data => { data.top })；2).然后根据被点击tab的id，获取top值，然后根据差值，通过uni.pageScrollTo滚动页面到目标位置。(注意这里需要注意 代码实现 的第5点，顶部是否有其他dom元素，它们高度也需要计算在内，这里称为**偏移量**)
5. 监听页面滚动周期onPageScroll事件，根据页面滚动激活相应的tab。这里使用到了第1点提到的数组distanceArr

全部代码

export default {
	data() {
		tabList: [], // 切题tab集合
		topicList: [], // 题库集合
		distanceArr: [], // 每道题ID对应的top值
		isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
	},
	// 监听页面滚动
	onPageScroll (event) {
	    if (this.isTabChange) {
			return
	    };
	    const { scrollTop } = event;
	    // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
	    // (这里是代码实现第5点及实现思路第4点提到的偏移量)
	    const skewY = 103;
	    if (scrollTop >= skewY) {
	        this.$nextTick(() => {
	        	// distanceArr-进入页面时第一时间获取每个tab对应item的top值集合
	            const length = this.distanceArr.length;
	            const index = this.distanceArr.findIndex(el => el - skewY - scrollTop > skewY);
	            // 当index  == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
	            // 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
	            // currentTab 0激活第一个切题tab  1第二个
	            this.currentTab = index > 0 ? index - 1 : length - 1;
	        })
	    }
	},
	methods: {
		// 获取题库
		getList() {
			this.topicList = []
		},
		// 根据this.topicList计算切题tab
		getTopicTab() {
			let cycleIndex = Math.ceil(this.topicList.length / 20); // 向上取整6.01 -> 7
			let tabArr = [];
			for(let i = 1; i <= cycleIndex; i++) {
				tabArr.push({
					value: 20 * i,
					name: ((20 * (i - 1)) + 1) + '-' + (i == cycleIndex ? this.topicList.length : (20 * i)),
					id: '#a' + ((20 * (i - 1)) + 1)
				});
			};
			this.tabList = tabArr;
		},
		// 获取每个tab对应item的top值集合('20-41'获取第21个item的top值)
		getDistanceArr () {
			const _this = this;
			_this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(_this);
				_this.tabList.map(el => {
					query.select(el.id).boundingClientRect(data => {
						// 获取当前ID距离顶部的top值
						if(!_this.distanceArr.includes(data.top)) {
							_this.distanceArr.push(data.top)
						}
					}).exec()
				})
			});
		},
		// 切题tab
		changeTab(index) {
			// 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
			// true时监听页面滚动生命周期代码则不执行
			this.isTabChange = true;
			this.currentTab = index;
			const _this = this;
			// this.$nextTick 保证当前isTabChange 为true后执行代码
			// 避免在istabChange变为true的时候，执行代码，监听事件还是会继续执行重新计算currenTab值
			_this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(_this);
				let id = _this.tabList[index].id;
				let dataTop;
				query.select(id).boundingClientRect(data => {
					dataTop = data.top;
				}).exec();
				query.select('.page-risk').boundingClientRect(res => {
					const scrollTop = dataTop - res.top // 获取差值
					const skewY = 103 // 偏移(顶部返回和切换题tab的高度及第一题magin/padding的和)
					// 页面开始进行滚动到目标位置
					uni.pageScrollTo({
						scrollTop: scrollTop > 0 ? scrollTop - skewY :  scrollTop + skewY,
						duration: 300,
						complete: function () {
							const timer = setTimeout(() => {
								_this.isTabChange = false // 关闭(放开对onPageScroll的限制)
								clearTimeout(timer)
							}, 500) // 解决ios和安卓、鸿蒙系统兼容性问题
						}
					});
				}).exec()
			})
		},
		// 这里业务是题库，所以当必填项没有填写时，就会锚点到该位置
		// 前提是需要将必填项且没有填写的item的id值传递过来
		getPageScrollTo(id) {
			const _this = this;
			_this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(_this);
				let index = '#a' + (id + 1);
				let dataTop;
				query.select(index).boundingClientRect(data => {
					dataTop = data.top;
				}).exec();
				query.select('.page-risk').boundingClientRect(res => {
					const scrollTop = dataTop - res.top; // 获取差值
					const skewY = 103; // 偏移
					// 页面开始进行滚动到目标位置
					uni.pageScrollTo({
						scrollTop: scrollTop > 0 ? scrollTop - skewY :  scrollTop + skewY,
						duration: 300,
					});
				}).exec()
			})
		},
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118