更新记录
1.0.1(2023-08-23) 下载此版本
优化
1.0.0(2023-04-05) 下载此版本
上传
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
attributes
属性名 | 说明 | 类型 | 默认 |
---|---|---|---|
list | 数据列表 | Array | [] |
cacheNum | 前后缓存数据项 | number | 50 |
emits
scroll:滚动事件,回调参数为scrollTop
slots
default:默认插槽,作用域参数为当前项数据{item}
event
无
示例
<template>
<view class="box">
<mosowe-invented-list
:list="list"
:cacheNum="100">
<template #default="{ item }">
<view class="item">
<view class="name">
{{ item.name }}
</view>
<view class="age">
{{ item.age }}
</view>
</view>
</template>
</mosowe-invented-list>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const list = ref<any>([]);
setTimeout(() => {
list.value = Array.from({ length: 10000 }).map((item: any, index: number) => ({
name: '小明-' + index,
age: index
}));
}, 1000);
</script>
<style lang="scss" scoped>
.box {
width: 100vw;
height: 100vh;
.name {
font-size: 32rpx;
font-weight: bold;
line-height: 40rpx;
margin-bottom: 20rpx;
color: #333;
}
.age {
font-size: 24rpx;
color: #999;
}
.item {
margin: 30rpx;
padding: 30rpx;
box-sizing: border-box;
background-color: #eee;
border-radius: 12rpx;
}
}
</style>