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