maker一下使用scroll-view实现下拉加载更多（下一页），比较粗糙，如下图。 由于数据是死数据，只能加载一次（如图）。
源码下载：http://download.csdn.net/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> js //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; }