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