uni-app navigator路由与页面跳转学习

上尽重城更上楼

已于 2024-08-01 21:48:55 修改

阅读量214

点赞数 8

文章标签：学习 vue.js 前端

于 2024-07-31 22:54:00 首次发布

本文链接：https://blog.csdn.net/hfz1997/article/details/140834328

版权

页面跳转。

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

除了组件方式，API方式也可以实现页面跳转，另见：uni.navigateTo(OBJECT) | uni-app官网

属性说明

url：跳转地址

open-type：跳转方式

open-type有效值：navigate（默认，可以有小箭头返回首页）、reLaunch（跳转页面无法再回去，小箭头消失）、navigateBack

代码实例

index首页

<template>
	<view>
		<swiper indicator-dots indicator-color="rgba(255, 255, 255, .3)" 
		indicator-active-color="#ffffff" circular="true" 
		autoplay="true" interval="1000">
		<swiper-item><image src="../../static/微信图片_20240724134918(1).jpg" mode="aspectFill" class="pic5"></image></swiper-item>
		<swiper-item><image src="../../static/微信图片_20240724134925.jpg" mode="aspectFill" class="pic2"></image></swiper-item>
		<swiper-item><image src="../../static/微信图片_20240724134931.jpg" mode="aspectFill" class="pic3"></image></swiper-item>
			
		</swiper>
	</view>
	
	<view>
		<navigator url="/pages/demo1/demo1" open-type="reLaunch"><image src="../../static/logo.png" mode="aspectFit" class="pic1"></image></navigator>
	</view>
	
	<view>
		<image src="../../static/logo.png" mode="aspectFit" class="pic1"></image>
		<image src="../../static/微信图片_20240724134925.jpg" mode="aspectFill" class="pic2"></image>
		<image src="../../static/微信图片_20240724134931.jpg" mode="aspectFit" class="pic3"></image>
		<image src="../../static/微信图片_20240724134937.jpg" mode="aspectFit" class="pic4"></image>
		<image src="../../static/微信图片_20240724134918(1).jpg" mode="aspectFit" class="pic5"></image>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>



<style lang="scss">
	swiper{
		width: 100vw;//全屏宽度；50vh:屏幕高度一半
		height: 200px;
		border: 1px solid green;
	}
	
	swiper-item{
		width: 100%;
		height: 100%;
		background: pink;
		image{
			width: 100%;
			height: 100%;
		}
	}//滑动子模块，此时子模块的颜色是一样的，如果要实现每个模块的颜色不一样，则需要控制器
	
	swiper-item:nth-last-child(2n){
		background:orange;
	}//比例选择起，2的倍数的子模块是橘色
	
	.pic1{
		width: 150px;
		height: 150px;
		
	}
	
</style>

demo1跳转页

<template>
	<view>
		这是demo1
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>