更新记录
1.0.0(2024-04-07)
下载此版本
首次上传
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
uc-grid
Grid布局的兼容实现
参数
属性名 |
属性标题 |
类型 |
默认值 |
可选值 |
width |
宽度(rpx) |
Number |
0 |
|
height |
高度(rpx) |
Number |
0 |
|
space |
中间的空白(rpx) |
Number |
0 |
|
max |
一行的最大数量 |
Number |
0 |
|
data |
列表 |
Array |
[] |
|
data
rowOffset: 0
rowSpan: 1
colOffset: 0
colSpan: 1
插槽
cell
i 索引
style 样式
size 尺寸
cell 单元数据
示例
<template>
<uc-grid :data="data" :widht="200" :height="200" :max="3" :space="25" style="padding: 50rpx 0;margin: 0 50rpx">
<template #cell="{cell, i, size, style}">
<view :style="style">
{{cell.name}}
</view>
</uc-grid>
</template>
<script>
export default {
data() {
return {
data: [
{name: 'demo1'},
{name: 'demo2'},
{name: 'demo3'},
{name: 'demo4'},
{name: 'demo5'},
]
}
}
}
</script>