小程序利用sticky实现滑动吸顶效果

本期是对上周需求有了新的思路进行优化的逻辑

1. 原型图

首先我们先来看一张图

• 最外层框框可视作为手机屏幕可视区域
• 组件scheduleList是每一组根据日期筛选出来的一组数据
  • scheduleDay是每一组数据的日期
  • 组件scheduleItem是每一组数据中的一项

2. 需求

• 在用户滑动过程中，每当用户滑至某个日期区域内数据时，scheduleDay需要在如下图所示位置固定展示，且层级大于scheduleItem
• 在触发上述条件前后scheduleDay的样式会发生变化，例如宽高、背景颜色会发生改变
• 每一个scheduleList都有上述逻辑，即滑至下一个scheduleList时，该scheduleList的scheduleDay也触发以上两点逻辑

3. 实现方式

• 外层组件存储idx、currentIdx两个数据
• 外层组件传数据给scheduleList组件接受idx、currentIdx
• idx: 每一个scheduleList的索引
• currentIdx: 滑动到当前区域的scheduleList的索引
• 当 idx === currentIdx 时即代表用户滑动到某个scheduleList所在到区域时，给scheduleDay添加class为sticky的类名，该类名用于控制scheduleday的样式改变
• scheduleday默认存在 position: sticky; z-index: 1111; top: 0类似属性

• 在获取scheduleDay元素节点的位置信息时同时获取当前索引值

• 用户在滑动过程中触发的函数会修改currentIdx

• wx.createSelectorQuery()使用方法具体参考(一般用于获取某个元素节点的位置信息)

• developers.weixin.qq.com/miniprogram…

scheduleInfo:[
    {
       top: 8,
       idx: 0
    },
    {
       top: 213,
       idx: 1
    },
    {
       top: 555,
       idx: 2
    },
    ...
]

本文对于css就不做过多展示，逻辑思路对了即可实现功能效果

4. 目前仍存在的问题

• 由于handleScroll滑动事件触发的频率有误差，导致在滑动至scroll-view组件最上方时，并不能获取到实时的scrollTop数据，会有误差延迟，跟组件自带方法有关系

5. 解决的问题

原解决方案在上拉加载时会有如下不好的ui体验

6. 考虑是否有更好的实现方式

• 欢迎广大网友继续为我提供帮助

7. 在本次需求测试中个人发现的bug

• scroll-view组件开启enhanced属性后，当数据过少时（两三条数据撑不满屏幕时），会出现有一长段可下拉的区域，该bug只在ios真机上测试出问题，由于开发使用的自研框架，目前还没有发现是否是框架问题还是我个人代码问题导致的情况，还有待研究。
• 字体font-family会影响flex水平垂直居中真机有误差，例如font-family: PingFangSC-Semibold

8. 开发过程中学到的新知识

• css3的filter属性可用于修改背景图片颜色
• 参考张鑫旭大佬的文章 www.zhangxinxu.com/wordpress/2…
• 在这里我的需求是在触发某个条件时给icon变色，我实现icon的方式用的是伪元素