前端vue实现答题功能（前端实现分页）-优快云博客

本文链接：https://blog.youkuaiyun.com/Haiser_____/article/details/128081283

本文档展示了如何使用前端技术实现分页答题功能，包括答题页面的布局，题目显示，以及当前答题进度的展示。通过HTML和JS模块的代码实现，详细解释了数据结构和逻辑处理，确保了答题页面的动态加载和进度跟踪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

线上的答题基本都要前端来实现分页功能，展示完一页，答完加载下一条，工作中遇见这样的需求，简单写了一个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));
     
    },