微信小程式scroll view滾動到最底部

2022-09-01 23:15:38 字數 567 閱讀 2381

實現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

data中資料:

pagetop: 0,

text: "",

recognitionnow: "recognition0"

js邏輯 (偽**)

ajax(res=> )

});

微信小程式 scroll view元件

scroll view為滾動檢視,分為水平滾動和垂直滾動。注意滾動檢視垂直滾動時一定要設定高度否則的話scroll view不會生效。滾動檢視常用的地方一般都是item項比較多的介面,比如我的模組 主要屬性 使用演示 wxml scroll y true style height 200px sty...

微信小程式 scroll view下拉重新整理

需求描述 1.首先我的scroll view部分是巢狀在template內 2.應用template的頁面頂部還有乙個日期選擇picker且位置固定 3.下拉重新整理當前頁面 重新整理請求 utils news.getnews function result settimeout function ...

微信小程式 scroll view元件(有坑)

根據官方給的案例,我感到深深的無力感,設定橫向滾動時怎麼都滾動不了,其中的苦就不多說,直接說乾貨。各種引數去看開發文件吧。index.wxss vertical scroll horizontal scroll scroll view item h bc green scroll view item...