优化首页商品卡顿

package.json

@@ -18,6 +18,7 @@
     "element-plus": "^2.4.3",
     "lodash": "^4.17.21",
     "pinia": "^2.1.7",
+    "swiper": "^11.1.1",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"
   },

src/views/home/components/goods.vue

@@ -34,11 +34,13 @@
             @click="changeShopListType"></el-button>
     </div>
     <div class="shop_list" :class="{ img: shopListType == 'img' }" v-loading="loading">
-        <div class="item_wrap" v-for="item in goodsList" :key="item.id" @click="showSkuHandle(item)">
+        <swiper class="swiper_box" direction="vertical" @slideChange="onSlideChange">
+            <swiper-slide class="slide_item" v-for="(goods, index) in goodsList" :key="index">
+                <div class="item_wrap" v-for="item in goods" :key="item.id" @click="showSkuHandle(item)">
                     <div class="item">
                         <div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
                         <div class="cover" v-if="shopListType == 'img'">
-                    <el-image :src="item.coverImg" class="el_img" fit="cover" lazy></el-image>
+                            <el-image :src="item.coverImg" class="el_img" fit="cover"></el-image>
                         </div>
                         <div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
                         <div class="item_empty" v-if="shopListType == 'text'"></div>
@@ -47,6 +49,8 @@
                         </div>
                     </div>
                 </div>
+            </swiper-slide>
+        </swiper>
     </div>
     <div class="empty">
         <el-empty description="空空如也~" v-if="!goodsList.length" />
@@ -64,6 +68,11 @@ import skuModal from '@/components/skuModal.vue'
 
 import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
 import { useUser } from "@/store/user.js"
+
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import "swiper/swiper-bundle.css";
+
+
 const store = useUser()
 
 const props = defineProps({
@@ -77,7 +86,7 @@ const emit = defineEmits(['success'])
 
 const skuModalRef = ref(null)
 
-const shopListType = ref('text')
+const shopListType = ref('img')
 
 const categorys = ref([])
 const categorysActive = ref(0)
@@ -86,11 +95,24 @@ const commdityName = ref('')
 
 const loading = ref(false)
 const goodsList = ref([])
+const goodsPage = ref(1)
+const goodsPageSize = ref(12)
+const finish = ref(false) // 是否加载完
+const currentGoodsIndex = ref(0)
+const loopMax = ref(0)
+const loopTimer = ref(null)
 
 const showPopover = ref(false)
 
 const inputChange = _.debounce(function () {
-    productqueryCommodityInfoAjax()
+    goodsList.value = []
+    goodsPage.value = 1
+    finish.value = false
+    currentGoodsIndex.value = 0
+    loopMax.value = 0
+    loopTimer.value = null
+
+    updataGoods()
 }, 500)
 
 // 确认选择规格回调
@@ -156,7 +178,14 @@ function changeCategory(index) {
 
     useStorage.set('categorysActive', index)
 
-    productqueryCommodityInfoAjax()
+    goodsList.value = []
+    goodsPage.value = 1
+    finish.value = false
+    currentGoodsIndex.value = 0
+    loopMax.value = 0
+    loopTimer.value = null
+
+    updataGoods()
 }
 
 // 从本地更新已选择的选项
@@ -191,37 +220,104 @@ async function queryCategoryAjax() {
 // 查询商品信息
 async function productqueryCommodityInfoAjax() {
     try {
-        loading.value = true
+        // loading.value = true
         const res = await productqueryCommodityInfo({
             shopId: store.userInfo.shopId,
             categoryId: categorys.value[categorysActive.value].id,
             commdityName: commdityName.value,
-            page: 1,
+            page: goodsPage.value,
-            pageSize: 500,
+            pageSize: goodsPageSize.value,
             masterId: props.masterId
         })
-        goodsList.value = res
+        if (res.list.length < goodsPageSize.value) {
-        loading.value = false
+            finish.value = true
+        }
+        // loading.value = false
+
+        if (res.total > (goodsPageSize.value * 2)) {
+            // 启动循环任务
+            loopMax.value = parseInt(res.total / goodsPageSize.value)
+            loopGetGoods()
+        }
+        return res.list
     } catch (error) {
         loading.value = false
         console.log(error)
     }
 }
 
+// 循环获取商品
+function loopGetGoods() {
+    loopTimer.value = setInterval(async () => {
+        goodsPage.value++
+        if (goodsPage.value > loopMax.value) {
+            clearInterval(loopTimer.value)
+            loopTimer.value = null
+            return
+        }
+        const res = await productqueryCommodityInfoAjax()
+        goodsList.value.push(res)
+    }, 2000)
+}
+
 // 更新商品数据
 async function updateData() {
     localUpdateShopListType()
     await updateCategoryActive()
     await queryCategoryAjax()
-    await productqueryCommodityInfoAjax()
+    updataGoods()
 }
 
+async function updataGoods() {
+    if (!goodsList.value.length) {
+        const res = await productqueryCommodityInfoAjax()
+        goodsList.value.push(res)
+
+        if (res.length >= goodsPageSize.value) {
+            goodsPage.value++
+            const res2 = await productqueryCommodityInfoAjax()
+            goodsList.value.push(res2)
+        }
+    } else {
+        goodsPage.value = currentGoodsIndex.value + 1
+        goodsList.value[currentGoodsIndex.value] = await productqueryCommodityInfoAjax()
+    }
+}
+
+// 轮播图开始滑动
+const onSlideChange = _.debounce(async function (e) {
+    if (e.activeIndex == e.previousIndex || finish.value) return
+    if (e.activeIndex > e.previousIndex) {
+        // console.log('向下滑动');
+        goodsPage.value++
+        const res = await productqueryCommodityInfoAjax()
+        goodsList.value.push(res)
+        // goodsList.value.shift()
+    } else {
+        // console.log('向上滑动');
+        // goodsPage.value--
+        // const res = await productqueryCommodityInfoAjax()
+        // goodsList.value.unshift(res)
+        // goodsList.value.pop()
+    }
+    currentGoodsIndex.value = e.activeIndex
+}, 500)
+
 defineExpose({
     updateData
 })
 </script>
 
 <style scoped lang="scss">
+.swiper_box {
+    height: 100%;
+
+    .slide_item {
+        width: 100%;
+        height: 100%;
+    }
+}
+
 .loading_wrap {
     display: flex;
     justify-content: center;
@@ -325,10 +421,11 @@ defineExpose({
 }
 
 .shop_list {
-    max-height: calc(100vh - 40px - 80px - 40px);
+    // max-height: calc(100vh - 40px - 80px - 40px);
-    overflow-y: auto;
+    height: calc(100vh - 40px - 80px - 28px);
-    display: flex;
+    // overflow-y: auto;
-    flex-wrap: wrap;
+    // display: flex;
+    // flex-wrap: wrap;
     padding: 0 10px;
 
     &.img {
@@ -338,11 +435,14 @@ defineExpose({
     }
 
     .item_wrap {
+        float: left;
         width: 20%;
+        height: 33.333%;
         padding: 0 5px;
         padding-bottom: 10px;
 
         .item {
+            height: 100%;
             border: 1px solid #ececec;
             border-radius: 10px;
             overflow: hidden;
@@ -366,7 +466,7 @@ defineExpose({
 
             .cover {
                 width: 100%;
-                padding-bottom: 100%;
+                height: 60%;
                 position: relative;
 
                 .el_img {
@@ -381,8 +481,10 @@ defineExpose({
 
             .name {
                 padding: 0 10px;
-                height: 40px;
+                height: 20%;
-                margin-top: 20px;
+                display: flex;
+                align-items: center;
+                // margin-top: 20px;
 
                 span {
                     font-weight: bold;
@@ -394,6 +496,7 @@ defineExpose({
             }
 
             .price {
+                height: 20%;
                 padding: 6px 10px;
                 background-color: var(--primary-color);
 

vite.config.js

@@ -9,8 +9,8 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
+        // target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
-        // target: 'http://192.168.2.27:10587/cashier-client', // 国成
+        target: 'http://192.168.2.116:10587/cashier-client', // 国成
         // target: 'http://192.168.2.128:10587/cashier-client',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')