微信小程序，使用scroll-view实现下拉加载更多（下一页）源码

关注

原创最新推荐文章于 2026-09-20 17:02:57 发布 9.4k 阅读 AI 写同款· GEO 优化 ›

微信小程序下拉刷新 3 种实现方案对比：原生 vs scroll-view vs 第三方组件本文深入对比微信小程序下拉刷新的三种实现方案：原生`onPullDownRefresh`、`scroll-view`自定义和第三方组件库。分析各方案在开发效率、UI自由度、性能表现和维护成本上的优劣，提供场景化选型建议，帮助开发者根据业务需求选择最佳方案，提升用户体验。阅读详情

maker一下使用scroll-view实现下拉加载更多（下一页），比较粗糙，如下图。
由于数据是死数据，只能加载一次（如图）。

源码下载：http://download.youkuaiyun.com/download/dknightl/9922174

这里写图片描述

下拉逻辑由scroll-view里的bindscrolltolower参数实现。
判断是否可以下拉由当前页数和总页数比较判断

wxml

<!--index.wxml-->
<view class="borderTop1px"></view>
<block wx:if="{{resultShow}}">
  <view class="content_zero" animation="{{animationData}}" wx:if="{{orderList.length==0}}" >
    <image mode="aspectFit" src="../../../../image/search_zero.png"></image> 
    <view class="tip color_888888">没有该{{orderCon==0?'商品':'用户'}}的订单记录</view>
  </view>


  <scroll-view scroll-y scroll-top="{{scrollTop}}" style="height: {{windowHeight}}px;" 
      bindscrolltolower="loadMore" bindscroll="scroll">

  <block wx:for="{{orderList}}">

    <view animation="{{animationData}}" class="order_msg bg_fff" >

      <view class="item_status display-flex-row">
        <view class="">
          <image src="../../image/oreder-desc.png"></image>
        </view>
        <view wx:if="{{item.state==1}}" class="status_content color_ff6700">待付款</view>  
        <view wx:elif="{{item.state==2}}" class="status_content color_ff6700">待发货</view>    
        <view wx:elif="{{item.state==3}}" class="status_content color_ff6700">待收货</view>    
        <view wx:elif="{{item.state==4}}" class="status_content color_ff6700">已完成</view>    
        <view wx:else="{{item.state==5}}" class="status_content color_ff6700">异常</view>      
      </view>

      <view class="item_wrap display-flex-row" wx:for="{{item.goods}}">
        <image src="{{item.good.good_display_img}}" mode="aspectFit" class="item_item_image"></image>
        <view class="item_msg" >

          <view class="item_item_title" >
              <view class="text-hide">{{item.good.good_name}}</view>
          </view>
          <view class="item_item_bot">              
            <view class="color_888888 text-hide" >
              花型:<block wx:for="{{item.flowers}}" >
                <text> {{item.flower_name}}</text>
              </block>                 
            </view>
            <view class="display-flex-row" style="justify-content: space-between;">
              <view class="item_item_price">¥{{item.good.good_price}}</view>
              <view>x{{item.number}}</view>
            </view>

          </view>

        </view>
      </view>

      <view class="item_count display-flex-row">
        <view class="count_content">合计:<span class="count_price">¥{{item.totalprice}}</span></view>    
      </view>
    </view>


  </block>
  </scroll-view>

    <view class="loading_area display-flex-row" wx:if="{{showLoadding}}">  
      <icon type="waiting" size="20"  color="#ff6700"/>
      <view>加载中...</view> 
    </view>


</block>

//index.js
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    chooseGoods: {},
    startDate: "",
    endDate: "",
    orderList: [],//订单列表

    //假数据
    dataList:

    { "count": 2,//总页数 
      "list": [
        { "goods": [{ "number": 1, "flowers": [{ "flower_name": "花花" }],
          "order_good_id": "0e96b13e39ea49bcbce6c5ccee32ab4e", 
          "good_id": "1585b32f67e04106b4c685dcec1aa556", 
          "order_id": "5892d23092ec48b5976e80c71031f788", 
          "good": {  
            "good_display_img": "../../image/zhutu.jpg",  
            "good_name": "小明", 
            "good_price": 10, 
            } 
          }], 
          "order_id": "5892d23092ec48b5976e80c71031f788",
          "totalprice": 120.00  
        }, 
        { "goods": [
            { "number": 1, "flowers": [{ "flower_name": "蓝" }], 
              "order_good_id": "0caf434a5d1147838263c0fbcefcc2ef", 
              "good_id": "b7b698cd4bde4e20915177de4367e75e", 
              "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", 
              "good": 
                {
                  "good_display_img": "../../image/zhutu.jpg", 
                  "good_price": 10, 
                  "good_name": "小炮", 
                } 
              }, 
            { "number": 1, "flowers": [{ "flower_name": "ee" }], 
              "order_good_id": "753313f00c6247a2982b654b3de97bd0", 
              "good_id": "1585b32f67e04106b4c685dcec1aa556", 
              "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", 
              "good": 
                { 
                   "good_display_img": "../../image/zhutu.jpg",  
                   "good_name": "小明", 
                   "good_price": 20, 
                } 
            }, 
            { "number": 1, "flowers": [{ "flower_name": "绿" }], 
              "order_good_id": "797ecaf6ec0241a1bce5b21443faff21", 
              "good_id": "c32d93ea90f34ad2b458d3e5f2a9152f", 
              "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f", 
              "good": 
                { 

                  "good_display_img": "../../image/zhutu.jpg", 
                  "good_name": "德莱文", 
                  "good_price": 20, 

                } 
            }], 
            "order_id": "f3e4652572cb4ac59e29e53e3bbfb33f",
            "totalprice": 120.00  
          }, 
          { "goods": [
            { "number": 3, "flowers": [{ "flower_name": "绿" }], 
              "order_good_id": "358f6615483a440fa4c00001664aac1c", 
              "good_id": "c32d93ea90f34ad2b458d3e5f2a9152f", 
              "order_id": "01448473609247f894e2de4215124262", 
              "good": 
                {  
                  "good_display_img": "../../image/zhutu.jpg", 
                  "good_price": 20, 
                  "good_name": "德莱文", 
                } 
            }, 
            { "number": 1, "flowers": [{ "flower_name": "花花" }], 
              "order_good_id": 
              "adf0d5d5c7bd480e9b26f21e7e869a45", 
              "good_id": "1585b32f67e04106b4c685dcec1aa556", 
              "order_id": "01448473609247f894e2de4215124262", 
              "good": 
                {  
                  "good_display_img": "../../image/zhutu.jpg", 
                  "good_price": 20, 
                  "good_name": "小明", 
                } 
            }],
              "order_id": "01448473609247f894e2de4215124262" ,
              "totalprice": 120.00  
            }
        ] 
    },

    resultShow: false,//显示列表
    orderCon: 0,//0表示商品 1表示用户
    conId: '',//传过来的id

    windowHeight: '',//屏幕高度 

    scrollPd: false,//是否可滑动
    scrollTop: 0,//设置srcoll-view距离顶部位置
    top: 0,//当前滑块位置
    page: 1,//当前页数
    row: 3,//一页数量

    showLoadding: false,//显示加载
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;

    //获得屏幕高度
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight
        })
      },
    })

    //动画
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })
    animation.translateY(5).step();
    this.setData({
      animationData: animation.export()
    })


    wx.setNavigationBarTitle({
      title: '商品订单记录'
    })

    //行数 死数据、只有3行
    var row=that.data.row;

    //获得数据 默认第一页
    that.queryOrdersByGood(1, row)


  },


  /**
 * 操作数据
 * 
 * 由于是死数据，page只为判断是否还有下一页
   */
  queryOrdersByGood: function (page, row) {
    var that = this;

    var dataList = that.data.dataList;//假数据
    var count = dataList.count;//总页数
    var myList = dataList.list;//列

    that.setData({
      orderList: myList.concat(that.data.orderList),//拼接列表
      resultShow: true,//显示数据
      showLoadding: false,//去除加载提示
      page: page,//存储当前页数，为是否有下一页做判断

    })

    //判断是否还有数据   当前页小于总页数则可以下拉加载数据       
    if (parseInt(count) > parseInt(that.data.page)) {
      that.setData({
        scrollPd: true,//显示滑块、允许下拉
      })
    }
  },

  /**
 * 加载更多 下一页 
 * */
  loadMore: function () {
    var that = this;
    var thatData = this.data;
    var pd = thatData.scrollPd;//是否加载数据，true则加载

    //显示加载
    wx.showToast({
      title: '加载中...',
      duration:100,
      icon: 'loading',
    })

    if (pd) {
      //防止多次触发滑动到底部事件
      that.setData({
        scrollPd: false//禁止下拉
      })

      var page = thatData.page;//当前页数
      var row = thatData.row;//数量
      var pageAdd = parseInt(page) + 1;//下一页

      that.setData({
        showLoadding: true,//显示加载 
      })

      that.queryOrdersByGood(pageAdd, row);

    }


  },
  /**
 * 滑动事件
 * */
  scroll: function (e) {
    var that = this;
    that.setData({
      top: e.detail.scrollTop
    })
  },
})

wxss

/**index.wxss**/
/* orderBroList.wxss */

.display-flex-row{
  display: flex;
  flex-direction: row;
}
.borderTop1px{
  border-top: 1px solid #e5e5e5;
}
.bg_fff{
  background-color:#FFF;
}
.order_msg{
  /* margin-top:20rpx; */
  padding:5px 20rpx;
  margin-bottom:10rpx;
}

.select_hidden{
  height: 35px;
}

.order_msg .item_status{
   justify-content: space-between;
  font-size:12pt;
  border-bottom: 1px solid #E5E5E5;
  padding: 10rpx 0 5rpx 0;
}

.order_msg .item_status image{

  width: 18pt;
  height: 18pt;
}

.order_msg .item_wrap {
    justify-content: center;
    align-items: center;
    padding:10rpx 0;
    background-color: #FFF;
    border-bottom: 1px solid #E5E5E5;
    width:710rpx;
}
.order_msg .item_msg{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 550rpx;
  margin-left:20rpx;
  font-size:11pt;
  height: 80px;
}
.order_msg .item_item_image {
    width: 150rpx;
   height: 80px;
}
.order_msg .item_item_title {
    padding: 0 10px 0  0;
}

.item_count {
  font-size:12pt;
  padding-top:10rpx;
  justify-content: flex-end;
}
.item_count .count_price{
  font-size:14pt;
}

.content_zero{
  margin-top:20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content_zero .tip{
  font-size: 10pt;
}
.content_zero image{
  height: 100PX;
}

.loading_area{
  font-size:10pt;
  align-items: center;
  justify-content: center;
  margin:20rpx 0;
}