微信小程序使用navigator实现页面跳转功能
作者:早起的年轻人 发布时间:2024-04-25 10:36:14
前言
在微信小程序开发中,navigator 用来实现页面路由功能,比如 A页面 中点击页面打开B页面
1 navigator 默认方式打开新的页面
<navigator url="/pages/code1/navigator/bPage">
<text>打开B页面</text>
</navigator>
等效于
<navigator url="/pages/code1/navigator/bPage" open-type="navigate">
<text>打开B页面</text>
</navigator>
open-type 是指定了页面跳转的方式,默认是 navigate ,页面层叠方式如下
对应的有点击事件,在JS中打开页面
<view bindtap="openNavigatorBPage" data-index='1'><text>打开B页面</text></view>
在这里 data-index 是我页面绑定的参数,在对应的方法中通过 currentTarget.dataset.index 方式获取
如果我写的是 data-id ,那么点击事件中获取方式为 currentTarget.dataset.id
openNavigatorBPage:function (options) {
//获取绑定的参数
let id = options.currentTarget.dataset.index;
wx.navigateTo({
url: '/pages/code1/navigator/bPage?id='+id,
})
},
然后 在目标页面中的 onLoad 方法中可以获取这个参数
onLoad: function (options) {
let id = options.id;
},
2 redirect 替换当前页面
open-type 可取值为 redirect ,就是直接替换当前页面
<!--类似a标签 open-type 跳转方式-->
<navigator url="/pages/code1/navigator/bPage" open-type="redirect">
<text>打开B页面</text>
</navigator>
对应的 js 方法为
wx.redirectTo({
url: '/pages/code1/navigator/bPage?id='+id,
})
3 reLaunch 重新加载当前页面
open-type 可取值为 reLaunch ,就是相当于是重新加载了一下当前页面
<navigator url="/pages/code1/navigator/bPage" open-type="reLaunch">
<text>打开B页面</text>
</navigator>
对应的 js 方法为
wx.reLaunch({
url: '/pages/code1/navigator/bPage?id='+id,
})
4 navigateBack 关闭当前页面
可以直接在页面中 使用 navigator 标签嵌套
<navigator open-type="navigateBack">
<text>关闭页面</text>
</navigator>
等效于
<view bindtap="closeBPage" data-index='1'>
<text>关闭B页面</text>
</view>
closeBPage: function () {
wx.navigateBack()
},
5 navigateBack 关闭当前页面 并携带参数
A页面通过wx.navigateTo跳入到B页面,然后B页面执行wx.navigateBack返回到A页面时候传给A页面参数
A页面中定义接收
Page({
/**
* 页面的初始数据
*/
data: {
param: undefined,
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
let param = this.data.param;
if (param) {
//有回传参数 处理页面业务逻辑
}
},
);
//打开B页面
openNavigatorBPage: function (options) {
//获取绑定的参数
let id = options.currentTarget.dataset.index;
wx.re({
url: '/pages/code1/navigator/bPage?id=' + id,
})
},
在B页面中,关闭B页面的时候,设置回传参数
closeBPage: function () {
//getCurrentPages()函数是用来获取当前页面栈的实例,
//返回的是一个按栈的顺序排列的数组pages_arr,且数组中的第一项为首页,最后一项为当前页。
//获取当前页面js里面的pages里的所有信息。
let pages = getCurrentPages();
//pages[pages.length - 2]是指的上一页,然后获取到上一个页的page对象后直接执行修改param的操作,这样就实现了在B页面修改A页面数据的功能
let prevPage = pages[pages.length - 2];
prevPage.setData({
param: 111, // 设置需要传递的参数
})
wx.navigateBack({
delta: 1
})
},
完毕
补充:解决微信小程序navigator点击无法跳转的问题
最近在搞微信小程序时发现页面跳转不成功,也没有报错,最后查了很多资料终于解决了问题,浪费了很多时间,现将可能的原因和我的解决方案列出来供各位参考:
1、app.json里面是否配置了页面,如果未配置,请在pages中添加。
2、跳转路径是否正确,尽量不要用相对路径,使用绝对路径’/pages/…’。
3、分清几种跳转的方式,特别是TabBar中要使用wx.switchTab。
4、(最坑的问题,我遇到的问题就是这个)如果之前在app.json中设置了TabBar并且其中list中已有路径,那么在其它地方就不能再使用,使用不报错,但是也无效,不会发生跳转。例如我在TabBar中的list中设置了一个pages/shoplist/shoplist路径,而我想在index页面中通过点击一个navigator跳转到/pages/shoplist/shoplist这个页面,就不能进行跳转.
发现无法跳转,并且也不报错,就很奇怪
后来发现微信小程序开发中如果之前在app.json中设置了TabBar并且其中list中已有路径,那么在其它地方就不能再使用,使用不报错,但是也无效,不会发生跳转。
将tabbar下的pages/shoplist/shoplist路径对应的对象删除之后,再在index页面中点击navigator,就可以跳转到想要的页面了
来源:https://blog.csdn.net/zl18603543572/article/details/122084147


猜你喜欢
- Python 作为当前最热门的编程语言之一,不仅仅是因为它的学习成本低、入门容易,还因为它具有丰富的生态环境,包括内置的模块以及第三方的库,
- 废话不多说,直接开干!抖音字符视频在今年火过一段时间。反正我是始终忘不了那段刘耕宏老师本草纲目的音乐…这一次自己也来实
- 前言在这篇文章 Go Mutex:保护并发访问共享资源的利器 中,主要介绍了 Go 语言中互斥锁 Mutex&
- 由于谷歌浏览器80以后版本采用了新的加密方式,所以记录在这里# -*- coding:utf-8 -*-import osimport js
- 学习前言在SSD的框架中,除去tfrecord处理是非常重要的一环之外,slim框架的使用也是非常重要的一环,于是我开始学习slim啦sli
- 作为一个Oracle数据库开发者或者DBA,在实际工作中经常会遇到这样的问题:试图对库表中的某一列或几列创建唯一索引时,系统提示ORA-01
- 网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛。假如我们要做一个论
- 1.Go语言String的本质就是一个[]byte,所以他们之间可以互相转换,byte数组的长度就是字符串的长度。func StringTe
- 目录前言一、首先二、接下来1.对照人脸获取2. 通过算法建立对照模型3.识别前言今天,我们用Python实现简单的人脸识别技术!Python
- 01直接生成这类方法是利用基本程序软件包numpy的随机数产生方法来生成各类用于聚类算法数据集合,也是自行制作轮子的生成方法。一、基础类型1
- 本页面破解不止一种,选择适合你的使用----------------------------------------------------
- 本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码,供大家参考,具体内容如下1、scrollbar为Swiper增加滚
- sql查询数组中是否包含某个内容find_in_set如果表Atable中的a字段内容是1,2,3 的格式(a字段是用,分隔的),要查询该字
- Django 基本命令本节主要是为了让您了解一些django最基本的命令,请尝试着记住它们,并且多多练习下1. 新建一个 django pr
- 在cmd下运行go程序或者是GOLAND的Terminal下运行go程序会出现中文乱码的情况。go run ttypemain.go����
- 最近开发微信公众号内嵌H5页面,使用vue搭建的项目,由于业务需求,需要实现微信自定义分享功能,所以项目中集成微信JS-SDK。微信JS-S
- 1. 根据属性ID值进行定位def test_find_element_by_id(self): # 定位搜索文本框  
- 通过ip2region解析IP获得地域信息目标,从给的读取给的ip地址文件解析出ip地域名并输出CSV文件,我选用的是开源ip2region
- 1. 获取时间1.1 当前时间获取package mainimport ( "
- 需求:对于一个python list 或者numpy数组,我需要找到这个list中最大的K个数及其对应的下标。解决方式:1. 可以构造字典通