关于小程序scroll-view组件更新时底部显示

在小程序开发中,需求是scroll-view组件在出现滚动条时,默认显示最底部内容。做这个我们需要用到scroll-view组件的scroll-top属性, 在开发遇到的坑。
坑:绑定scroll-view的scroll-top属性,在每次监听到事件或者websocket回调时设置其值,当大于scroll-view的列表高度的时候就会显示到最底部了。但是会出现内容被顶上去,下边出现空白区域。

rolling_bottom: function(){
    var len = this.data.list.length //遍历scroll-view列表的数组的长度
      this.setData({
        scrollTop: 1000 * len  // 这里我们的单对话区域最高1000,取最大值
      });
  }

关于小程序scroll-view组件更新时底部显示_第1张图片
总结:这是我们没有拿到精确的scroll-view列表在视图的高度,所以出现空白区域

解决方法:
// 滚动条底部事件

 rolling_bottom: function () {
    
    var that = this
    var tab_con = wx.createSelectorQuery().select('#tab-con')
    tab_con.boundingClientRect(function (res) {
      let view_height = res.height   
      wx.getSystemInfo({
        success: function (res) {
          let scroll_view_height = (res.windowHeight * 0.93).toFixed(0)
          if (view_height >= scroll_view_height){
            let height = view_height - scroll_view_height
            that.setData({
                 top: height
            });
          }   
        }
      })

    }).exec(
    )
 },

完美解决
关于小程序scroll-view组件更新时底部显示_第2张图片
关于小程序scroll-view组件更新时底部显示_第3张图片

你可能感兴趣的:(微信小程序开发)