uniapp中根据不同状态跳转不同页面

news2024/11/27 0:34:59

大纲:

         今天我们讲 在uniapp中,如何根据不同的状态跳转到不同的页面。

以下代码,是Tabs标签的展示

🌿  :list="list" 是参数配置,该参数要求为数组,元素为对象,且对象要有name属性;

🌿  @change="tabsChange" 是 Vue.js 中用于绑定 DOM 元素监听事件的一种方式。它是一个缩写指令,相当于 v-on:change,用于在特定的 DOM 事件触发时执行对应的事件处理函数。

🌿  :current="current"  tabs标签的切换,需绑定current值,在change事件回调中可以得到index,将其赋值给current即可。将 current 变量与组件的 current 属性进行绑定;当current变量的值发生变化时,组件的current属性也会随之更新

<view style="display: flex;justify-content: center;">
	<u-tabs :list="list" @change="tabsChange" :current="current"></u-tabs>
</view>
export default {
		data() {
			return {
				list: [{
						name: "处理中",
						index: 0,
						records: [],
						status: "nomarl",
						badge: {
							isDot: true
						}
					},{
						name: "已完成",
						index: 1,
						records: [],
						status: "nomarl",
					},
				],
				current: 0,
				filterData: {
					pageNum: 1,
					pageSize: 10,
					orderState: "处理中",
				}
			};
		},
}
//标签
tabsChange(e) {
    console.log('sum',e)
	this.current = e.index;
    this.filterData = {
		...this.filterData,
		pageNum: 1,
		orderState: e.name
	}
	this.getRecords(this.filterData, e.index)
},

 Tabs标签,效果展示

   🍂 首先,通过 @change="tabsChange" 监听事件,获取tabs标签的切换,看是否能准确获取到我们当前点击的标签,是处理中还是已完成。

goRouter(id, no) {
    let state = this.filterData.orderState
	console.log('跳转',state)
	if(state == '处理中'){
	    uni.navigateTo({
			url: `/pages/workOrder/add/detail?orderId=${id}&orderNo=${no}`,
		});
	} else {
		uni.navigateTo({
			url: `/pages/workOrder/add/detailOver?orderId=${id}&orderNo=${no}`,
		});
	}
},

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/585562.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mciSendString函数简介(播放音乐以及录音相关操作)

函数功能&#xff1a;播放多媒体音乐&#xff0c;视频等 mciSendString是用来播放多媒体文件的API指令&#xff0c;可以播放MPEG,AVI,WAV,MP3,等等。这个函数有自己的mci指令&#xff0c;可以通过不同的指令实现不同的功能。这里我会详细讲解mciSendString这个函数的常见用法&…

【Web】HTTP代理和反向代理

直接访问 就是从客户端直接访问服务端&#xff0c;相当于我直接去厂家买可乐&#xff0c;没有中间商赚差价 HTTP代理 HTTP代理指在客户端先访问代理服务器&#xff0c;然后由代理服务器去访问服务端&#xff0c;代理服务器收到响应后再转发个客户端&#xff0c;就像我去商店…

【C++】类与对象——六个默认成员函数、构造函数的概念和特征,析构函数的概念和特征

文章目录 1.类的六个默认成员函数2.构造函数2.1构造函数的概念2.2构造函数的特性 3.析构函数3.1析构函数的概念3.2析构函数的特征 1.类的六个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。   空类中真的什么都没有吗&#xff1f; 并不是&#xff0c;任何…

跨域图像识别

跨域图像识别 跨域图像识别&#xff08;Cross-domain Image Recognition&#xff09;是指在不同的数据集之间进行图像分类或识别的任务。由于不同数据集之间的分布差异&#xff0c;跨域图像识别面临着很大的挑战。 以下是几种代表性的跨域图像识别算法&#xff1a; DDC&#…

利用代码实现自动刷网课阅读时长功能 JAVA

目录 前言&#xff1a;理论依据&#xff1a;现实依据&#xff1a;朴素版只能循环阅读不能翻页&#xff1a;升级版 翻页 阅读&#xff1a;如何使用&#xff1a; 前言&#xff1a; 最近不也快结课了&#xff0c;网课该刷的都要刷掉&#xff0c;最近不就把一门思政课刷完了&#…

粉丝经济:互帮互助,众筹,人人帮我我帮人人

目录 用户精准定位&#xff1a; 用户裂变 用户在线“买卖需要注册&#xff1a;为后期思域流量变现 用户容器“APP&#xff0c;小程序”&#xff1a;用户资产化 LBS(一人千面&#xff0c;个性化定制&#xff0c;根据地理位置进行提醒&#xff1a;优惠券”) 粉丝渠道化&…

信息安全实践1.1(网络嗅探)

前言 这个网络嗅探其实就是用wireshark抓包。那时候赶着做&#xff0c;就随便写了点。参考价值比较少。 第一次实践是因为寒假在家摆烂&#xff0c;然后开学前两天做的&#xff0c;所以质量不是很好。不过也算是一次实践&#xff0c;看看就好。 要求 使用网络嗅探工具抓获网络…

TiDB x Bolt丨超强可扩展性与弹性助力超 1 亿用户畅享出行服务

作者&#xff1a;PingCAP 封小明 通过 TiDB 连接全球极限场景和创新场景&#xff0c;是 PingCAP 长期坚持的国际化战略。目前&#xff0c;在全球已有超过 3000 家企业选择 TiDB。无论在游戏、金融、物流、互联网还是智能制造等行业&#xff0c;基于规模化 OLTP 扩容、实时 HTA…

为什么说企业需要搭建产品手册?

企业需要搭建产品手册的原因有很多&#xff0c;其中包括提高产品使用体验、降低售后服务成本、促进产品销售等。本文将从这些方面来介绍企业为什么需要搭建产品手册&#xff0c;并探讨如何有效地搭建和管理产品手册。 一、提高产品使用体验 产品手册是一份指导用户如何正确使…

【数据结构】二叉树——链式结构的实现(代码演示)

目录 1 二叉树的链式结构 2 二叉树的创建 3 二叉树的遍历 3.1 前序遍历 3.1.1运行结果&#xff1a; 3.1.2代码演示图: 3.1.3 演示分析&#xff1a; 3.2 中序遍历 3.3 后序遍历 3.4 层序遍历 4 判断是否是完全二叉树 5 二叉树节点的个数 5.1 总个数 5.2 叶子节点…

Electron-Builder Windows系统代码签名

前言 项目打包签名是两年前做的了&#xff0c;使用Electron-Bulder&#xff0c;打包工具版本迭代较少&#xff0c;倒是electron版本更新飞快&#xff0c;目前官方推荐使用Electron Forge进行打包&#xff0c;后续再对两者进行对比&#xff0c;重新整理现在的实现方案。 签名简…

微信扫码授权到登录网页,中间究竟发生了什么?

关于我昨天突然接到神秘“面试”&#xff1a;微信扫码授权登录的实现逻辑是神魔&#xff1f;在这个扫码授权的过程中客户端、服务端、微信平台都做了些神魔&#xff1f;二维码里面又有哪些信息&#xff1f; 从手机微信扫一扫二维码到登录个人的知乎账户&#xff0c;中间究竟发生…

智警杯赛前学习1.2--excel统计函数

常用统计函数 count countif&#xff08;区域&#xff0c;条件&#xff09; countifs&#xff08;区域&#xff0c;条件&#xff0c;区域&#xff0c;条件&#xff09; 求和函数 sum sumif&#xff08;区域&#xff0c;条件&#xff0c;[求和区域]&#xff09; sumifs&#xff…

AOP日志功能实现

AOP日志功能实现 1、添加两个工具类2、新建一个接口为 LogAnnotation3、新建一个类 LogAspect4、使用自定义注解 LogAnnotation5、运行结果6、项目结构 转载自b站&#xff1a;码神之路 1、添加两个工具类 HttpContextUtils 用于获取当前请求的 HttpServletRequest 对象&#xf…

Pycharm中安装jupyter 以及一些会遇到的问题

1、确保电脑安装了 anaconda 和jupyter notebook 2、在命令行 启动jupyter Notebook &#xff08;启动后不要关闭这个命令窗口&#xff09; 命令&#xff1a;juputer Notebook 成功运行后的网页界面&#xff1a; 3、打开Pycharm 创建新的项目 &#xff08;注意是Conda) 4、 创…

【微信小程序开发小白零基础入门】微信小程序入门【建议收藏】

微信小程序入门 文章目录 微信小程序入门前言一、小程序的概述1.小程序简介2.小程序诞生3.小程序功能4.小程序创建步骤 二、小程序的准备工作1.注册开发者账号2.小程序信息完善3.成员管理 三、小程序的开发工具3.其他辅助工具 四、推荐小程序&#xff08;欢迎各位大佬指导&…

STM32F4_常用存储器简介

目录 1. 存储器的种类 单片机和电脑一样&#xff0c;其内核分别为ARM和CPU(CPU通常是不具备存储功能的)&#xff0c;内核是用来进行数据的运算和处理的。内核处理数据的来源就是存储器。 1. 存储器的种类 RAM存储器&#xff1a; RAM是 “Random Access Memory”的缩写&#x…

Java 集合、数组、字符串的相互转换(关于list.toArray(new String[0])的源码分析)

在 Java 中&#xff0c;可以通过以下方式实现集合、数组和字符串之间的相互转换。 一、集合和数组的相互转化 ①、将集合转为数组&#xff1a;&#xff08;toArray 方法&#xff09; List<String> list new ArrayList<>(); list.add("apple"); lis…

异构跨库数据同步还在用Datax?来看看这几个开源的同步方案

在遇到跨库或者异库数据同步时&#xff0c;我们一般都会借助ETL工具来实现数据同步功能。比如目前大家较为熟知的Kettle和Datax。但是&#xff0c;这两个需要定时去查询数据库的数据&#xff0c;会存在一定的延迟&#xff0c;而且&#xff0c;默认采用全量同步的方式&#xff0…

Java Spring概述

文章目录 1、Spring是什么&#xff1f;2、Spring 的狭义和广义3、Spring Framework特点4、Spring模块组成5、Spring6版本要求 1、Spring是什么&#xff1f; Spring 是一款主流的 Java EE 轻量级开源框架 &#xff0c;Spring 由“Spring 之父”Rod Johnson 提出并创立&#xff…