小程序中的页面跳转

小程序中的页面跳转

在之前网页的学习中,我们往往采用超链接,或者定义方法、函数等方式来实现页面的跳转,但是微信小程序中没有超链接,那我们该如何实现呢?微信小程序的页面跳转包括两个,一个是tabBar页面的跳转,一个是非tabBar页面的跳转

1.跳转到tabBar页面

使用的代码

html 复制代码
uni.switchTab({})
  • html代码

    html 复制代码
    <template>
    	<view>
    		<view>
    			<button>欣赏小姐姐</button>
    		</view>
    	</view>
    </template>
  • js代码

html 复制代码
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 定义跳转方法
			turn1() {
				// 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
				uni.switchTab({
					// person.vue页面路径
					url: "/pages/person/person"
				})
			}
		}
	}
</script>
  • 调用方法
html 复制代码
<template>
	<view>
		<view>
			<button @click="turn1()">欣赏小姐姐</button>
		</view>
	</view>
</template>

完整代码:

html 复制代码
<template>
	<view>
		<view>
			<button @click="turn1()">欣赏小姐姐</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 定义跳转方法
			turn1() {
				// 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
				uni.switchTab({
					// person.vue页面路径
					url: "/pages/person/person"
				})
			}
		}
	}
</script>

<style>

</style>
  • uni.switchTab(OBJECT)方法的具体讲解可在uni-app官网中查看,在"API"中找到"页面和路由",再找到"uni.switchTab"

2.跳转到非tabBar页面

代码:

html 复制代码
uni.navigateTo({})
  • html代码:
html 复制代码
<template>
	<view>
		<view>
			<button>打开新页面</button>
		</view>
	</view>
</template>
  • js代码:
html 复制代码
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 定义跳转方法
			turn2(){
			    //保留当前页面,跳转到应用内的某个页面
				uni.navigateTo({
                    //new.vue页面路径
					url:"/pages/new/new"
				})
			}
		}
	}
</script>
  • 调用方法
html 复制代码
<template>
	<view>
		<view>
			<button @click="turn2()">打开新页面</button>
		</view>
	</view>
</template>
  • 完整代码

    html 复制代码
    <template>
    	<view>
    		<view>
    			<button @click="turn2()">打开新页面</button>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				
    			}
    		},
    		methods: {
                // 定义跳转方法
    			turn2(){
                     //保留当前页面,跳转到应用内的某个页面
    				uni.navigateTo({
                        //new.vue页面路径
    					url:"/pages/new/new"
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>
  • uni.navigateTo(OBJECT)方法的具体讲解可在uni-app官网中查看,在"API"中找到"页面和路由",再找到"uni.navigateTo"

相关推荐
2501_915918414 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域5 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷5 小时前
第一个小程序
小程序
春哥的研究所5 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld5 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点6 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖11 小时前
微信小程序---下拉框
微信小程序·小程序
mon_star°14 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero14 小时前
微信小程序91~100
微信小程序·小程序
假装我不帅14 小时前
微信小程序下拉加载更多实现
微信小程序·小程序