uniapp 返回顶部
<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.cnblogs.com/sxdpanda/p/13246272.html
如需了解更多文章,请移步:https://www.yuque.com/sxd_panda