小程序页面跳转、带参数跳转以及navigator跳转[通俗易懂]

一、单纯的页面跳转跳转到的页面分tabBar页面和非tabBar页面。url路径可以写相对和绝对路径。1、跳转到非导航页面,用wx.navigateTo方法wx.navigateTo({url:’../person/goldcoin/index’//或者url:’/page/person/goldcoin/index’})2、跳转到tabB…

大家好,又见面了,我是你们的朋友全栈君。

一、单纯的页面跳转

跳转到的页面分 tabBar 页面和 非tabBar 页面。url路径可以写相对和绝对路径。

1、跳转到非导航页面,用 wx.navigateTo 方法

wx.navigateTo({

    url: '../person/goldcoin/index'    //或者url: '/page/person/goldcoin/index'

})

2、跳转到tabBar导航页面,用 wx.switchTab 方法

wx.switchTab ({

    url: '../person/goldcoin/index'

})

二、带参数跳转

1、当前页面的参数,传到下一个页面。当前视图中view里要写入传递值。如下,通过bindtap绑定detail事件,并且把要传递的参数(title、time),以 “data-” 的格式传递。

<view wx:for="{
  
  {list}}" wx:key="id">

    <view bindtap="detail" data-title="{
  
  {item.title}}" data-time="{
  
  {item.time}}">

        <label>标题:{
  
  {item.title}}</label>

        <label>时间:{
  
  {item.time}}</label>

    </view>

</view>

2、当前页面的js如下:e.currentTarget.dataset.XX  即获取视图中 “data-” 格式的数据。并在navigateTo中传入参数进行跳转。

detail:function(e){

    var title = e.currentTarget.dataset.title;

    var time = e.currentTarget.dataset.time;

    wx.navigateTo({

        url: "/pages/person/goldcoin_detail/index?detail=" + title + "|" + time

    })

}

3、在跳转到的页面接收数据:数据存在options中,直接以 “options.参数名”的形式获取。

data: {

    title:'',

    time:''

},


onLoad: function (options) {

    var str = options.detail;

    var detail = str.split("|");

    this.setData({

        title:detail[0],

        time:detail[1]

    })

},

三、navigator页面跳转

1、不带参数

<navigator url="/page/person/person">

    ......

</navigator>

2、带参数

<navigator url="/page/person/person?title=1&time=1234">

    ......

</navigator>

 

更多详细请看官方文档

小程序页面跳转、带参数跳转以及navigator跳转[通俗易懂]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/129719.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 程序员们千万不要接私活(程序员找私活的平台)

    点击上方“码农突围”,马上关注,每天上午8:50准时推送这里是码农充电第一站,回复“666”,获取一份专属大礼包真爱,请设置“星标”或点个“在看”作者:程序员新视界来源:…

    2022年4月11日
  • session.setAttribute()方法是做什么用的?

    session.setAttribute()方法是做什么用的?session.setAttribute(“sessionName”,Object);用来设置session值的,sessionName是名称,object是你要保存的对象。session.getAttribute(“sessionName”);用来得到对应名称的session值,即得到object对象,注意需要进行类型转换!session.setAttribute(“xy

    2022年10月17日
  • SAGA GIS_GOSAT卫星数据下载

    SAGA GIS_GOSAT卫星数据下载官网:SAGA-SystemforAutomatedGeoscientificAnalyseshttps://saga-gis.sourceforge.io/en/index.html点击下载按钮点击后等几秒即可下载下载时间过长

    2022年9月16日
  • ubuntu16.04.3安装教程_Ubuntu16下安装QQ

    ubuntu16.04.3安装教程_Ubuntu16下安装QQUbuntu16.04.1安装NginxNginx(“enginex”)是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器。Nginx是由IgorSysoev为俄罗斯访问量第二的Rambler.ru站点开发的,第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集

    2022年9月16日
  • 手机看Typora笔记[通俗易懂]

    接触Typora之后感觉还挺好用的,不用上网,不用花钱(白嫖的玩意就是香)。可以写普通的文本,可以添加五个等级的标题,可以插入图片,,还可以插入各种各样的代码块(java,c,html,css等等),简洁而强大。但是当初我以为只能在电脑上看的时候就觉得有点难受,玛德是我S13了,我还去网上搜了半天,看看有没有教程或者手机版的软件,有的还要付费,今天我恍然大悟,尼玛人家开发个软件怎么可能没想到这些东西呢,我真是S13卧槽。看图啥都懂了:别被坑钱和C币吧…

    2022年4月3日
  • 走进云时代_怎么跟上时代的脚步

    走进云时代_怎么跟上时代的脚步如何跟上时代的步伐进入云世界

    2022年4月21日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号