微信小程序scroll-view滚动到最底部

实现scroll-view自动滚动到最底部

原理: 1.使用scroll-view的scroll-into-view (值应为某子元素id)

            2. scroll-view最后加入一个text元素

            3. 需要跳转到最底部时,将text的id值改变为一个新值,然后在settimeout中将scroll-into-view值改为text的新id值

适用场景: scroll-view中内容变化没有规律,不是一条一条新增的。如下面的例子是显示语音识别后的文字,用户在录音时,语音识别后的文字一直加入在此区域中,想让用户看到最新的识别文字,就需要把滚动区域滚动到最底部。

其他: 如果新增内容为一条一条的列表,完全可以使用列表的id值,不需要用这样的方法

html

<scroll-view :scroll-into-view="recognitionnow" :scroll-y="true" >
  <view v-html="text"></view>
  <text :id="'recognition' + pagetop"></text>
</scroll-view>

data中数据: 

 pagetop: 0,

 text: "",
 recognitionnow: "recognition0"

js逻辑 (伪代码)

ajax(res=> {
  this.text = res.data;
  this.pagetop++;
  setTimeout(() => {
    this.recognitionnow = "recognition" + this.pagetop;
  })
});

posted @ 2020-07-29 16:52  云行月翔  阅读(5373)  评论(0编辑  收藏  举报