uni-app 最美的回到頂部

html

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

data() {
      return {
           flag:false
        }
},
methods: {
    top() { //回到頂部
        uni.pageScrollTo({
            scrollTop: 0,
            duration: 300
        });
    },
    onPageScroll(e){ //根據距離頂部距離是否顯示回到頂部按鈕
        if(e.scrollTop>600){ //當距離大於600時顯示回到頂部按鈕
            this.flag=true
        }else{ //當距離小於600時隱藏回到頂部按鈕
            this.flag=false
        }
    },
}
css

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

可以自已換成自已的圖片,在CSS上再設一下透明度