图示
在components文件夹下新建back-top/back-top.vue,写入以下代码
<template>
<view v-if="scrollTop>400" class="backTop" :class="{'mescroll-fade-in':isShowToTop}" @click="toTopClick">
<text class="iconfont iconjiantou4" style="color: #fff;font-size:40rpx"></text> <!-- 此处为iconfont图标，可根据自己项目设置 -->
</view>
</template>
<script>
export default {
name: "backTop",
props: {
id: {
type: String,
default: ''
},
scrollTop: {
type: Number,
default: 0
},
tab: {
type: Boolean,
default: false
}
},
data() {
return {
isShowToTop: true
}
},
methods: {
toTopClick() {
this.isShowToTop = false; // 回到顶部按钮需要先隐藏,再执行回到顶部,避免闪动
if (this.tab) {
this.$emit('setScrollTop');
} else {
uni.pageScrollTo({
scrollTop: 0,
duration: 200
});
}
}
},
}
</script>
<style>
.mescroll-lazy-in,
.mescroll-fade-in {
-webkit-animation: mescrollFadeIn .3s ease forwards;
animation: mescrollFadeIn .3s ease forwards;
}
.backTop {
z-index: 999;
position: fixed;
right: 30rpx;
bottom: 120rpx;
/* #ifdef H5 */
bottom: 220rpx;
/* #endif */
100rpx;
height: 100rpx;
line-height: 100rpx;
border-radius: 50%;
transform: translateZ(0);
-webkit-transform: translateZ(0);
background-color: rgba(0,0,0,.35);
text-align: center;
}
</style>
在main.js中引入back-top组件
import backTop from '@/components/back-top/back-top.vue';
Vue.component('back-top',backTop)
在页面中使用
<template>
<view class="container">
<view class="list-content">
<back-top :scrollTop="scrollTopCount"></back-top> <!-- 1、组件部分 -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTopCount:0, //2、距离顶部距离
};
},
//3、监听滚动
onPageScroll(e) {
this.scrollTopCount = e.scrollTop;
},
}
</script>