xing-weapp-component
xing-weapp-component copied to clipboard
Published
20 hours ago •
ianho
ianho
android手机下拉无法实现刷新
Android 没有弹簧效果无法在拉倒顶部的时候在scroll里更新状态。这种方式只适用于ios手机 ，需要靠别的方案来解决。我在想能不能在ontouchedStart 里监听去实现
问题同#6
第一步引入gestureBehavior.js, 放到组件的behaviors中, 具体代码如下
export const GESTURE_UP = 'GESTURE_UP'
export const GESTURE_DOWN = 'GESTURE_DOWN'
export const GESTURE_LEFT = 'GESTURE_LEFT'
export const GESTURE_RIGHT = 'GESTURE_RIGHT'
export default Behavior({
data: {
},
ready () {
// 手势方向
this.gestureDirection = undefined
},
methods: {
/** 手势处理 */
onTouchStart(e) {
const { detail = e } = e
const { touches: [{ pageX, pageY }] } = detail
this._lastX = pageX
this._lastY = pageY
},
onTouchMove(e) {
const { touches: [{ pageX, pageY }] } = e
// console.log('touch move', pageX, pageY)
},
onTouchEnd(e) {
const { detail = e } = e
const {
currentTarget: { id: currentTargetID },
target: { id: targetID },
changedTouches: [{ pageX, pageY }]
} = detail
const dx = pageX - this._lastX
const dy = pageY - this._lastY
this.dx = dx
this.dy = dy
if (Math.abs(dx) > Math.abs(dy)) {
// 左右方向滑动
if (dx < -10) {
// console.log('向左滑动', dx, GESTURE_LEFT)
this.gestureDirection = GESTURE_LEFT
} else if (dx > 10) {
this.gestureDirection = GESTURE_RIGHT
// console.log('向右滑动', dx, GESTURE_RIGHT)
}
} else {
//上下方向滑动
if (dy < -50) {
// console.log('向上滑动', dy)
this.gestureDirection = GESTURE_UP
} else if (dy > 50) {
this.gestureDirection = GESTURE_DOWN
// console.log('向下滑动', dy)
}
}
},
}
})
第二步引入监听scroll事件, 保存e.detail信息
_onScroll: function (e) {
...
this._scrollDetail = e.detail
...
}
第三步 监听touchend事件, 对pullDownStatus重新进行判断和设置值
pullDownStatusAdaptor (e) {
const height = this.properties.pullDownHeight;
if (isAndroid) {
// 向下滑动
if (this.gestureDirection === GESTURE_DOWN) {
const { scrollTop } = this._scrollDetail
if (scrollTop < 20 && this.dy > height) {
this.setData({
pullDownStatus: PULL_DOWN_RELEASING
})
}
}
}
// 其他逻辑保持不变
}
问题同#6
第一步引入gestureBehavior.js, 放到组件的behaviors中, 具体代码如下
export const GESTURE_UP = 'GESTURE_UP' export const GESTURE_DOWN = 'GESTURE_DOWN' export const GESTURE_LEFT = 'GESTURE_LEFT' export const GESTURE_RIGHT = 'GESTURE_RIGHT' export default Behavior({ data: { }, ready () { // 手势方向 this.gestureDirection = undefined }, methods: { /** 手势处理 */ onTouchStart(e) { const { detail = e } = e const { touches: [{ pageX, pageY }] } = detail this._lastX = pageX this._lastY = pageY }, onTouchMove(e) { const { touches: [{ pageX, pageY }] } = e // console.log('touch move', pageX, pageY) }, onTouchEnd(e) { const { detail = e } = e const { currentTarget: { id: currentTargetID }, target: { id: targetID }, changedTouches: [{ pageX, pageY }] } = detail const dx = pageX - this._lastX const dy = pageY - this._lastY this.dx = dx this.dy = dy if (Math.abs(dx) > Math.abs(dy)) { // 左右方向滑动 if (dx < -10) { // console.log('向左滑动', dx, GESTURE_LEFT) this.gestureDirection = GESTURE_LEFT } else if (dx > 10) { this.gestureDirection = GESTURE_RIGHT // console.log('向右滑动', dx, GESTURE_RIGHT) } } else { //上下方向滑动 if (dy < -50) { // console.log('向上滑动', dy) this.gestureDirection = GESTURE_UP } else if (dy > 50) { this.gestureDirection = GESTURE_DOWN // console.log('向下滑动', dy) } } }, } })第二步引入监听scroll事件, 保存e.detail信息
_onScroll: function (e) { ... this._scrollDetail = e.detail ... }第三步 监听touchend事件, 对pullDownStatus重新进行判断和设置值
pullDownStatusAdaptor (e) { const height = this.properties.pullDownHeight; if (isAndroid) { // 向下滑动 if (this.gestureDirection === GESTURE_DOWN) { const { scrollTop } = this._scrollDetail if (scrollTop < 20 && this.dy > height) { this.setData({ pullDownStatus: PULL_DOWN_RELEASING }) } } } // 其他逻辑保持不变 }
初始化ready时候, 声明_scrollDetail这个变量, 不然报错, 如
ready () {
this._scrollDetail = { scrollTop: 0 }
}
