整理3种常用滚动到底部的方法

滚动到底部的常见需求多来自于消息的聊天对话框
场景一:小程序聊天对话框滚动到底部实现

  data: {
    scrollTop: 10000000
  },
  getPrivateLetterInfo(){
  //在请求数据完成之后,直接设置就好,就可以让对话框滚动条置于底部
       this.setData({
       scrollTop: 10000000000000
     })
  }

场景二:pc端在vue中利用jquery将消息对话框滚动条置于最底部(在消息请求完成以后调用此方法就行)

	methods:{
	     setBottom(){
	       setTimeout(()=>{
	         $('#top').scrollTop(10000)
	       },100)
	     }
	 }
    mounted(){
      this.setBottom();
    }

场景三:因为尝试用原生的网上的方法,但是scrollTop一直为0,我解决不了,于是就放弃了那个方法,选择了下面这个方法,实现了滚动条保持在最底部注意滚动产生的元素是外部包裹元素,不是每一条消息内容
下面这个div是产生滚动条的元素

<div class='scroll-div' ref="scrollContent">
</div>
methods:{
    // 滚送到底部
    setBottom(){
      const me = this;
      setTimeout(()=>{
        this.$nextTick(() => {//一定要在this.$nextTick进行设置
          me.$refs.scrollContent.scrollTop = 100000;
        })
      },100)
    },
},
  created(){
    this.setBottom();
  },
 updated:function(){
   this.setBottom();
 }

注意在消息请求完成之后需要调用一次该函数,才能将消息置于最底部.