小程序的基础（三）

最新推荐文章于 2023-08-14 14:06:20 发布

stay_少年与梦

最新推荐文章于 2023-08-14 14:06:20 发布

阅读量1.5k

点赞数 2

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/stay_1842434500/article/details/118195585

版权

本文详细介绍了微信小程序中的navigator组件、rich-text组件和button组件的使用，包括navigator的open-type属性、rich-text的nodes属性以及button的open-type属性和各种事件处理，强调了在实际使用中的注意事项和配置要求。

摘要由CSDN通过智能技术生成

前言

昨天我们学习了小程序的基础，今天我们继续来学习剩下的基础内容。

一、 navigator

导航组件类似超链接标签

导航组件 navigator

0 块级元素 默认会换行 可以直接加宽度和高度
1 url  要跳转的页面路径 绝对路径 相对路径
2 target 要跳转到当前小程序 还是其他小程序
  self 默认值 自己的小程序页面
  miniProgram  其他的小程序页面
3 open- type 跳转⽅式
  1 navigate  默认值 保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar ⻚⾯
  2 redirect 关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar ⻚⾯。
  3 switchTab 跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
  4 reLaunch 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯

代码示例：

 <navigator url="/pages/demo10/demo10">
  轮播图页面
 </navigator>
 <navigator url="/pages/index/index">
  tabbar页面
 </navigator>
 <navigator  open-type="redirect" url="/pages/demo10/demo10">
  轮播图页面
 </navigator>

 <navigator open-type="switchTab"   url="/pages/index/index">
  tabbar页面
 </navigator>
 <navigator open-type="reLaunch"   url="/pages/index/index">
  可以随便跳
 </navigator>

属性名	类型	默认值	说明
target	String	self	在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值 self/miniProgram
url	String		当前⼩程序内的跳转链接
open- type	String	navigate	跳转⽅式

open-type 有效值：

值	说明
navigate	保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar ⻚⾯
redirect	关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar ⻚⾯。