yitisheng-mini-app/components/my-top-button.vue

35 lines
751 B
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--回到顶部按钮
-->
<script>
export default {
name: "my-top-button",
data(){
return{
topFlag:false
}
},
methods: {
top() { //回到顶部
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
},
},
onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
//当距离大于600时显示回到顶部按钮//当距离小于600时隐藏回到顶部按钮
this.topFlag = e.scrollTop > 600;
}
}
</script>
<template>
<view class="top" style="transition: 0.3s;" :style="{'display':(topFlag===true? 'block':'none')}">
<uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons>
</view>
</template>
<style scoped lang="scss">
</style>