欢迎光临,了解微信小程序开发,就上易用通!

小程序路由带参数

发布:2021-07-02 08:57浏览: 来源:网络 作者:程小序

通过url带参传递

  • wxml
<navigator url="../user/user?id={{item.id}}&name={{item.name}}">点此进入 detail</navigator>
  • js
onLoad: function (options) { 
    this.setData({
        user_id: options.id,
        user_name: options.name
    }),
    success:function(){
    console.log('接口调用成功')
  },
  fail:function(){
    console.log('接口调用失败') 
  },
  complete:function(){
    console.log('调用结束,调用成功失败都会执行')
  }
}

点击事件传参

  • wxml
<view wx:for='{{list}}' data-item='{{item}}' data-id='{{item.id}}' bindtap='goDetail'></view>
  • js
 goDetail: function(e){
    let id =  e.currentTarget.dataset.id;    
    wx.navigateTo({
         url: '../index-detail/index-detail?id=' + id
       })
    }
  • 跳转页面取值
onLoad(options){
    console.log(options.id)//options.id就是传递的参数。
}

点击事件在js中赋值

  • wxml
<view bindtap="passQuery" data-index="1">点击事件传参</view>
  • js
passQuery: function(e){
    let query = e.currentTarget.dataset['index'];
    }

注意

1. wx.navigateTo({url:""})
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
2. wx.redirectTo()
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
 wx.switchTab({
     url: '../../pages/reg/reg',
     # success:function(){
     #    console.log('caled switchtab ')
     # }
 })
4. wx.reLaunch()
关闭所有页面,打开到应用内的某个页面(可以带参数跳转到tabBar)
5.wx.navigateBack()
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。