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.
125 lines
3.5 KiB
125 lines
3.5 KiB
<template>
|
|
<view
|
|
class="gui-page-refresh gui-flex gui-rows gui-justify-content-center gui-align-items-center"
|
|
:style="{
|
|
height:refreshHeight+'px',
|
|
backgroundColor:refreshBgColor[refreshStatus]}"
|
|
:class="[refreshStatus == 3 ? 'gload-hide' : '']">
|
|
<text class="gui-page-refresh-icon gui-icons gui-block-text"
|
|
v-if="refreshStatus == 0 || refreshStatus == 1"
|
|
:style="{
|
|
fontSize:refreshFontSize,
|
|
color:refreshColor[refreshStatus]
|
|
}"></text>
|
|
<view class="gui-page-refresh-icon" ref="loadingIcon" v-if="refreshStatus == 2" >
|
|
<text class="gui-icons gui-rotate360 gui-block-text"
|
|
:style="{
|
|
fontSize:refreshFontSize,
|
|
color:refreshColor[refreshStatus]
|
|
}"></text>
|
|
</view>
|
|
<text class="gui-page-refresh-icon gui-icons"
|
|
v-if="refreshStatus == 3"
|
|
:style="{
|
|
fontSize:refreshFontSize,
|
|
color:refreshColor[refreshStatus]
|
|
}"></text>
|
|
<text class="gui-page-refresh-text gui-block-text"
|
|
:style="{
|
|
fontSize:refreshFontSize,
|
|
color:refreshColor[refreshStatus]
|
|
}">{{refreshText[refreshStatus]}}</text>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
// #ifdef APP-NVUE
|
|
var animation = weex.requireModule('animation');
|
|
const dom = weex.requireModule('dom');
|
|
// #endif
|
|
export default{
|
|
name : "gui-refresh",
|
|
props : {
|
|
refreshText : {type:Array, default:function () {
|
|
return ['继续下拉刷新','松开手指开始刷新','数据刷新中','数据已刷新'];
|
|
}},
|
|
refreshBgColor : {type:Array, default:function () {
|
|
return ['#FFFFFF','#FFFFFF','#FFFFFF','#63D2BC'];
|
|
}},
|
|
refreshColor : {type:Array, default:function () {
|
|
return ['rgba(69, 90, 100, 0.6)','rgba(69, 90, 100, 0.6)','#63D2BC','#FFFFFF'];
|
|
}},
|
|
refreshFontSize : {type:String, default:'26rpx'}
|
|
},
|
|
data() {
|
|
return {
|
|
reScrollTop : 0,
|
|
refreshHeight : 0,
|
|
refreshY : 0,
|
|
refreshStatus : 0,
|
|
refreshTimer : 0
|
|
}
|
|
},
|
|
methods:{
|
|
touchstart : function (e){
|
|
if(this.reScrollTop > 10){return ;}
|
|
this.refreshY = e.changedTouches[0].pageY;
|
|
},
|
|
touchmove : function(e){
|
|
if(this.refreshStatus >= 1){ return null;}
|
|
if(this.reScrollTop > 10){return ;}
|
|
var moveY = e.changedTouches[0].pageY - this.refreshY;
|
|
moveY = moveY / 2;
|
|
if(moveY >= 50){
|
|
moveY = 50;
|
|
this.refreshStatus = 1;
|
|
}
|
|
if(moveY > 15){this.refreshHeight = moveY;}
|
|
},
|
|
touchend : function (e) {
|
|
if(this.reScrollTop > 10){return ;}
|
|
if(this.refreshStatus < 1){
|
|
return this.resetFresh();
|
|
}else if(this.refreshStatus == 1){
|
|
this.refreshStatus = 2;
|
|
// #ifdef APP-NVUE
|
|
setTimeout(()=>{
|
|
this.rotate360();
|
|
}, 200);
|
|
// #endif
|
|
this.$emit('reload');
|
|
}
|
|
},
|
|
scroll:function(e){
|
|
this.reScrollTop = e.detail.scrollTop;
|
|
},
|
|
endReload : function(){
|
|
this.refreshStatus = 3;
|
|
setTimeout(()=>{this.resetFresh()}, 1000);
|
|
},
|
|
resetFresh : function () {
|
|
this.refreshHeight = 0;
|
|
this.refreshStatus = 0;
|
|
return null;
|
|
},
|
|
rotate360 : function(){
|
|
var el = this.$refs.loadingIcon;
|
|
animation.transition(el, {
|
|
styles : {transform: 'rotate(7200deg)'},
|
|
duration : 20000,
|
|
timingFunction: 'linear',
|
|
needLayout :false,
|
|
delay: 0
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gui-page-refresh{overflow:hidden}
|
|
.gui-page-refresh-text{line-height:32rpx;}
|
|
.gui-page-refresh-icon{padding:0 12rpx; line-height:40rpx;}
|
|
/* #ifndef APP-NVUE */
|
|
@keyframes gload-hide{0%{opacity:1; height:50px;} 70%{opacity:1; height:50px;} 100%{opacity:0; height:0px;}}
|
|
.gload-hide{animation:gload-hide 1s linear;}
|
|
/* #endif */
|
|
</style>
|