本节我们来实现页面的功能，给出“学习选择”的js源代码。
// pages/xuexixz/xuexixz.js
Page({
data: {
multiArray: [['国学', '科学'], ['题库一', '题库二', '题库三', '题库四', '题库五', '题库六', '题库七', '题库八']],
objectMultiArray: [
[
{
id: 0,
name: '国学'
},
{
id: 1,
name: '科学'
}
],
[
{
id: 0,
name: '题库一'
},
{
id: 1,
name: '题库二'
},
{
id: 2,
name: '题库三'
},
{
id: 3,
name: '题库四'
},
{
id: 4,
name: '题库五'
},
{
id: 5,
name: '题库六'
},
{
id: 6,
name: '题库七'
},
{
id: 7,
name: '题库八'
}
]
],
multiIndex: [0,0],
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value,
})
var tikuzhi = this.data.multiIndex[0].toString() + this.data.multiIndex[1].toString()
wx.setStorage({
key: 'tikuzhi',
data: tikuzhi,
})
console.log(tikuzhi)
var global = getApp()
global.tikuleixing = this.data.multiArray[0][this.data.multiIndex[0]]
global.tikuxuhao = this.data.multiArray[1][this.data.multiIndex[1]]
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['题库一', '题库二', '题库三', '题库四', '题库五', '题库六', '题库七', '题库八'];
break;
case 1:
data.multiArray[1] = ['五 下'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
data.multiIndex[2] = 0;
console.log(data.multiIndex);
break;
}
this.setData(data);
},
study:function(e){
wx.navigateTo({
url: '/pages/xuexizh/xuexizh',
success: function(res) {
},
fail: function(res) {},
complete: function(res) {},
})
},
onLoad: function (options) {
var global = getApp()
global.tikuleixing = this.data.multiArray[0][this.data.multiIndex[0]]
global.tikuxuhao = this.data.multiArray[1][this.data.multiIndex[1]]
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: '大家一起学',
}
}
})这里要注意几点：
- 多列选择器的选择结果是，数值型数组的形式，云数据库中数据集合的名称是字符串的形式，所以用了字符串转换 .toString()
- 这里我练习使用页面间传值，用了wx.setStorage。
- 如果为了更简洁，可以用全局变量。我练习使用全局变量，用了global=getApp()
另外一点说明：
如果使用的是单列选择器picker控件，它的下标是从0开始的，获取到的 e.detail.value 这个值就会是字符串的形式。
如果要对它进行数学处理，就需要先把它转换成数字型格式。需要用到parseInt()函数，它的作用是把字符串转换为数字。
/*
picker的下标是从0开始的，这里练习把它的值转换成数字然后 +1
并且把选择的题库赋给tikuzhi，传递给缓存，进行页面间传值
*/
var tikuzhi =parseInt(e.detail.value)+1;
wx.setStorage({
key: 'tikuzhi',
data: tikuzhi,
})
//parseInt()函数，把字符串转换为数字
//toString()，把数字转换为字符串