更新记录
1.0.0(2024-06-06)
发布 滑动分页加载 bcode-scroll-load 组件初版
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
属性说明
属性名 |
类型 |
是否必填 |
默认值 |
说明 |
total |
Number |
是 |
0 |
数据总条数 |
isLoading |
Boolean |
是 |
false |
是否正在加载数据(加载完后需要设置回false) |
scrollType |
String |
否 |
y |
滚动类型 x: 横向滚动 y: 纵向滚动 |
width |
String |
否 |
100% |
容器宽度 |
height |
String |
否 |
'' |
容器高度 |
scrollThreshold |
Number |
否 |
0 |
滚动阈值, 值越小,触发滚动越快, 不设置的话会按容器宽度的比例来计算(x: 1/6,y:1/5) |
loadText |
String |
否 |
正在加载数据... |
拉倒最底或右时显示的加载提示文字 |
isShowDots |
Boolean |
否 |
false |
是否显示导航点 |
dotColor |
String |
否 |
#244087 |
导航点颜色 |
isShowSafeArea |
Boolean |
否 |
false |
是否显示手机底部安全区 |
isLoadingSuccessToNextCurrent |
Boolean |
否 |
true |
是否加载成功后自动切换到下一页 |
事件说明
事件名 |
类型 |
说明 |
返回参数 |
@changeCurren |
Function |
滑块内容滚动完成后触发 |
返回 { current: 滑动位置索引, } |
@scrolltolower |
Function |
滚动到底部/右边,会触发 scrolltolower 事件 |
无 |
@scrolltoupper |
Function |
滚动到顶部/左边,会触发 scrolltoupper 事件 |
无 |
示例代码
[!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>