在实际开发中，我在wxml文件布局中，主要有数据遍历列表，是否有记录提示，加载提示。

layer-top 和 layer-bottom 块补充主要是因为小程序整个页面刷新端是page，因此layer-top，layer-bottom补充才有利于上拉加载减少误差。

pageLoading 主要用于页面加载数据缓慢，出现假数据的情况，设置新的数据多少会出现延时的，当延时再重新切换正常数据，用户视觉体验会有些不好。

<view class="g-doc" hidden = "{{pageLoading}}">
       <view class="g-hd">
           tab
       </view>
       <view class="g-bd">
           <!-- layer-top 等同于 g-hd的高度 -->
           <view class="layer-top"></view>  
           <block wx:if ="{{dataList.length}}">
               <block wx:for ="{{dataList}}" wx:key ="*this">
                   {{item}}
               </block>
               <!-- 加载条 start -->
                <view class="weui-loadmore" hidden="{{!loadBar.Loading}}">
                   <view class="weui-loading"></view>
                   <view class="weui-loadmore__tips">加载中</view>
                 </view>
                  
                 <view class="weui-loadmore" hidden="{{loadBar.Loading}}">
                   <view class="weui-loadmore__tips" hidden='{{!loadBar.more}}'>加载更多</view>
                   <view class="weui-loadmore__tips" hidden='{{loadBar.more}}'>没有更多了</view>
                 </view>
               <!-- 加载条 end -->
           </block>
           <block wx:else>
               暂无记录
           </block>
           <!-- layer-top 等同于 g-ft 的高度 -->

           <view class="layer-bottom"></view>

       </view>

       <view class="g-ft">
           add
       </view>
   </view>
在JSON中

{

"enablePullDownRefresh": true,

"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "单页",
"navigationBarTextStyle": "black",

}

在js中

 

 

var onLoadNumber = 1;
Page({
 data: {
   pageLoading:true,
   page: 1,
   pageSize: 20,
   dataList: [
     // {}
   ],
   loadBar:{
     Loading:false,
     more:true
   }
 },
 onLoad:function (options) {
   var self =this;

   try {



     self.dataLayer();

     setTimeout(()=>{
       self.setData({
         pageLoading:false
       })
     },300)

   }catch (e) {
 
   }


 },
 /**
 *下拉刷新
 **/
 onPullDownRefresh:function () {
   var self =this;
   self.setData({
     page: 1
   });
   self.dataLayer(function (isData) {
     setTimeout(() => {
       wx.stopPullDownRefresh()//停止下拉刷新
     }, 800);
   });
 },
 dataLayer:function (callback) {

   var self =this;

   var url ="api/api.do";


   var page = self.data.page;
   var pageSize = self.data.pageSize;

   let data = {
     page: page,
     pageSize: pageSize,
   }


   var loadBar = self.data.loadBar || {};
   loadBar.Loading =true;  // 加载中
   self.setData({
     loadBar: loadBar
   });

    
   wx.request({
     url: url,
     data: data,
     header: {
       'content-type':'application/json' // 默认值
     },
     method:"GET",
     success:function (res) {
       
       loadBar.Loading =false; // 加载完毕
       self.setData({
         loadBar: loadBar
       })


       let data = res.data;  // { object :{ rows:[] ,records:0}}
       let obj = data.object || {};
       let rows = obj.rows || [];

       let isData = (pageSize >= rows.length) ?true :false;
       var records = obj.records;

if (!rows.length){

if(page> 1){

isData = false;

}

}

       if (!!callback) {
         callback(isData);
       }

       if (page > 1) {
         let dataList = self.data.dataList;
         let newRows = dataList.concat(rows);
         loadBar.more = !(records <= newRows.length);  // 判断是否还有数据
         self.setData({
           dataList: newRows,
           loadBar: loadBar 
         });

       }else {

         loadBar.more = !(records <= rows.length); // 判断是否还有数据
         self.setData({
           dataList: rows,
           loadBar: loadBar
         });
       }
     },
     fail:function (err) {
       if (!!callback) {
         callback();
       }
     }
   });


 },
 /**
 上拉加载

 **/
 onReachBottom:function () {

   var self =this;

   var page = self.data.page;
   self.setData({
     page: ++page
   })

   let pageSize = self.data.pageSize;
   let dataList = self.data.dataList;
   if (dataList.length < pageSize) {
     console.log("数量太小，不需要上拉")
     return false;
   }

   self.dataLayer(function (isData) {
     if (!isData) {
       // 没有数据应减回去
       self.setData({
         page: --page
       })
     }
   });


 },
});

 

css 可参考，毕竟业务开发中css还是有所差异的

.g-doc, page {
 width:100%;
 height:100%;
 position:relative;
}

.g-doc {
 width:100%;
 height:100%;
 position:relative;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 flex-flow: column;
}

.layer-top {
 height:50px;
}

.layer-bottom {
 height:50px;
}

.g-bd {
 width:100%;
 background:transparent;
 -webkit-box-flex:1;
 flex:1;
 margin-bottom:50px;
}

.g-ft {
 width:100%;
 bottom:0;
 position:fixed;
}
例图：