线上的答题基本都要前端来实现分页功能,展示完一页,答完加载下一条,工作中遇见这样的需求,简单写了一个demo记录下
先来个效果图看看吧
功能需求:
1. 前端实现分页,完成线上答题
2.显示当前答题的进度状态
首先html 代码模块
<view class="subject-box">
<view class="box-item-title">
<div class="item-title-text">你未来的老公什么样</div>
</view>
<view class="item-info-box">
<view class="info-box-hr"></view>
<view class="info-box-center"> 测测你未来老公什么样吧 </view>
<view class="info-box-hr"></view>
</view>
<view v-for="(item, index) in initData" in :key="index" class="list-view">
<view class="subject-title">
<view class="title-box">
<view class="title-top">
<view class="top-left">
<view class="title-text">{{ item.title }}</view>
</view>
<view class="top-right">
<text class="left">{{ contPage + 1 }}</text
><text class="right">/{{ dataList.length }}</text>
</view>
</view>
</view>
</view>
<view class="subject-item">
<view
class="item-li"
:class="{ isLiActive: Number(liNum) === indexs }"
v-for="(items, indexs) in item.children"
:key="indexs"
@click="handleItemClick(item, items, indexs)"
>
{{ items.sort }}
</view>
</view>
</view>
</view>
声明变量
return {
id: "",
name: "",
formData: {
problemId: "", //题目id
ageType:"",
num: 0,
},
dataList: [
{
id: "0",
title: "1.请选择您最喜欢的年龄阶段",
children: [
{pordId:"0", sort: "18-28" },
{ pordId:"1", sort: "28-38" },
{ pordId:"2", sort: "38-48" },
{pordId:"3", sort: "48以上" },
],
},
{
id: "1",
title: "请选择您喜欢的体型",
children: [
{pordId:"0", sort: "肉壮" },
{ pordId:"1", sort: "肌肉" },
{ pordId:"2", sort: "清瘦" },
{pordId:"3", sort: "健壮" },
{ pordId:"4", sort: "胖" },
{ pordId:"5", sort: "微胖" },
{ pordId:"6", sort: "微胖" },
],
},
],
num: 0,
pageSize: 1, //每页显示数量
pageNum: 1, //共几页
contPage: 0, //默认显示当前第一页
totals: [],
initData: [],
dataFont: "",
liNum: 10,
pageNote: 7,
pageInit: 1,
currentInit: 0,
initPage: [],
initList: [],
dataInit: "",
cnum: 0,
ccnum: 0,
};
js模块
init() {
if (this.dataList.length > 0) {
this.pageNum = Math.ceil(this.dataList.length / this.pageSize) || 1;
for (let i = 0; i < this.pageNum; i++) {
this.totals[i] = this.dataList.slice(
this.pageSize * i,
this.pageSize * (i + 1)
);
console.log(this.totals[i]);
}
this.dataFont = this.totals[this.contPage];
console.log(this.dataFont);
this.initData = JSON.parse(JSON.stringify(this.dataFont));
for (let h = 0; h < this.totals.length; h++) {
this.totals[h][0].isPageShow = parseInt(
this.totals[h][0].isCorrect
);
}
this.infoList();
}
},
infoList() {
this.pageInit = Math.ceil(this.totals.length / this.pageNote) || 1;
for (let i = 0; i < this.pageInit; i++) {
this.initPage[i] = this.totals.slice(
this.pageNote * i,
this.pageNote * (i + 1)
);
console.log(this.initPage[i]);
}
this.dataInit = this.initPage[this.currentInit];
console.log(this.dataInit);
this.initList = JSON.parse(JSON.stringify(this.dataInit));
},