微信小程序—上拉加载+api交互显示loading提示框（图文）

最新推荐文章于 2025-06-27 15:19:27 发布

原创

最新推荐文章于 2025-06-27 15:19:27 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#上拉加载 #api交互

本文介绍了如何在微信小程序中实现在上拉加载时与API交互并显示loading提示框的功能。通过创建scroll目录和scrollPage，详细说明了wxml、wxss及js的配置过程，并展示了初始效果、滚动120rpx后的效果以及加载更多数据和点击返回顶部的操作演示。

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

微信小程序—上拉加载+api交互显示loading提示框

新建scroll目录=》新建scrollPage
1、scroll.wxml

<view id="container">
  <scroll-view
    scroll-y="true" // 允许纵向滚动
    scroll-top="{
  
  {scrollTop}}" // 滚动轴的位置，用于返回顶部
    scroll-with-animation="true" // 返回顶部的动画
    bindscroll="scrollFn" // 滚动时触发事件
    bindscrolltolower="scrollToLower" // 滚动到底部时触发事件，必须给scroll-view设置高度，不然无法触发
  >
    <view class="cont" wx:key="{
  
  {index}}" wx:for="{
  
  {list}}">
      <text>{
  
  {item}}</text>
    </view>
    <view bindtap="backFn" class="back" wx:if="{
  
  {isShow}}">返回顶部</view>
     // 绑定事件返回顶部，wx:if用来控制隐藏和显示
  </scroll-view>
</view>

2、scroll.wxss

#container{
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
#container scroll-view{
  width: 100%;
   height: 100%;
  /* 必须设置高度，不然bindscrolltoupper不生效 */
  position: relative;
}
#container s