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.
166 lines
3.6 KiB
166 lines
3.6 KiB
<template>
|
|
<view>
|
|
<movable-area :style="'height:' + scrollHeight + 'px;width:100%'">
|
|
<movable-view
|
|
:style="'height:' + (topHeight + scrollHeight) + 'px;width:100%;z-index:3'"
|
|
direction="vertical"
|
|
:out-of-bounds="true"
|
|
:disabled="!scrollmark || status == 3"
|
|
:y="y"
|
|
:damping="50"
|
|
@touchstart="touchstart"
|
|
@touchend="touchend"
|
|
@change="change"
|
|
>
|
|
<view :style="'height:' + topHeight + 'px;position:relative'"><slot name="top"></slot></view>
|
|
<scroll-view
|
|
:style="'height:' + scrollHeight + 'px;'"
|
|
:scroll-y="status !== 3"
|
|
:scroll-with-animation = "true"
|
|
@scroll="scroll"
|
|
@scrolltolower="scrolltolower" >
|
|
<view>
|
|
<slot name="vue-mes"></slot>
|
|
</view>
|
|
</scroll-view>
|
|
<view>
|
|
<slot name="bottom"></slot>
|
|
</view>
|
|
</movable-view>
|
|
</movable-area>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
downLoading: {
|
|
//控制下面下拉加载区的显示 , 默认关闭
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// scrollHeight: {
|
|
//scroll显示区的高度(px)
|
|
// type: Number,
|
|
// default: 0
|
|
// },
|
|
topHeight: {
|
|
//下拉区的高度(px)
|
|
type: Number,
|
|
default: 40
|
|
},
|
|
interruptPosition: {
|
|
//暂停区的高度(px)
|
|
type: Number,
|
|
default: 50
|
|
},
|
|
damping: {
|
|
//回弹动画的速度 , 值越大越快
|
|
type: Number,
|
|
default: 50
|
|
},
|
|
scrollTop:{
|
|
//即scroll-top属性 设置竖向滚动条位置
|
|
type:Number,
|
|
default:0
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
isTouch: false,//触摸的标识
|
|
y: 0,//控制y
|
|
diff: 0,//定值topHeight-interruptPotion
|
|
scrollmark: true,
|
|
timeId: null,
|
|
top: 0,
|
|
status: 0,
|
|
count: 0.01,
|
|
scrollCount: 0.01,
|
|
scrollHeight:0
|
|
};
|
|
},
|
|
changePositon(){
|
|
|
|
},
|
|
created() {
|
|
this.y = -this.topHeight;
|
|
this.diff = this.interruptPosition - this.topHeight;
|
|
// if(this.$wechat.isWechat()){
|
|
this.scrollHeight = uni.getSystemInfoSync().windowHeight;
|
|
// }else{
|
|
// this.scrollHeight = uni.getSystemInfoSync().windowHeight;
|
|
// }
|
|
},
|
|
methods: {
|
|
change(e) {
|
|
//为3即是正在回弹状态
|
|
if (this.status == 3 || !this.isTouch) return;
|
|
if (e.detail.y >= this.diff) {
|
|
this.status = 2;
|
|
} else if (e.detail.y < this.diff) {
|
|
this.status = 1;
|
|
}
|
|
},
|
|
touchstart(e) {
|
|
if (this.status == 3) {
|
|
return;
|
|
}
|
|
this.isTouch = true;
|
|
},
|
|
touchend(e) {
|
|
if (this.status == 3) return;
|
|
this.isTouch = false;
|
|
if (this.scrollmark) {
|
|
if (this.status == 2) {
|
|
this.status = 3;
|
|
this.y = this.diff;
|
|
this.$emit('interrupt', () => {
|
|
this.y = -this.topHeight - 0.02;
|
|
setTimeout(() => {
|
|
this.$emit('finished');
|
|
this.status = 0; //回弹过程中
|
|
}, 200);
|
|
});
|
|
} else if (this.status == 1) {
|
|
this.status = 3;
|
|
this.y = -this.topHeight + this.count;
|
|
//微小改变 否则无响应
|
|
this.count = -this.count;
|
|
setTimeout(() => {
|
|
this.status = 0; //回弹过程中
|
|
}, 200);
|
|
}
|
|
}
|
|
},
|
|
|
|
scroll(e) {
|
|
//事件
|
|
this.$emit('scroll',e)
|
|
clearTimeout(this.timeId);
|
|
this.scrollmark = false;
|
|
this.timeId = setTimeout(() => {
|
|
if (e.detail.scrollTop <= 15 || e.detail.scrollTop - e.detail.deltaY <= 0) {
|
|
this.top = 0 + this.count;
|
|
this.$emit('scrolltoupper',e)
|
|
this.scrollCount = -this.scrollCount;
|
|
this.scrollmark = true;
|
|
}
|
|
}, 100);
|
|
},
|
|
scrolltolower(e){
|
|
this.$emit('scrolltolower',e);
|
|
}
|
|
},
|
|
watch: {
|
|
status(value) {
|
|
if (this.status == 2) this.$emit('pushToInterrupt');
|
|
else if (this.status == 1) this.$emit('backToInterrupt');
|
|
},
|
|
scrollTop(){
|
|
this.top = this.scrollTop;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|
|
|