<template>
<view>
<view class="btn" @tap="toTop" :style="{'display':(flag===false? 'none':'block')}">
<text class="cuIcon-top"></text>
</view>
</view>
</template>
<script>
export default {
name: "upTop",
data() {
return {
flag: false,
}
},
methods: {
// 返回顶部
toTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 100,
});
},
onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
if (e.scrollTop > 10) { //当距离大于10时显示回到顶部按钮
this.flag = true
} else {
this.flag = false
}
}
}
}
</script>
<style>
.btn {
position: fixed;
z-index: 9999;
right: 16px;
bottom: 100px;
background-color: #007AFF;
padding: 5px;
display: none;
border-radius: 4px;
}
.btn .cuIcon-top {
font-size: 30px;
color: #FFFFFF;
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/158686.html
