这一节我们把学习模块实现出来，并提供wxml、wxss、js源代码。
实现后的效果图：
代码结构图：
一、wxml
<!--pages/xuexizh/xuexizh.wxml-->
<view class='top'>
<view class='topLeft'><text style='margin-left:20rpx;'>{{tikuleixing}} {{tikuxuhao}}</text></view>
<view class='topRight'>
<view class='topRightContent'>
<text style='color:#1bd0bd;font-size:50rpx; font-style:italic;margin-right:10rpx;'>{{tihaox}}</text><text> /{{timushu}} </text>
</view>
</view>
</view>
<view class='timu'>
<view wx:for="{{jieguo}}" wx:key="item">{{item.tigan}}</view>
</view>
<view class='daan'>
<view hidden="{{hidden}}">
<view wx:for="{{daan}}" wx:key="item">{{item.ans}}</view>
</view>
</view>
<view class='xuanze'>
<button disabled="{{predisabled}}" bindtap='prequestion'>上一题</button>
<button bindtap='showanswer'>显示答案</button>
<button disabled="{{nextdisabled}}" bindtap='nextquestion'>下一题</button>
</view>
<view class="tihao">
<text class="section__title">拖动选题</text>
<view class="body-view">
<slider bindchange="sliderchange" min="1" max="{{timushu}}" show-value />
</view>
</view>
二、wxss
/* pages/xuexizh/xuexizh.wxss */
.top{
height: 100rpx;
width: 100%;
border-bottom: 1px solid #c9c9c9;
}
.topLeft{
display:flex;
font-size:35rpx;
align-items:center;
float: left;
width: 50%;
height: 100%;
}
.topRight{
display:flex;
align-items:center;
float: right;
width: 50%;
height: 100%;
}
.topRightContent{
position: fixed;
margin-right: 20rpx;
right: 0;
text-align: right;
}
.timu{
color: #060000;
margin: 30rpx 30rpx 30rpx 30rpx;
font-size: 40rpx;
height: 300rpx;
border-bottom: 1rpx solid #c9c9c9;
}
.daan{
color: #5A5A5A;
margin: 30rpx 30rpx 30rpx 30rpx;
font-size: 40rpx;
height: 100rpx;
border: 1rpx solid #ffffff;
}
.xuanze{
display: flex;
margin-bottom:50rpx;
}
.section__title{
font-size: 40rpx;
padding-left:50rpx;
}
.body-view{
padding-left:50rpx;
justify-content: center;
margin-top:50rpx;
width: 90%;
}三、js
// pages/xuexizh/xuexizh.js
Page({
data: {
//页面右上角显示选择的题号
tihaox:1,
jieguo: [{ _id: "W_5E7yfIZl09sR74", ans: "A", tigan: "", tihao: 1 }],
daan: [{ _id: "W_5E7yfIZl09sR74", ans: "", tigan: "what is a ?", tihao: 1 }],
//页面左上角显示选择的题库
tikuxianshi:null,
//页面初次渲染，学习第一题时，上一题button无效状态，下一题有效
predisabled:true,
nextdisabled:false,
hidden:true,
timushu:null,
tempt:1,
tikuleixing:null,
tikuxuhao:null
},
//拖动slider变化所选的题目
sliderchange:function(e){
console.log(e.detail.value)
this.setData({
tihaox:e.detail.value,
tempt:e.detail.value
})
//判断 上一题button按钮，是否可用状态
if (e.detail.value > 1) {
this.setData({
predisabled: false
})
}
else {
this.setData({
predisabled: true
})
}
//判断 下一题button按钮，是否可用状态
if (e.detail.value < 200) {
this.setData({
nextdisabled: false
})
}
else {
this.setData({
nextdisabled: true
})
}
this.chaxun(e.detail.value)
},
//chaxun 是实现数据库查询并动态渲染页面的函数，传来的参数是要查询的题号
chaxun:function(e){
//用wx.getStorage，通过本地缓存进行了页面间传值，传来了所选题库的值
//toString()方法，把数字转换为字符串
var tiku = wx.getStorageSync('tikuzhi');
var tk='gx'+tiku;
const db = wx.cloud.database()
var that=this
db.collection(tk).where({
//数据库中查询tihao字段等于e.detail.value选择的结果
tihao:e,
})
.get({
success(res) {
// res.data 是包含以上定义的记录的数组
console.log(res.data)
that.setData({
//不显示答案
hidden:true,
//刷新新查询的题目和答案，上一行代码设置答案暂不显示
jieguo:res.data,
daan:res.data
})
}
})
},
//上下一题、显示答案按钮功能的实现
//还需要1、判断上一题按钮无效的逻辑，2、检查渲染数据的完备和及时
prequestion: function (e) {
var a=this.data.tempt-1;
if (a > 1) {
this.setData({
predisabled: false
})
}
else {
this.setData({
predisabled: true
})
}
this.chaxun(a)
this.setData({
tihaox: a,
tempt:a,
//点击上一题button后，下一题button就应该成为有效状态
nextdisabled: false
})
},
showanswer:function(e){
this.setData({
hidden:false
})
},
nextquestion:function(e){
//从prequestion函数整体拷过来的，把设置相应的改成符合“下一题”的
var b = this.data.tempt +1;
//重新查询、渲染下一题
this.chaxun(b)
//更新右上角题号，更新当前选定的是第几题
this.setData({
tihaox: b,
tempt: b,
//点击下一题button后，上一题button就应该成为有效状态
predisabled: false
})
//控制下一题button的无效状态
if (b < this.data.timushu) {
this.setData({
nextdisabled: false
})
}
else{
this.setData({
nextdisabled: true
})
}
},
//加的timushu函数，为了动态显示题库的题目数
timushu: function () {
var tiku = wx.getStorageSync('tikuzhi').toString();
var tk = 'gx' + tiku;
const db = wx.cloud.database()
var that = this
db.collection(tk).count({
success(res) {
console.log(res.total)
that.setData({
timushu: res.total
})
}
})
},
onLoad: function (options) {
var tiku2 = wx.getStorageSync('tikuzhi');
this.setData({
tikuxianshi:tiku2
})
this.timushu()
this.chaxun(1)
var global=getApp()
this.setData({
tikuleixing:global.tikuleixing,
tikuxuhao:global.tikuxuhao
})
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
return {
title: '大家一起学',
}
}
})四、关于源代码的说明
- 左上角显示所处的题库
- 右上角斜体的绿色显示当前位于题库的第几题，/右边 显示题库中共有多少道题
- 上一题、下一题 两个button因为逻辑的需要，有时应置于无效状态。比如进入页面学习是从第1题开始，页面初次渲染时，上一题button应出于无效状态等等
- 显示答案button，控制答案区域的显示
- 因为题库中题目可能会比较多，为了在大范围内快速选题，除了用button控件选题之外，我在下面又加了一个slider控件用于拖动选题