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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM