小程序上拉下拉共存时不可使用scroll-view的解决方法

时间:2023-03-08 18:24:25

使用 bindscrolltolower ,必须搭配使用的 scroll-view 会导致小程序 "enablePullDownRefresh": true 下拉不能使用。

解决方法,就是当两者同时存在时,改 scroll-view 为 view ,改 bindscrolltolower 为 onReachBottom 函数。

这样在上拉加载,跟下拉刷新同时存在的时候, "enablePullDownRefresh": true 就可以生效了。

  • wxml
<view class="scroll-view">
<view class="view-item"><text>text1</text></view>
<view class="view-item"><text>text2</text></view>
<view class="view-item"><text>text3</text></view>
<view class="view-item"><text>text4</text></view>
<view class="view-item"><text>text5</text></view>
<view class="view-item"><text>text6</text></view>
<view class="view-item"><text>text7</text></view>
<view class="view-item"><text>text8</text></view>
<view class="view-item"><text>text9</text></view>
</view>
  • wxss
.scroll-view {
height: 1300rpx;
}
.view-item {
width: 33.333333%;
height: 300rpx;
float: left;
color: #ffff;
background: #888;
}
  • js
Page({
data: { },
onLoad: function(option) {
wx.request({ },
success: function(res) { }
});
},
// 加载数据函数
onReachBottom: function(event) {
console.log("到底了");
},
})