微信小程序分页功能实现---纯手工

now try &

已于 2025-04-07 15:48:17 修改

阅读量2.3k

点赞数 32

CC 4.0 BY-SA版权

分类专栏：小程序开发文章标签：微信小程序小程序前端 node.js npm

于 2024-05-29 10:05:46 首次发布

本文链接：https://blog.csdn.net/wj0712/article/details/139284507

功能介绍

我找了一些官方组件库，TDsign,Vant Weapp 等，都没有发现有分页相关的，我自己写了一个分页的功能如下：如果有人知道相关的分页库欢迎评论告知一下下。

功能效果图：点击最外侧按钮可以实现向左向右跳转，1和10 按钮分别是最小页最大页，最大页根据请求的数据库中数据来定。中间省略号是输入框，输入数字后可以进行判定并更新页面，不输入数字的时候，中心输入框会显示当前页面页数。点击颜色是可以自己设置成你喜欢的颜色喔

代码部分

.wxml代码：

<view class="container">

  <view class="data-list">

    <block wx:for="{ {currentPageData}}" wx:key="*this">

      <view>{ {item}}</view>

    </block>

  </view>

  <view class="pagination">

    <view id="prev-page" class="page-box" bindtap="goToPrevPage">{ {zuo}}</view>

    <view id="first-page" class="page-box { {pageNum === 1 ? 'selected' : ''}}"

    bindtap="goToFirstPage">1</view>

    <input id="page-input"

    class="page-box input-box { {pageNum !== 1 && pageNum !== totalPage ? 'selected' : ''}}"

      value="{ {inputValue}}" bindinput="onPageInputChange"

       bindfocus="highlightInput" bindblur="onInputBlur" />

    <view id="last-page" class="page-box { {pageNum === totalPage ? 'selected' : ''}}"

     bindtap="goToLastPage">{ {totalPage}}</view>

    <view id="next-page" class="page-box" bindtap="goToNextPage">{ {you}}</view>

  </view>

</view>