本节是这个系列的最后一节，本节中我们要把用户个人模块实现出来，并提供wxml、wxss、js源代码。
实现后的效果图：
代码结构图：
一、wxml
<view class='top'>
<view class='topLeft'><text style='margin-left:20rpx;'>错题本</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="{{singlejieguo}}" wx:key="item">{{item.tigan}}</view>
</view>
<view class='daan'>
<view hidden="{{hidden}}">
<view wx:for="{{singlejieguo}}" 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='caozuo'>
<button class='delete' bindtap='onRemove'>删除本题</button>
<button class='finish' bindtap='openConfirm'>退出错题本</button>
</view>二、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: 150rpx;
border: 1rpx solid #ffffff;
}
.xuanze{
display: flex;
margin-bottom:50rpx;
}
.caozuo{
display: flex;
justify-content:space-between;
margin-top:100rpx;
}
.delete,.finish{
width: 260rpx;
}三、js
const app = getApp()
Page({
data: {
tihaox: 1,
timushu:null,
jieguo:null,
singlejieguo:null,
//为了标记要删除的题目
cuotiId:null,
//页面初次渲染，学习第一题时，上一题button无效状态，下一题有效
predisabled: true,
nextdisabled: false,
hidden: true,
tempt:0
},
//还需要1、判断上一题按钮无效的逻辑，2、检查渲染数据的完备和及时
prequestion: function (e) {
var a = this.data.tempt - 1;
if (a > 0) {
this.setData({
predisabled: false
})
}
else {
this.setData({
predisabled: true
})
}
this.chaxun(a)
this.setData({
tihaox: a+1,
tempt: a,
//点击上一题button后，下一题button就应该成为有效状态
nextdisabled: false
})
},
nextquestion: function (e) {
var b = this.data.tempt + 1;
//重新查询、渲染下一题
this.chaxun(b)
//更新右上角题号，更新当前选定的是第几题
this.setData({
tihaox: b+1,
tempt: b,
//点击下一题button后，上一题button就应该成为有效状态
predisabled: false
})
//控制下一题button的无效状态
if (b < this.data.timushu-1) {
this.setData({
nextdisabled: false
})
}
else {
this.setData({
nextdisabled: true
})
}
},
showanswer: function (e) {
this.setData({
hidden: false
})
},
cuotishu: function () {
const db = wx.cloud.database()
var that = this
db.collection('cuotiku').where({
_openid: app.globalData.openid
}).count({
success(res) {
console.log(res.total)
that.setData({
timushu: res.total
})
}
})
},
chaxun:function(e){
const db = wx.cloud.database()
var that = this
db.collection('cuotiku').where({
_openid: app.globalData.openid
}).skip(e).limit(1)
.get({
success(res) {
// res.data 是包含以上定义的记录的数组
console.log(res.data)
that.setData({
hidden:true,
//刷新新查询的题目和答案
jieguo: res.data,
singlejieguo: [res.data[0]],
cuotiId: res.data[0]._id
})
}
})
},
onRemove: function () {
if (this.data.cuotiId) {
const db = wx.cloud.database()
db.collection('cuotiku').doc(this.data.cuotiId).remove({
success: res => {
wx.showToast({
title: '删除成功',
})
this.cuotishu()
},
fail: err => {
wx.showToast({
icon: 'none',
title: '已删题目，无需重复删除',
})
console.error('[数据库] [删除记录] 失败：', err)
}
})
} else {
wx.showToast({
title: '您的错题本空白',
})
}
},
openConfirm: function () {
wx.showModal({
title: '退出错题本',
content: '您确定要退出错题本吗？',
confirmText: "确定退出",
cancelText: "返回复习",
success: function (res) {
console.log(res);
if (res.confirm) {
wx.switchTab({
url: '/pages/grzx/grzx',
success: function (res) {
},
fail: function (res) { },
complete: function (res) { },
})
} else {
}
}
});
},
onLoad: function () {
this.cuotishu()
this.chaxun(0)
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})四、说明
- 本程序到此已经可以上传、发布了
- 因为程序中运用了一定的云能力，多以选择调试基础库时尽量选近期的，不要选古董级的版本，相信您也不会选太旧的版本
- 代码中已尽量详细写了注释，如果您有意研究本程序，可以参阅代码里面的注释