feat: 新增返回顶部功能与优化首页横幅样式

1.  给useListData的下拉刷新添加调试日志
2.  首页横幅替换固定图片为随机资源图，调整渐变背景层级
3.  新增tabbar滚动监听与返回顶部按钮功能

src/hooks/useListData.ts

@@ -67,7 +67,10 @@ export function useListData<T>(options: IUseListDataOptions<T>) {
   }
 
   /** 下拉刷新 */
-  onPullDownRefresh(refresh)
+  onPullDownRefresh(() => {
+    console.log('下拉刷新', options)
+    refresh()
+  })
 
   /** 上拉加载更多 */
   onReachBottom(() => {

src/pages/index/index.vue

@@ -4,6 +4,7 @@ import { queryPostByName, queryPosts } from '@/api/halo-base/post'
 import { completeUrl } from '@/utils/url'
 import { timeFrom } from '@/utils/base/timeFrom'
 import { useListData } from '@/hooks/useListData'
+import { randomImageUrl } from '@/utils/randomResources'
 
 import type { ListedPostVo, ListedPostVoList, PostV1alpha1PublicApiQueryPostByNameRequest, PostV1alpha1PublicApiQueryPostsRequest, PostVo } from '@halo-dev/api-client'
 
@@ -36,14 +37,12 @@ const banner = reactive({
   list: [
     {
       value: exampleImageUrls.banner,
-      type: 'image',
       title: 'UNI HALO v3.0',
       desc: '新全新探索简约的艺术风格',
       time: timeFrom(new Date()),
     },
     {
-      value: exampleImageUrls.postCover1,
-      type: 'image',
+      value: randomImageUrl.pc,
       title: 'UNI HALO v3.0 使用手册',
       desc: 'uni-halo 使用手册，包含安装、配置、使用等信息666666666aaaa啊啊啊啊啊啊啊啊啊啊啊',
       time: timeFrom(new Date()),
@@ -138,7 +137,7 @@ onLoad(() => {
         <template #default="{ index }">
           <view class="relative h-full w-full">
             <image class="h-full w-full object-cover" :src="banner.list[index].value" />
-            <view class="absolute bottom-0 left-0 right-0 from-black/10 to-black/90 bg-gradient-to-b p-4">
+            <view class="absolute bottom-0 left-0 right-0 from-black/0 via-black/50 to-black/90 bg-gradient-to-b p-4">
               <view class="w-5/6 flex flex-col gap-y-2">
                 <text class="text-xs text-white/90">{{ banner.list[index].time }}</text>
                 <text class="line-clamp-1 text-xl text-white font-bold">{{ banner.list[index].title }}</text>

src/tabbar/index.vue

@@ -4,6 +4,7 @@ import { customTabbarEnable, needHideNativeTabbar } from './config'
 import { setTabbarItem } from './i18n'
 import { tabbarList, tabbarStore } from './store'
 import { sleep } from '@/utils/common'
+import { debounce } from '@/utils/base/debounce'
 import TabbarItem from './TabbarItem.vue'
 
 // #ifdef MP-WEIXIN
@@ -55,6 +56,12 @@ onMounted(() => {
 })
 // #endif
 
+const backTopActive = reactive({
+  show: false,
+  beforeScrollTop: 0,
+  currentScrollTop: 0,
+})
+
 const tabbarRect = ref<Array<{ left: number, width: number }>>([])
 
 const activeDomStyle = reactive({
@@ -105,6 +112,25 @@ onMounted(() => {
   console.log('onMounted')
   getTabBarRect()
 })
+
+const triggerPageScrollDebounceFn = debounce((scrollTop: number) => {
+  backTopActive.beforeScrollTop = backTopActive.currentScrollTop
+  setTimeout(() => {
+    backTopActive.currentScrollTop = scrollTop
+    backTopActive.show = backTopActive.currentScrollTop > backTopActive.beforeScrollTop
+  }, 60)
+}, 60)
+
+onPageScroll(({ scrollTop }) => {
+  triggerPageScrollDebounceFn(scrollTop)
+})
+
+function handleScrollToTop() {
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration: 300,
+  })
+}
 </script>
 
 <template>
@@ -115,8 +141,7 @@ onMounted(() => {
       >
         <TabbarItem
           v-for="(item, index) in tabbarList" :key="index" :item="item" :count="tabbarList.length"
-          :index="index" :global-active-slider-bar="tabBarConfig.useGlobalActiveSliderBar"
-          class="tabbar-item h-full"
+          :index="index" :global-active-slider-bar="tabBarConfig.useGlobalActiveSliderBar" class="tabbar-item h-full"
           :class="[isActiveByIndex(index) ? 'shrink-0' : 'flex-1']"
         />
         <!-- 激活滑块 -->
@@ -132,7 +157,8 @@ onMounted(() => {
       <view
         class="uh-shadow-sm box-border h-54px w-54px flex items-center justify-center border border-white rounded-full border-solid bg-white/95 text-2xl backdrop-blur-[3px]"
       >
-        +
+        <wd-icon v-if="backTopActive.show" name="arrow-up" :size="22" @click="handleScrollToTop" />
+        <wd-icon v-else name="search-line" :size="22" />
       </view>
 
       <view v-if="!tabBarConfig.useFloat" class="pb-safe" />