小程序中页面跳转的时候,需要将一些值带到下个页面,接下来举例说明页面之间如何传值。
简单类型参数传递
假设我们的需求是从a页面跳转到b页面,将a页面的部分数据传递给b页面,先看看a页面部分:
<view class='scrollView_box' >
<scroll-view scroll-x >
<view wx:for="{{todayMultArr}}" wx:key="{{index}}" id="{{index}}" bindtap='scrollviewTap'>
<view class='scrollviewItem_title'>{{item.selectName}}</view>
<view class='scrollviewItem_title'>{{item.times}}</view>
<view class='scrollviewItem_title'>{{item.saveDate}}</view>
<view class='scrollViewItem_infoView'>{{item.description}}</view>
<button data-id='{{item.qnID}}' data-saveDate='{{item.saveDate}}' data-selectName='{{item.selectName}}' class='scrollViewItem_changeBtn' bindtap='editReport'>
修改
</button>
</view>
</scroll-view>
</view>
重点看button元素的data-XXX属性,这些属性用于该button绑定的触发事件函数取值,从而传递给下一页面。
让我们来看一下a页面对应的js文件,这里只展示这个函数部分:
/**修改 */
editReport: function (e) {
var qnIDStr = e.currentTarget.dataset.id
var saveDateStr = e.currentTarget.dataset.savedate.replace('-', '').replace('-', '')
var selectName = e.currentTarget.dataset.selectname
wx.navigateTo({
url: '../b/b?qnIDStr=' + qnIDStr + '&saveDateStr=' + saveDateStr +'&symptomNameStr='+selectName,
})
}
在这里注意一个细节,button元素里面data-XXX属性,此处的XXX不管你是大写还是小写还是大小写混合,在js里面取值的时候,都要全部小写的属性来取值。
在b页面取值方式如下:
onLoad: function (options) {
var that = this;
that.setData({
qnIDStr: options.qnIDStr,
symptomNameStr:options.symptomNameStr,
saveDate: options.saveDateStr
}),
//业务代码......
}
复杂类型参数传递
当需要传递复杂类型的数据时怎么传值,下面来举个例子。
a页面的js 文件:
addRecordButtonClick: function () {
var that = this;
//这里todayMultArr是一个数组,数组的每一个元素是map类型的数据
var todaySymptomNames=[]
//遍历todayMultArr数组,取出每一项的中map的selectName属性
for (var index in that.data.todayMultArr){
todaySymptomNames.push(that.data.todayMultArr[index].selectName)
}
wx.navigateTo({
url: '../AddRecord/AddDiscomfortRecordIndex?qnIDStr=' + qnIDStr + '&todaySymptomNames=' + todaySymptomNames + '&todayMultArr=' + JSON.stringify(that.data.todayMultArr),
})
}
在传递这种复杂类型的参数(例:todayMultArr)时,我们需要将其转换成json类型的格式来进行传递,在取值的时候,再把json格式转换成原来的格式
来看看到b页面取值怎么取:
onLoad: function (options) {
var that = this;
var todayMultArr = JSON.parse(options.todayMultArr);//再转为原来的格式
that.setData({
qnIDStr: options.qnIDStr,
todayMultArr: todayMultArr
});
//其他业务代码......
}
其他复杂类型数据也可参考这种形式。