uni-app界面之间的传参

短命女 2023-03-04 06:38 179阅读 0赞

**这里的class样式使用的是uni.css的ui库**

## *template* ##

<template>
    	<view>
    		<view class="content">
    			<view class="uni-list">
    				<view @click="navigateTo(item)" class="uni-list-cell" hover-class="uni-list-cell-hover" 
    				v-for="(item,index) in list" :key="index">
    					<view class="uni-list-cell-navigate uni-navigate-right">
    						{ { item}}
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>

## *data* ##

data() { 
    	return { 
    		list: ["我是第一个", "我是第二个", "我是第三个"]
    	}
    },

## *methods* ##

methods: { 
    	navigateTo(e) { 
    		console.log(e);		//打印当前点击的参数
    		uni.navigateTo({ 
    				url: '/pages/example/details?data=' + e + ''	//界面传值
    		})
    	},
    }

**第二个界面接收上一个界面传过来的值**

data() { 
    	return { 
    		data: ""
    	}
    },
    onLoad(e) { 	//接收上一个界面传过来的值
    	if (e.data) { 
    		this.data = e.data;
    	}
    },

如果看不懂，那咱来点实际的直接上图：  
index.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NTQ5OA_size_16_color_FFFFFF_t_70]  
details.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NTQ5OA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NTQ5OA_size_16_color_FFFFFF_t_70]: /images/20230208/64ff2470605b4b0fbd2f2320cadf153c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NTQ5OA_size_16_color_FFFFFF_t_70 1]: /images/20230208/41c43ef1ea0e4b719409fde4c815dfad.png

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp与webview之间的相互传值

1.uni-app 如何发送数据到 H5？其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参例如在 uni-app 中： `<templat

阳光穿透心脏的1/2处/ 2023年07月17日 07:26/ 0 赞/ 69 阅读

相关 uniapp MUI 页面传参终极版

页面传参终极版分类：MUI [页面传值][Link 1] 页面传参数是一种比较常见的业务需求，根据实现原理及适用环境可以分为两大类。在普通浏览器端常用的方法有如

淡淡的烟草味﹌/ 2023年06月15日 11:26/ 0 赞/ 60 阅读

相关 uni-app界面之间的传参

这里的class样式使用的是uni.css的ui库 template <template> <view> <view class="con

短命女/ 2023年03月04日 06:38/ 0 赞/ 180 阅读

相关 uniapp父子组件之间传值

组件传值一. 父组件向子组件传值 > 通过`props`来实现, 子组件通过props来接收父组件传过来的值 1. 父组件 // 1. 引入子组件

冷不防/ 2023年02月26日 11:27/ 0 赞/ 29 阅读

相关 uniapp页面之间传值

页面传值 > 如果数据仅在跳转和被跳转页面中传递, 可以在跳转时传递数据. 如果数据需要多个页面使用, 可以采用本地存储处理数据一. `uni.navigateTO

朱雀/ 2023年02月26日 10:23/ 0 赞/ 28 阅读

相关 Uniapp中关于props的传参问题

uniapp中父组件向子组件传递prop时，如果prop是对象，对象内部不能包含function属性例子如下 father.vue <template>

末蓝、/ 2022年11月13日 14:26/ 0 赞/ 791 阅读

相关 uniapp子窗体的使用与传参

前言：以下分享的是子窗体显示/隐藏和父窗体与子窗体之间的通信（传值）;为什么使用子窗体？比如项目中有类似地图这样的功能，如果页面有弹窗的话会被地图所遮挡，或者有弹窗的层不高无法

秒速五厘米/ 2021年08月19日 17:01/ 0 赞/ 702 阅读

相关 uniapp中页面跳转和传参

效果图： ![20210306160241888.gif][] ![20210306162337112.gif][] 代码实现：结构目录： ![202103

拼搏现实的明天。/ 2021年07月25日 14:15/ 0 赞/ 645 阅读

相关 uniapp 组件传参

父组件 <v-sub @returnDate=returnDate :backGround=backGround></v-sub> import v

我会带着你远行/ 2021年07月24日 13:11/ 0 赞/ 716 阅读

相关 uniapp 组件之间利用全局函数穿参

1、在接收参数的组件中监听全局函数 uni.$on('函数名',(形参数)=>{ ... }); 2、在传递参数

淡淡的烟草味﹌/ 2021年07月24日 12:09/ 0 赞/ 690 阅读