分享微信小程序中实现sticky效果的列表页

首先什么是sticky效果呢

具体参照饿了么APP的商品列表页（小程序版本发现并未实现）
具体的效果及实现可以查看一下这个demo => sticky demo on codepen
简单地说就是标题会有粘黏的效果，向下滑动时跟着列表走，向上滑动到顶部时将会固定在顶部。

但是如果在不考虑兼容性的情况下（IOS6以上、 Safari9.1+、 chrome56+）
其实从CSS3开始有一个position属性sticky就能实现这种效果

{
    position: sticky;
    top: 0;
}复制代码

只需要这两行就能实现，然而...然而兼容性那是相当的差，那么好用的一个属性为什么兼容性那么差呢？

那么饿了么的商品列表页在小程序中实有哪些步骤呢？

1. 利用scroll-view里的scroll-into-view属性，具体可查看小程序的文档
2. 实现sticky效果（可参照 codepen 的 demo）
3. 获取每个scroll-into-view的scrollTop
4. 监听scroll的滚动，并改变scroll-into-view

下来来让我们看一下具体该如何实现

"left-wrapper" id="left">
  for="..." bindtap="...">
  

"right-wrapper"
             bindscroll="onScroll"
             scroll-into-view="{{toView}}"
             id="right">
  for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}">
    "type-title" style="{{style}}">
      
      {{item.title}}
    
    "content">
      for="{{item.child}}" class="item">
        
      
    
  
复制代码

左侧列表页没什么好讲的，无非就是按下某个类型，给上一个checked样式，然后改变toView（关键）的值。
那么toView是什么呢？toView的值是和scroll-view里面你需要跳转的view的id对应起来的，也就是代码中的这个id

for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}">复制代码

所以当左侧按下对应的按钮以后，右侧的scroll就会跳转到相应id的scroll-into-view里面，
其实到目前为止已经实现了sticky header + 跳转的问题了
但是...
如果滑动右侧的滚动条的话，左侧的数据如何跟着变化呢？
假如不是小程序的话应该很多人都知道怎么做，无非就是监听滚动条，判断滚动条的位置，然后根据区域去改变左侧的选择。
但是...
小程序如果获得scroll-into-view在scroll-view里面的位置呢？？？
小程序是没有类似document.getElementById()这种Dom操作的
也没法使用JQuery的$去快捷地获取scrollTop的
也不能像vue一样直接操作$el的
还好小程序在1.4时开放了一个接口wx.createSelectorQuery()

wx.createSelectorQuery()
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。

---

nodesRef.boundingClientRect([callback])
添加节点的布局位置的查询请求，相对于显示区域，以像素为单位。其功能类似于DOM的getBoundingClientRect。返回值是nodesRef对应的selectorQuery。
返回的节点信息中，每个节点的位置用left、right、top、bottom、width、height字段描述。如果提供了callback回调函数，在执行selectQuery的exec方法后，节点信息会在callback中返回。
然后可以通过这个方法拿到所有的scroll-into-view的位置

let query = wepy.createSelectorQuery()
for (let i = 0; i < this.types.length; ++i) {
  let id = this.types[i]
  query.select(`#${id}`).boundingClientRect((rect) => {
    this.scrollTops[id] = rect.top
  }).exec()
}复制代码

特别注意
这个操作必须得放在onReady ()的时候去做，否则将无法得到rect属性
得到这个属性以后其实就很好操作了，直接上代码了

onScroll (event) {
  // 如果是右侧的滚动view
  if (event.currentTarget.id === 'right') {
    // 判断滚动的方向
    let top = event.detail.scrollTop
    this.dir = this.currentTop < top ? 'down' : 'up'
    this.currentTop = top
    // 判断当前滚动条所在区域，如果不在当前区域则进行跳转
    if (top > this.scrollTops[this.getNextView()] &&
        this.dir === 'down' &&
        this.checked < this.types.length - 1) {
      this.setChecked(this.checked + 1)
    }
    if (top < this.scrollTops[this.toView] &&
        this.dir === 'up' &&
        this.checked > 0) {
      this.setChecked(this.checked - 1)
    }
  }
}复制代码

然后一个简单的具有sticky效果的商品列表页跳转功能就实现了。

坑

1. scroll-view必须设置高度，否则在IOS上将无法使用scroll-into-view跳转
2. 使用createSelectorQuery必须在页面渲染完成以后

存在问题

1. scroll会有个惯性运动，这时候按左侧的按钮切换scroll-into-view会和onScroll事件发生一些冲突，测试IOS存在有该问题，希望大神给予些指导意见。

说明

由于采用了wepy构建的小程序，所以在部分代码上会和小程序有出入（改过一些），主要是思路。
顺便丢个wepy的github
wepy的本意是希望小程序能像vue一样开发，由于本人一直在用vue做项目，所以用wepy开发小程序会顺手一些，但是wepy虽然尽力贴合vue，但在某些设计上存在着一定的问题，但相对来说比直接开发小程序用起来舒服一些。

碎碎念...谁能教教我怎么优雅地写好Markdown呢T.T

Github: github.com/lyh2668
AuthBy: lyh2668