微信小程序开发学习笔记——2.11navigator页面链接导航

这篇具有很好参考价值的文章主要介绍了微信小程序开发学习笔记——2.11navigator页面链接导航。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。

课程连接: https://www.bilibili.com/video/BV19G4y1K74d?p=14

一、navigator页面链接

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

属性之一 

微信小程序开发学习笔记——2.11navigator页面链接导航,小程序开发学习笔记,微信小程序,学习,笔记

        navigate可以记录上一个缓存页,点击左上角返回按钮可以跳转回上一个页面,但是redirect不行。共同点是两者都不能跳转到tabbar页面(导航菜单这个东西还没配置,之后的课上再讲)。

        reLaunch和redirect很像,都不能跳转回上一个页面,区别在于reLaunch可以跳转到任何指定页面包括tabbar但redirect不能跳到tabbar。

二、例子

demo.wxml文件中添加以下代码

<navigator url="/pages/index/index">首页</navigator>
<navigator url="/pages/logs/logs" class="out">
  <image src="/static/image/gif1.gif" class="gif" mode=""/>
</navigator>

demo.wxss文件中添加以下代码

.out .gif{
  width: 200rpx;
  height: 200rpx;
}

index.wxml

<navigator url="/pages/demo/demo" open-type="redirect"><!--redirect使跳转到下一个页面后不会出现后退一步的按钮(左上角)-->
  go demo page
</navigator>

点击go demo page 

微信小程序开发学习笔记——2.11navigator页面链接导航,小程序开发学习笔记,微信小程序,学习,笔记

跳转到测试页面左上角没有返回键,因为open-type设置了redirect。

微信小程序开发学习笔记——2.11navigator页面链接导航,小程序开发学习笔记,微信小程序,学习,笔记

点击gif图片跳转到日志,左上角有返回键。

微信小程序开发学习笔记——2.11navigator页面链接导航,小程序开发学习笔记,微信小程序,学习,笔记文章来源地址https://www.toymoban.com/news/detail-836816.html

到了这里,关于微信小程序开发学习笔记——2.11navigator页面链接导航的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发学习笔记——3.4for循环列表渲染的用法

    跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。 课程连接:https://www.bilibili.com/video/BV19G4y1K74d?p=18vd_source=9b149469177ab5fdc47515e14cf3cf74 https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html data.js文件的data部分:  data.wxml文件中添加如下代码:

    2024年02月22日
    浏览(35)
  • 微信小程序开发学习笔记《17》uni-app框架-tabBar

    博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 运行如下的命令,基于master分支在本地创建tabBar子分支,用来开发和tabBar相关的功能: 在 pages目录中,创建首页(home)、分类(cate)、购物车(cart)、我的(my)这4个

    2024年02月20日
    浏览(49)
  • 微信小程序开发实战11_1 微信支付下单

    微信支付存在多个业务流程,包括微信支付流程、退款流程等。本章节主要介绍微信的支付下单流程,图12-1是微信支付流程的交互图: 重点环节说明 步骤1:小程序端用户向商户服务器发起支付请求,重点是提供用户信息、商品信息、支付金额等参数。 步骤3:商户服务器调

    2024年02月09日
    浏览(31)
  • 微信小程序开发教学系列(9)- 小程序页面优化

    在开发小程序时,页面性能优化是非常重要的一项任务。优化页面性能可以提升用户体验,使小程序更加流畅和高效。本章将介绍一些常见的页面优化方法和技巧,帮助您提升小程序的性能。 页面性能优化的目标是减少页面加载时间和提升页面渲染速度,从而提供更好的用户

    2024年02月11日
    浏览(31)
  • 微信小程序开发实战11_4 微信支付退款流程

    当交易发生之后一年内,由于买家或者卖家的原因需要退款时,卖家可以通过退款接口将支付金额退还给买家,微信支付将收到退款请求并且验证成功之后,将支付款按原路退还至买家账号上。使用该接口时的一些注意事项如下: 交易时间超过一年的订单无法提交退款。 微

    2024年02月11日
    浏览(30)
  • 微信小程序开发实战9_2 小程序页面转发

    小程序页面转发是小程序分享的一个重要方式,在设计小程序应用时就需要考虑那些页面需要实现转发功能,以及页面的转发参数。本节介绍如何进行小程序页面的分享,并介绍如何获取小程序卡片的分享票据。 9.2.1小程序页面转发 微信小程序提供了页面的转发的功能,用户

    2024年02月16日
    浏览(27)
  • 微信小程序开发学习之页面导航(声明式导航和编程式导航)

    页面导航指的是页面之间的相互跳转。 小程序中实现页面导航的两种方式: 声明式导航 ● 在页面上声明一个 navigator 导航组件 ● 通过点击 navigator 组件来实现页面的跳转 编程式导航 ● 调用小程序的导航API,实现页面的跳转 1.1.1. 导航到tabBar页面 tabBar 页面指的是被配置为

    2024年02月15日
    浏览(37)
  • 微信小程序开发系列(三)·微信小程序页面的创建、小程序如何更改调试基础库

    零基础手把手教你创建微信小程序(一)·微信小程序开发账号的注册以及开发者工具的安装和使用-CSDN博客 零基础手把手教你创建微信小程序(二)·创建第一个微信小程序以及了解小程序代码的构成-CSDN博客 目录 1.  小程序页面的创建 1.1  方法一 1.2  方法二 2.  小程序如

    2024年04月26日
    浏览(41)
  • 微信小程序开发笔记

    详情参考: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html 详情参考: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html 详情参考: https://developers.weixin.qq.com/miniprogram/dev/component/button.html 按钮css样式参考: https://www.runoob.com/css3/css3-buttons.html 详情参考: https://w

    2024年02月09日
    浏览(46)
  • 微信小程序开发系列(十一)·小程序页面的跳转设置以及参数传递

    目录 1.  跳转到商品列表 1.1  url: 当前小程序内的跳转链接 1.2  navigate:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 1.3  redirect: 关闭当前页面,跳转到应用内的某个页面。但不能跳转到 tabbar 页面 1.4  navigate和redirect的区别 1.5  switchTab:跳转到 t

    2024年04月12日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包