35 lines
751 B
Vue
35 lines
751 B
Vue
<!--回到顶部按钮
|
||
-->
|
||
<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>
|