微信小程序分页加载列表

最新推荐文章于 2025-03-25 14:55:07 发布

歪歪的橘猫

最新推荐文章于 2025-03-25 14:55:07 发布

阅读量982

点赞数 1

分类专栏：下拉刷新文章标签：微信小程序 javascript 前端

本文链接：https://blog.youkuaiyun.com/zzaixiao/article/details/125170806

版权

本文介绍了如何在微信小程序中封装一个分页加载列表组件，适用于下拉刷新和上滑加载更多的场景。通过示例代码展示了wxml、js和wxss的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序分页加载列表：

项目开发时很多页面都需要用到分页加载列表，为了方便，自己封装了分页加载列表组件，下拉刷新列表，滑动至底部，加载更多

组件界面：

在这里插入图片描述

可以扫码查看是否符合自己的需求
在这里插入图片描述

wxml：

<!--components/loadList/index.wxml-->
<scroll-view scroll-y="true" refresher-enabled refresher-triggered="{
    { isRefreshering }}" style="height: 100%;"  bindrefresherrefresh="handleRefresh" bindscrolltolower="handleTolower">
  <view class="scroll-body">
    <view class="scroll-list">
      <slot></slot>
    </view>
    <view wx:if="{
    { isLoading }}" class="scroll-more">
      <image src="../../static/images/loading.gif" mode="widthFix" class="icon-loading"></image>