Sham@双目瞿为了实现小程序端滚动时，执行某段代码，Sham今天学习了下，以下代码作为备忘：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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组件滑动到某个位置执行什么操作，再加上个动画效果，还是不错的功能。
最新评论