uni-app uni-pagination 分展示每页条数 切换后无法选中问题

uni-app uni-pagination 分展示每页条数 切换后无法选中问题

开发环境 版本号 项目创建方式
Windows 22H2 HBuilderX
4.81

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

手机系统：
Android

手机系统版本号：
Android 16

手机厂商：
华为

手机机型：
16pro

页面类型：
vue

vue版本：
vue2

打包方式：
云端

App下载地址或H5网址：
https://sale-test.profly.com.cn/

示例代码：

<!-- 分页组件 -->  
<view class="pagination-container" v-if="!error && !loading && pagination.total > 0">  
    <uni-pagination   
        v-model="pagination.page"  
        :current="pagination.page"  
        :total="pagination.total"  
        :pageSize="pagination.limit"  
        :showIcon="true"  
        :showPageSize="true"  
        :pageSizeRange="[10, 20, 30, 50]"  
        @change="handlePageChange"  
        @pageSizeChange="handlePageSizeChange"  
    />  
</view>

操作步骤：

uni-pagination组件内部的 pageSizeIndex 没有根据外部传入的 pageSize 值进行正确初始化。

预期结果：

在uni-pagination组件中添加了 pageSize 的监听器，当 pageSize 属性变化时，自动计算并更新对应的 pageSizeIndex
需要修改uni-pagination组件，添加对 pageSize 属性的监听，以便正确初始化和更新 pageSizeIndex ：

实际结果：

uni-pagination组件内部的 pageSizeIndex 没有根据外部传入的 pageSize 值进行正确初始化。

bug描述：

uni-pagination组件内部的 pageSizeIndex 没有根据外部传入的 pageSize 值进行正确初始化。


更多关于uni-app uni-pagination 分展示每页条数 切换后无法选中问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

其他端有问题吗？这个组件用的是不是最新版本？

更多关于uni-app uni-pagination 分展示每页条数 切换后无法选中问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-pagination 组件缺陷。问题确实出现在组件内部没有正确响应 pageSize 属性的变化，导致 pageSizeIndex 初始化或更新时未能匹配传入的 pageSize 值。

在 uni-pagination 组件源码中，pageSizeIndex 的计算逻辑存在缺陷，当外部传入的 pageSize 发生变化时，组件没有重新计算对应的索引位置。这会导致下拉选择器中显示的每页条数与实际生效的值不一致。

临时解决方案是在父组件中强制重新渲染分页组件：

// 在 handlePageSizeChange 方法中
handlePageSizeChange(e) {
    this.pagination.limit = e
    this.pagination.page = 1
    
    // 强制重新渲染
    this.$forceUpdate()
    
    // 重新加载数据
    this.loadData()
}

或者通过 key 值强制重建组件：

<uni-pagination
    :key="`pagination-${pagination.limit}`"
    v-model="pagination.page"
    :current="pagination.page"
    :total="pagination.total"
    :pageSize="pagination.limit"
    @pageSizeChange="handlePageSizeChange"
/>
回到顶部