扩展组件(uni-ui)之uni-steps

uni-steps 是 uni-app 的 uni-ui 组件库中的一个组件,用于展示步骤条,常用于指引用户完成连续的任务流程,如购物结算、订单创建等。

基本用法

在使用 uni-steps 之前,你需要确保已经正确安装了 uni-ui 库,并在页面中引入了 uni-steps 组件。

引入组件

html 复制代码
<template>
    <uni-steps :active="active" :options="options"></uni-steps>
</template>

<script>
    import uniSteps from '@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue'
    export default {
        components: { uniSteps },
        data() {
            return {
                active: 1, // 当前步骤
                options: [ // 步骤条的步骤
                    { title: '步骤一' },
                    { title: '步骤二' },
                    { title: '步骤三' }
                ]
            }
        }
    }
</script>

属性

uni-steps 组件提供了以下属性:

  • active:当前的步骤,从 0 开始计数。
  • options:步骤条的步骤数组,每个元素是一个对象,通常包含 title(步骤标题)和其他你想要添加的属性。
  • direction:步骤条的方向,可选值为 horizontal(水平)和 vertical(垂直)。

示例

创建一个基础的步骤条:

html 复制代码
<uni-steps :active="1" :options="[
    { title: '步骤一' },
    { title: '步骤二' },
    { title: '步骤三' }
]"></uni-steps>

注意事项

  • active 属性控制当前激活的步骤,它是从 0 开始的索引,所以 active="1" 表示激活第二个步骤。
  • options 属性中的每个对象代表一个步骤,你可以根据需要添加更多的属性,例如描述文本等。
  • 步骤条可以是水平的也可以是垂直的,这取决于你如何设置 direction 属性。

更多关于 uni-steps 组件的使用细节,可以查阅 uni-ui 官方文档 或 uni-ui 库的相关文档。

相关推荐
龙在天10 分钟前
“手速太快,分页翻车?”,前端分页竞态问题,看这一篇就够了
前端
Riesenzahn12 分钟前
你使用过css3的:root吗?说说你对它的理解
前端·javascript
Riesenzahn14 分钟前
在js中undefined和undeclared有什么区别?
前端·javascript
打野赵怀真16 分钟前
平时有经常用到nextTick吗?谈谈你对nextTick的理解。
前端·javascript
LaoZhangAI17 分钟前
2025最全Browser Use MCP指南:AI控制浏览器的开源解决方案与API接入全攻略
前端
leopai21 分钟前
面试官最喜欢问的:前端怎么自动检测代码更新?
前端·javascript·面试
学不动学不明白23 分钟前
接口错误码监听方法
前端
前端康师傅24 分钟前
CSS基础教程-变量
前端·css
小钰能吃三碗饭26 分钟前
第一篇:【前端翻身计划】从菜鸟到高手,JavaScript ES6+实战秘籍揭秘!
前端·javascript·react.js
爱上大树的小猪27 分钟前
【前端进阶】可选链与空值合并:接口数据容错处理的最佳实践
前端·javascript·面试