uniapp返回顶部功能
文章描述：
uniapp如何制作一个返回顶部功能
template
<template>
<view class="page">
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="item"></view>
<view class="btn" @tap="toTop" :style="{'display':(flag===false? 'none':'block')}">
<text class="Icon-top">Top</text>
</view>
</view>
</template>style
.page{}
.item:nth-child(1n){ width: 100%; height: 420upx; background: #03d3f5; }
.item:nth-child(2n){ width: 100%; height: 420upx; background: #4fe893; }
.item:nth-child(3n){ width: 100%; height: 420upx; background: #ff9600; }
.btn {
position: fixed;
z-index: 9999;
right: 16px;
bottom: 100px;
background-color: #007AFF;
padding: 5px;
display: none;
border-radius: 4px;
}
.Icon-top {
font-size: 30upx;
color: #FFFFFF;
}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
}
}
}
}
发布时间：2022/03/02
发表评论