uniapp 声明式导航、编程式导航、传参、跳转动画

秒速五厘米 2021-07-24 17:41 518阅读 0赞

声明式导航以及传参
    	<navigator url='/页面注册路径?url参数键值对' open-type="跳转方式">内容</navigator>
    	
    		 open-type
    			navigate 	栈跳转,不写默认为该方式
    			redirect 	 删除当前页面，跳转另一页面
    			switchTab 	 	跳转到tabBar设置的页面,必须使用该方式
    			navigateBack 	 返回上一个页面
    			exit 	退出小程序，target="miniProgram"时生效 	
    
    编程式导航以及传参
    	在回调中
    		uni.navigateTo({url:"/页面注册路径?url参数键值对"},success:成功回调)
    		uni.redirectTo 删除当前页面，跳转另一页面
    		uni.switchTab  跳转到tabBar设置的页面,必须使用该方式
    		uni.navigateBack 返回上一个页面
    
    接收参数
    	在页面中,使用页面生命周期函数
    	onLoad(option)
    	{
    		option.键名,获取对应参数
    	}

[声明式导航][Link 1]  
[跳转动画][Link 2]  
[编程式导航][Link 3]

代码示例:  
跳转页面:

<template>
    	<view>
    		<view class='box'>
    			
    		</view>
    		
    		<view>
    			<navigator url='/pages/detail/detail?id=80'>详情</navigator>
    			<navigator url='/pages/me/me' open-type="switchTab">me</navigator>
    			<navigator url='/pages/detail/detail' open-type="redirect">详情</navigator>
    			<navigator url='/pages/detail/detail' open-type="navigateBack">详情</navigator>
    		</view>
    		<button type="primary" @click="get">按钮</button>
    		<button type='primary' @click='set'>按钮2</button>
    		<button type='primary' @click='remv'>按钮3</button>
    	</view>
    </template>
    
    <script>
    export default{ 
    	data()
    	{ 
    		return{ 
    			imgArr:['a']
    		}
    	},
    	methods:{ 
    		get()
    		{ 
    			uni.navigateTo({ 
    				url:"/pages/detail/detail?id=120"
    			})
    		},
    		set()
    		{ 
    			uni.switchTab({ 
    				url:'/pages/me/me'
    			})
    		},
    		remv()
    		{ 
    			uni.redirectTo({ 
    				url:"/pages/detail/detail"
    			})
    		}
    	},
    
    		onLoad()
    		{ 
    			// #ifdef H5
    				console.log("h5")
    			// #endif
    			// #ifdef MP-WEIXIN
    				console.log("小程序")
    			// #endif
    			
    		}
    
    
    }
    </script>
    
    <style scoped>
    	@import url("../css/a.css");
    	.box{ 
    
    		height: 375rpx;
    		width: 375rpx;
    		/* #ifdef H5 */
    		background-color: #4CD964;
    		/* #endif */
    		/* #ifdef APP-PLUS */
    		background-color: #007AFF;
    		/* #endif */
    	}
    
    	.box1{ 
    		background-color: #007AFF;
    	}
    </style>

接收参数页面:

<template>
    	<view>detail
    	{ { msg}}
    	</view>
    	
    </template>
    
    <script>
    export default{ 
    	
    data()
    { 
    	return{ 
    		msg:''
    	}
    },
    onLoad(options)
    { 
    	this.msg=options.id;
    }
    	
    }
    </script>
    
    <style>
    </style>

[Link 1]: https://uniapp.dcloud.io/component/navigator
[Link 2]: https://uniapp.dcloud.io/api/router?id=animation
[Link 3]: https://uniapp.dcloud.io/api/router?id=navigateto