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

本文主要是介绍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.关键技术

数据绑定：使用Vue的数据绑定语法，将数据绑定到模板中，实现动态展示和更新数据。
列表渲染：使用v-for指令来遍历数组，动态生成订单列表的每一项。
事件绑定：使用@符号来绑定事件，监听标签切换事件，并在事件处理函数中更新标签的激活状态。
样式定义：使用style标签定义组件的样式，包括边框、颜色和字体大小等，通过类名的嵌套结构来实现样式的层级关系。
数组操作：使用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还提供了丰富的组件和模板，可以快速构建复杂的界面和交互。