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

已于 2022-11-04 18:08:49 修改
阅读量4.3k 收藏 4
点赞数 4
分类专栏： 小程序基础 文章标签： 微信小程序 前端 javascript
于 2021-07-07 00:06:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aduovip/article/details/118532552
版权

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

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

看一个例子

在index.wxml中，

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

定义好目录结构，如下：

效果如下图 

109905418
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现跳转的几种方式总结（推荐）
12-29
今天把实现微信页面的跳转的几种方法总结分享下 1.使用导航组件，标签，页面链接来实现（可以发现点击时有背景） <!-- sample.wxml --> <view class=btn-area> <navigator url=../my/my>跳转到新页面</navigator> </view> 参数如下 2.给页面布局加监听bindtap事件，然后在方法里面，通过wx.navigatorTo来实现跳转（保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面） 在my.wxml中加监听bindtap事件 <view bindtap='jump'
Navigator.
05-05
RN实现页面导航效果，Navigator和NavigatoriOS使用
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 484
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
【微信小程序开发（8）---导航组件 navigator 页面跳转 open-type、 target 、 URl等属性应用】
最新发布
2301_76379462的博客
05-16 262
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
关于微信小程序的navigator标签
笑到世界都狼狈的博客
09-20 8138
关于微信小程序的navigator标签总结的一些笔记 <!-- 关于小程序的navigator标签------相当于html中的a标签 导航组件 navigator 1.块级元素 默认会换行 可以直接加宽度和高度 2.url 要跳转的页面路劲 绝对路径 相对路径 3.target 要跳转到当前的小程序 还是其他的小程序页面 self 默认值 跳转到自己的小程序页面 miniProgram 跳转到其他的小程序页面 .
1.6 微信小程序 navigator标签
小脆筒style的博客
04-13 321
navigator 导航组件 类似超链接标签 open-type 有效值 代码案例 .wxml <!--pages/navigator/navigator.wxml--> <!-- 导航组件 navigator 0 块级元素 默认会换行 可以直接加宽度和高度 1 url 要跳转的页面路径 绝对路径 相对路径 2 target 要跳转到当前的小程序 还是其他的小程序页面 self 默认值 自己 小程序的页面 miniProgram 其他的小程序页面
navigator 导航标签
Vue1024的博客
10-20 1158
微信小程序 navigator 导航标签 <!-- 导航组件 navigator 0 块级元素 默认会换行 可以直接加宽度和高度 1 url 要跳转的页面路径 绝对路径 相对路径 2 target 要跳转到当前的小程序 还是其他的小程序的页面 self 默认值 自己 小程序的页面 miniProgram 其他的小程序的页面 3 open-type 跳转的方式 1 navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tab
微信小程序导航组件 navigator使用
weixin_45534301的博客
10-29 8110
微信小程序 导航组件 navigator使用
微信小程序源码_仿TB模板.zip
03-08
10. **状态管理**：在较大规模的小程序中，可能需要使用到状态管理库如Vuex的微信小程序版本（如wepy-redux）来管理全局状态，保持数据的一致性。 11. **真机调试与发布**：开发者可以使用微信开发者工具进行模拟器...
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
微信小程序源码_艺术展览小程序.zip
09-02
微信小程序是一种轻量级的应用开发平台，主要用于在微信内部运行，无需下载安装即可使用的应用。本压缩包"微信小程序源码_艺术展览小程序.zip"包含了创建一个艺术展览相关的小程序所需的所有源代码文件，让我们来...
设置TabNavigator组件的标签头的自定义皮肤
10-18
设置TabNavigator组件的标签头的自定义皮肤，可以设置样式等等，内容较少，只是提供一种自定义皮肤设置的思路
微信小程序 navigator 跳转url传递参数
08-31
下面将详细介绍微信小程序 navigator 跳转 URL 传递参数的使用方法和相关注意事项。 一、传值方法 在微信小程序中，使用 navigator 组件跳转到新的页面时，可以在 URL 后面拼接参数。例如，想要传递参数 id 的值为...
小程序中navigator使用
Zhencode的博客
09-03 362
小程序中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 5845
navigator组件 类似于html当中的a标签，是实现页面跳转功能的一个组件 属性如下表所示： 属性名 类型 说明 target String 在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值 self/miniProgram url String 当前⼩程序内的跳转链接 open-type String 跳转方式 open-type有效值如下图所示： 其中一下代码示...
微信小程序-通过<navigator>标签实现页面的跳转
LzzMandy的博客
11-18 1123
1、界面结构： 2、从demo1界面跳转到demo2界面，并传递两个参数：name和age，demo1源码如下： <!-- 跳转：带参数 --> <navigator url="../demo2/demo2?name={{name}}&age={{age}}">带参数的页面跳转</navigator> Page({ data:{ ...
微信小程序开发—(十一)navigator
汉堡请不要欺负面条
05-05 2016
一.理解navigator 二.使用 1.navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面，另一种不带即在本页跳转，通过控制redirect属性 跳转到navigator新页面 redirect在当前页打开 2.参数传递 在index.wxml 跳转到navigator新页面 redirect在
navigator组件（相当于a标签）
weixin_30498921的博客
05-28 1228
　　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，模态弹窗将隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值