在做uni-app项目时,我们经常需要做上一页面传值的情况,其实原理也非常简单,先看效果

​

整体代码如下:

/pages/table表单页面

js

<template>
	<view class="table_index">
		<uni-section title="接收的数据" type="line">uni-section>
		<uni-forms :modelValue="formData">	
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			uni-forms-item>
			<uni-forms-item required name="hobby" label="职务">
				<uni-easyinput type="text" v-model="formData.duty" placeholder="请输入职务" />
			uni-forms-item>
			<uni-forms-item required name="corp" label="单位">
				<uni-easyinput type="corp" v-model="formData.corp" placeholder="请输入单位名称" />
			uni-forms-item>
			<button class="uni-button" size="mini" type="primary"  @click="toTable">选择职员信息button>
		uni-forms>
	view>
template>
<script>
	export default {
		data() {
			return {
				formData: {
					id: '',
					name: '',
					corp: '',
					duty: '',
				},
			}
		},
		methods:{
			toTable(){
				//跳转到选择职员数据页面
				uni.navigateTo({
					url:'/pages/demo/table/index'
				})
			},
			//在此页面使用上一页面所定义函数名来接收参数
			setTable(id,name,duty,corp){
				this.formData.name = name//获取到的名称
				this.formData.corp = corp//获取到的单位名称
				this.formData.duty = duty//获取到的职务
			},
		}
	}
script>
<style scoped>
	.table_index {
		background-color: #fff;
		height: 100%;
		padding: 20px 30px;
	}
	.uni-button{
		font-size: 18px;
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
style>

pages/table/index职员信息页面

js

<template>
	<view class="table_index">
		<uni-table border stripe emptyText="暂无更多数据">
			
			<uni-tr>
				<uni-th width="10" align="center">序号uni-th>
				<uni-th width="50" align="center">名称uni-th>
				<uni-th width="50" align="center">职务uni-th>
				<uni-th width="70" align="center">单位uni-th>
				<uni-th width="50" align="center">操作uni-th>
			uni-tr>
			
			<uni-tr v-for="(item,index) in tableList " :key="item.id">
				<uni-td align="center">{{index}}uni-td>
				<uni-td align="center">{{item.name}}uni-td>
				<uni-td align="center">{{item.duty}}uni-td>
				<uni-td align="center">{{item.corp}}uni-td>
				<uni-td>
					<view class="uni-group">
						<button class="uni-button" size="mini" type="primary"
							@click="toEnter(item.id,item.name,item.duty,item.corp)">选择button>
					view>
				uni-td>
			uni-tr>
		uni-table>
	view>
template>
<script>
	export default {
		data() {
			return {
				tableList: [{
						id: 1,
						name: '张三',
						corp: '文化传媒',
						duty: '主管'
					},
					{
						id: 2,
						name: '李思思',
						corp: '电子科技',
						duty: '职员'
					},
					{
						id: 3,
						name: '王麻子',
						corp: '教育机构',
						duty: '司机'
					},
					{
						id: 4,
						name: '李四',
						corp: '餐饮酒店',
						duty: '职员'
					},
					{
						id: 5,
						name: '美羊羊',
						corp: '汽车销售',
						duty: '秘书'
					},
				], //初始数据
			}
		},
		onLoad() {},
		methods: {
			toEnter(id, name, duty, corp) {
				let pages = getCurrentPages() //获取当前页面栈信息
				let prevPage = pages[pages.length - 2]; //指向上一个页面
				prevPage.$vm.setTable(id, name, duty, corp) //定义函数名进行传参
				uni.navigateBack({
					delta: 1, //返回上一个页面
				})
			}
		}
	}
script>
<style scoped>
	.table_index {
		background-color: #fff;
		height: 100%;
		padding: 20px 15px;
	}
style>

注意:必须获取当前getCurrentPages()页面栈信息与pages[pages.length -2]长度减去对应数字来返回你想要返回参数的页面

4.根据单选判断显示内容(真机测试混乱或不生效)

​

这种切换在开发过程或者H5页面时看似正常,但是打包到app或者真机模拟测试时,会出现混乱或者不生效的问题,此时change事件的赋值你是否以正常e.detail.value形式赋值给单选框,

是否已经忘记v-if与v-show的区别

当需要在两种状态之间切换时，可以使用v-show。当需要根据复杂的条件决定是否渲染某个元素时，可以使用v-if。

将之前v-if判断改为v-show后,再次进行测试

别急,如果还未生效,那就是动态渲染时出现名称混乱或位置有差异的情况,那我们紧接着进行手动赋值

定义一个变量,如只有两个选项切换,默认置为false即可,如有多个,可以数字形式替代。

js

data() {
			return {
				checkStatus:false,//当只有两个选项切换时,默认为false即可
				checkStatus1:0,//当出现多个选项切换时,以数字或字符串形式赋值
		},

之后,在单选框的change事件进行单独赋值,如文字未生效,则在该状态下单独定义变量文字,v-show同用即可。

​