小程序的流加载

WXML：

<import src="../../template/tabbar/tabbar.wxml" />
<import src="../../template/nav/index.wxml"/>
  <!-- 自定义导航开始 -->
<template is="navBarNoBack" data="{{...navH}}" />
<!-- //自定义导航结束 -->
<!-- 内容 -->
<scroll-view scroll-y="true" style="height:{{scroll_height}}px;" bindscrolltolower="getScroll">
<block wx:for="{{orderList}}" wx:for-item="order" wx:key="order">
  <view class='orderView'>
    <view class="{{order==1?'order-white':''}}">{{order}}</view>
  </view>
</block>
<block wx:if="{{dixian==true}}">
  <view style='text-align:center'>___我是有底线的___</view>
</block>
</scroll-view>
<!-- //内容 -->

<!-- 标签栏 -->
<template is="tabBar" data="{{...tabBar}}" />

注意：必须设置 scorll-view的高度！！！！！

WXSS：

page{
  background-color: #EDEEF0;
}
.orderView{
  text-align: center;
  padding: 10rpx 0rpx;
}
.orderView>view{
  display: inline-block;
  width: 90%;
  background-color: #FFFFFF;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 10rpx;
}
.order-white{
   background-color: #FDA744 !important;
}

JS：

// pages/distributors/newOrder.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navH: { navH: app.globalData.navHeight, title: "新的订单" },
    scroll_height: app.globalData.usableHeight,
    orderList: [1, 2, 3, 4, 5,7,8,9,10,11,12,13,14],
    pageIndex:1,//当前页页码
    nextPage:1,//下一页页码
    dixian: false,//显示 底线
  },
  /***
   * 流加载
   */
  getScroll: function (e) {
    var _this = this;
    var orderList = _this.data.orderList;
    var a =[15,16,17,18,19,20,21,22,23,24,25,26,27]
    console.log("流加载");
    var nextPage=_this.data.nextPage;//获取下一页页码
    var pageIndex = _this.data.pageIndex;//获取当前页页码
    if (_this.data.dixian == false) {
      nextPage += _this.data.pageIndex;//下一页页码+1
      _this.setData({ nextPage: nextPage });//更新data中的下一页页码
    }
    _this.setData({
      orderList: orderList.concat(a)
    });
    if(nextPage==3){
      _this.setData({
        dixian:true,
        orderList:orderList
      })
    }
   
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    app.distributors();//加载配送商的标签栏
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})