微信小程序10_＜navigator＞标签的用法

109905418

已于 2022-11-04 18:08:49 修改

阅读量4.3k

点赞数 4

分类专栏：小程序基础文章标签：微信小程序前端 javascript

于 2021-07-07 00:06:16 首次发布

本文链接： https://blog.csdn.net/aduovip/article/details/118532552

版权

小程序基础专栏收录该内容

22 篇文章 4 订阅

订阅专栏

<navigator> 标签用于页面跳转，可以是tabBar之间的页面跳转，也可以是其他地方的页面跳转。

在tabBar之间的页面跳转，必须在标签内加上定义open-type="switchTab" , 才能生效。

看一个例子

在index.wxml中，

   <navigator class="navigator" url="/pages/newsList/newList" 
open-type="switchTab">跳转到另一个tab页面</navigator>

定义好目录结构，如下：

效果如下图

关注博主即可阅读全文

立减 ¥

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
微信小程序10_＜navigator＞标签的用法

<navigator> 标签用于页面跳转，可以是tabBar之间的页面跳转，也可以是其他地方的页面跳转。在tabBar之间的页面跳转，必须在标签内加上定义open-type="switchTab" , 才能生效。看一个例子在index.wxml中， <navigator class="navigator" url="/pages/newsList/newList" open-type="switchTab">跳转到另一个tab页面</naviga
复制链接

扫一扫

专栏目录

微信小程序实现跳转的几种方式总结（推荐）

12-29

今天把实现微信页面的跳转的几种方法总结分享下 1.使用导航组件，标签，页面链接来实现（可以发现点击时有背景）  <view class=btn-area> <navigator url=../my/my>跳转到新页面</navigator> </view> 参数如下 2.给页面布局加监听bindtap事件，然后在方法里面，通过wx.navigatorTo来实现跳转（保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面）在my.wxml中加监听bindtap事件 <view bindtap='jump'

微信小程序间使用navigator跳转传值问题实例分析

10-15

主要介绍了微信小程序间使用navigator跳转传值问题,结合实例形式分析了微信小程序间使用navigator跳转传值过程中遇到的问题与解决方法,需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

微信小程序开发初学：超链接---navigator，干货来袭

m0_60707685的博客

03-31

785

Python崛起并且风靡，因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低，但它的晋级路线很多，通过它你能进入机器学习、数据挖掘、大数据，CS等更加高级的领域。Python可以做网络应用，可以做科学计算，数据分析，可以做网络爬虫，可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多，你需要学好基础，再选择明确的方向。这里给大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！

JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果

最新发布

2201_75604580的博客

04-14

447

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！

Navigator.

05-05

RN实现页面导航效果，Navigator和NavigatoriOS使用

关于微信小程序的navigator标签

笑到世界都狼狈的博客

09-20

8095

关于微信小程序的navigator标签总结的一些笔记 <!-- 关于小程序的navigator标签------相当于html中的a标签导航组件 navigator 1.块级元素默认会换行可以直接加宽度和高度 2.url 要跳转的页面路劲绝对路径相对路径 3.target 要跳转到当前的小程序还是其他的小程序页面 self 默认值跳转到自己的小程序页面 miniProgram 跳转到其他的小程序页面 .

1.6 微信小程序 navigator标签

小脆筒style的博客

04-13

318

navigator 导航组件类似超链接标签 open-type 有效值代码案例 .wxml  <!-- 导航组件 navigator 0 块级元素默认会换行可以直接加宽度和高度 1 url 要跳转的页面路径绝对路径相对路径 2 target 要跳转到当前的小程序还是其他的小程序页面 self 默认值自己小程序的页面 miniProgram 其他的小程序页面

navigator 导航标签

Vue1024的博客

10-20

1142

微信小程序 navigator 导航标签 <!-- 导航组件 navigator 0 块级元素默认会换行可以直接加宽度和高度 1 url 要跳转的页面路径绝对路径相对路径 2 target 要跳转到当前的小程序还是其他的小程序的页面 self 默认值自己小程序的页面 miniProgram 其他的小程序的页面 3 open-type 跳转的方式 1 navigate 默认值保留当前页面，跳转到应用内的某个页面，但是不能跳到 tab

微信小程序导航组件 navigator使用

weixin_45534301的博客

10-29

8028

微信小程序 导航组件 navigator使用

微信小程序开发之点击按钮退出小程序的实现方法

12-29

微信小程序官方是没有提供退出的API的，但是在navigator这个组件中，是有退出这个功能的：详情参考官方文档：navigator。示例代码： <navigator open-type=exit target=miniProgram>关闭小程序</navigator> ...

微信小程序 跳转方式总结

12-29

微信小程序 跳转方式总结一共算是有四种方式。 1.使用组件。<navigator>标签。来实现。特点：点击有按下的效果 <navigator url=../job_detail/job_detail?isShowCompanyDetail true&iscollect={{item....

设置TabNavigator组件的标签头的自定义皮肤

10-18

设置TabNavigator组件的标签头的自定义皮肤，可以设置样式等等，内容较少，只是提供一种自定义皮肤设置的思路

微信小程序页面间值传递的两种方法

01-03

与前端语言一样，小程序页面间的传递可以通过在路由url后接参数，路由的同时会将参数一并传递到新的页面。 index.wxml:  <view class=container>  ...

微信小程序用户自定义模版用法实例分析

01-03

本文实例讲述了微信小程序用户自定义模版用法。分享给大家供大家参考，具体如下： 1、新建一个wxml（为测试方便，这里将wxml文件建立在home目录下） /home/home/botmenu.wxml： <template name=bottommenu> <view ...

小程序中navigator使用

Zhencode的博客

09-03

358

小程序中navigator使用 <navigator open-type="navigate" url="/page/navigate/navigate?title=navigate"> 跳转新页面并可以返回上一级，不能跳tab页</navigator> <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect">关闭当前页打开新页面不可返回，不能跳tab页&

微信小程序的navigator组件

共勉

03-16

5832

navigator组件类似于html当中的a标签，是实现页面跳转功能的一个组件属性如下表所示：属性名类型说明 target String 在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值 self/miniProgram url String 当前⼩程序内的跳转链接 open-type String 跳转方式 open-type有效值如下图所示：其中一下代码示...

微信小程序-通过<navigator>标签实现页面的跳转

LzzMandy的博客

11-18

1121

1、界面结构： 2、从demo1界面跳转到demo2界面，并传递两个参数：name和age，demo1源码如下：  <navigator url="../demo2/demo2?name={{name}}&age={{age}}">带参数的页面跳转</navigator> Page({ data:{ ...

微信小程序开发—(十一)navigator

汉堡请不要欺负面条

05-05

1992

一.理解navigator 二.使用 1.navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面，另一种不带即在本页跳转，通过控制redirect属性跳转到navigator新页面 redirect在当前页打开 2.参数传递在index.wxml 跳转到navigator新页面 redirect在

navigator组件（相当于a标签）

weixin_30498921的博客

05-28

1224

　　navigator组件：页面链接；　　navigator组件属性：　　　　target：类型　　字符串　　在哪个目标上发生跳转，默认当前小程序　　　　　　属性值：self　　当前小程序　　　　　　　　　　miniProgram　　其他小程序　　　　url：类型　　字符串　　当前小程序内的跳转链接　　　　open-type：类型　　字符串　　跳转方式　　　　　　属性值...

微信小程序写一个代码，实现点击<navigator>时就会弹出一个模态弹窗

05-30

可以在<navigator>标签中设置一个data-*属性，并在点击事件中使用该属性来控制模态弹窗的显示和隐藏： ```html <navigator url="/pages/subpage/subpage" data-modal="true"></navigator> ``` ```javascript Page({ data: { showModal: false }, onTapNavigator: function(event) { if (event.currentTarget.dataset.modal) { this.setData({ showModal: true }) } else { wx.navigateTo({ url: event.currentTarget.dataset.url }) } }, hideModal: function() { this.setData({ showModal: false }) } }) ``` 在页面的data属性中设置一个showModal属性，用于控制模态弹窗的显示和隐藏。在点击事件中，使用event.currentTarget.dataset.modal来判断是否需要弹出模态弹窗，如果需要，则将showModal属性设置为true，否则使用wx.navigateTo()方法跳转到子页面。在模态弹窗中，可以设置一个取消按钮，点击后将showModal属性设置为false，模态弹窗将隐藏。