本文主要讲解一下三个函数
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