商城首页新增下拉刷新

src/views/shop-mall/index.tsx

@@ -5,6 +5,7 @@ import {
   Divider,
   Icon,
   Image,
+  PullRefresh,
   Sticky,
   Swipe,
   SwipeItem,
@@ -27,6 +28,7 @@ export default defineComponent({
   name: 'shop-mall',
   data() {
     return {
+      loading: false,
       height: 'auto' as any,
       count: 0, // 购买车数量
       advertiseList: [], // 广告列表
@@ -35,26 +37,32 @@ export default defineComponent({
       productCategoryList: [] // 商品分类列表
     }
   },
-  async mounted() {
-    try {
-      const res = await request.get('/api-mall-portal/home/content')
-      console.log(res)
-      const result = res.data || {}
-      this.count = result.count
-      this.advertiseList = result.advertiseList
-      const category = result.productCategoryList || []
-      const categoryResult: any = []
-      while (category.length > 0) {
-        const chunk = category.splice(0, 5)
-        categoryResult.push(chunk)
-      }
-      this.productList = categoryResult
-      this.hotProductList = result.hotProductList || []
-      this.productCategoryList = result.productAttributeCategoryList || []
-    } catch {}
+  mounted() {
+    this.init()
   },
   methods: {
     onSearch() {},
+    async init() {
+      try {
+        const res = await request.get('/api-mall-portal/home/content')
+        console.log(res)
+        const result = res.data || {}
+        this.count = result.count
+        this.advertiseList = result.advertiseList
+        const category = result.productCategoryList || []
+        const categoryResult: any = []
+        while (category.length > 0) {
+          const chunk = category.splice(0, 5)
+          categoryResult.push(chunk)
+        }
+        this.productList = categoryResult
+        this.hotProductList = result.hotProductList || []
+        this.productCategoryList = result.productAttributeCategoryList || []
+      } catch {}
+      setTimeout(() => {
+        this.loading = false
+      }, 500)
+    },
     openWebView(url: string): void {
       // console.log(url)
       let dev = false
@@ -112,71 +120,78 @@ export default defineComponent({
             }}
           />
         </div>
-        <div
-          onClick={() => {
-            this.openWebView('/goodsList?input=focus')
-          }}
-        >
-          <ColSearch
-            disabled
-            class={styles.searchBox}
-            background="transparent"
-          />
-        </div>
-        <Swipe
-          class={styles.swipe}
-          autoplay={3000}
-          showIndicators={false}
-          lazyRender
+        <PullRefresh
+          v-model={this.loading}
+          loading-text='正在刷新...'
+          success-text="刷新完成"
+          onRefresh={() => this.init()}
         >
-          {this.advertiseList.map((item: any) => (
-            <SwipeItem onClick={() => this.openWebView(item.url)}>
-              <Image class={styles.swipeItemImg} src={item.pic} fit="cover" />
-            </SwipeItem>
-          ))}
-        </Swipe>
-
-        <MenuList
-          productList={this.productList}
-          onOpenWebView={this.openWebView}
-        />
+          <div
+            onClick={() => {
+              this.openWebView('/goodsList?input=focus')
+            }}
+          >
+            <ColSearch
+              disabled
+              class={styles.searchBox}
+              background="transparent"
+            />
+          </div>
+          <Swipe
+            class={styles.swipe}
+            autoplay={3000}
+            showIndicators={false}
+            lazyRender
+          >
+            {this.advertiseList.map((item: any) => (
+              <SwipeItem onClick={() => this.openWebView(item.url)}>
+                <Image class={styles.swipeItemImg} src={item.pic} fit="cover" />
+              </SwipeItem>
+            ))}
+          </Swipe>
 
-        {this.hotProductList.length === 3 && (
-          <HotGoods
-            hotProductList={this.hotProductList}
+          <MenuList
+            productList={this.productList}
             onOpenWebView={this.openWebView}
           />
-        )}
 
-        <Tabs
-          shrink
-          lineWidth={25}
-          background={'#f6f8f9'}
-          color="var(--van-primary)"
-          class={styles.tabs}
-          sticky
-          offsetTop={this.height}
-          lazyRender
-        >
-          {this.productCategoryList.length > 0 && (
-            <Tab title="全部" name={0}>
-              <TabList
-                isTab={true}
-                productAttributeCategoryId={0}
-                onOpenWebView={this.openWebView}
-              />
-            </Tab>
+          {this.hotProductList.length === 3 && (
+            <HotGoods
+              hotProductList={this.hotProductList}
+              onOpenWebView={this.openWebView}
+            />
           )}
-          {this.productCategoryList.map((item: any) => (
-            <Tab title={item.name} name={item.id}>
-              <TabList
-                isTab={true}
-                productAttributeCategoryId={item.id}
-                onOpenWebView={this.openWebView}
-              />
-            </Tab>
-          ))}
-        </Tabs>
+
+          <Tabs
+            shrink
+            lineWidth={25}
+            background={'#f6f8f9'}
+            color="var(--van-primary)"
+            class={styles.tabs}
+            sticky
+            offsetTop={this.height}
+            lazyRender
+          >
+            {this.productCategoryList.length > 0 && (
+              <Tab title="全部" name={0}>
+                <TabList
+                  isTab={true}
+                  productAttributeCategoryId={0}
+                  onOpenWebView={this.openWebView}
+                />
+              </Tab>
+            )}
+            {this.productCategoryList.map((item: any) => (
+              <Tab title={item.name} name={item.id}>
+                <TabList
+                  isTab={true}
+                  productAttributeCategoryId={item.id}
+                  onOpenWebView={this.openWebView}
+                />
+              </Tab>
+            ))}
+          </Tabs>
+        </PullRefresh>
       </div>
     )
   }