16.uniapp两种方式导航条转和传参

旧城等待， 2022-11-19 01:15 258阅读 0赞

**navogator.vue组件内容**

<template>
    	<view>
    		
    		<view>导航跳转的学习</view>
    		
    		<navigator url="../detail/detail">跳转至详情页</navigator>
    		
    		
    		<navigator url="../message/message" open-type="switchTab">跳转至信息页</navigator>
    		
    		
    		<navigator url="../detail/detail" open-type="redirect">跳转至详情页</navigator>
    		
    		
    		
    		
    		
    		<button @click="goDetail">跳转至详情页</button>
    		
    		
    		<button @click="goMessage">跳转信息页</button>
    		
    		
    		<button type="primary" @click="redirectDetail()">跳转到详情页并关闭当前页面</button>
    		
    		
    		
    		<navigator url="../detail/detail?id=80&age=19">跳转至详情页</navigator>
    	</view>
    </template>
    
    <script>
    	export default{
    		methods:{
    			// 二.编程式式导航传参 
    			goDetail(){
    				// 方法看文档API路由与页面跳转uni.navigateTo(OBJECT)		注意写在()里面地址和其他属性	是对象	加	{}!!!
    				uni.navigateTo({
    					url:'../detail/detail?id=100&age=20',
    				})
    			},
    			goMessage(){
    				uni.switchTab({
    					url:'../message/message',
    				})
    			},
    			redirectDetail(){
    				uni.redirectTo({
    					url:'../detail/detail',
    				})
    			}
    	},
    }	
    </script>
    
    <style>
    </style>

**detail.vue组件**

<template>
    		<view>
    			详情页
    		</view>
    </template>
    
    <script>
    	export default{
    		onLoad(options){				// 这个就是上个页面传的参数接受一个
    			console.log(options);
    		}
    	}
    </script>
    <style>
    </style>

**message.vue组件**

<template>
    	<view>
    		<button type="primary" @click="chooseImg">上传图片</button>
    		<image v-for="item in imgArr" :src="item" mode="widthFix" @click="previewImg(item)"></image>
    		
    		
    		
    		
    		
    		
    		<view>我只在H5页面显示</view>
    		
    		
    		
    		<view>我只在小程序页面显示页面显示</view>
    		
    		
    		<view class="box">按钮页特殊!！！</view>
    	</view>
    </template>
    
    <script>
    	export default{
    		data(){
    			return{
    				imgArr:[]
    			}
    		},
    		methods:{
    			// 点击上传图片方法
    			chooseImg(){
    				uni.chooseImage({
    					count: 5,
    					 success: res => {			// 后台获取到后	再到data里面创建一个数组		到image标签里面循环这个数组依次显示出来
    						this.imgArr = res.tempFilePaths
    					}
    				})
    			},
    			// 图片预览功能
    			previewImg(current){
    				console.log(current);
    				uni.previewImage({
    					current:current,
    					urls:this.imgArr,
    					loop:true,
    					indicator:'number'
    				})
    			},
    			// 添加一个方法	加载
    			onLoad(){
    				// #ifdef H5
    				console.log('我只在H5页面打印');
    				// #endif
    				
    				// #ifdef MP-WEIXIN
    				console.log('我只在微信小程序里面打印');
    				// #endif
    				
    			}
    		}
    	}
    </script>
    
    <style>
    	/* H5页面的样式 */
    	// #ifdef H5
    	.box{
    		width: 100rpx;
    		height: 100rpx;
    		background-color: #0000FF;
    	}
    	// #endif
    	
    	/* 微信小程序中的样式 */
    	//	#ifdef MP-WEIXIN
    	.box{
    		width: 100rpx;
    		height: 100rpx;
    		background-color: #0000FF;
    	}
    	// #endif
    </style>