下拉刷新

pages/index.vue

@@ -1,5 +1,11 @@
 <template>
   <view class="page-container">
+    <z-paging ref="paging" refresher-only  bg-color="radial-gradient(circle at top left, #E8F4F8 40%, #F8FCFE 100%)"
+              :show-empty="false" :show-footer="false" @onRefresh="refresh">
+      <template #refresher="{refresherStatus}">
+        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
+        <custom-refresher :status="refresherStatus" />
+      </template>
     <!-- confirm:confirm; input:change; cancel:点击取消；
     clear：点击清除；focus:获取焦点；blur：失去焦点   -->
     <uni-row class="demo-uni-row" >
@@ -60,11 +66,16 @@
     </uni-section>
 <!--    <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"-->
 <!--             :direction="direction" @trigger="trigger" @fabClick="fabClick" />-->
+    </z-paging>
   </view>
 </template>
 
 <script>
+import ZPaging from "../uni_modules/z-paging/components/z-paging/z-paging.vue";
+import CustomRefresher from "../components/custom-refresher/custom-refresher.vue";
+
 export default {
+  components: {CustomRefresher, ZPaging},
   data() {
     return {
       listData: [],
@@ -226,6 +237,10 @@ export default {
         }, 100)
       }
     },
+    refresh() {
+
+      this.$refs.paging.complete();
+    },
     // 点击列表项
     onItemTap(item) {
       uni.showToast({
@@ -245,7 +260,6 @@ page {
 .page-container {
   padding: 20rpx;
   box-sizing: border-box;
-  background: radial-gradient(circle at top left, #E8F4F8 40%, #F8FCFE 100%);
 }
 
 .list-scroll {
@@ -483,4 +497,11 @@ page {
   /* 兜底：垂直对齐 */
   vertical-align: middle;
 }
+
+/deep/ .z-paging-content-fixed {
+  padding: 20rpx !important;
+  /* 可选：防止margin塌陷，加overflow */
+  overflow: hidden;
+}
+
 </style>