uniapp，实现返回顶部按钮功能以及css微动画
前言
今天给大家带来一个小功能，返回顶部按钮（代码写的很烂，主要是看思路），写博客主要是为了记录自己写的功能，以后忘了好来看看（即将实习的学生.png）
一、思路
1.写样式： 首先是写一个返回顶部的按钮定位到你喜欢的位置(不重要，随便写)。
2.监听滑动参数： 用官方给的一个onPageScroll方法监听滑动页面的参数，判断scrollTop的值大于多少执行显示，否则就隐藏。
3.返回顶部： 给你的按钮写一个点击事件，然后用uni.pageScrollTo这个函数，在里面设置scrollTop值。
基本上就是这个思路，有其他思路的大佬可以评论区讨论。
二、代码
1.html
代码如下：
<view @click="gotop()" :style="'display:'+display" :class="pulse" class="animated" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #007AFF;display: flex;justify-content: center;line-height: 3;position: fixed;right: 50rpx;bottom: 100rpx;text-align: center;color: #FFFFFF;">
TOP //鄙人写demo喜欢写行内元素，见谅
</view>
2.js
代码如下：
data() {
return {
pulse:"pulse", //动画初始效果名 上面动态绑定的:class，css动画要自己去引入动画库（自行百度，或者有时间在给小白讲一下）
display:"none" //默认隐藏 上面动态绑定的:style
}
},
onPageScroll(e) {
// console.log(e.scrollTop)
var scrollTop = e.scrollTop //判断scrollTop 大于100就把按钮的样式改为block
if(scrollTop>=100){
this.display="block"
this.pulse="pulse" //渐入动画
}else{
this.pulse="bounceOut" //渐退动画
}
console.log(scrollTop)
},
methods: {
gotop(){
uni.pageScrollTo({
scrollTop:0, //返回到0rpx的位置
duration:200 //动画过度200ms
})
}
},
效果图
总结
好了今天的小功能就分享到这里，有帮助到你的话点个关注和赞赞。
