uniapp组件-uni-steps 步骤条

柔情只为你懂 2021-07-26 00:26 2741阅读 0赞

## 效果图： ##

![20210303213353631.gif][]

## 代码实现： ##

<template>
    	<view>
    		<uni-steps :options="list1" active-color="#007AFF" :active="active" />
    		<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
    		<button type="primary" @click="change">改变状态</button>
    	</view>
    </template>
    <script>
    export default {
    	components: {},
    	data() {
    		return {
    			active: 1,
    			list1: [
    					{title: '事件一'},
    					{title: '事件二'},
    					{title: '事件三'},
    					{title: '事件四'}
    				],
    			list2: [
    					{title: '买家下单',desc: '2018-11-11'},
    					{title: '卖家发货',desc: '2018-11-12'},
    					{title: '买家签收',desc: '2018-11-13'},
    					{title: '交易完成',desc: '2018-11-14'}
    				]
    		};
    	},
    	methods: {
    		change() {
    			if (this.active < this.list1.length - 1) {
    				this.active += 1;
    			} else {
    				this.active = 0;
    			}
    		}
    	}
    };
    </script>

[20210303213353631.gif]: /images/20210725/09223ff42a9341d89718392c73f1ca08.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2741人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp的map组件

uni-app 地图使用的是腾讯地图注：中间不能有多个并列，不然编译不通过。 vue模板只能有一个根目录 <template> <view>

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 05:37/ 0 赞/ 480 阅读

相关扩展 LayUI 步骤条组件，示例演示

扩展 LayUI 步骤条组件，示例演示操作演示： ![在这里插入图片描述][20190410092802823.gif] 代码简介：优点：使用扩展

青旅半醒/ 2022年02月21日 00:20/ 0 赞/ 985 阅读

相关 vue element组件之步骤条组件的应用

效果如下 ![20190511132448918.gif][] 代码如下 <template> <div class="body">

心已赠人/ 2022年02月02日 10:57/ 0 赞/ 813 阅读

相关 uniapp loading 组件

> 组件：loading.vue <template> <view> <view class="cu-load load-modal" v-if

「爱情、让人受尽委屈。」/ 2021年09月19日 16:36/ 0 赞/ 913 阅读

相关 uniapp组件汇总

1. [Card卡片][Card] 2. [uni-swiper-dot轮播图指示点][uni-swiper-dot] 3. [Section章节标题][Section]

「爱情、让人受尽委屈。」/ 2021年09月07日 06:13/ 0 赞/ 706 阅读

相关 uniapp组件-Card卡片

官方组件：[https://ext.dcloud.net.cn/plugin?id=22][https_ext.dcloud.net.cn_plugin_id_22] 效

青旅半醒/ 2021年07月26日 02:24/ 0 赞/ 1413 阅读

相关 uniapp组件-uni-steps 步骤条

效果图： ![20210303213353631.gif][] 代码实现： <template> <view> <uni-steps

柔情只为你懂/ 2021年07月26日 00:26/ 0 赞/ 2742 阅读

相关 uniapp组件-uni-icons 图标

官网示例：[https://ext.dcloud.net.cn/plugin?id=28][https_ext.dcloud.net.cn_plugin_id_28] 例

比眉伴天荒/ 2021年07月25日 22:02/ 0 赞/ 1556 阅读

相关 uniapp组件-button按钮

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

川长思鸟来/ 2021年07月25日 14:27/ 0 赞/ 1578 阅读

相关 uniapp 组件传参

父组件 <v-sub @returnDate=returnDate :backGround=backGround></v-sub> import v

我会带着你远行/ 2021年07月24日 13:11/ 0 赞/ 557 阅读