小火箭返回顶部功能

.hbuilderx/launch.json

@@ -0,0 +1,16 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}

src/pages/store/nearby/index.vue

@@ -3,7 +3,6 @@ import {getMerchantCategory, getSelectMerchant, getSelectMerchantSort} from "~/a
 import type {StoreResult} from "~/apis/model/storeModel";
 import {StoreParams} from "~/apis/model/storeModel";
 import CXBEmpty from "~/components/CXBEmpty/CXBEmpty.vue";
-import CXBBackTop from "~/components/CXBBackTop/CXBBackTop.vue";
 import {USER_LATITUDE, USER_LONGITUDE} from "~/constants";
 import {getProductShare} from "~/apis/common";
 import {useUserStore} from "~/stores/userStore";
@@ -49,6 +48,9 @@ const state = reactive({
   menuDefaultValue: 1
   // merchantPageInfo: {}
 })
+//返回顶部标识
+let flag=ref(false)
+
 const searchValue = ref('')
 
 const {windowHeight} = uni.getSystemInfoSync()
@@ -207,6 +209,11 @@ const onRefresherRefresh = e => {
   loadSelectMerchant('reload')
 };
 
+//小火箭滚动事件
+const onscroll =e=>{
+	state.scrollTop=e.detail.scrollTop
+}
+
 function handleScrollToLower() {
   state.status = 'loading';
   state.currentPage += 1;
@@ -218,6 +225,24 @@ function handleScrollToLower() {
   }
 }
 
+//返回顶部事件
+const scrollToTop = function () {
+  console.log('返回顶部');
+	state.scrollTop=0
+
+}
+//监视
+watch(()=>state.scrollTop,()=>{
+  if(state.scrollTop as number > 400){
+    flag.value = true
+  }
+  if(state.scrollTop as number < 400){
+    flag.value = false
+  }
+})
+
+
+
 </script>
 <template>
   <!--  <nut-category :category="state.merchantCategory" @change="change">-->
@@ -242,6 +267,7 @@ function handleScrollToLower() {
     <!-- 左侧 一级分类 -->
     <div class="w-1/4">
       <scroll-view
+		  ref="ToTop"
           :scroll-y="true"
           :style="{ height: `${state.scrollHeight}px` }"
           class="w-full h-full bg-[#f8f8f8]"
@@ -285,11 +311,14 @@ function handleScrollToLower() {
           </nut-menu-item>
         </nut-menu>
       </div>
-      <CXBBackTop/>
+		<!-- 返回顶部 -->
+	  <div v-show="flag" class="back-top">
+	    <img @click="scrollToTop" class="back-TopImg" src="../../static/icon/返回顶部@2x.png" alt="">
+	  </div>
       <scroll-view
           :scroll-y="true"
           :style="{ height: `${state.scrollHeight -60}px` }"
-          scroll-with-animation
+		  :scroll-top="state.scrollTop"
           class="flex flex-1  flex-col   p-3 gap-3 mt-10"
           :refresher-enabled="true"
           refresher-background="#f5f5f5"
@@ -301,7 +330,7 @@ function handleScrollToLower() {
           @refresherAbort="onRefresherAbort"
           @refresherrefresh="onRefresherRefresh"
           v-if="state.merchantList && state.merchantList.length > 0"
-
+		  @scroll="onscroll"
       >
         <div
             v-for="(item, index) in state.merchantList" :key="index"
@@ -362,6 +391,20 @@ page {
   --nut-menu-bar-box-shadow: none;
   --nut-menu-item-active-text-color: #FE0032;
 
+	.back-top{
+	  width: 40px;
+	  height: 40px;
+	  position: fixed;
+	  border-radius: 50%;
+	  z-index: 999;
+	  right: 15px;
+	  bottom: 60px;
+	}
+	.back-TopImg{
+	  width: 40px;
+	  height: 40px;
+	  border-radius: 50%;
+	}
   .nut-menu {
     background: none !important;
   }