uniapp黑马优购-订单列表和标签切换功能实现

目录

前言

一.订单列表页面

1.效果

 2.订单列表和标签切换功能的Vue组件

3.关键技术

二. uniapp的学习心得

1.感受

2.学习过程

3.特点和优势

4.应用场景

总结

---

前言

这是一个Vue组件，用于展示订单列表和标签切换功能。组件通过数据绑定、列表渲染、事件绑定和样式定义等关键技术实现。它包含了一个tabs数组和activeTab变量来管理标签信息，使用lxs-tabs组件展示标签，并通过事件监听和方法处理标签切换。订单列表数据存储在orderList数组中，通过v-for指令展示订单信息。该组件实现了订单列表展示和标签切换的功能，具有可重用性和可扩展性。

---

一.订单列表页面

1.效果

 2.订单列表和标签切换功能的Vue组件

<template>
	<view>
		<lxs-tabs :tabs="tabs" @tabsChange="handleTabsChange"></lxs-tabs>
		<view class="order_main">
			<view class="order_item" v-for="(item,index) in orderList" :key="index">
				<view class="order_no_row">
					<view class="order_no_text">订单编号</view>
					<view class="order_no_value">{{item.order_number}}</view>
				</view>
				<view class="order_price_row">
					<view class="order_price_text">订单价格</view>
					<view class="order_price_value">￥{{item.order_price}}</view>
				</view>
				<view class="order_time_row">
					<view class="order_time_text">订单日期</view>
					<view class="order_time_value">{{item.create_time_cn}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [{
					id: 0,
					value: "全部",
					isActive: true
				}, {
					id: 1,
					value: "待付款",
					isActive: false
				}, {
					id: 2,
					value: "待发货",
					isActive: false
				}, {
					id: 3,
					value: "退款/退货",
					isActive: false
				}],
				activeTab: 0,
				orderList: [{
						id: 0,
						order_number: "GD20194270000000000567",
						order_price: "279",
						create_time_cn: "2019/4/27 下午4:48:06"
					}, {
						id: 1,
						order_number: "GD20194260000000000563",
						order_price: "13999",
						create_time_cn: "2019/4/27 下午4:48:06"
					},
					{
						id: 2,
						order_number: "GD20194260000000000562",
						order_price: "13999",
						create_time_cn: "2019/4/27 下午4:48:06"
					}
				],
			};
		},
		methods: {
			handleTabsChange(activeId) {
				this.tabs.forEach(v => v.id == activeId ? v.isActive = true : v.isActive = false)
			},
		}
	}
</script>

<style lang="scss">
	.order_main {
		.order_item {
			padding: 20rpx;
			border-bottom: 1rpx solid #ccc;
			color: #666;

			.order_no_row {
				display: flex;
				padding: 10rpx 0;
				justify-content: space-between;

				.order_no_text {}

				.order_no_value {}
			}

			.order_price_row {
				display: flex;
				padding: 10rpx 0;
				justify-content: space-between;

				.order_price_text {}

				.order_price_value {
					color: #cc0000;
					font-size: 32rpx;
				}
			}

			.order_time_row {
				display: flex;
				padding: 10rpx 0;
				justify-content: space-between;

				.order_time_text {}

				.order_time_value {
					color: #000000;
					font-weight: bold;
				}
			}
		}
	}
</style>

• 这段代码展示了一个订单列表和标签切换功能的Vue组件。组件包含了一个tabs数组，用于存储标签的信息，以及一个activeTab变量，用于追踪当前激活的标签。订单列表数据存储在orderList数组中。
• 组件的模板中使用了lxs-tabs组件来展示标签，并通过@tabsChange事件监听标签切换的操作，然后调用handleTabsChange方法来更新标签的激活状态。
• 订单列表的展示使用了v-for指令来遍历orderList数组，并使用插值表达式来展示订单编号、订单价格和订单日期等信息。
• 组件的样式部分定义了订单列表的样式，包括边框、颜色和字体大小等。
• 在组件的methods中，定义了handleTabsChange方法，用于处理标签切换的逻辑。当标签被点击时，遍历tabs数组，根据点击的标签id更新对应标签的isActive属性。
• 该组件可以实现订单列表的展示和标签切换功能，方便用户查看不同状态的订单。

3.关键技术

1. 数据绑定：使用Vue的数据绑定语法，将数据绑定到模板中，实现动态展示和更新数据。
2. 列表渲染：使用v-for指令来遍历数组，动态生成订单列表的每一项。
3. 事件绑定：使用@符号来绑定事件，监听标签切换事件，并在事件处理函数中更新标签的激活状态。
4. 样式定义：使用style标签定义组件的样式，包括边框、颜色和字体大小等，通过类名的嵌套结构来实现样式的层级关系。
5. 数组操作：使用forEach方法遍历tabs数组，根据点击的标签id更新对应标签的isActive属性，实现标签切换的效果。

以上综合应用，使得该Vue组件能够实现订单列表的展示和标签切换功能，提升了用户体验和页面的可交互性。同时，该组件具有可重用性和可扩展性，可以在其他项目中进行复用，提高开发效率。

二. uniapp的学习心得

1.感受

学习uniapp的过程中，我感受到了它的便利和强大。它是一个基于Vue.js的跨平台开发框架，可以同时开发iOS、Android、H5等多个平台的应用。通过uniapp，我可以使用熟悉的Vue语法来开发移动应用，节省了学习不同平台特定技术的时间和精力。

2.学习过程

在学习uniapp的过程中，我首先学习了Vue.js的基础知识，包括组件、指令、事件等。然后，我深入了解了uniapp的文档和示例，学习如何使用uniapp来创建页面、处理路由、发送请求等。我还学习了uniapp的UI组件库，如uView，以及一些常用的插件和工具。

3.特点和优势

uniapp具有许多特点和优势，使其成为移动应用开发的理想选择。首先，它具有跨平台的能力，可以同时开发多个平台的应用，极大地提高了开发效率。其次，uniapp使用Vue.js作为基础，可以充分利用Vue的生态系统和社区资源。还有，uniapp支持原生插件的集成，可以方便地使用设备功能和第三方服务。此外，uniapp还提供了丰富的组件和模板，可以快速构建复杂的界面和交互。

4.应用场景

uniapp适用于各种应用场景，包括企业内部应用、电商平台、社交媒体、教育培训等。由于可以跨平台部署，uniapp可以帮助开发者快速打造出适用于不同平台的应用，减少了开发成本和维护成本。

---

总结

实现了订单列表的展示和标签切换功能，方便用户查看不同状态的订单。该组件具有良好的可重用性和可扩展性，适用于各种需要展示列表并支持标签切换的场景。