获取容器高度，使页面滚动到容器底部

发表于 更新于 分类于 
1
2
3
4
5
6
7
8
9
// 获取容器高度，使页面滚动到容器底部
pageScrollToBottom: function() {
  wx.createSelectorQuery().select('#j_page').boundingClientRect(function(rect){
    // 使页面滚动到底部
    wx.pageScrollTo({
      scrollTop: rect.bottom
    })
  }).exec()
}
1
2
3
4
5
6
7
8
9
10
11
<view class="wc-mes">
  <scroll-view
    style="height: {{height}}px"
    scroll-x="false"
    scroll-y="true"
    scroll-top="{{scrollTop}}"
  >
    <view class="scroll-content">...</view>
  </scroll-view>
</view>
<view class="wc-bar">...</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 计算滚动区域的高度
calHeight() {
  let that = this;
  wx.createSelectorQuery().select('.wc-bar').boundingClientRect(function (rect) {
    that.setData({
      height: wx.getSystemInfoSync().windowHeight - rect.height
    })
  }).exec();
}

// 计算滚动的距离
calScrollTop() {
  let that = this;
  wx.createSelectorQuery().select('.scroll-content').boundingClientRect(function (rect) {
    console.log(rect.height, that.data.height)
    if (rect.height > that.data.height) {
      that.setData({
        scrollTop: rect.height
      })
    } else {
      that.setData({
        scrollTop: 0
      })
    }
  }).exec();
}