小程序页面跳转与传参

1.页面跳转

页面跳转优先采用 navigator 组件
小程序提供了两种页面路由方式:
a. navigator 组件

<navigator url="/pages/life/life">普通跳转</navigator>
<navigator url="/pages/life/life" open-type="navigate">跳转</navigator>
<navigator url="/pages/todo/todo" open-type="switchTab">切换底部栏</navigator>
<navigator url="/pages/base/base" open-type="redirect">语法-不留历史记录</navigator>

b.通过js进行页面跳转

<button size="mini" bindtap="goPage" type="primary">js跳转</button>
goPage(){
    /*
    // 普通跳转
    wx.navigateTo({
      url: '/pages/base/base',
    })
    //底部栏跳转
    wx.switchTab({
      url: '/pages/todo/todo',
    })*/
    //重定向跳转
    wx.redirectTo({
      url: '/pages/index/index',
    })
  },

2.小程序的页面传参

可以通过页面跳转时将参数传递到对应页面

<view class="list">
  <navigator url="/news/pages/detail/detail?id={{item.docid}}&title={{item.title}}" 
  class="item" wx:for="{{list}}" wx:key="docid">
    {{item.title}}
  </navigator>
</view>

页面通过options接收参数
下面代码options.id以及options.title均是从上一个页面传递而来的参数文章来源地址https://uudwc.com/A/2zgXw

onLoad(options) {
      console.log(options.id);
      // 设置标题文字
      wx.setNavigationBarTitle({
        title: options.title,
      })
},

原文地址:https://blog.csdn.net/weixin_55088962/article/details/126677353

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

h
上一篇 2023年06月30日 21:00
uniapp小程序中长按识别公众号二维码,企业微信二维码,个人微信二维码
下一篇 2023年06月30日 21:01