教师团增加分页

src/modules/home/components/Teacher.vue

@@ -63,7 +63,6 @@ getTeacherList().then(res => {
 .img {
   width: 1.9rem;
   height: 2.3rem;
-  border: 1px solid #707070;
   border-radius: 0.1rem;
   object-fit: cover;
 }

src/modules/teacher/views/Index.vue

@@ -19,13 +19,16 @@ const teacherList = $ref<ITeacherAllList>({
 
 let tabIndex = $ref(0)
 const handleGetTeacherList = (val: any) => {
-  const params: any = { page_size: 20, page: teacherList.page, type: (val + 1).toString() }
+  const params: any = { page_size: 10, page: teacherList.page, type: (val + 1).toString() }
   teacherList.loading = true
   getTeacherList(params)
     .then(res => {
       const { total, list } = res.data
       teacherList.total = total
-      teacherList.list = list
+      teacherList.list = teacherList.list.concat(list)
+      if (teacherList.list.length <= total) {
+        teacherList.page++
+      }
     })
     .finally(() => {
       teacherList.loading = false
@@ -37,9 +40,25 @@ onMounted(() => {
 })
 const handleTabClick = (val: number) => {
   tabIndex = val
-  console.log(tabIndex, 'tabIndex')
+  teacherList.page = 1
+  teacherList.total = 0
+  teacherList.list = []
   handleGetTeacherList(val)
 }
+// 滚动加载
+const el = ref<HTMLElement>()
+useInfiniteScroll(
+  document,
+  () => {
+    // load more
+    if (tabIndex === 0) {
+      !teacherList.loading && handleGetTeacherList(0)
+    } else {
+      !teacherList.loading && handleGetTeacherList(1)
+    }
+  },
+  { distance: 10 }
+)
 </script>
 
 <template>
@@ -53,7 +72,7 @@ const handleTabClick = (val: number) => {
       紫荆实战导师团
     </div>
   </div>
-  <TeacherList :teacherList="teacherList.list" />
+  <TeacherList :teacherList="teacherList.list" ref="el" />
 </template>
 
 <style lang="scss" scoped>