uniapp实现返回顶部

应用场景

在uniapp中文章页或者长列表页实现返回顶部的效果。

实现代码

<template>
    <view class="news_detail_container">
        <view class='back_btn' v-show="showBack" @tap="handleTop">
            <img class="back_icon" src="../../static//icons/top.png" alt="">
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showBack: false
        }
    },
    methods: {
        handleTop() {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 300
            });
        },
    },
    // 页面滚动距离超过100才显示返回顶部的按钮
    onPageScroll(e){
        this.showBack=e.scrollTop>100
    }
}
</script>

<style>
.back_icon {
    width: 68rpx;
    height: 68rpx;
}
.back_btn{
    position: fixed;
    bottom: 200rpx;
    right: 30rpx;
}
</style>