微信小程序仿APP section header悬停效果怎么实现


本篇内容介绍了“微信小程序仿APP section header悬停效果怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
首先写一个非常简单列表:
wxml代码
wxss代码
简单列表效果.png 那我们要怎么样让头部悬停呢?
1、我们需要在页面布局完成后获取到头部的位置:
在onReady方法中,查询section-header节点并拿到该节点此时距离当前顶部的距离
注意是 此时,这个后面再讲
2、我们需要监听页面滚动:
fixed用来控制是否悬停
3、修改相应的样式:
将原来的header修改为如下代码,并添加一个placeholder视图,目的是当我们的section-header视图悬停时,保持占位,避免页面抖动
增加wxss代码
附上js data 代码:这个有一个要注意的点,我们在使用swlectorQuery()的时候,获取到的top是当前调用改函数时相应节点对应当前顶部的距离,这就有一个问题,当我们的header的高度(不一定是header只要是section-header上面的视图的高度)发生变化的时候,悬停就会有问题,因为我们的高度是最开始的时候获取的。
所以在我们改变高度之后,要再次调用该函数去获取距离”当前顶部”的距离,这也是要注意的一个点,如果我能直接再次获取并赋值,发现还是有问题,就是因为此时获取的top不是距离整个page页面顶部,而我们监听的页面滚动却是,所以我们可以修改代码如下:
加上此时页面滚动的距离,则能保证我们预期的效果出现“微信小程序仿APP section header悬停效果怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注百免费云主机域名云主机网站,小编将为大家输出更多高质量的实用文章!

相关推荐: vcftools如何计算snp缺失率

这篇文章给大家分享的是有关vcftools如何计算snp缺失率的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vcftools计算snp缺失率vcftools中有两个参数可以计算vcf文件中snp的缺失率。分别是:–missing-…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/22 10:58
下一篇 01/22 10:58

相关推荐