1.根目录components文件里,创建totop文件、totop.vue页面
<template>
<view class="page">
<view class="btn" @tap="toTop" :style="{'display':(isTop===false? 'none':'block')}">
<tui-icon name="arrowup" :size="32" color="#fff" ></tui-icon>
</view>
</view>
</template>
<script>
export default{
name:"totop",
props:{
isTop:{
type:Boolean,
default:false
}
},
methods:{
toTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 200,
});
},
}
}
</script>
<style scoped>
.btn {
position: fixed;
z-index: 999;
right: 16px;
bottom: 100px;
background-color: #007AFF;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: none;
}
</style>
2.应用到demo.vue
<template>
<view class="page">
...
<totop :isTop="isTop"></totop>
</view>
</template>
<script>
export default{
data(){
return{
isTop: false,
}
},
methods:{
onPageScroll(e) {
this.isTop= e.scrollTop > 10?true:false;
},
},
}
</script>