为了实现小程序端滚动时,执行某段代码,Sham今天学习了下,以下代码作为备忘:
Page({
//声明节点查询的方法
onPageScroll: function () {
var that = this;
const query = wx.createSelectorQuery() // 创建节点查询器 query
query.select('#toshowbanner').boundingClientRect() // 这段代码的意思是选择Id=toshowbanner的节点,获取节点位置信息的查询请求
query.selectViewport().scrollOffset() // 这段代码的意思是获取页面滑动位置的查询请求
query.exec((res) => {
//console.log(res[0]) //打印可以看到当前位置对于上下左右的距离
if (res[0].top < 100) { //当id为toshowbanner的组件距离顶部小于100时,执行代码
that.setData({
showtypes: true
})
} else {
that.setData({
showtypes: false,
})
}
})
},
})
以上是js代码,然后在wxml中给需要定位的组件加个id=”toshowbanner”就可以了。
这个可以实现比如向下划到某个位置时,显示悬浮在底部的多功能按钮,或者scroll-view组件滑动到某个位置执行什么操作,再加上个动画效果,还是不错的功能。
最新评论
您的行政服务小程序V2正好我们有需求,能否给个联系方式沟通下呢?谢谢!
想咨询楼主
牛逼的楼主 感谢分享 学习学习
public function UpdateDomainRecord($ip)这里会报错
学习学习
新生进来学习
目前正在找食堂报餐的小程序,看了下评论发现楼主真的是行政文员,真的太牛逼,让我不得不敬佩!我会一直关注着您的
感谢分享!这个举动真的太伟大了,我正愁着没有什么可以学习参考的了,最近有个项目也是类似的,真的是辛苦了,会一直持续关注您的!