分页功能实现及左右箭头的添加

简介：

    业务需求：分页切换页面数据不够直观，添加一个在左右侧可点击进入下一页的箭头。

    实现功能：分页展示数据功能；初始进入有一个默认的箭头显示，鼠标悬浮会高亮显示，点击后有点击效果展示，第一页及最后一页箭头不可点功能。 预览链接：https://workspace.easyv.cloud/shareScreen/eyJzY3JlZW5JZCI6MjUxMzUxMX0=?timeStamp=18cb4c41b2e 《分页箭头》。

实现逻辑：

    分页功能：数据容器组件(模拟静态数据)发送数据回调给分页组件（获取分页页数）及轮播表格组件（展示数据）

    左右箭头：默认区块（可根据要求添加），移入移出区块，悬浮区块，点击切换区块。默认展示默认区块，当鼠标移到两侧的移入移出区块时，箭头区块展示。点击切换分页（实际点击为移入移出区块），显示点击切换区块。

整体组件结构：

具体实现：

    1.实现分页功能、与静态数据模拟。

    （1）增加轮播表格组件（展示数据）、数据容器组件（模拟数据）、分页组件（分页功能）。

    （2）模拟数据。数据容器组件添加模拟静态数据（项目中一般为动态接入），发送模拟数据数据回调mock_data。

    （3）分页组件接受数据容器发出的回调，计算出页码。此处展示6条为一页，故过滤器计算页面时除以6；发送页码回调参数pageNum

    （4）轮播表格组件接受数据容器、分页组件发出的回调，并计算展示的数据（此处按每页6条数据计算）。

    2.默认区块、点击切换区块、悬浮区块添加。

    （1）默认区块，默认展示的样式。添加两个左右箭头状态背景组件，无需特殊操作，置于最底层即可。

    （2）悬浮区块，鼠标悬浮到固定区域会高亮展示。添加左右箭头状态背景组件（比默认区块高亮或别的效果）。给左右箭头状态背景组件添加过滤器进行状态设置（实现左侧箭头在页码为第一页时异常状态配置）； pageNum回调为分页组件发出，mock_data为模拟数据；右箭头：当pageNum等于总页数时，设置右箭头进入不可选的状态；左箭头：当pageNum为1时进入不可选状态。（状态背景组件可根据value不同展示不同状态，不同状态在样式中配置，教程链接：https://easyv.cloud/help/docs/tg8mh3.html）。

    （3）点击切换区块，点击切换后，点击效果的图片。添加左右箭头照片（突出点击效果的图片），无需特殊操作。

    3.移入移出区块。

    （1）增加两个形状组件，设置透明度为0，放置于左右两侧（宽高、位置根据移入移出区域设置即可），置于图层顶层。

    （2）左形状组件。添加过滤器（增加是否可点击字段，处于最左侧（左）、最右侧（右）不可点击）和自定义事件（展示状态的切换）。左箭头：当pageNum为1时，赋值value为不可选（自定义事件使用）。

    自定义事件：鼠标移入（悬浮区块显示、默认区块隐藏）、鼠标移出（悬浮区块隐藏、默认区块显示）、鼠标点击（设置分页页码-1实现页码切块、选中效果显示及1s后选中效果隐藏、悬浮区块隐藏及1s后悬浮区块显示）

    （3）右形状组件。添加过滤器（增加是否可点击字段，最右侧（右）不可点击）和自定义事件（展示状态的切换）。右箭头：当pageNum等于总页数时，赋值value为不可选（自定义事件使用）。

    自定义事件：鼠标移入（悬浮区块显示、默认区块隐藏）、鼠标移出（悬浮区块隐藏、默认区块显示）、鼠标点击（设置分页页码-1实现页码切块、选中效果显示及1s后选中效果隐藏、悬浮区块隐藏及1s后悬浮区块显示） 注：右形状组件自定义事件添加与左形状组件逻辑一致，把左箭头改成右箭头即可，不在截图。