chore: 添加无限滚动example

heikaimu · Aug 28, 2024 · 5123cdf · 5123cdf
1 parent b243577
commit 5123cdf
Show file tree

Hide file tree

Showing 15 changed files with 477 additions and 9 deletions.
diff --git a/docs/assets/PageA.0e0d7a88.js → docs/assets/PageA.6092bf30.js b/docs/assets/PageA.0e0d7a88.js → docs/assets/PageA.6092bf30.js
diff --git a/docs/assets/PageB.c28db3d0.js → docs/assets/PageB.cd22909d.js b/docs/assets/PageB.c28db3d0.js → docs/assets/PageB.cd22909d.js
diff --git a/docs/assets/PageC.117d36b2.css b/docs/assets/PageC.117d36b2.css
diff --git a/docs/assets/PageC.d6cb03f8.js b/docs/assets/PageC.d6cb03f8.js
diff --git a/docs/assets/api.7a0740a5.js → docs/assets/api.150f1d0d.js b/docs/assets/api.7a0740a5.js → docs/assets/api.150f1d0d.js
diff --git a/docs/assets/index.6a042fd3.js b/docs/assets/index.6a042fd3.js
diff --git a/docs/assets/index.e3ed0ba6.js b/docs/assets/index.e3ed0ba6.js
diff --git a/docs/assets/index.aee4a039.css → docs/assets/index.e66c7085.css b/docs/assets/index.aee4a039.css → docs/assets/index.e66c7085.css
diff --git a/docs/index.html b/docs/index.html
@@ -11,9 +11,9 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue3瀑布流</title>
-    <script type="module" crossorigin src="./assets/index.6a042fd3.js"></script>
+    <script type="module" crossorigin src="./assets/index.e3ed0ba6.js"></script>
     <link rel="modulepreload" href="./assets/vendor.1b483b91.js">
-    <link rel="stylesheet" href="./assets/index.aee4a039.css">
+    <link rel="stylesheet" href="./assets/index.e66c7085.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/example/components/BScrollBox.vue b/example/components/BScrollBox.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import BScroll from '@better-scroll/core'
+import ScrollBar from '@better-scroll/scroll-bar'
+import ObserveDOM from '@better-scroll/observe-dom'
+import MouseWheel from '@better-scroll/mouse-wheel'
+import Pullup from '@better-scroll/pull-up'
+import type { BScrollConstructor } from '@better-scroll/core/dist/types/BScroll'
+import { onMounted, ref } from 'vue'
+
+const emits = defineEmits({
+  scroll: null,
+  pullingUp: null,
+})
+
+// 鼠标插件
+BScroll.use(MouseWheel)
+BScroll.use(ObserveDOM)
+BScroll.use(ScrollBar)
+BScroll.use(Pullup)
+
+// 滚动
+const scrollEl = ref(null)
+const bs = ref<BScrollConstructor>()
+const loading = ref(false)
+onMounted(() => {
+  initBs()
+})
+
+function initBs() {
+  if (!scrollEl.value)
+    return
+
+  bs.value = new BScroll(scrollEl.value, {
+    probeType: 3,
+    click: true,
+    pullUpLoad: true,
+    observeDOM: true, // 开启 observe-dom 插件
+    mouseWheel: {
+      speed: 20,
+      invert: false,
+      easeTime: 300,
+    },
+    scrollY: true,
+    scrollbar: true,
+  })
+
+  bs.value.on('scroll', (data: any) => {
+    emits('scroll', data)
+  })
+
+  bs.value.on('pullingUp', () => {
+    emits('pullingUp')
+    loading.value = true
+  })
+}
+
+function finishPullUp() {
+  if (bs.value) {
+    bs.value.finishPullUp()
+    bs.value.refresh()
+    loading.value = false
+  }
+}
+
+function scrollToElement(el: HTMLElement) {
+  if (bs.value)
+    bs.value.scrollToElement(el, 300, true, true)
+}
+
+defineExpose({
+  scrollToElement,
+  finishPullUp,
+})
+</script>
+
+<template>
+  <div ref="scrollEl" class="scroll-wrapper">
+    <div>
+      <slot />
+
+      <p class="loading-text">
+        {{ loading ? '加载中' : '触底后加载数据' }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scroll-wrapper {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  /* background-color: #f9f9f9; */
+}
+
+.loading-text {
+  padding: 20px;
+  text-align: center;
+  background-color: #fff;
+}
+</style>
diff --git a/example/components/PageC.vue b/example/components/PageC.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="page-b-content">
+    <BScrollBox ref="bs" @pullingUp="pullingUp">
+      <Waterfall
+        :list="list"
+        :row-key="options.rowKey"
+        :gutter="options.gutter"
+        :has-around-gutter="options.hasAroundGutter"
+        :width="options.width"
+        :breakpoints="options.breakpoints"
+        :img-selector="options.imgSelector"
+        :background-color="options.backgroundColor"
+        :lazyload="options.lazyload"
+        :load-props="options.loadProps"
+      >
+        <template #default="{ item, url }">
+          <div class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group">
+            <div class="overflow-hidden">
+              <LazyImg :url="url" class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105" @load="imageLoad" @error="imageError" @success="imageSuccess" />
+            </div>
+            <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
+              <h2 class="pb-4 text-gray-50 group-hover:text-yellow-300">
+                {{ item.name }}
+              </h2>
+            </div>
+          </div>
+        </template>
+      </Waterfall>
+    </BScrollBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import type { ViewCard } from '../../lib/types/waterfall'
+import { LazyImg, Waterfall } from '../../lib/index'
+// import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
+// import 'vue-waterfall-plugin-next/dist/style.css'
+import { getList } from '../api'
+import loading from '../assets/loading.png'
+import error from '../assets/error.png'
+import BScrollBox from './BScrollBox.vue'
+
+const useList = function() {
+  const pages = ref([1, 2, 3, 4, 5])
+  const page = ref(1)
+  const list = ref<ViewCard[]>([])
+
+  function handleChangePage(val: number) {
+    page.value = val
+    return handleLoadMore()
+  }
+
+  // 加载更多
+  function handleLoadMore() {
+    return new Promise((resolve, reject) => {
+      getList({
+        page: page.value,
+        pageSize: 20,
+      }).then((res) => {
+        list.value.push(...res)
+        resolve(true)
+      })
+    })
+  }
+
+  return {
+    list,
+    page,
+    pages,
+    handleLoadMore,
+    handleChangePage,
+  }
+}
+
+const options = reactive({
+  // 唯一key值
+  rowKey: 'id',
+  // 卡片之间的间隙
+  gutter: 10,
+  // 是否有周围的gutter
+  hasAroundGutter: true,
+  // 卡片在PC上的宽度
+  width: 320,
+  // 自定义行显示个数，主要用于对移动端的适配
+  breakpoints: {
+    1200: {
+      // 当屏幕宽度小于等于1200
+      rowPerView: 4,
+    },
+    800: {
+      // 当屏幕宽度小于等于800
+      rowPerView: 3,
+    },
+    500: {
+      // 当屏幕宽度小于等于500
+      rowPerView: 2,
+    },
+  },
+  // 动画效果
+  animationEffect: 'animate__fadeInUp',
+  // 动画时间
+  animationDuration: 1000,
+  // 动画延迟
+  animationDelay: 300,
+  // 背景色
+  backgroundColor: '#2C2E3A',
+  // imgSelector
+  imgSelector: 'src.original',
+  // 加载配置
+  loadProps: {
+    loading,
+    error,
+  },
+  // 是否懒加载
+  lazyload: true,
+  crossOrigin: true,
+})
+
+const {
+  list,
+  page,
+  pages,
+  handleLoadMore,
+  handleChangePage,
+} = useList()
+
+onMounted(() => {
+  handleLoadMore()
+})
+
+const bs = ref(null)
+async function pullingUp() {
+  page.value += 1
+  await handleChangePage(page.value)
+  if (bs.value)
+    bs.value.finishPullUp()
+}
+
+function imageLoad(url: string) {
+  // console.log(`${url}: 加载完成`)
+}
+
+function imageError(url: string) {
+  console.error(`${url}: 加载失败`)
+}
+
+function imageSuccess(url: string) {
+  // console.log(`${url}: 加载成功`)
+}
+</script>
+
+<style scoped>
+.page-b-content {
+  height: 100vh;
+  background-color: #2C2E3A;
+}
+
+.page-menus {
+  position: fixed;
+  left: 20px;
+  bottom: 20px;
+}
+
+.page-menus__item {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2px solid #e7e7e7;
+  background-color: #fff;
+  margin-bottom: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 14px;
+  color: #666;
+}
+
+.page-menus__item.active {
+  background-color: #e75932;
+  color: #fff;
+}
+
+/* .box1 {
+  height: 500px;
+  background-color: red;
+}
+
+.box2 {
+  height: 500px;
+  background-color: yellow;
+}
+
+.box3 {
+  height: 500px;
+  background-color: blue;
+} */
+</style>
diff --git a/example/components/WaterfallLayout.vue b/example/components/WaterfallLayout.vue
@@ -4,6 +4,9 @@
       <router-link to="/page-a">
         基础API展示
       </router-link>
+      <router-link to="/page-c">
+        配合better-scroll实现滚动加载
+      </router-link>
       <router-link to="/page-b">
         数据分页展示
       </router-link>

diff --git a/example/router.ts b/example/router.ts
@@ -18,6 +18,11 @@ const router = createRouter({
       name: 'PageB',
       component: () => import('./components/PageB.vue'),
     },
+    {
+      path: '/page-c',
+      name: 'PageC',
+      component: () => import('./components/PageC.vue'),
+    },
   ],
 })