小程序页面跳转与传参

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均是从上一个页面传递而来的参数

onLoad(options) {
      console.log(options.id);
      // 设置标题文字
      wx.setNavigationBarTitle({
        title: options.title,
      })
},
  • 4
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值