uniapp吸顶效果

发表于 分类于 / Changyan：

场景

案例

uni-app 写法

template 结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 运营概况 -->
<view class="main">
  <view class="main-title" ref="operationRef" data-id="operationRef">
    <text class="left">运营概况</text>
    <view class="right">
      <view>我的</view>
      <view>全店</view>
    </view>
  </view>
  <!-- ================== 主体内容 =================== -->
  <view class="overview-com">...</view>
</view>
<!-- 运营概况 -->
<view class="main">
  <view class="main-title" ref="operationRef" data-id="operationRef">
    <text class="left">宴会概况</text>
    <view class="right">
      <view>我的</view>
      <view>全店</view>
    </view>
  </view>
  <!-- ================== 主体内容 =================== -->
  <view class="overview-com">...</view>
</view>

js

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
export default {
	data() {
		return {
			...,
			mainTitleEles: [], // 所有mainTitle标题对象集合
			mainEles: [], // 所有板块对象集合
			ot: [], //存储每个标题的offsetTop
			len: 0, // 标题的个数
			searchBottomY: 0, // 搜索view底部距离页面顶部的距离
			selectorQuery: {}, // Uniapp SelectorQuery 对象实例
		}
	},
	mounted() {
    // 获取 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点
		this.selectorQuery = uni.createSelectorQuery().in(this);
		this.initFixedTop();
	},
	methods: {
		// --------------- 监听 mescroll 页面滚动 ------------------------
		// 初始化吸顶标题的工作
		initFixedTop() {
			// 获取所有需要吸顶效果的标题
			this.mainTitle = this.selectorQuery.selectAll('.main-title');
			uni.createSelectorQuery().selectAll('.main-title').fields({
				rect: true,
				dataset: true
			}, res => {
				this.mainTitleEles = res;
				// 标题的个数
				this.len = this.mainTitleEles.length;
				for (let i = 0; i < this.len; i++) {
					this.ot.push(this.mainTitleEles[i].top); //获取每个标题的offsetTop
				}
				// 获取所有需要吸顶的板块
				uni.createSelectorQuery().selectAll('.main').fields({
					rect: true,
					dataset: true,
					size: true
				}, res => {
					this.mainEles = res;
					// 存储每个标题的offsetTop（只读属性，返回当前元素相对于其 offsetParent 元素的顶部内边距的距离）
					// 加上 最后一个吸顶板块的高度. 解决滚动到最后一个标题（i）时，无法获取（i+1）的offsetTop
					this.ot.push(this.mainEles[this.len - 1].top + this.mainEles[this.len - 1].height);
				}).exec();
			}).exec();
		},
		onScroll(mescroll) {
			// 获取滚动的高度
			const st = mescroll.scrollTop;
			for (let i = 0; i < this.len; i++) {
				// 滚动时监听位置，为标题的吸顶设置一个显示范围
				if (st > this.ot[i] && st < this.ot[i + 1]) {
					this.$refs[this.mainTitleEles[i].dataset.id].$el.className = 'main-title fixed';
				} else {
					this.$refs[this.mainTitleEles[i].dataset.id].$el.className = 'main-title';
				}
			}
		},
  }
};

uni-app 思路和案例 demo 一样，所以就不贴代码的样式了，唯一要注意的一点就是 dom 属性的获取是通过 uni-app 相关 API 实现的：

参考