这一节我们介绍测试选择的实现，并提供wxml、wxss、js源代码。
实现后的效果图：
代码结构图：
一、wxml
<!--pages/ceshixz/ceshixz.wxml-->
<view class='choiceIcon'>
<image class='image' src='/images/exam.png'></image>
<view class='imageText'>选择题库</view>
</view>
<view class='cschoseQuestion' >
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
</view>
</picker>
<picker bindchange="csPickerChange" value="{{index}}" range="{{array}}">
{{array[index]}}
</picker>
</view>
<view class='startExam'>
<button bindtap='exam'>开始测试</button>
</view>二、wxss
.choiceIcon{
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
margin: 0 auto;
width: 350rpx;
height: 350rpx;
margin-top: 90rpx;
margin-bottom: 40rpx;
}
.image{
width: 280rpx;
height: 350rpx;
}
.imageText{
font-size: 40rpx;
margin-top: 30rpx;
text-align: center;
}
.cschoseQuestion{
font-size: 40rpx;
background-color: #e2e1de;
width: 50%;
height: 100rpx;
margin: 0 auto;
text-align: center;
justify-content:center;
display:flex;
align-items:center;
color: #575755;
margin-bottom: 70rpx;
}
.startExam{
margin: 0 auto;
padding-top: 15rpx;
height: 110rpx;
width: 50%;
}三、js
// pages/ceshixz/ceshixz.js
Page({
/**
* 页面的初始数据
*/
data: {
multiArray: [['国学'], ['题库一', '题库二', '题库三']],
objectMultiArray: [
[
{
id: 0,
name: '国学'
}
], [
{
id: 0,
name: '题库一'
},
{
id: 1,
name: '题库二'
},
{
id: 2,
name: '题库三'
}
]
],
multiIndex: [0, 0],
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value,
})
var cstikuzhi = this.data.multiIndex[0].toString() + this.data.multiIndex[1].toString()
wx.setStorage({
key: 'cstikuzhi',
data: cstikuzhi,
})
var global2 = getApp()
global2.tikuleixing = this.data.multiArray[0][this.data.multiIndex[0]]
global2.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);
},
exam: function (e) {
wx.navigateTo({
url: '/pages/ceshizh/ceshizh',
success: function (res) {
},
fail: function (res) { },
complete: function (res) { },
})
},
onLoad: function (options) {
var global2 = getApp()
global2.tikuleixing = this.data.multiArray[0][this.data.multiIndex[0]]
global2.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: '大家一起学',
}
}
})四、关于源代码的说明
- 多列选择器只实现了功能，没有把所有的题库都列上
- 数据传递方面，为了多方面练习编程，分别用了页面间传值和全局变量
- onLoad函数中获取了初始的题库类型和题库号
- 页面跳转，这里用了wx.navigateTo