uni-app返回顶部效果

实现屏幕滚动超过200时候显示返回顶部的按钮，点击返回顶部的效果

html:

<!-- 返回顶部 -->
<view class="scroll_top" @tap="topScrollTap" :class="[scrollTop ? 'active' : '','']">
	<text class="iconfont icon-toTop"></text>
</view>

js:

data() {
    return {
        scrollTop: false
    }
},
methods: {
    //点击返回顶部
    topScrollTap() {
        uni.pageScrollTo({
        	scrollTop: 0,
        	duration: 300
        });
    }
},
//监听页面滚动
onPageScroll(e) {
    if (e.scrollTop > 200) {
        this.scrollTop = true;
    } else {
        this.scrollTop = false;
    }
}

css：

//返回顶部
.scroll_top {
    background: rgba(51, 51, 51, .8);
    width: 70rpx;
    height: 70rpx;
    border-radius: 70rpx;
    text-align: center;
    line-height: 70rpx;
    color: #fff;
    position: fixed;
    z-index: 99;
    zoom: 1;
    right: 20px;
    bottom: 25px;
    opacity: 0;
    transform: translateY(56px) translateX(0);
    transition: all .4s ease 0s;
    transform-origin: center;
}

.scroll_top.active {
    opacity: 1;
    transform: translateY(-25px) translateX(0);
}

效果：

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/654

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！