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上再设一下透明度