components/back-top/back-top.vue
<style lang="scss" scoped>
.top {
height: 80rpx;
width: 80rpx;
text-align: center;
line-height: 80rpx;
border-radius: 50%;
background-color: rgba($color: #FFFFFF, $alpha: 0.8);
position: fixed;
z-index: 999;
right: 30rpx;
bottom: 100rpx;
animation: heart 0.3s;
@keyframes heart {
0% {
right: -30rpx;
}
100% {
right: 30rpx;
}
}
.ic-back-top {
font-size: 60rpx !important;
}
}
</style>
<template>
<view class="top" v-if="topShow" @click="goTop()">
<text class="ic ic-back-top"></text>
</view>
</template>
<script setup name="back-top">
import { ref } from 'vue'
const props = defineProps({
scrollTop: {
type: Number,
default: 0
}
})
const topShow = ref(false)
function topData(e) {
topShow.value = e > 200
}
const goTop = () => {
uni.pageScrollTo({
scrollTop: props.scrollTop,
duration: 300
})
}
defineExpose({
topShow,
topData
})
</script>
main.js引入组件
import { createSSRApp } from 'vue'
import App from '@/App.vue'
import store from '@/store'
import backTop from '@/components/back-top/back-top.vue'
import 'animate.css/animate.min.css'
import '@/static/styles/_index.scss'
import '@/static/styles/_iconfont.scss'
import { showToast, showTip, copyModal } from '@/utils/common';
export function createApp() {
const app = createSSRApp(App)
app.use(store)
app.component('backTop', backTop) // 置顶图标
app.config.globalProperties.$showToast = showToast
app.config.globalProperties.$showTip = showTip
app.config.globalProperties.$copyModal = copyModal
return {
app
}
}
组件中使用
<backTop ref="VT" :scrollTop="top"></backTop>
import { onPageScroll } from '@dcloudio/uni-app'
const top = ref(0)
const VT = ref(null)
onPageScroll(e => {
VT.value.topData(e.scrollTop)
})