uniapp，实现返回顶部按钮功能以及css微动画

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
				})
			}
		},

效果图

---

总结

好了今天的小功能就分享到这里，有帮助到你的话点个关注和赞赞。