回到顶部

src/components/home/BackTop.vue

+<template>
+    <div class="BackTopBox animate__animated animate__fadeInUp">
+        <img class="cursor-pointer"  src="../../assets//img/backtop.png" 
+            style="height: 58px;"
+            @click="BackTop"/> 
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+const emit = defineEmits<{
+    (event: 'BackTop'): void,
+}>()
+const BackTop = () =>{
+    emit('BackTop')
+}
+</script>
+<style lang="scss" scoped>
+.BackTopBox{
+    position: fixed;
+    right: 5vw;
+    bottom: 5vw;
+    z-index: 15;
+}
+</style>
\ No newline at end of file

src/views/Market/Index.vue

@@ -205,7 +205,7 @@
                     
                 </div>
                 <div v-else-if="dataList.length == 0 && !loading" class="q-mt-lg bg-white rounded" 
-                style="padding: 3.1vw 10px;">
+                style="padding: 3.68vw 0;">
                     <el-empty description="暂无数据" :image="noDataImg(1)" />
                 </div>
                 <div v-if='queryObj.pageCount == queryObj.pageIndex && !loading' class="text-center q-pt-lg"><img :src="noDataImg(2)" width="118" /></div>
@@ -226,6 +226,8 @@
     @next="next"/>
     <!-- vip购买提示 -->
     <vipFooter v-if="!userInfo.iv&&!userInfo.it&&!userInfo.OpenPrompt" @close="closeVip"></vipFooter>
+    <!-- 到顶部 -->
+    <BackTop v-if="marketRef&&marketRef.scrollTop>800" @BackTop="goBackTop"></BackTop>
 </template>
 
 <script setup lang="ts">
@@ -246,6 +248,7 @@ import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 import foote from '@/components/footer/index.vue';
 import temDetails from "@/components/home/temDetails.vue";
 import vipFooter from "@/components/home/vipFooter.vue";
+import BackTop from "@/components/home/BackTop.vue";
 import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
 import 'vue-waterfall-plugin-next/dist/style.css'
 
@@ -336,6 +339,10 @@ const loadProps = reactive({
     error
 })
 
+const goBackTop = () => {
+    marketRef.value.scrollTop = 0
+}
+
 const errorImg = (res:any)=>{
     console.log(res,'===')
 }