1. 程式人生 > >解決微信小程式元件scroll-view中bindscrolltolower事件觸發不了的問題

解決微信小程式元件scroll-view中bindscrolltolower事件觸發不了的問題

微信小程式學習了有一段時間了,在學習的過程中遇到了很多的問題。今天我就來和大家分享一下我在使用scroll-view元件時遇到的關於bindscrolltolower事件觸發不了的問題。

scroll-view是微信小程式中的一個檢視容器元件,用來顯示可滾動的檢視區域。例如下圖這個電影預告的小程式,當把滾動條拖動到最底部時,可以觸發一個scrolltolower事件,執行後續的功能。

這裡寫圖片描述

可是當我寫完程式碼後,發現死活觸發不了這個事件,微信開發者工具也不報錯,官方文件裡也沒有寫明有什麼注意事項。經過研究,發現有2種方法可以解決。

第一種是為這個scroll-view設定一個固定的高度,例如style=”height:800px”,但是注意這個高度不能過大也不能過大,過小的話就沒法把scroll-view裡面的檢視內容顯示完整了,例如下圖這樣的情況。

這裡寫圖片描述
而高度過大的話又會出現下圖這樣產生空白的情況。

這裡寫圖片描述
因此如果不確定應該設定多少高度的話,可以使用第二種方法:就是為這個scroll-view以及page的高度都設定為100%,就如下圖這樣,同樣可以解決scrolltolower事件觸發不了的問題。
這裡寫圖片描述