描述:微信小程序用戶消息頁下拉刷新加載歷史記錄,偶爾出現卡住現象
原因:Bindscrolltoupper事件不能百分之百每次都觸發
可能存在的原因可能有:
- scroll-view沒有設置高度,單位不能是%,必須是px;
- 設置scroll-y屬性
- 當快速滾動屏幕到頂時不是每次scrollTop值都爲0;
- <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;
}
}