...
|
...
|
@@ -16,6 +16,12 @@ |
|
|
<script>
|
|
|
export default {
|
|
|
name: 'Scroller',
|
|
|
props: {
|
|
|
topDistance: {
|
|
|
type: Number,
|
|
|
default: 50
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
distance: 0,
|
...
|
...
|
@@ -54,7 +60,7 @@ export default { |
|
|
this.startY = e.touches[0].clientY;
|
|
|
if (this.$el.scrollTop === 0) {
|
|
|
this.transition = false;
|
|
|
this.topStatus = '';
|
|
|
this.topStatus = 'pull';
|
|
|
}
|
|
|
},
|
|
|
touchmove(e) {
|
...
|
...
|
@@ -63,9 +69,9 @@ export default { |
|
|
|
|
|
this.direction = distance > 0 ? 'down' : 'up';
|
|
|
|
|
|
if (this.direction === 'down' && this.$el.scrollTop === 0) {
|
|
|
if (this.direction === 'down' && this.$el.scrollTop === 0 && this.topStatus) {
|
|
|
this.distance = distance;
|
|
|
if (this.distance > 50) {
|
|
|
if (this.distance > this.topDistance) {
|
|
|
this.topStatus = 'drag';
|
|
|
}
|
|
|
}
|
...
|
...
|
@@ -73,17 +79,18 @@ export default { |
|
|
touchend() {
|
|
|
if (this.direction === 'down' && this.$el.scrollTop === 0) {
|
|
|
this.transition = true;
|
|
|
if (this.topStatus) {
|
|
|
if (this.topStatus === 'drag') {
|
|
|
this.styleTop = {
|
|
|
marginTop: '0'
|
|
|
};
|
|
|
}
|
|
|
if (this.distance > 50 && !this.isLoading) {
|
|
|
this.isLoading = true;
|
|
|
this.$emit('loading');
|
|
|
if (!this.isLoading) {
|
|
|
this.isLoading = true;
|
|
|
this.$emit('loading');
|
|
|
}
|
|
|
}
|
|
|
this.distance = 0;
|
|
|
}
|
|
|
this.topStatus = '';
|
|
|
}
|
|
|
}
|
|
|
};
|
...
|
...
|
|