uniApp实现点击tab选项卡展现该状态的订单数据(全部、待付款、待发货、已发货、已完成)

主要逻辑:
1、给每个tab选项卡添加点击方法,change执行后的btnnum数值和view中的相等则添加btna样式,成为选中状态。
2、通过接口获取到订单数据后赋值给两个变量,order_lists存储订单数据,show_lists用来展示不同状态的订单数据。
3、change方法里循环判断每条订单的数据,然后将符合该状态下的订单赋值到show_lists里面。

//前端主要代码
<view class="head">
			<view class="headbtn">
				<view class="btn" @tap="change(0)" :class="{btna:btnnum == 0}">全部</view>
			</view>
			<view class="headbtn">
				<view class="btn" @tap="change(1)" :class="{btna:btnnum == 1}">待付款</view>
			</view>
			<view class="headbtn">
				<view class="btn" @tap="change(3)" :class="{btna:btnnum == 3}">待发货</view>
			</view>
			<view class="headbtn">
				<view class="btn" @tap="change(5)" :class="{btna:btnnum == 5}">已发货</view>
			</view>
			<view class="headbtn">
				<view class="btn" @tap="change(9)" :class="{btna:btnnum == 9}">已完成</view>
			</view>
		</view>
//这里用到的until.方法都是自己封装或基于原uniapp方法封装的,功能语义化
<script>
	const until = require('../../../../util.js')
	export default {
		data() {
			return {
				title: '我的订单',
				btnnum: 0,
				order_lists : '',//获取的订单列表
				show_lists : '',//显示的订单列表
			};
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			loadData(){
				let _this = this
				until.ly_request({
					url : 'shop/order/my',
					method : 'get',
					success : function(res){
						//console.log(res)
						until.tips(res)
						_this.order_lists = res.data.data.data_list
						_this.show_lists = res.data.data.data_list
					}
				})
			},
			change(e) {
				this.btnnum = e
				// console.log(this.btnnum)
				if(this.btnnum == 0){
					this.show_lists = this.order_lists
					// console.log(this.show_lists)
				}else{
					this.show_lists = []
					for(let i=0;i<this.order_lists.length;i++){
						if(this.order_lists[i].status == this.btnnum){
							this.show_lists.push(this.order_lists[i])
						}
					}
				}
			}
		},
	}
</script>
  • 3
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 您好!如果我理解正确的话,您的问题是如何通过uniApp实现点击tab选项卡时显示相关数据的功能,对吗? 在uniApp中,您可以使用组件来实现这个功能。具体而言,您可以使用 `uni-TabBar` 组件和 `uni-TabBarItem` 组件来创建一个选项卡布局。然后,您可以在每个选项卡上放置一个页面,用于显示相关数据。 以下是一些示例代码,帮助您实现这个功能: ``` <!-- 在 pages/index/index.vue 中 --> <template> <view class="container"> <uni-tab-bar :active="active" @click="onTabClick"> <uni-tab-bar-item title="选项卡一" icon="home"> <view> <text>这是选项卡一的内容</text> </view> </uni-tab-bar-item> <uni-tab-bar-item title="选项卡二" icon="search"> <view> <text>这是选项卡二的内容</text> </view> </uni-tab-bar-item> <uni-tab-bar-item title="选项卡三" icon="setting"> <view> <text>这是选项卡三的内容</text> </view> </uni-tab-bar-item> </uni-tab-bar> </view> </template> <script> export default { data() { return { active: 0 } }, methods: { onTabClick(index) { this.active = index; } } } </script> ``` 在上面的示例代码中,我们使用了 `uni-tab-bar` 组件和 `uni-tab-bar-item` 组件来创建了一个带有三个选项卡的布局。在每个选项卡中,我们放置了一个 `view` 组件,并在其中显示了相应的文本。 此外,我们还通过 `@click` 事件监听器来实现点击选项卡时更新 `active` 数据的功能。通过更新 `active` 数据,我们可以让页面显示相应选项卡中的内容。 希望这个回答能够帮助到您!如果您还有其他问题,请随时提问。 ### 回答2: uni-app是一个跨平台的开发框架,可以同时构建iOS和安卓应用,并且可以在H5和小程序平台上运行。实现点击tab选项卡展现状态数据,可以通过以下步骤来实现: 1. 在uni-app的页面中,使用tab组件来创建选项卡。可以根据自己的需求来设置选项卡的数量和文本内容,同时可以绑定一个变量来标识当前选中的选项卡。 2. 在每个选项卡对应的页面中,可以绑定不同的数据状态。可以通过在data中定义不同的变量来存储不同状态下的数据。例如可以定义一个变量data1来存储选项卡1的数据,data2来存储选项卡2的数据,以此类推。 3. 在点击选项卡时,可以通过事件监听来切换选项卡状态。可以在每个选项卡对应的页面中定义一个方法,当选项卡点击时,调用这个方法来改变变量的值,从而切换选项卡状态。 4. 根据选项卡状态,可以在页面中显示对应状态下的数据。可以通过条件判断来展示不同状态下的数据。例如可以使用v-if指令来判断当前选项卡状态,然后根据状态来展示不同的数据。 通过以上步骤,我们可以实现点击tab选项卡展示该状态数据。根据不同选项卡状态,可以在页面中展示对应状态下的数据,从而满足不同业务需求。uni-app的跨平台特性使得我们可以快速开发并在多个平台上运行应用,方便开发者进行应用的功能实现和优化。 ### 回答3: uniApp是一种基于Vue.js的跨平台开发框架,可以用于开发多个平台的应用程序。在uniApp中,可以通过使用tab选项卡组件来展现不同状态数据。 首先,我们需要在uniApp的页面中引入tab选项卡组件,并设置相关的属性和事件。在引入组件之后,我们可以使用v-for指令来遍历数据列表,并将每个选项卡的标题和内容与相应的数据绑定。例如: <template> <view> <uni-tabs v-model="activeTab" :tabs="tabs" @change="handleChange"> <uni-tab-pain v-for="(item, index) in tabs" :key="index" :label="item.label"> <view>{{ item.content }}</view> </uni-tab-pain> </uni-tabs> </view> </template> <script> export default { data() { return { activeTab: 0, // 默认选中的选项卡索引 tabs: [ // 选项卡列表数据 { label: '状态1', content: '状态1的数据内容' }, { label: '状态2', content: '状态2的数据内容' }, { label: '状态3', content: '状态3的数据内容' } ] } }, methods: { handleChange(index) { console.log('当前选项卡索引:', index) // 根据index获取对应的状态数据 // 更新页面中展示的数据 } } } </script> 在页面中,我们使用了uni-tabs和uni-tab-pain两个组件来实现选项卡的效果。uni-tabs是整个选项卡组的容器,而uni-tab-pain是每个选项卡的内容区域。 在data中,我们定义了activeTab来标识当前选中的选项卡索引,同时定义了tabs数组来存储所有选项卡数据。 在methods中,我们定义了handleChange方法来处理选项卡切换事件。在切换选项卡时,handleChange方法会被触发,并接收当前选项卡的索引作为参数。我们可以根据这个索引获取对应的状态数据,并更新页面中展示的数据内容。 总结一下,通过使用uniApptab选项卡组件,我们可以实现点击选项卡展现不同状态数据。在切换选项卡时,可以通过事件处理方法来更新页面中展示的数据内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值