小程序实战(十四)-筛选菜单吸顶

一、需求说明

  1. 列表页面中部有一个筛选菜单

  2. 当向上滑动时，刚开始菜单跟着滑动，当菜单到达顶部时固定在顶部不再滑动

二、需求实现

2.1 整体思路

这个需求的整体思路是：

  1. 通过动态 class 来实现菜单的不同布局状态

  2. 获取元素，拿到菜单距离顶部的距离

  3. 在滚动事件中判断，当滚动距离大于菜单距离顶部的距离，就增加 class

2.2 获取菜单距离顶部距离

html 结构

<view>导航栏</view>
<view id="menu">菜单栏</view>
<view>内容区</view>

let that = this
let query = wx.createSelectorQuery()
query.select('#menu').boundingClientRect()
query.exec(function(res) {
that.setData({
menuTop: res[0].top         // 获取距离顶部的距离
})
})

2.3 滚动时判断距离

<view>导航栏</view>
<view id="menu" class="{{menuFixed ? 'menu-fixed' : ''}}">菜单栏</view>
<view>内容区</view>

onPageScroll(e) {
this.setData({
menuFixed: (e.scrollTop > this.data.menuTop)
})
}

2.4 固定后菜单的样式

.menu-fixed{
position: fixed;
}

三、出现的坑

3.1 菜单上面有元素需要通过调用接口渲染

若存在这种情况，需要在接口返回数据后，再计算菜单到顶部的距离。防止由于元素未渲染而引起距离计算错误：

onLoad() {
post(api.getTypes).then(res => {
// 已获取到数据
this.getMenuTop()
})
},
getMenuTop() {
let that = this
let query = wx.createSelectorQuery()
query.select('#menu').boundingClientRect()
query.exec(function(res) {
that.setData({
menuTop: res[0].top         // 获取至顶部的距离
})
})
}

3.2 菜单上有图片

若菜单上部有图片，需要注意原图的尺寸，在渲染时，会先按原图尺寸渲染，后再按照图片容器设定的大小渲染。

若原图尺寸大，会造成计算距离时，菜单至顶部距离偏大。

3.3 时不时的卡顿感

onPageScroll 这个函数被调用非常频繁，如果直接在里面写 setData 语句，会造成不间断地赋值，影响性能。

这个地方需要做优化，比如：

onPageScroll(e) {
if (this.data.menuFiXed === (e.scrollTop > this.data.menuTop)) return
this.setData({
menuFixed: (e.scrollTop > this.data.menuTop)
})
}

当滚动距离大于菜单距离后，会将 menuFixed 赋值为 true，在这之后，若继续向下滚动，会继续调用这个函数。这时判断若结果相等，就直接 return ，阻止多次的 setData 操作。

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。

目前我们学习计划是：

小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~

以上是 小程序实战(十四)-筛选菜单吸顶 的全部内容， 来源链接： utcz.com/a/24464.html

回到顶部