【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 中奖播报

西瓜watermelon
532 阅读2分钟

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」

前言

大家好，上篇文章分享中我们实现了大奖围观功能，但是最后返现我们自己做出来的结果跟官方的却不一样，找了半天也没发现是什么原因。今天又抽空仔细研究了一下发现还有个分页功能，原来是在请求官方接口的时候没有传分页参数：page_no和page_size。把这两个参数补上后发现结果就一样了。今天我们将首先来完善一下大奖围观中的分页功能以及抽奖页面的最后一个功能：中奖播报。

大奖围观分页

前面我们提到在上一篇分享中，我们实战中获取到的围观数据跟官方展示的不一样，后来发现是因为调用官方接口时没有传递分页信息参数：page_no和page_size，今天我们就来实现一下这个分页功能：

  • 首先在nodejs服务端项目中在封装globalBig路由时需要接收2个参数：page_no和page_size
  • 在前端项目中默认只展示5页中奖内容
  • 在luck.vue中的setup方法中定义一个分页方法setPage并接收1个参数pageNo
  • 在luck.vue中给每个页码绑定setPage方法实现分页功能 改造后的核心代码及效果图如下：
  • nodejs服务端项目
router.post('/global_big', async (ctx, next) => {
    const {
        pageNo,
        pageSize
    } = ctx.request.body;
    const {
        data
    } = await axios({
        url: `${baseUrl}lottery_history/global_big?aid=${aid}&uuid=${uuid}`,
        method: 'post',
        headers: {
            cookie: MY_COOKIE
        },
        data: {
            page_no: pageNo,
            page_size: pageSize
        }
    });
    ctx.body = data;
    next()
})
  • 前端项目
const setPage = function (pageNo) {
      const pages = document.querySelectorAll(".page-code");
      pages.forEach((el) => {
        el.className = "page-code";
      });
      if (pages.length > 0) {
        pages[pageNo - 1].className = "page-code page-code-active";
      }

      api.globalBig(pageNo, 5).then((res) => {
        state.globalBig = res.data.lotteries;
      });
    };
    setPage(1);
  • 效果图

test2.gif

中奖播报

下面还有抽奖页面中的最后一个功能：中奖播报。还是老样子为了节省时间，中奖播报功能中的ui也是直接从官网上copy过来。我们来分析一下官方的中奖播报，在可视范围内仅展示两条中奖信息，然后再从下往上进行轮番滚动播报，并且播报完毕后还会自动分页。我们可以从浏览器的network中看出，每隔一段时间就会重新请求一个global_small的后台接口，并且每次都会传递一个累加的page_no参数，那么不难看出这个接口就是用来请求中奖播报数据的，并且每次回返回20条数据，这个接口与大奖围观的接口global_big非常类似，返回结果的格式也是一样的。所以这个功能实现起来也是相对比较容易的。唯一有点难点的就是从下向上轮番播报功能。从官方的元素分析可以看出是通过translateY的形式实现滚动的，并且每滚动完一屏（每翻一页）都会重新从-1开始计算。我们也可以用一个定时器来模拟实现。

  • 参考global_big接口，在nodejs服务端封装一个global_small接口用于请求官方中奖数据
  • 在前端项目luck.vue中定义一个响应式属性globalSmall用于接收接口返回来的数据
  • 另外再封装一个lotteryDate方法用于格式化中奖日期（因为官方接口返回的是一个时间戳格式数据）
  • 将中奖数据通过v-for指令循环输出
  • 定义一个setInterval定时器用于控制translageY从而实现循环播报功能 核心代码及效果图
api.globalSmall().then((res) => {
      state.globalSmall = res.data.lotteries;
    });

    const lotteryDate = function (date) {
      let ldate = new Date(utils.getLocalTime(date));
      ldate = new Date(ldate);
      return `${ldate.getFullYear()}-${
        ldate.getMonth() + 1
      }-${ldate.getDate()}`;
    };

    let tran = 0;
    setInterval(() => {
      tran--;
      state.translate = `translateY(${tran}px)`;
      if (tran <= -500) {
        tran = -1;
      }
    }, 30);

test2.gif

总结

到此我们的中奖页面功能也算基本已经实现了，唯一不足的是中奖播报尚未实现自动翻页功能，目前只实现了第一页内容的循环滚动，抽奖页面我们就暂时先告一段落了，后续有时间再继续完善。本次分享就到这里了，喜欢的小伙伴欢迎店点赞关注哦！

avatar
文章
阅读
粉丝