微信小程序滚动业务

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
119
export default {
	data() {
		return {
			currenIndex: 1,//对应tabList的tabIndex
			currentScrollTop: 0,//当前滚动高度
			isOnTab: false, //代表当前是否正被点击后
			tabList: [
				{
					tab: '疾病定义',
					tabIndex: 1,
					id: 'definition',
					scrollTop: 0
				},
				{
					tab: '病因症状',
					tabIndex: 2,
					id: 'symptom',
					scrollTop: 0
				},
				{
					tab: '诊断治疗',
					tabIndex: 3,
					id: 'treat',
					scrollTop: 0
				},
				{
					tab: '预后',
					tabIndex: 4,
					id: 'prognosis',
					scrollTop: 0
				}
			],
			scrollIntoViewId: 'definition' //当前项目，对应tabList的id
		};
	},
	methods: {
        //获取每一个小项目的距离顶部的高度
		getscrollTop() {
			this.$nextTick(() => {
				let that = this;
				that.showClass = false;
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					that.tabList.forEach(tab => {
						query
							.select(`#${tab.id}`)
							.boundingClientRect(data => {
								console.log(
									tab.tab +
										'topId得到布局位置信息' +
										JSON.stringify(data)
								);
								// console.log(
								// 	tab.tab + 'topId节点离页面顶部的距离为' + data.top
								// );
								tab.scrollTop = data.top;
							})
							.exec();
					});
				}, 200);

				setTimeout(() => {
					let theGap = that.tabList[0].scrollTop;
					that.tabList.forEach(tabInside => {
						tabInside.scrollTop -= theGap;
					});
					console.log('that.tabList..', that.tabList);
					this.showClass = true;
					that.resetCurrentTab();
				}, 800);
			});
		},
		onTab(item, index) {
			this.isOnTab = true;
			this.scrollIntoViewId = item.id;
			this.currenIndex = item.tabIndex;
            //滚动需要时间，所以设置2s的延迟
			setTimeout(() => {
				this.isOnTab = false;
			}, 2000);
		},
		scroll(e) {
            //判断是否是处于被点击头部，滚动状态下
			if (!this.isOnTab) {
				let that = this;
				that.currentScrollTop = e.detail.scrollTop;
				console.log('that.currentScrollTop..', that.currentScrollTop);
				that.currenIndex = '';

				that.tabList.forEach((item, index, arr) => {
					let len = arr.length;
					// 不是最后一个
					if (index + 1 < len) {
						if (
							item.scrollTop <= that.currentScrollTop &&
							that.currentScrollTop < that.tabList[index + 1].scrollTop
						) {
							that.currenIndex = item.tabIndex;

							return;
						}
					} else {
						// 最后一个没啥限制
						if (item.scrollTop <= that.currentScrollTop) {
							that.currenIndex = item.tabIndex;

							return;
						}
					}
				});
			}
		},
		//滚动到底部
		scrolltolower() {
			console.log('scrolltolower...');
			this.currenIndex = this.tabList.length;
		}
	}
};