更新记录

1.0.4（2024-11-18） 下载此版本

修复一些问题。

1.0.3（2024-11-15） 下载此版本

升级显示。

1.0.2（2024-11-15） 下载此版本

修复显示问题。

平台兼容性

uni-app

其他

方便您的同时，请五星、收藏，让好的东西照亮更多深渊中负重前行的代码人。

创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。

简介

ljs-steps，灵活的步骤组件、时间轴组件。它是灵活的，你也可以把应用在很多场景。

使用 uni_modules 安装（推荐）

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ljs-steps组件。

主参数

stepOpts参数

插槽

快速应用

示例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);
}

贡献代码

龙九山。有任何问题，请在平台留言，在手头宽裕得情况下，我会尽快修复问题。