（3）“学习选择”的wxml、wxss源代码

上一节建立了项目整体的文件结构，这一节开始逐个建立页面。本节从页面的表观入手，建立wxml、wxss源代码。

如下图，本节我们建立“学习选择”部分的页面结构和样式表——wxml、wxss。程序里我用xuexixz命名

建立后的页面效果是这样的

一、xuexixz.wxml源代码

 <view class='choiceIcon'>
    <image class='image' src='/images/tiku.jpg'></image>
    <view class='imageText'>选择题库</view>
 </view>

 <view  class='choseQuestion' >
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
  {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
    </view>
  </picker>
</view>
  
<view class='startAnswer'>
    <button bindtap='study'>开始学习</button>
</view>

页面结构从上到下分了四个部分：

• 图标
• 文本“选择题库” —— 提示用户选择要学习的题库
• 多列选择器 —— 在其中选择具体要学习的题库
• button按钮 —— 确认选择，并开始具体的学习

二、xuexixz.wxss源代码

/* pages/xuexixz/xuexixz.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;
}

.choseQuestion{
  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;
}

.startAnswer{
   margin: 0 auto;
   padding-top: 15rpx;
   height: 110rpx;
   width: 50%;
}

这里主要是一些样式的设置，可以根据自己的想法自行设置。