zoukankan      html  css  js  c++  java
  • 微信小程序路由带参

    通过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 页面
    
    3. wx.switchTab()
     wx.switchTab({
         url: '../../pages/reg/reg',
         # success:function(){
         #    console.log('caled switchtab ')
         # }
     })
    跳转到 tabBar 页面,并关闭其他所有非tabBar页面
    
    4. wx.reLaunch()
    关闭所有页面,打开到应用内的某个页面(可以带参数跳转到tabBar)
    
    5.wx.navigateBack()
    关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
    
  • 相关阅读:
    2020软件工程作业01
    2020软件工程—06—个人作业
    团队二次作业
    软件工程作业05
    软件工程作业00--问题清单
    软件工程作业04二期
    2020软件工程作业04
    oracle11安装过程中常出现的问题和解决办法
    2020软件工程作业03
    2020软件工程作业02
  • 原文地址:https://www.cnblogs.com/xinzaiyuan/p/12049662.html
Copyright © 2011-2022 走看看