前言
之前我们把文章列表都放到scroller中了, 并且做了一个无限加载的效果。当往下越划越多,那么想返回顶部就很麻烦了。所以我们需要一个返回顶部的按钮
项目地址:https://github.com/cctyl/sunofbeach_mobile.git
实现思路
这一期比较麻烦一点,因为我不仅想要返回顶部,我还想要一个动画效果。([笑]sob主站的返回顶部按钮是没有滚动效果的)
可惜了,scroller组件的滚动效果没有动画,所以我们就不能用它自带的 scrollTo属性了。
另辟蹊径,观察scroller的滚动动画,每次它滚动,都会在 nut-vert-list 这个div上加上 transform 和transition 样式。
我们就模仿它,在页面初始化时,我们用document拿到这个div,存起来,等会滚动时,我们就自己给它加上动画效果。
具体实现
按钮结构
首先是返回顶部按钮。这个按钮我们就不自己写了,用nutui的返回顶部按钮。
https://nutui.jd.com/2x/#/backtop
本来这个滚动动画直接就让它来实现了,但是使用起来,发现非常的不好用,显示都显示不出来,所以我们就只需要他的样式和结构,剩下我们自己写。
不废话了,直接上代码
<nut-backtop
:class="{show: isShowBacktop }"
@click="backToTop"
el-id="app"
:bottom="20"
:right="20"
:z-index="10"
:distance="200"
>
</nut-backtop>
因为直接使用这个按钮它并不能展示出来(不知道什么原因),我们就手动给他绑定个样式 ,由isShowBacktop属性控制(这个show样式是nut-backtop属性自带的)。 给nut-scroller组件绑定上 @scrollChange="scrollChange"
方法,监听当前页面的滚动距离,超过一定距离就让按钮显示
/**
* 页面滚动时的回调
*/
scrollChange(scrollY) {
this.currentScroll = scrollY
if ((-scrollY) > 200) {
this.isShowBacktop = true
} else {
this.isShowBacktop = false
}
},
滚动效果
首先,在mounted中找到这个滚动的容器
let _this = this
//找到这个滚动的容器
setTimeout(()=>{
_this.scrollElem = document.getElementsByClassName('nut-vert-list')[0]
},500)
然后,之前给返回顶部按钮绑定了一个点击事件,我们在这个事件里对这个按钮进行操作
/**
* 返回页面顶部
*/
backToTop() {
this.scrollElem.style = 'min-height: auto; transform: translate3d(0px, -1px, 0px); transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1) 0s;'
},
就实现了一个非常漂亮的滚动效果(累死我了,找了好久才找到一个好的解决办法)