scroll-view 滾動到頂部下拉刷新卡住

描述:微信小程序用戶消息頁下拉刷新加載歷史記錄,偶爾出現卡住現象

原因:Bindscrolltoupper事件不能百分之百每次都觸發

可能存在的原因可能有:

  1. scroll-view沒有設置高度,單位不能是%,必須是px;
  2. 設置scroll-y屬性
  3. 當快速滾動屏幕到頂時不是每次scrollTop值都爲0;
  4. <scroll-view>的下級子元素是否有兩個或多個同級元素——用一個view來包裹

解決:

<scroll-view style="height:{{scrollHeight}}px;"

scroll-y="true"

bindscrolltoupper="onupper"

throttle = "{{false}}"    // 添加該屬性解決問題

upper-threshold="{{0}}"  //默認是50

bindscroll="onscroll"

scroll-top="{{scrollTop}}">

 

注:iOS添加throttle = "{{false}}"屬性後可能出現加載消息後頁面消息跳動,解決方法:

在頁面下拉滾動時,scrollTop===0再加載加載歷史消息。

onupper: function() {

      addMoreMsg.call(this); //加載歷史消息

    },

    onscroll: function(e) {

      let that = this;

      let scrollHeight = e.detail.scrollHeight;

      lastScrollTop = e.detail.scrollTop;

      if (e.detail.scrollTop === 0) {

        isBackToUpper = true;

        addMoreMsg.call(that);  //加載歷史消息

      } else {

        isBackToUpper = false;

      }



      if (lastScrollHeight < scrollHeight) {

          that.setData({

            scrollTop: lastScrollTop + (scrollHeight - lastScrollHeight)

          });

          lastScrollHeight = scrollHeight;

      }

    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章