feat: 首页滚动使用页面滚动

src/pages/index/index.vue

@@ -10,6 +10,8 @@
 </route>
 
 <script lang="ts" setup>
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
 defineOptions({
   name: 'Index', // 首页
 })
@@ -20,6 +22,8 @@ const safeAreaInsets = systemInfo.safeAreaInsets
 
 // z-paging
 const paging = ref(null)
+// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
+useZPaging(paging)
 
 // 轮播图
 const current = ref<number>(0)
@@ -112,12 +116,15 @@ function queryList(pageNo, pageSize) {
 <template>
   <z-paging
     ref="paging"
-    :paging-style="{ paddingTop: `${safeAreaInsets?.top}px` }"
     refresher-only
+    use-page-scroll
     @query="queryList"
   >
     <template #top>
-      <view class="flex items-center justify-between pb-40rpx pl-42rpx pr-34rpx pt-26rpx">
+      <view
+        class="flex items-center justify-between bg-white pb-40rpx pl-42rpx pr-34rpx pt-26rpx"
+        :style="{ paddingTop: `${safeAreaInsets?.top + 13}px` }"
+      >
         <image
           src="/static/header-logo.png"
           class="h-54rpx w-250rpx"
@@ -137,7 +144,7 @@ function queryList(pageNo, pageSize) {
       @click="handleClick"
       @change="onChange"
     />
-    <view class="px-25rpx">
+    <view class="px-25rpx pb-24rpx">
       <view class="flex items-end justify-between pb-22rpx pt-24rpx">
         <view class="flex items-center justify-between">
           <view class="flex flex-col items-center">