1. 程式人生 > >小程式中scroll-view的使用

小程式中scroll-view的使用

scroll-view

可滾動檢視區域。
這裡寫圖片描述
使用豎向滾動時,需要給一個固定高度,通過 WXSS 設定 height。

動態設定滾動條位置

可以在js中設定滾動條的位置,比如我希望設定為滾動條的高度能夠撐滿除底部固定按鈕外的剩餘介面,並在每一次點選按鈕之後,往scroll-view中新增內容,並將滾動條可以移到最下方。我是這樣設定的:
//wxml頁面設定

<scroll-view style="height:{{srollHeight}}px;" scroll-y="true" scroll-top="{{scrollTop}}">
……
</scroll-view
>

//js檔案

Page({
  data: {
    scrollTop:0,
 srollHeight:300, //隨便給的一個初始高度
}})
 onShow: function () {  //在onShow中根據螢幕視窗寬度動態設定scroll-view的高度
   console.log('onShowed')
    var that = this;
    wx.getSystemInfo({
  success: function(res) {
    var height=res.windowHeight-footerpannelheight;   //footerpannelheight為底部元件的高度
that.setData({ srollHeight: height }); } }) }, clickEvent :function() //按鈕點選事件,移動滾動條 { // …… //往scroll-view中新增內容的程式碼省略; that.setData({ scrollTop: that.data.scrollTop + 1000 //為了移到最下方,所以加一個比較大的值 }); },

在這個過程中,我也遇到了幾個小問題:
1.在動態設定scroll-view高度的時候,當頁面置於tabbar且非首頁的時候,通過getSystemInfo得到的windowHeight再減去固定高度得到的值並不準確,貌似tabbar會佔用一定的高度,但是小程式中並沒有提供tabbar的高度,而頁面置於首頁或不使用tabbar時則不會出現這個問題。
2.為了移動滾動條到最下方,我的處理是直接加一個固定高度1000,其實更為準確的是加上插入內容的高度,但是因為我插入的內容的高度是不確定的,而小程式中又不支援類似於通過document獲得元件元素的方法,無法動態獲得插入內容的高度,因此只好採用這個比較笨的方法。


如有高手可以幫我解決這兩個問題,歡迎指教,不甚感激。

Bug & Tip

  1. tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 元件
  2. tip: scroll-into-view 的優先順序高於 scroll-top
  3. tip: 在滾動 scroll-view 時會阻止頁面回彈,所以在 scroll-view 中滾動,是無法觸發 onPullDownRefresh
  4. tip: 若要使用下拉重新整理,請使用頁面的滾動,而不是 scroll-view ,這樣也能通過點選頂部狀態列回到頁面頂部