更新记录
1.0.1(2023-01-12)
下载此版本
添加自定义背景颜色和字体颜色
1.0.0(2022-12-29)
下载此版本
更新版本
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
× |
zyCell 单元格参数属性
序号 |
参数 |
说明 |
类型 |
可选值 |
默认值 |
是否必须 |
1 |
title |
单元格标题 |
String |
--- |
--- |
× |
2 |
cellList |
单元格数据 |
Array |
--- |
--- |
√ |
3 |
type |
单元格类型 |
String |
list/group |
list |
× |
4 |
backgroundColor |
背景颜色 |
String |
--- |
#ffffff |
× |
5 |
color |
字体颜色 |
String |
--- |
--- |
× |
cellGroup属性
序号 |
参数 |
说明 |
类型 |
默认值 |
是否必须 |
1 |
img |
左侧添加图片 |
String |
--- |
× |
2 |
imgWidth |
左侧图片宽度 |
String |
55(单位rpx) |
× |
3 |
imgHeight |
左侧图片高度 |
String |
55(单位rpx) |
× |
4 |
iconfont |
左侧iconfont图标 |
String |
--- |
× |
5 |
iconfontColor |
左侧iconfont图标颜色 |
String |
--- |
× |
6 |
iconfontSize |
左侧iconfont图标尺寸 |
String |
42(单位rpx) |
× |
7 |
iconfontBold |
左侧iconfont图标加粗 |
Boolean |
false |
× |
8 |
icon |
左侧icon图标 |
String |
--- |
× |
9 |
iconColor |
左侧icon图标颜色 |
String |
--- |
× |
10 |
iconSize |
左侧icon图标尺寸 |
String |
42(单位rpx) |
× |
11 |
iconBold |
左侧icon图标加粗 |
Boolean |
false |
× |
12 |
text |
单元格名称 |
String |
--- |
× |
13 |
url |
跳转路径 |
String |
--- |
× |
14 |
rightText |
右侧名称 |
String |
--- |
× |
15 |
rightIcon |
右侧iconfont图标 |
String |
箭头向右图标 |
× |
16 |
rightIconColor |
右侧iconfont图标颜色尺寸 |
String |
#999999 |
× |
17 |
rightIconSize |
右侧iconfont图标尺寸 |
String |
35(单位rpx) |
× |
18 |
rightIconBold |
右侧iconfont图标加粗 |
Boolean |
false |
× |
19 |
rightImg |
右侧自定义图片 |
String |
--- |
× |
20 |
rightImgWidth |
右侧图片宽度 |
String |
35(单位rpx) |
× |
21 |
rightImgHeight |
右侧图片高度 |
String |
35(单位rpx) |
× |
zyCell 单元格事件
序号 |
参数 |
说明 |
类型 |
可选值 |
默认值 |
是否必须 |
1 |
clickHandler |
触发选择该行事件 (在data中定义url路径,点击直接跳转页面) |
Function |
(item,index)=>{} |
否 |
× |
<template>
<view>
<!-- list类型 -->
<zy-cell :cellList="cellList1"></zy-cell>
<!-- group类型 -->
<zy-cell :cellList="cellList2" type="group"></zy-cell>
<!-- 点击事件 -->
<zy-cell :cellList="cellList3" @clickHandler="clickHandler"></zy-cell>
<!-- 更换背景色+标题显示 -->
<zy-cell :cellList="cellList4" title="更换背景色" backgroundColor="#222" color="#fff"></zy-cell>
</view>
</template>
<script>
import zyCell from '@/uni_modules/zy-cell/components/zy-cell/zy-cell.vue'
export default {
components: {
zyCell,
},
data() {
return {
cellList1: [{
img: require('@/static/cell/about.png'),
text: "关于",
rightImg: require('@/static/cell/right.png'),
}, {
iconfont: 'caret-set',
text: "设置",
url: "./set/index", //跳转页面
}, {
iconfont: 'version',
text: "版本",
rightText: "1.0.1", //自定义右侧文本
}, {
iconfont: 'location',
text: "定位",
rightText: "中国,江苏", //自定义右侧文本
}],
cellList2: [{
iconfont: 'thumbs-up',
text: "点赞"
}, {
iconfont: 'warning-outline',
text: "警告"
}],
cellList3: [{
iconfont: 'star',
text: "收藏",
iconColor: "#ff0000",
iconSize: "36"
}],
cellList4: [{
iconfont: 'magnifier',
text: "查询",
rightIconSize: "40"
}],
}
},
mounted() {},
methods: {
clickHandler(e) {
if (e.index == 0) {
uni.showToast({
title: "收藏成功",
duration: 2000,
icon: 'none'
});
}
},
}
}
</script>
<style lang="scss">
/* 页面背景色 */
page {
background-color: #f5f5f5;
}
</style>
如使到图标,请至下载zy-icon配套使用
如使用过程中有任何问题,或者您有一些好的建议,欢迎联系QQ:2360273432