小程序之设置 scroll-view区域 滚动到最底部

参考网址
https://blog.youkuaiyun.com/aydongzhiping/article/details/79976846
https://blog.youkuaiyun.com/java558/article/details/86001064

注意，如果按以下两种方法中的步骤，都未实现效果，请检查

1  scroll-view 的style样式中，height 值不能为 100%

2  请打印所遍历的数组 this.data.consult.length 是否有值

方法1

通过绑定 scroll-view 的 scroll-top 属性，在每次监听到事件或者websocket回调时设置其值，当大于scroll-view的列表高度的时候就会显示到最底部了。

wxml

<scroll-view scroll-y='true' scroll-top="{{scrollTop}}"><scroll-view>

js

Page({
  data:{
    scrollTop: 0;
  },
  sendMessage: function(){
    var len = this.data.consult.length //遍历的数组的长度
      this.setData({
        scrollTop: 1000 * len  // 这里我们的单对话区域最高1000，取了最大值，应该有方法取到精确的
      });
  }
})

方法2

通过 scroll-into-view=’{{toView}}’ 属性来控制

步骤

将所有msg都编号如：msg-0，msg-1，msg-2… 直接锁定最后一条msg，滚动到那里。
在scroll-view中添加：scroll-into-view='{{toView}}'，
在wx:for后面添加：wx:for-index="index"，
在每个msg布局中添加：id='msg-{{index}}'，
最后直接：

this.setData({
	toView: 'msg-' + (msgList.length - 1)
})

wxml

<scroll-view scroll-y="true" scroll-into-view="{{toView}}" class="history" scroll-top="{{scrollTop}}" >
 <block wx:for="{{history}}" wx:for-index="index" wx:key='key'>   
      <view class="chat-news" wx:if="{{item.uid == session_id}}"  id="msg-{{index}}">
          自己的历史消息 msg-{{index}}
          <view style="text-align: right;padding-right: 20rpx;">
              <image class='new_img' src="{{userInfo.avatarUrl}}"></image>
          </view>
      </view> 
   </block>
</scroll-view>

js

Page({
  data:{
    scrollTop: 0,
    toView:''
  },
  sendMessage: function(){
  
    var len = res.data.shuju.length;
    console.log(len);
    
    if(res.data.status == 1){
      that.setData({
        history: res.data.shuju,
        toView: 'msg-' + (res.data.shuju.length - 1)
      });
  }
  
})