You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.6 KiB
70 lines
1.6 KiB
5 years ago
|
Component({
|
||
|
|
data: {
|
||
|
|
lastY: '',
|
||
|
|
translateHeight: 0,
|
||
|
|
state: -1,
|
||
|
|
scrollTop: 0,
|
||
|
|
enablePulldownFresh: false
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
multipleSlots: true
|
||
|
|
},
|
||
|
|
properties: {
|
||
|
|
upperDistance: {
|
||
|
|
type: Number,
|
||
|
|
value: 80
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onPageScroll (e) {
|
||
|
|
this.data.scrollTop = e.scrollTop
|
||
|
|
this.data.enablePulldownFresh = false
|
||
|
|
},
|
||
|
|
touchstart (e) {
|
||
|
|
this.data.lastY = e.touches[0].clientY
|
||
|
|
if (this.data.scrollTop === 0) {
|
||
|
|
this.data.enablePulldownFresh = true
|
||
|
|
} else {
|
||
|
|
this.data.enablePulldownFresh = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
touchmove (e) {
|
||
|
|
let clientY = e.touches[0].clientY
|
||
|
|
let offset = clientY - this.data.lastY
|
||
|
|
if (this.data.scrollTop > 0 || offset < 0) {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
this.data.translateHeight = offset
|
||
|
|
this.data.state = 1
|
||
|
|
|
||
|
|
if (this.data.enablePulldownFresh) {
|
||
|
|
if (this.data.translateHeight > this.data.upperDistance) {
|
||
|
|
this.data.state = 2
|
||
|
|
}
|
||
|
|
this.setData({
|
||
|
|
translateHeight: this.data.translateHeight > 100 ? 100 : this.data.translateHeight,
|
||
|
|
state: this.data.state
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
touchend (e) {
|
||
|
|
if (this.data.translateHeight > this.data.upperDistance) {
|
||
|
|
if (this.data.enablePulldownFresh) {
|
||
|
|
this.setData({
|
||
|
|
translateHeight: 100,
|
||
|
|
state: 3
|
||
|
|
})
|
||
|
|
this.triggerEvent('pullDownRefresh')
|
||
|
|
}
|
||
|
|
} else if (this.data.scrollTop <= 0) {
|
||
|
|
this.stopRefresh()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
stopRefresh () {
|
||
|
|
this.setData({
|
||
|
|
translateHeight: 0,
|
||
|
|
state: -1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|