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

参考网址
https://blog.csdn.net/aydongzhiping/article/details/79976846
https://blog.csdn.net/java558/article/details/86001064

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

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

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

方法1

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

wxml


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


    
      
          自己的历史消息 msg-{{index}}
          
              
          
       
   

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)
      });
  }
  
})

你可能感兴趣的:(小程序)