uniapp实现长列表滚动分页功能

    <scroll-view style="height: 100vh;margin-top: 22rpx;" scroll-y @scrolltolower="scrolltolowerFnc">
         
                    <view v-for="item in itemsList">
                      {{item.name}}
                    </view>
          
                <Empty v-if="itemsList.length==0" :title="'暂无数据 ...'" />
            </scroll-view>

引入接口:

    import {
        allianceList
    } from '@/api/system/alliance';

data数据:

itemsList: [],

params: {
                    page: 1,
                    limit: 10
                },

goodScroll: false,

方法:

getIndexNewList() {
                allianceList(this.params).then(res => {
                    let data = res.data
                    this.goodScroll = data.list.length < this.params.limit
                    this.params.page++
                    this.itemsList = [...this.itemsList,...res.data.list]
                    //console.log(this.itemsList)
                });
            },

触底方法:

scrolltolowerFnc() {
                console.log("触底了")
                if (this.goodScroll) return
                this.getIndexNewList();
            }

  • 11
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用uni-app实现scroll-view的分页功能,可以按照以下步骤进行操作: 1. 在uni-app的页面中,使用scroll-view组件包裹需要滚动的内容。 2. 添加一个变量来记录当前显示的页数,例如currentPage。 3. 使用scroll-view的bindscrolltoupper和bindscrolltolower事件来监听滚动到顶部和底部的动作。 4. 在bindscrolltoupper事件中,将currentPage减1,并更新页面显示的内容。 5. 在bindscrolltolower事件中,将currentPage加1,并更新页面显示的内容。 6. 在页面中使用条件渲染,根据currentPage的值来显示不同的内容。 下面是一个示例代码: ```html <template> <view> <scroll-view scroll-y @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower" > <!-- 显示第一页内容 --> <view v-if="currentPage === 0"> <!-- 第一页内容 --> </view> <!-- 显示第二页内容 --> <view v-if="currentPage === 1"> <!-- 第二页内容 --> </view> <!-- 显示第三页内容 --> <view v-if="currentPage === 2"> <!-- 第三页内容 --> </view> <!-- ... 其他页的内容 --> </scroll-view> </view> </template> <script> export default { data() { return { currentPage: 0 }; }, methods: { onScrollToUpper() { if (this.currentPage > 0) { this.currentPage--; // 更新页面显示的内容 } }, onScrollToLower() { this.currentPage++; // 更新页面显示的内容 } } }; </script> ``` 在上述示例代码中,我们使用了scroll-view组件来实现滚动效果,并通过条件渲染来显示不同页的内容。在滚动到顶部时,会触发onScrollToUpper方法,将currentPage减1,并更新页面显示的内容;在滚动到底部时,会触发onScrollToLower方法,将currentPage加1,并更新页面显示的内容。通过这种方式,就可以实现scroll-view的分页功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值