######## 2018.7.30/18:46 #########
上一篇博文中已明了e.target与e.currentTarget的区别,详情点这里查看https://blog.csdn.net/syleapn/article/details/81289337
本篇会用得到它们的~
下面进行今天的重点,页面传值的方式很多,我尽可能的通过实例列出,欢迎大家的补充~
小程序页面传值,通常是传多个,本篇也是进行多值传递的讲解,掌握了多值的传递,单个值的传递就很简单了,而且多值也常用到。
下面进入正题!!
方法一:通过设置id的方法来传值
先上效果:
源码:
主页
index.wxml
<!--index页 -->
<!--页面传值(多个参数) -->
<!--通过设置id的方法标识来传值 -->
<block wx:for="{{list}}" wx:key="">
<view class='View' bindtap='detail' id='{{index}}'>
<view class="viewNum">第{{index+1}}个View</view>
<view>{{item.a1}}</view>
<view>{{item.a2}}</view>
<view>{{item.a3}}</view>
</view>
</block>
index.wxss
.View{
padding: 20rpx 0;
margin: 24rpx 0;
background-color: cyan;
font-size: 30rpx;
line-height: 40rpx;
}
.viewNum{
color: red;
font-size: 34rpx;
margin-bottom: 20rpx;
}
index.js
Page({
data: {
// 数据
list: [
{
a1: "name11",
a2: "name12",
a3: "name13"
},
{
a1: "name21",
a2: "name22",
a3: "name23"
},
{
a1: "name31",
a2: "name32",
a3: "name33"
},
]
},
// 方法
detail: function (e) {
var that = this
//获取当前点击元素的id(索引值)
var Id = e.currentTarget.id;
//获取当前点击元素的属性值。
var mesg = that.data.list[Id];
//因为获取到的值是个对象,url只能传字符串,所以必须把它转化为字符串。
mesg = JSON.stringify(mesg);
//跳转到详情页
wx.navigateTo({
//在接收页面的url后面加上“?自定义名称=字符串”就可以通过url传值
url: '../detail/detail?Mesgs=' + mesg,
})
},
})
详情页
detail.wxml
<!--详情页 -->
<view>
<view>{{detail.a1}}</view>
<view>{{detail.a2}}</view>
<view>{{detail.a3}}</view>
</view>
detail.js
Page({
data:{
// 对象
detail:{},
},
onLoad: function (options) {
var that= this
// 字符串转json
var info = JSON.parse(options.Mesgs);
console.log(info)
that.setData({
// 把从index页面获取到的属性值赋给详情页的detail,供详情页使用
detail: info
})
}
})
############## 下班了,吃饭啦,先写到这儿~ ############
##### 2018.7.30/22.01 ######
说明:1>上面代码中用了字符串与JSON转化,关于它们的转化以及为何转化请参考:https://blog.csdn.net/syleapn/article/details/79940396
2>上面方法有局限,只能适用于详情页是相同的模块~
3>为了提高代码执行率,一般写上wx:key。不过不写不影响运行结果,只是给个警告。
4>上述代码id="{{n}},这个n为wx:for-index的值,当wx:for-index更改时,n做相应的调整即可。
方法二:通过设置data-*的方式来传值
只需将方法一中的代码做如下调整即可:
1>将index.wxml中的
<view class='View' bindtap='detail' id='{{index}}'>
改成
<view class='View' bindtap='detail' data-id='{{index}}'>
2>index.js中的
var Id = e.currentTarget.id;
改成
var Id = e.currentTarget.dataset.id;
即可;
说明:
1>方法二中的data-id="{{n}}中,这个n也为wx:for:index的值。
2>上述方法一、二中的id="{{index}}与data-id="{{index}}可用id="{{item.id}}"与data-id="{{item.id}}代替。一般用后面的,上面只是简单的测试!