小程序学习之路三：让scroll-view容器内的内容自动滚动到底部

案例:

消息列表充满屏幕的时候，底部永远要展示新消息，也就是说要让最新的数据自动向上滚动，这需要用到scroll-view的一个属性，scroll-top：设置竖向滚动条位置，效果如下：

QQ20190627-114821.gif

注意：仔细阅读官网文档中关于scroll-view的特性介绍[https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)

1、WXML中的scroll-view

 
    
        
        
        
          
            {{item.content}}
          
          
            
          
        
        
        
          
            
          
          
            {{item.fromAccountNick}}
            {{item.content}}
          
        
      
    
  

2、JS中计算scroll-view需要滚动到的位置

  receiveMsgs: function(data) {
    console.log('receiveMsgs', data);
    let msgs = this.data.msgs || [];
    msgs.push(data);
    this.setData({
      msgs: msgs
    },()=>{
      //确定在收到新消息的时候更新高度
      this.goToBottom();
    });
  },
  // 容器滚动到底部
  goToBottom() {
    const query = wx.createSelectorQuery().in(this);

    query.select('.scorllView').boundingClientRect();
    query.select('.msgList').boundingClientRect();
    query.exec(res => {
      const scorllHeight = res[0].height;
      const listHeight = res[1].height;

      this.setData({
        scrollTop: listHeight - scorllHeight
      });
    });
  },