uni-app 回到页面顶部

 html

<view class="top" :style="{'display':(topState===true? 'block':'none')}">
    <uni-icons class="topc" type="arrowthinup" size="50" @click="top"></uni-icons>
</view>

 js

data() {
    return {
       topState:false
    }
},

onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
    if(e.scrollTop>600){ //当距离大于600时显示回到顶部按钮
        this.topState = true
    }else{ //当距离小于600时显示回到顶部按钮
        this.topState = false
    }
},

methods: { 
　　top() { //回到顶部  
　　　　uni.pageScrollTo({ 
　　　　　　scrollTop: 0, duration: 300 
　　　　}); 
　　} 
}

css

/* 回到顶部 */
    .top {
        position: relative;
        display: none; /* 先将元素隐藏 */
    }
 
    .topc {
        position: fixed;
        right: 0;
        background: #F0F0F0;
        top: 70%;
        height: 50px;
        line-height: 50px;
    }

 

 

本文转载自：https://blog.csdn.net/qq_41956789/article/details/103530842