微信小程序路由带参
通过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 获取当前的页面栈,决定需要返回几层。
微信小程序路由带参的更多相关文章
- 微信小程序路由跳转
微信小程序路由跳转 1.wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面, 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 参数 O ...
- 一个C#程序员学习微信小程序路由的笔记
路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...
- 微信小程序 路由跳转 异步请求 存储数据,微信登录接口
1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...
- 微信小程序商城 带java后台源码
微信小程序商城(Java版) 演示地址 账号:admin 密码:admin 小程序体验码: 技术选型 1 后端使用技术 1.1 springframework4.3.7.RELEASE 1.2 myb ...
- 10 微信小程序路由跳转
一.四种跳转方式 API路由详解 除了tabBar这种底部跳转的方法,我们还有路由跳转,以下四种方式: 1. wx.switchTab() :跳转到 tabBar 页面,并关闭其他所有非 tabBar ...
- 微信小程序页面带参数跳转
页面传递参数的方式 data-para js获取参数
- 微信小程序页面带参数跳转及接收参数内容navigator
功能从index页面跳转到draw页面,并在draw页面获取id及imgUrl index.wxml <navigator class='looks-view' wx:for="{{i ...
- 微信小程序--页面传参
场景: A页面字段---传递到-->B页面 A页面wxml: wx:for----习惯用<block> 设置所点击的值----data-xxx 获取所点击的值---e.current ...
- 微信小程序路由跳转(navigateTo,redirectTo ,switchTab ,reLaunch )
navigateTo, redirectTo 只能打开非 tabBar 页面. switchTab 只能打开 tabBar 页面. reLaunch 可以打开任意页面. 通过redirect重定向的页 ...
随机推荐
- 【LEETCODE】70、字符匹配1023 Camelcase Matching
最近做leetcode总感觉自己是个智障,基本很少有题能自己独立做出来,都是百度... 不过终于还是做出了一题...而且速度效率还可以 哎,加油吧,尽量锤炼自己 package y2019.Algor ...
- vscode 前端常用插件推荐
1. vscode 简介vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器.当前市面上常用的轻型代码编辑器主要是:sublime,n ...
- MSSQLSERVER 服务运行内存设置较小导致启动服务失败
问题产生原因: 手动设置MSSQLSERVER 运行内存,设置值未达到MSSQLSERVER 服务运行内存最低值(max server memory 所允许的最小内存量是 128 MB.),导致MSS ...
- php GD 和图像处理函数, 用 STHUPO.TTF 字体向图像写入文本
php GD 和图像处理函数, 用 STHUPO.TTF 字体向图像写入文本 注意: 01) imagettftext() 这个函数不能使用相对路径, 要想使用相对路径要先使用 puten ...
- 【leetcode-97 动态规划】 交错字符串
(1过,调试很久) 给定三个字符串 s1, s2, s3, 验证 s3 是否是由 s1 和 s2 交错组成的. 示例 1: 输入: s1 = "aabcc", s2 = " ...
- [开发ing] Unity项目 - Hero英雄
目录 游戏原型 项目演示 绘图资源 代码实现 技术探讨 参考来源 游戏原型 游戏介绍:这是一款横版类魂游戏,玩家将操控Hero,在诸神黄昏的墓地中,挑战源源不断的敌人,以及近乎无敌的强大boss 灵感 ...
- C# vb .net实现大小调整特效滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的大小调整效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第 ...
- centos7#yum install ffmpeg
yum install ffmpeg rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro rpm -Uvh http://li. ...
- js-Date对象(九)
一.Date对象的创建1.new Date()[创建当前时间对象]eg: var date = new Date(); console.log(date); //Thu Jul 18 2019 18: ...
- day 07 作业
猜年龄游戏 ''' 给定年龄,用户可以猜三次年龄 年龄猜对,让用户选择两次奖励 用户选择两次奖励后可以退出 ''' age_count = 0 age = 20 prize_dict = { '0': ...