使用場景:(1)自定義導航欄(2)scroll-view存在時
wxs代碼:
var touchStartVal = 0,
timeStamp = 0,
height = 0,
pullDownObj = {
isCanPullDown: true,
threshold: 50,
maxHeight: 100,
callMethodName: 'onPullDownRefresh',
pullDownAreaSelector: '.pulldown'
}
function touchStart(e, ownerInstance) {
if (pullDownObj.isCanPullDown) {
touchStartVal = e.changedTouches[0].pageY
}
}
function touchMove(e, ownerInstance) {
timeStamp = e.timeStamp
if (!pullDownObj.isCanPullDown) {
return
}
var oldHeight = height
if (oldHeight > pullDownObj.maxHeight) {
return;
}
var end = e.changedTouches[0].pageY
height = end - touchStartVal;
var deltaHeight = height - oldHeight;
deltaHeight = deltaHeight
height = pullDownObj.maxHeight >= height ? height : pullDownObj.maxHeight
var instance = ownerInstance.selectComponent(pullDownObj. pullDownAreaSelector) // 傳回元件的執行個體
instance.setStyle({
'height': height + 'px' // 支援rpx
})
}
function touchEnd(e, ownerInstance) {
if (!pullDownObj.isCanPullDown) {
return
}
var instance = ownerInstance.selectComponent(pullDownObj.pullDownAreaSelector) // 傳回元件的執行個體
if (height > pullDownObj.threshold) {
instance.callMethod(pullDownObj.callMethodName)
}
instance.setStyle({
'height': 0 + 'px' // 支援rpx
})
}
function propObserver(newValue, oldValue, ownerInstance, instance) {
pullDownObj = newValue
console.log(JSON.stringify(pullDownObj))
}
module.exports = {
touchMove: touchMove,
touchStart: touchStart,
touchEnd: touchEnd,
propObserver: propObserver
}
wxml:
<view change:prop="{{pulldown.propObserver}}"
prop="{{propValue}}" bindtouchstart='{{pulldown.touchStart}}' bindtouchmove='{{pulldown.touchMove}}' bindtouchend="{{pulldown.touchEnd}}" class='container'>
</view>
頁面js:propValue的值不可以缺失
Page({
data:{
propValue: {
isCanPullDown: true,
threshold: 50,
maxHeight: 80,
callMethodName: 'onPullDownRefresh',//觸發下拉重新整理時,會調用此方法,需在js裡面聲明
pullDownAreaSelector: ".pulldown"//展示下拉重新整理文字的dom選擇器
}
},
onPullDownRefresh(){},
onPageScroll(e) {
let scrollTop = e.scrollTop
let propValue = this.data.propValue;
let isCanPullDown = !scrollTop
if (propValue.isCanPullDown != isCanPullDown) {
propValue.isCanPullDown = isCanPullDown
this.setData({
propValue
})
}
}
})