更新记录
1.0.0(2025-05-25)
下载此版本
初始化
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
iasei-scroll
组件介绍
本组件是大量数据列表渲染优化组件
属性说明
名称 |
类型 |
默认值 |
描述 |
data |
Array |
[] |
数据列表 |
optimize |
Boolean |
false |
是否对大量数据显示卡顿优化 |
refresher |
Boolean |
false |
是否下拉刷新 |
事件
名称 |
类型 |
说明 |
@next |
function |
下一页回调 |
@refresh |
function(setLoading:Function) |
下拉刷新回调,setLoading(true) 显示loading,setLoading:(false) 关闭loading |
插槽
属性名 |
属性值 |
用法 |
说明 |
#default |
具名插槽 |
<template #default="{item,index}" > |
item:数据对象;index:数据索引 |
使用方式
<template>
<iasei-scroll :data="allList" refresher @next="handleNext">
<template #default="{item,index}">
<view class="item" :style="{height:item.type ? '50px' : '100px'}">
<span>我是第{{item.index}}条数据</span>
</view>
</template>
</iasei-scroll>
</template>
<script>
export default {
components: {
},
data() {
return {
allList: [],
}
},
onLoad() {
this.handleNext()
},
onShow() {
},
computed: {
},
methods: {
handleNext() {
for (let i = 0; i < 50; i++) {
const type = i % 3 ? 1 : 0
const h = type ? 50 : 100
this.allList.push({
'index': i,
'type': type,
'$height': h,
})
}
}
}
}
</script>
<style>
page {
height: 100%;
}
.item {
/* 按照实际需求写css */
width: 100%;
height: 200rpx;
/* 要对应上itemHeight */
border: 1rpx solid slateblue;
}
</style>