很多APP都有这么一个效果,列表头在滚动到顶部时会悬停在顶部,比如在iOS开发中UITableview设置 style 属性设置为 Plain ,这个tableview的section header在滚动时会默认悬停在界面顶端。
那么我们怎么在微信小程序也实现这么一个效果呢? wxml代码
wxss代码
简单列表效果.png 那我们要怎么样让头部悬停呢? 1、我们需要在页面布局完成后获取到头部的位置: 在onReady方法中,查询section-header节点并拿到该节点此时距离当前顶部的距离 注意是 此时,这个后面再讲
2、我们需要监听页面滚动: fixed用来控制是否悬停
3、修改相应的样式: 将原来的header修改为如下代码,并添加一个placeholder视图,目的是当我们的section-header视图悬停时,保持占位,避免页面抖动
增加wxss代码
附上js data 代码:
此时我们需要的效果就实现了:
sectionHeader悬浮.gif 这个有一个要注意的点,我们在使用swlectorQuery()的时候,获取到的top是当前调用改函数时相应节点对应当前顶部的距离,这就有一个问题,当我们的header的高度(不一定是header只要是section-header上面的视图的高度)发生变化的时候,悬停就会有问题,因为我们的高度是最开始的时候获取的。 所以在我们改变高度之后,要再次调用该函数去获取距离"当前顶部"的距离,这也是要注意的一个点,如果我能直接再次获取并赋值,发现还是有问题,就是因为此时获取的top不是距离整个page页面顶部,而我们监听的页面滚动却是,所以我们可以修改代码如下:
加上此时页面滚动的距离,则能保证我们预期的效果出现!!!! |
微信小程序仿APP section header 悬停效果
发布:2018-07-21 08:52浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08