微信小程序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;
})
});