vue3使用uniapp返回顶部

前端路上迷茫的小鲨鱼

已于 2024-02-01 18:05:38 修改

阅读量548

点赞数 1

分类专栏： vue3 uniapp 文章标签： uni-app vue.js 前端

于 2023-07-17 13:56:20 首次发布

本文链接：https://blog.csdn.net/Guoyu1_/article/details/131764659

版权

uniapp 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

18 篇文章 1 订阅

订阅专栏

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)
})