页面跳转_小程序里页面跳转的两种方式

我们在小程序里做页面跳转有两种方式

•1,借助navigator组件•2,借助wx.自带方法,在点击的时候做页面跳转 如下图所示的几个wx.方法

1956cdf8957878f577e617f7901589e6.png

19-1,navigator实现页面跳转

navigator其实和我们html里的a标签有点像,也是为了实现页面跳转的。官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

cc38ba71b35ef863ccf3f410c80c8337.png

我们想用navigator来跳转到别的页面,其实很简单,只需要如上图所示,做简单配置即可。当然了我们使用navigator来跳转页面时,分下面几种情况。当然这些跳转方式都是通过配置open-type属性来定义的。

9b1f5760dd658ea7a15d5bc5761d6f93.png

19-2,navigator的跳转方式

下面我把一些常用的open-type属性列出来给大家,方便大家以后使用。

215cd5c3609286fc5f882110dfb1be3a.png

如我们使用navigate做页面跳转,只写个url属性,open-type的值默认就是navigate

90778553579a51535aa6937b6a6dbd9d.png

这样我们跳转到新页面后,会有一个返回按钮。我们可以通过这个返回按钮返回上一个页面。

23b00af51f8cc629835fa7a78d857a35.png

我会在视频里为大家一个个演示其余的方法和功能。

19-3,点击事件结合wx方法实现跳转

我们做页面跳转除了使用navigate组件外,还可以通过点击事件借助wx方法实现页面跳转。

常用的wx方法:

99597b06199b7f5fc3929c1ff4242867.png

我这里给大家举个简单的例子

•在wxml里设置点击事件

69d1be53df3e295a24e6f8a69e1e8a94.png

•然后再js里设置点击后跳转页面

1e8e8f64e699ab706b9f98e031591458.png

这样我们就可以实现页面跳转了,和使用navigate做跳转一样的效果。其余的几个wx跳转方法,我也会在视频里给大家做演示。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值