uni-app小程序开发整体页面的返回顶部功能

我直接上代码，使用的easycom方法，方便多个页面调用

/components/u-back/u-back.vue

<template>
<view class="top" v-if="topShow" @click="goTop()">
<image src="/static/images/top.png"></image>
</view>
</template>
<script>
export default {
name: "back",
data() {
return {
topShow: false,
};
},
props: {
scrollTop: {
type: Number,
default: 0
},
},
methods: {
topData(e) {
this.topShow = e > 300
},
goTop() {
uni.pageScrollTo({
scrollTop: this.scrollTop,
duration: 300
});
},
}
}
</script>
<style scoped>
.top {
width: 60rpx;
height:60rpx;
line-height:60rpx;
text-align: center;
position: fixed;
z-index: 999;
right: 20rpx;
bottom:180rpx;
}
.top image{width:60rpx;height:60rpx;}
</style>

</template>

<view>

这里多加一些内容 例如 易做图 yizuotu.net 头像在线制作

<u-back ref="back"></u-back>
</view>
</template>

脚本部分：

methods: {

 //以下内容加到 methods里面
onPageScroll(e) {
this.$refs.back.topData(e.scrollTop);
},
}

很简单吧，当活动页面超过180就会出现 top.png 自己去下载一个

上一个：It is recommended to install socat first
下一个：判读php pdo的execute是否执行成功的方法