product page auto load on scroll

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/mapper/HichinaProductMapper.java

@@ -31,7 +31,7 @@ public interface HichinaProductMapper {
 
     @Select("select count(*) from (select sku_group_id, sku_group_name, g.product_type_id , t.product_type_name, g.min_price, g.image_url  \n" +
             "from product_sku_group g inner join hichina_product_type t on t.product_type_id = g.product_type_id\n" +
-            "where g.enabled=1 and g.product_type_id=#{productTypeId} and sku_group_name like CONCAT('%',CONCAT(#{query},'%')))")
+            "where g.enabled=1 and g.product_type_id=#{productTypeId} and sku_group_name like CONCAT('%',CONCAT(#{query},'%'))) aa")
     Integer countAllProductListByQueryAndProductTypeId(String query, String productTypeId);
 
     @Select("select count(*) from (select sku_group_id, sku_group_name, g.product_type_id , t.product_type_name, g.min_price, g.image_url  \n" +

hichina-main-front/src/views/blog/index.vue

@@ -37,9 +37,9 @@
     </template>
   </div>
 
-  <div style="width: 100%;">
+  <!-- <div style="width: 100%;">
     <el-button type="primary" plain class="get-more mt-100" @click="loadMore" style="cursor: pointer;">Click to load more</el-button>
-  </div>
+  </div> -->
 
 </template>
 
@@ -51,6 +51,7 @@
   import ScaleProductItem from '../home/components/ScaleProductItem'
   import { useRouter } from 'vue-router';
   import {AXIOS} from '@/common/http-commons'
+  import { debounce } from 'lodash';
   const data = reactive({
     list: [
       {id: 0, title: 'Latest Blogs'},
@@ -177,9 +178,20 @@
     console.log("...loading video")
   }
 
+  function getNextBatch() {
+    window.onscroll = debounce(function() {
+      let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight + 100 > document.documentElement.scrollHeight;
+     
+      if(bottomOfWindow){
+        loadMore()
+      }
+    }, 500)
+  }
+
   onMounted(() => {
     loadVideos();
     loadSliders();
+    getNextBatch();
   })
 
   const {list} = toRefs(data)

hichina-main-front/src/views/home/index.vue

@@ -270,13 +270,6 @@
         loadMore()
       }
     }, 500)
-    // window.onscroll = () => {
-    //   let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight > document.documentElement.scrollHeight;
-     
-    //   if(bottomOfWindow){
-    //     loadMore()
-    //   }
-    // }
   }
 
 </script>

hichina-main-front/src/views/product/index.vue

@@ -62,20 +62,21 @@
     <div class="list flex-start mt-34">
       <other-product-item class="list-item" :product-summary="item" :show-icon="false" v-for="(item,index) in globalProductList" v-bind:key="index" :class="{'no-mar': (index+1) % 4 === 0}"/>
     </div>
-    <div style="width: 100%;">
+    <!-- <div style="width: 100%;">
       <el-button type="primary" plain class="get-more mt-100" @click="loadMore" style="cursor: pointer;">Click to load more</el-button>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
   import {AXIOS} from '@/common/http-commons'
   import OtherProductItem from '../home/components/OtherProductItem'
+  import { debounce } from 'lodash';
   const active = ref(0)
 
   const query=ref("")
 
-  const pageSize = ref(100)
+  const pageSize = ref(5)
   const currentPage = ref(1)
   const productList = ref([])
   const globalProductList = ref([])
@@ -86,17 +87,17 @@
   const HOLIDAYPACKAGETYPE="e05d07a3-a717-45b8-b009-47a349890e41";
   const CHINALOCALPACKAGETYPE="fd264cab-ee8d-4571-a477-03d7e7c090b3";
 
-  function debounce(cb, delay){
-      let timer
-      return function(...args){
-        if (timer){
-          clearTimeout(timer)
-        }
-        timer = setTimeout(() =>{
-          cb.call(this,...args)
-        },delay)
-      }
-  }
+  // function debounce(cb, delay){
+  //     let timer
+  //     return function(...args){
+  //       if (timer){
+  //         clearTimeout(timer)
+  //       }
+  //       timer = setTimeout(() =>{
+  //         cb.call(this,...args)
+  //       },delay)
+  //     }
+  // }
 
   const search = debounce(value =>{
     console.log(value)
@@ -131,6 +132,16 @@
     loadAllProducts()
   }
 
+  function getNextBatch() {
+    window.onscroll = debounce(function() {
+      let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight + 100 > document.documentElement.scrollHeight;
+     
+      if(bottomOfWindow){
+        loadMore()
+      }
+    }, 500)
+  }
+
   function loadAllProducts(){
     var params = {}
     params.pageSize = pageSize.value;
@@ -151,6 +162,7 @@
   onMounted(() => {
     setActiveTab(0)
       // loadAllProducts()
+    getNextBatch()
   })
 
   const isFive = computed(() => {