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.
61 lines
1.4 KiB
61 lines
1.4 KiB
<template>
|
|
<view class="gui-totop gui-fade-in"
|
|
hover-class="gui-tap"
|
|
v-if="show"
|
|
@tap="totop"
|
|
:style="{
|
|
bottom:bottom,right:right,
|
|
backgroundColor:background,zIndex:zIndex,
|
|
borderRadius:borderRadius
|
|
}">
|
|
<text class="gui-icons gui-block-text gui-totop-text"
|
|
:style="{
|
|
color:color,
|
|
fontSize:fontSize
|
|
}"></text>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default{
|
|
name : "gui-totop",
|
|
props : {
|
|
top : { type : Number, default : 0 },
|
|
color : { type : String, default : "#008AFF" },
|
|
bottom : { type : String, default : "80rpx" },
|
|
right : { type : String, default : "30rpx" },
|
|
background : { type : String, default : "#FFFFFF"},
|
|
borderRadius : { type : String, default : "6rpx" },
|
|
zIndex : { type : Number, default : 9},
|
|
fontSize : { type : String, default : "44rpx" }
|
|
},
|
|
data() {
|
|
return {
|
|
show : false,
|
|
timer : null
|
|
}
|
|
},
|
|
watch:{
|
|
top : function(topVal){
|
|
if(this.timer != null){clearTimeout(this.timer);}
|
|
this.timer = setTimeout(()=>{
|
|
this.show = topVal > 100 ? true : false;
|
|
}, 80);
|
|
}
|
|
},
|
|
methods:{
|
|
totop : function(){
|
|
// #ifndef APP-NVUE
|
|
uni.pageScrollTo({
|
|
scrollTop:0,
|
|
duration:100
|
|
})
|
|
// #endif
|
|
this.$emit('totop');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gui-totop{width:80rpx; height:80rpx; position:fixed;}
|
|
.gui-totop-text{width:80rpx; height:80rpx; line-height:80rpx; font-size:38rpx; text-align:center;}
|
|
</style>
|