使用vue3简单实现“换一换”功能小案例

前言

最近在看漫画的时候，发现好些漫画app都有“换一换”的小功能，点击可以展示其他的漫画，在百度首页也发现了类似的功能，因此打算动手实现一下

在网上找了一些表情包图片，做成假数据，总共有18条数据，分成3组展示，默认每组展示6个。一开始页面默认展示数据的前6条，点击“换一换”按钮，从第7个开始继续展示，到最后一组，再重新返回到第一组，实现表情包图片更换展示。具体效果如下：

具体实现

1. 页面布局

主要由一个按钮元素，表情包模块组成。使用flex布局控制表情包图片展示，简单添加了一点样式

<template>
  <div class="btn" @click="change">换一换</div>
  <div class="content">
    <ul>
      <li v-for="(item,index) in newList" :key="index">
        <img :src="item.src" >
      </li>
    </ul>
  </div>
</template>

1. 定义数据

   表情包图片数据：emoticonLists: []

   数据分成的组数（默认为0）： group: 0

   每组展示表情包图片数量： num: 6

   “换一换”按钮点击的次数（默认为0）： clickNum: 0

   截取每组的开始参数 （默认为0）： timeStart: 0

   截取每组的结束参数（默认为1）: timeEnd: 1

const emoticonLists = []
const data = {
    group: 0,
    num: 6,
    clickNum: 0,
    timeStart: 0,
    timeEnd: 1,
}

1. 重新定义一个表情包图片数据newList，用于保存当前每组需要展示的数据，并把该数据return出去，在页面渲染展示出来。将一开始定义的表情包数据emoticonLists根据每组展示表情包图片数量num、截取每组的开始参数timeStart和截取每组的结束参数timeEnd进行截取，就可以得到当前每组的数据。

//ref 定义一个响应式的数据
let newList = ref()
/截取当前每组的数据
function renderR() {
  //JS中操作数据：newList.value
  newList.value = emoticonLists.slice(
    data.num * data.timeStart,
    data.num * data.timeEnd
  )
}
renderR()

1. 计算表情包数据emoticonLists可以分成几组，根据该数据长度除以每组展示的表情包图片数量num可以得到

// 计算数据的长度，共分为几组，如果不能整除则加1
function listlen() {
    let len = emoticonLists.length;
    data.group = len / data.num;
    if (len % data.num != 0) {
      data.group = parseInt(data.group) + 1;
    }
}
listlen()

1. 每点击按钮一次，“换一换”按钮点击的次数 clickNum、截取每组的开始参数timeStart 、结束参数timeEnd都加一，实现数据切换。并且切换到最后一组，需要重新返回到第一组，因此需要将之前的按钮点击次数和截取每组的参数清除

//每点击一次，记录次数
function  autoIncre() {
  data.clickNum++;
  data.timeStart++;
  data.timeEnd++;
}
//如果已切换到最后一组，则需要重新开始计数。
function clear() {
  if (data.clickNum > data.group - 1) {
    data.timeStart = 0;
    data.timeEnd = 1;
    data.clickNum = 0;
  }
}

1. “换一换”按钮点击事件。在判断表情包数据emoticonLists的长度大于每组的表情包图片数量num条件下执行autoIncre()、clear()、renderR()事件，改变当前展示的每组图片数据

function change() {
    if (emoticonLists.length > data.num) {
      autoIncre();
      clear();
      renderR();
    }
}