scrollview里面嵌套一个view,监听滑动函数,判断上下滑动距离进行上拉下拉功能,控制了灵敏度
<scroll-view id="scroll-wrap" scroll-y class="chat-content" scroll-into-view="{{scrollId}}">
<view id="inner-wrap" bindtouchstart="start_fn" bindtouchend="end_fn">
</view>
</scroll-view>
page({
...
height: 0,
innerHeight: 0,
scrollTop: 0,
startScroll: 0,
touchDown: 0,
...
start_fn: function (e) {
let that = this
this.touchDown = e.touches[0].clientY
wx.createSelectorQuery().select('#inner-wrap').boundingClientRect(function (react) {
this.innerHeight = react.height
}).exec()
wx.createSelectorQuery().select('#scroll-wrap').fields({
scrollOffset: true,
size: true
},function (react) {
console.log('scroll===',react)
this.startScroll = react.scrollTop
this.height = react.height
}).exec()
},
end_fn: function (e) {
let currentY = e.changedTouches[0].clientY
let that = this
let { startScroll, innerHeight, height, touchDown } = this
if (currentY > touchDown && currentY - touchDown > 20 && startScroll == 0) {
// 下拉刷新
} else if (currentY < touchDown && touchDown - currentY >= 20 && innerHeight - height == startScroll) {
// 上拉加载
}
},
...
})