微信小程序中如何获取view的高度或在视图中的位置？

Question

现在的需求是要做一个类似bootstrap的滚动监听的页面。我翻遍了微信小程序的文档，发现似乎只能通过scroll-view的bindscroll来获取到滚动条的位置。就差view的高度或者位置了，就可以确定滚动到哪个元素了。

求有相关经验的大大看看如何搞？

Answer 1

监听滚动条
需要获得view位置的id

onPageScroll: function (e) {
    // console.log(e)
    let _this = this;
    var query = wx.createSelectorQuery()
    query.select('#stroke-info').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function(res){
      if (res[0].top <= 0) {
        _this.setData({
          "scrollCls": 'fixedCls'
        })
      } else if (res[0].top > 0) {
        _this.setData({
          "scrollCls": ''
        })
      }
      console.log(res)
      // res[0].top       // #the-id节点的上边界坐标
      // res[1].scrollTop // 显示区域的竖直滚动位置
    })
  }

Answer 2

无DOM操作，无数据返回

在没有DOM操作的情况下，你无法获取到view的高度

理想环境

我尝试过，但是失败了，我的两个理想思路，如果你有好的方案，可以交流

1. 你可以固定view高度统一计算

2. 你可以根据view内容计算出动态长款

Answer 3

upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件

没试过这个属性，应该是这个吧？

Answer 4

兄dei，怎么解决的

Answer 5

https://zhidao.baidu.com/ques... 我最近也在做这个效果，刚才有找到这个回答

Answer 6

onPageScroll: function(e) {

// console.log(e)
let _this = this;
var query = wx.createSelectorQuery()
query.select('.textarea').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res) {
  console.log(res)
  // res[0].top       // #the-id节点的上边界坐标
  // res[1].scrollTop // 显示区域的竖直滚动位置
})

},
onShow: function() {

this.onPageScroll()

},

Answer 7

query.selectAll('.con-wrap-boxRight-item').boundingClientRect(function (res) {

  res.forEach(function (item) {
    if (item.top > 0 && item.top < 150) {
      var curId = item.id.substr(1);
      if (curId < 5) {
        that.setData({
          currentId: curId,
          scrollTop: '0'
        })
      } else {
        that.setData({
          currentId: curId,
          scrollTop: [0.5 + (curId - 5)] * 55
        })
      }
    }
  })
}).exec();
},

Answer 8

我也需要，正在研究中

Answer 9

另一个问题下有回答