uniapp 电商app 步骤条功能的使用

最新推荐文章于 2024-09-27 21:34:18 发布
最新推荐文章于 2024-09-27 21:34:18 发布
阅读量6.7k 收藏 17
点赞数 6
分类专栏： uniapp电商app开发 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehaocheng520/article/details/110448858
版权

步骤条功能

原型图如下图所示：
在这里插入图片描述
dcloud插件市场中是有现成的组件的：

steps步骤条插件地址：https://ext.dcloud.net.cn/plugin?id=34

在这里插入图片描述

使用方法

script中引入

import uniSteps from '@/components/uni-steps/uni-steps.vue'
export default {
    components: {uniSteps}
}

template中使用

<uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps>

在这里插入图片描述
针对组件有部分改动，效果图如下：

在这里插入图片描述
组件代码如下：

<template>
	<view class="uni-steps" style="margin-top:20upx;">
		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options"
				 :key="index" @click="toStep(item)">
					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
					 :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
					<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
						<uni-icons :color="activeColor" type="checkbox-filled" size="30"></uni-icons>
					</view>
					<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else>
						{{index + 1}}
					</view>
					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
					 :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
				</view>
			</view>
			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']" style="margin-top:20upx;">
				<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../uni-icons/uni-icons.vue'
	export default {
		name: 'UniSteps',
		components: {
			uniIcons
		},
		props: {
			direction: {
				// 排列方向 row column
				type: String,
				default: 'row'
			},
			activeColor: {
				// 激活状态颜色
				type: String,
				default: '#1aad19'
			},
			deactiveColor: {
				// 未激活状态颜色
				type: String,
				default: '#999999'
			},
			active: {
				// 当前步骤
				type: Number,
				default: 0
			},
			options: {
				type: Array,
				default () {
					return []
				}
			} // 数据
		},
		data() {
			return {}
		},
		methods:{
			toStep(item){
				this.$emit('selectStep',item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-steps {
		/* #ifndef APP-NVUE */
		display: flex;
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row-reverse;
	}

	.uni-steps__row-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-steps__column-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
	}

	.uni-steps__row-text {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
	}

	.uni-steps__column-text {
		padding: 12upx 0upx;
		border-bottom-style: solid;
		border-bottom-width: 2upx;
		border-bottom-color: $uni-border-color;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__row-title {
		font-size: $uni-font-size-base;
		line-height: 32upx;
		text-align: center;
	}

	.uni-steps__column-title {
		font-size: $uni-font-size-base;
		text-align: left;
		line-height: 36upx;
	}

	.uni-steps__row-desc {
		font-size: 24upx;
		line-height: 28upx;
		text-align: center;
	}

	.uni-steps__column-desc {
		font-size: $uni-font-size-sm;
		text-align: left;
		line-height: 36upx;
	}

	.uni-steps__row-container {
		height:60upx;
		border:1px soild red;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-steps__column-container {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		width: 60upx;
		flex-direction: column;
	}

	.uni-steps__row-line-item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
		height: 60upx;
		line-height: 60upx;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__column-line-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__row-line {
		flex: 1;
		height: 2upx;
		background-color: $uni-text-color-grey;
	}

	.uni-steps__column-line {
		width: 2upx;
		background-color: $uni-text-color-grey;
	}

	.uni-steps__row-line--after {
		transform: translateX(1px);
	}

	.uni-steps__column-line--after {
		flex: 1;
		transform: translate(0px, 1px);
	}

	.uni-steps__row-line--before {
		transform: translateX(-1px);
	}

	.uni-steps__column-line--before {
		height: 12upx;
		transform: translate(0px, -1px);
	}

	.uni-steps__row-circle {
		border:1px solid #999999;
		background:transparent;
		width:60upx;
		height:60upx;
		border-radius: 50%;
		text-align: center;
		line-height: 54upx;
	}

	.uni-steps__column-circle {
		width: 10upx;
		height: 10upx;
		border-radius: 200upx;
		background-color: $uni-text-color-grey;
		margin: 8upx 0upx 10upx 0upx;
	}

	.uni-steps__row-check {
		margin: 0upx 12upx;
	}

	.uni-steps__column-check {
		height: 28upx;
		line-height: 28upx;
		margin: 4upx 0upx;
	}
</style>

组件的使用如下：

import uniSteps from '@/components/uni-steps/uni-steps.vue'
export default {
   components: {uniSteps},
	data(){
		return{
			activeIndex:-1,
			stepOptions:[
				{title: '基本信息',index:0}, 
				{title: '门店信息',index:1}, 
				{title: '门店图片',index:2}, 
				{title: '等待审核',index:3}
			],
		}
	},
	methods:{
		selectStep(item){
			console.log(item);
		}
	}
叶浩成520
关注
专栏目录
uni-app插件ColorUI步骤条
weixin_34087503的博客
06-25 1233
1. uni-app插件ColorUI步骤条 1.1. 前言 uni-app就不介绍了，前面几篇已经有所介绍，不知道的可以翻看我前面几篇博客 ColorUI-uniApp是uni-app的一款ui组件，事实上就是对uni-app组件添加css，使其更加漂亮 这里我抛砖引玉的介绍一下步骤条的使用，之所以介绍它是因为使用它的过程中，发现的几点问题 第一它本身的例子太过简单，但事实上它是可以实现的更...
uniapp steps步骤条 uview组件 实现样式如图~
weixin_42560947的博客
04-27 5796
uniapp uview组件 steps步骤图 实现样式如图~
uniapp组件-uni-steps 步骤条
热门推荐
03-03 1万+
效果图： 代码实现： <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" @cli
Uni-app 学习笔记--解决的一些难点
最新发布
qq_40487401的博客
09-27 447
无非就是在顶部根据数组内容生成一排按钮，让他看起来像一个导航栏，代码如下：-- 顶部内容容器 -->-- 顶部自定义导航栏-->-- 从数组中取出每个元素内容，生成一个按钮 -->-- 按钮根据activeIndex的值动态地切换class的值，从而实现选中效果 --></view></view></view></view><script>data() {return {name:'推荐',id:'0'},name:'热门',id:'1'},name:'最新',
uniapp实现步骤条
lllcuigu的博客
10-11 752
用到这个步骤条的时候，看了下uniapp和uview官网的案例，步骤条的组件样式改动不好改，就自己写了一个。
uniapp小程序步骤条封装和调用
weixin_47038177的博客
10-26 1710
说明：这里我还使用了uni-icon，这个同样需要插件市场下载然后引入。到现在就已经完成了，如果有报错信息注意是否安装好了icon插件。
uniapp步骤条使用
junhian的博客
11-12 532
最近公司有一个这种需求，就是需要画一个简单步骤条，然后能显示进度。
uni-app纵向步骤条
weixin_42079403的博客
03-21 1315
分享一下项目中自封装的步骤条，存个档~1. 话不多说，先看效果。
uniapp 电商项目模版--mix-mall.zip
11-01
【描述】"uniapp 电商项目模版--mix-mall" 描述了模板的主要功能和应用场景，即用于创建电子商务网站或应用程序。uniapp是一个多端开发框架，它允许开发者用一种语言编写代码，然后编译到包括iOS、Android、H5等多个...
使用uniapp、unicloud实现的电商系统源码.zip
06-02
"使用uniapp、unicloud实现的电商系统源码.zip" 这个标题揭示了项目的核心技术栈，即uniapp和unicloud，它们是开发一个电商系统的工具和平台。uniapp是一个跨平台的前端框架，而unicloud是阿里云提供的云端一体化...
淘宝客APP源码社交电商uniapp开发源码下载前端源码自营商城源码.txt
03-11
利用UniApp开发的社交电商APP，不仅可以实现商品的展示和交易功能，还能借助社交媒体的力量进行更有效的推广。这种模式下，用户既是消费者也是推广者，能够形成良好的口碑传播效应。 #### 三、技术栈介绍 1. **...
步骤条源码
07-31
jquery实现的步骤条
使用 UniApp 实现小程序的微信登录功能
10-15
通过以上步骤和注意事项，开发者就可以在UniApp中实现微信登录功能，并在此基础上开发出更多符合用户需求的功能。这不仅能够提升用户的使用体验，也能够在竞争激烈的市场中，为小程序带来更多的用户和流量。
uniapp 微信端 仿淘宝 视频+图片 轮播(一比一还原)
10-22
在本教程中，我们将深入探讨如何使用uniapp框架在微信小程序上实现一个视频与图片结合的轮播功能，以此来一比一地复刻淘宝应用中的相似设计。uniapp是一个跨平台的开发工具，它允许开发者用一套代码库构建iOS、...
uniapp手写步骤条
weixin_47768765的博客
09-15 506
【代码】uniapp手写步骤条。
uniapp步骤条
weixin_60656199的博客
08-02 1215
uniapp小程序步骤条点击下一步只有内容部分变动
前端（uniapp）自定义步骤条
weixin_52235911的博客
08-25 1070
【代码】前端（uniapp）自定义步骤条。
【uniapp】自定义步骤条样式
Komorebi_00的博客
02-18 1192
【代码】【uniapp】自定义步骤条样式。
uniapp+vue+css手写步骤条组件
2301_76553269的博客
02-05 1006
首先看需求是步骤条，然后看组件中没有自己想要的步骤条，那么就的自己去写 因为有小圈还有大圈所有上面的主体部分的进行判断，很好理解的上面都有注释，当你的数组长度最大时就不显示线条，反之显示 现在几乎实现了整体部分，但是bug出现了，就是你的部分如果高的话就会把下面部分挤出去，线条就不能正常链接了，这个问题怎么解决呢！！！别着急看下面
使用uniapp开发微信小程序实现完整商城功能
uniapp是一个使用Vue.js开发所有前端应用的框架，编写一套代码，可发布到iOS、Android、Web（包括微信/支付宝/百度/头条/QQ/钉钉等）以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉等）等多个平台。uniapp基于Vue，...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叶浩成520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值