更新记录
1.0.1(2024-07-24)
下载此版本
修复小程序显示问题。
1.0.0(2024-07-24)
下载此版本
ljs-steps,灵活的步骤组件、时间轴组件。
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
方便您的同时,请五星、收藏,让好的东西照亮更多深渊中负重前行的代码人。
创作不易,在您方便之际,赞赏作者,我们会更有动力继续下去。
简介
ljs-steps,灵活的步骤组件、时间轴组件。
使用 uni_modules 安装(推荐)
使用 uni_modules 方式安装组件库,可以直接通过插件市场导入,通过右键菜单快速更新组件,不需要引用、注册,直接在页面中使用 ljs-steps组件。
主参数
参数 |
类型 |
必填项 |
默认值 |
说明 |
data |
Array |
√ |
|
数据 |
stepTop |
Number |
× |
20 |
steps距离顶部的距离 |
stepOpts |
Object |
× |
|
step参数 |
stepOpts参数
参数 |
类型 |
必填项 |
默认值 |
说明 |
dotSize |
Number |
× |
12 |
标记大小。单位upx。 |
dotRadius |
String |
× |
50% |
标记圆角。 |
dotColor |
String |
× |
#21CE7F |
标记颜色。 |
lineSize |
Number |
× |
2 |
连线大小。单位upx。 |
lineColor |
String |
× |
#EBEDEE |
连线颜色。 |
插槽
插槽名 |
说明 |
default |
每项数据的回显可用。scope.row。 |
快速应用
示例1
<ljs-steps :data="data">
<!-- #ifdef MP-WEIXIN -->
<template v-slot:default="{row}">
<view class="item">
<view class="date">{{ row.date }}</view>
<view class="info">{{ row.info }}</view>
<view class="dis">这是一个步骤展示器,可以展示每个步骤的数据。</view>
</view>
</template>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<template #default="scope">
<view class="item">
<view class="date">{{ scope.row.date }}</view>
<view class="info">{{ scope.row.info }}</view>
<view class="dis">这是一个步骤展示器,可以展示每个步骤的数据。</view>
</view>
</template>
<!-- #endif -->
</ljs-steps>
export default {
data() {
return {
opts: {
dotSize: 22, // 大小
dotRadius: '0', // 圆角
dotColor: 'red', // 颜色
lineSize: 8 // 大小
},
data: [
{
date: '2024-07-01',
info: '完成10个俯卧撑!',
},
{
date: '2024-07-02',
info: '完成20个俯卧撑!',
},
{
date: '2024-07-03',
info: '完成30个俯卧撑!',
},
{
date: '2024-07-04',
info: '完成40个俯卧撑!',
}
]
}
}
}
.date{
line-height: 40upx;
font-size: 32upx;
}
.info{
line-height: 40upx;
font-size: 28upx;
color: #333;
}
.dis{
line-height: 40upx;
font-size: 22upx;
color: rgba(#324A59, .5);
}
贡献代码
龙九山。有任何问题,请在平台留言,在手头宽裕得情况下,我会尽快修复问题。