小程序获取当前组件位置-Sham@双目瞿

为了实现小程序端滚动时，执行某段代码，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,
        })
      }
    })
  },
})

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组件滑动到某个位置执行什么操作，再加上个动画效果，还是不错的功能。

小程序获取当前组件位置

相关推荐

评论抢沙发

最新评论

热门文章

热门标签

网站统计

如果你觉得文章好，请赏1杯速溶咖啡给Sham吧！

微信扫一扫打赏