微信小程序wxml传递值总结（e.currentTarget，e.detail.value)
本文主要讲解一下三个函数
e.currentTarget.dataset.index 获取到 data-index 中的值
e.currentTarget.id 获取到 id 中的值
e.detail.value.(***) 动态获取 input 中的值
1. bindtap
Example 1.
JS文件中声明的值
// js文件
recommendInfo: [{id: 'Java编程思想（第4版）',price: '¥ 79.00',img: 'https://img.alicdn.com/imgextra/i1/1049653664/TB1PU42OVXXXXcYXXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg',monthSell: '月销量208',transPrice: '快递：0.0¥',num: 1},{id: 'PHP和MySQL Web开发原书第5版 ',price: '¥ 89.50',img: 'https://img.alicdn.com/imgextra/i3/1049653664/TB1n1y6XkUmBKNjSZFOXXab2XXa_!!0-item_pic.jpg_430x430q90.jpg',monthSell: '月销量7',transPrice: '快递：0.0¥',num: 2},{id:'利用Python进行数据分析（原书第2版',price:'¥ 59.50',img:'https://img.alicdn.com/imgextra/i1/1049653664/O1CN01p0JM7V1cw9irZtbqR_!!0-item_pic.jpg_430x430q90.jpg',monthSell:'月销量227',transPrice:'快递：0.0¥',num: 3},{id:'c++ primer plus 第6版中文版',price:'¥ 66.40',img:'https://img.alicdn.com/imgextra/i1/1049653664/TB19sxqveuSBuNjy1XcXXcYjFXa_!!0-item_pic.jpg_430x430q90.jpg',monthSell:'月销量327',transPrice:'快递：0.0¥',num: 4},{id:'云去云来+窗里窗外',price:'¥ 111.00',img:'https://img.alicdn.com/imgextra/i3/2814700210/O1CN01xhJ0rJ1DQDjAckXku_!!0-item_pic.jpg_430x430q90.jpg',monthSell:'月销量0',transPrice:'快递：0.0¥',num: 5},{id:'科比自传曼巴精神 中文版',price:'¥ 93.00',img:'https://img.alicdn.com/imgextra/i3/4090251125/O1CN01uaDooc1KBI9oiDWb7_!!0-item_pic.jpg_430x430q90.jpg',monthSell:'月销量37',transPrice:'快递：0.0¥',num: 6}]
wxml代码
// wxml文件
<view wx:for="{{recommendInfo}}" wx:for-item="i" ><view class="recommendBlock" bindtap="detail"id="{{i.img}}"><navigator url="/pages/detail/detail"><image src="{{i.img}}"style="width:325rpx;height:325rpx"/><text >{{i.id}}{{i.price}}\n</text><text >{{i.monthSell}}\n{{i.transPrice}}</text></navigator></view>
</view>
JS函数代码
<view class="recommendBlock" bindtap="detail" id="{{i.img}}">
detail: function(e){wx.setStorageSync('detailId', e.currentTarget.id);}
wx.setStorageSync(string key, any data)
key是必须是string类型，给你想储存到缓存的数据起个名字；data是个人感觉是任何类型的。
e.currentTarget.id 获取到 {{i.img}}
在我们想获取缓存中数据页面的JS文件中写入函数
getdetailId:function() {var goodID = wx.getStorageSync('detailId');this.setData({goodID: goodID // 赋值给data中的变量})}
光是这样我们还获取不了数据，我们要调用函数
//onReady 是初始化时调用的onReady: function () {this.getdetailId();}
Example 2.
wxml 代码
<view class="inFo {{click === 0 ? 'on':''}}" bindtap="isClick" data-index="0">商品详情</view>
JS代码
isClick: function(e) {var click = parseInt(e.currentTarget.dataset.index);// 转化为int型this.setData({click: click})}
e.currentTarget.dataset.index 获取到 data-index 中的值
2. bindsubmit
wxml 代码
<form bindsubmit="formSubmit"><input value="{{address.name}}" name="name" placeholder="姓名" class="Reno1"/><input value="{{address.phone}}" name="phone" placeholder="电话号码" class="Reno1"/><input value="{{address.detail}}" name="detail" placeholder="详细地址" class="Reno1"/><button form-type="submit" class="Reno2">保存</button></form>
JS代码
formSubmit: function(e) {var value = e.detail.value;if(value.name && value.phone && value.detail) {wx.setStorage({key: 'address',data: value,success() {wx.navigateBack();}});}else {wx.showModal({title: '提示',content: '请将信息填写完整',showCancel: false});}}
经过查找相关资料
e.detail.value.(***)是动态获取 input 中的 value 意思
我们输入 name 的值
<input value="{{address.name}}" name="name" placeholder="姓名" class="Reno1"/>
获取 name 的值 e.detail.value.name
微信小程序wxml传递值总结（e.currentTarget，e.detail.value)相关推荐
- 微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
- 微信小程序-WXML转换类型
微信小程序-WXML转换类型 情景:需要在WXML中把字符串转化成数字类型 解决:引入WXS wxs是小程序的一套脚本语言,结合wxml,可以构建出页面的结构. wxs不依赖于运行时的基础库版本,可以 ...
- php7 mysql json 小程序_微信小程序php传递post请求发送json数据以获取小程序码
困扰了两天的问题终于解决了! 用php传递post请求,发送json数据到微信小程序提供的接口,以此获得微信小程序码,下面是代码展示:<?php //需要传递的json数据 //能传递的参数,详 ...
- 微信小程序 java 传值_微信小程序传值获取值的实例方法
微信小程序传值以及获取值方法的详解 微信小程序传值以及获取值方法,传值有两种方法,对应也有获取值得方法, 1.设置id的方法标识跳转后传递的参数值: 2.通过使用data - xxxx 的方法来标识要 ...
- 微信小程序多选取值判断显示内容
写微信小程序项目的时候 遇到多选框选值通过id来判断内容切换 这里是通过wxs来实现的 wxml <wxs module="calc">function getId(a ...
- 微信小程序wxml和wxss样式
对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
- wxml修改样式_微信小程序wxml和wxss样式
对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
- 获取微信小程序码传递的参数 / 微信开发者工具模拟扫描小程序码调试
本文主要介绍如何在微信开发者工具中,模拟微信扫描小程序码打开小程序的场景,进行调试. 二维码调试可以看这篇文章:微信开发者工具模拟扫描二维码调试 添加编译模式 添加一个咱们自定义的编译模式 输入模式名 ...
- 微信小程序wxml如何判断字符串中汉语某字符_微信小程序开发经典案例解析“嗨兔儿”...
嗨兔儿是微信公众号嗨日语歌(hitaici)助手,主要为用户提供,关键词检索,帮助手册等,为外语学习者提供一个便捷的操作方式,能够开心工作,开心生活. 开发过程及注意事项分享视频. 1. 微信小程序开 ...
- 微信小程序的场景值scene
根据微信小程序返回给我们的场景值,我们可以根据不同的场景做出不同的处理,更加方便我们对使用场景的划分 当前支持的场景值有: 1001:发现栏小程序主入口,"最近使用"列表(基础库2 ...
最新文章
- 关于Visual Studio 2010与64位系统的问题
- 【数学和算法】最小二乘法理论(附c++代码)
- php kml文件解析,英语翻译中文：详细分析了KML、MapInfo文件及二者之间的联系,以KML点标记文件为例,基于PHP编程实现了KML到...
- 使用视觉信息，为什么能把移动机器人的空间位置信息记录下来
- [POJ1463] Strategic game
- php 上传多个txt文件上传,一个多文件上传的例子(原创)
- 北京大学吴华君课题组高新诚聘 医学生信 助理研究员和博士后
- 中nextint函数_Kotlin中的作用域方法（Scope Function）
- Leetcode 627. Swap Salary
- 用BT3和spoonwep2研究学习WEP密码…
- PHP帮管客CRM系统源码去域名授权v2.4.4版
- 高交会|华创芯光邀您一起畅游可见光通信的世界
- 按字符计算和字节计算的区别
- [复现论文程序图]High Speed Continuous Variable Source-Independent Quantum Random Number Generation...
- 前端HTML+CSS之网页排版（三）
- 大数据之clickhouse_clickhouse的基础介绍及基础使用
- Win10电脑自带的录屏功能怎么打开？
- 西北乱跑娃 --- python opencv图像祛噪
- 网络电话Skype协议分析
- 两个线程调用同一个函数