推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
分享微信小程序中实现sticky效果的列表页
发布时间:2020-12-23
首先什么是sticky效果呢具体参照饿了么APP的商品列表页（小程序版本发现并未实现）具体的效果及实现可以查看一下这个demo = sticky demo on codepen简单地说就是标题会有粘黏的效果，向下滑动时跟着列表走，向上滑动 ...
首先什么是sticky效果呢
具体参照饿了么APP的商品列表页（小程序版本发现并未实现）
具体的效果及实现可以查看一下这个demo => sticky demo on codepen
简单地说就是标题会有粘黏的效果，向下滑动时跟着列表走，向上滑动到顶部时将会固定在顶部。
但是如果在不考虑兼容性的情况下（IOS6以上、 Safari9.1+、 chrome56+）
其实从CSS3开始有一个position属性sticky就能实现这种效果
只需要这两行就能实现，然而...然而兼容性那是相当的差，那么好用的一个属性为什么兼容性那么差呢？
那么饿了么的商品列表页在小程序中实有哪些步骤呢？利用scroll-view里的scroll-into-view属性，具体可查看小程序的文档
实现sticky效果（可参照 codepen 的 demo）
获取每个scroll-into-view的scrollTop
监听scroll的滚动，并改变scroll-into-view
下来来让我们看一下具体该如何实现 <scroll-view scroll-y class="left-wrapper" id="left"> <view wx:for="..." bindtap="..."></view> <!--这里是左侧的类型选择--> </scroll-view> <scroll-view scroll-y class="right-wrapper" bindscroll="onScroll" scroll-into-view="{{toView}}" id="right"> <view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}"> <view class="type-title" style="{{style}}"> <!-- 这个就是ticky header部分 --> {{item.title}} </view> <view class="content"> <view wx:for="{{item.child}}" class="item"> <!--这里是需要展示具体的列表项--> </view> </view> </view> </scroll-view>左侧列表页没什么好讲的，无非就是按下某个类型，给上一个checked样式，然后改变toView（关键）的值。
那么toView是什么呢？toView的值是和scroll-view里面你需要跳转的view的id对应起来的，也就是代码中的这个id
所以当左侧按下对应的按钮以后，右侧的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的位置
