更新记录

1.0.0（2024-06-06）

发布 滑动分页加载 bcode-scroll-load 组件初版

平台兼容性

属性说明

事件说明

示例代码

[!warning] 提示 【重点】 如果 scrollType = 'x' 的话，组件代码中就会使用 flex 布局来排列，当发现元素内容 被挤压 时，就需要给 slot 的内容添加 flex-shrink: 0; css 属性。经测试，在 vue 3 中可无需设置，但是 vue 2 中可能需要，因为组件内部的样式无法穿透到 slot 内部

注：此示例代码为 Vue 3 写发，如若是 vue 2, 请按需修改!!!

<!-- 滑动分页加载 -->
<template>
  <view class="test-page">
    <template v-if="scrollType === 'y'">
      <!-- Y 轴滑动案例 -->
      <bcode-scroll-load
        scrollType="y"
        height="100vh"
        :total="dataList.length"
        :isLoading="isLoading"
        isShowSafeArea
        isShowDots
        @scrolltolower="onLoadMore"
      >
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="load-box"
          :style="{
            'background-color': boxColor[index % boxColor.length]
          }"
        >
          <view>
            <view class="item-index">index:{{ index }}</view>
            <view class="item-data">数据：{{ item }}</view>
          </view>
        </view>
      </bcode-scroll-load>
    </template>

    <template v-else>
      <!-- X 轴滑动案例 -->
      <bcode-scroll-load
        scrollType="x"
        height="50vh"
        :total="dataList.length"
        :isLoading="isLoading"
        isShowDots
        @scrolltolower="onLoadMore"
      >
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="load-box"
          :style="{ 'background-color': boxColor[index % boxColor.length] }"
        >
          <view>
            <view class="item-index">index:{{ index }}</view>
            <view class="item-data">数据：{{ item }}</view>
          </view>
        </view>
      </bcode-scroll-load>
    </template>

    <button class="set-btn" @click="onSetType">切换为{{ scrollType === 'x' ? 'Y' : 'X' }}轴滑动</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const INIT_TEST_DATA = [{ name: '1' }, { name: '2' }, { name: '3' }]

const scrollType = ref('y')
const isLoading = ref(false) // 是否上拉加载
const dataList = ref(JSON.parse(JSON.stringify(INIT_TEST_DATA)))
const boxColor = ['#f44336', '#2196f3', '#8bc34a', '#ff9800']

// 上拉加载
const onLoadMore = () => {
  isLoading.value = true

  setTimeout(() => {
    addList()
    isLoading.value = false
  }, 2000)
}

// 模拟加载数据
const addList = () => {
  const addLen = 2
  const lastLen = dataList.value.length
  for (let i = 1; i <= addLen; i++) {
    dataList.value.push({ name: (lastLen + i).toString() })
  }
}

const onSetType = () => {
  dataList.value = JSON.parse(JSON.stringify(INIT_TEST_DATA))
  scrollType.value = scrollType.value === 'x' ? 'y' : 'x'
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.test-page {
  // ====== 防止ios 小程序端顶部和底部滑动空白 ======
  position: fixed;
  left: 0;
  top: 0;
  // ====== 防止ios 小程序端顶部和底部滑动空白 ======
  width: 100%;
  margin: 0 auto;
}

.set-btn {
  position: fixed;
  right: 24rpx;
  bottom: 160rpx;
  z-index: 9;
  background-color: #244087;
  color: #fff;
}

.load-box {
  // flex-shrink: 0; // **** 如果是x轴滑动，若元素被挤压，就需要设置该属性，vue2项目 好像都需要 ****
  width: 100%;
  height: 100%;
  background-color: #ccc;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  .item-index {
    font-size: 90rpx;
    font-weight: bold;
    color: #fff;
  }
}
</style>