首先需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh

"enablePullDownRefresh": true

wxml頁面： 

<view class="page-header">
<text class="page-header-text">{{title}}</text>
</view>
<scroll-view class="page-body" scroll-y="true">
  <navigator url="../goods/goods?goods_id={{item.goods_id}}" wx:for="{{list}}">
    <view class="item">
      <image class="poster"  src="{{imgurl}}{{item.goods_big_img}}"></image>
      <view class="meta">
        <text class="title">{{item.goods_name}}</text>
        <text class="sub-title">品牌：{{item.brand_name}}</text>
        <text class="sub-jg">價格：{{item.goods_price}}(庫存：{{item.goods_number}})</text>
        <text class="rating">{{item.goods_create_time}}</text>
      </view>

    </view>
  </navigator>
</scroll-view>
 

js頁面：

//index.js
//獲取應用例項
const app = getApp()


var p = 0  //頁數從0開始

var GetList = function (that, icontitle ) {

  wx.showToast({
    title: icontitle,
    icon: "loading",
    duration: 10000
  });
  wx.request({
    url: "https://cs.xxxxxx.com/shop/index.php/Goods/json/",
    method: "POST",
    data: {
      page: p
    },
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    success: function (res) {
      wx.hideToast();
     // console.log(p);
   
      //console.log(res.data);
     // console.log(res.data.info);
      
      if (res.data.info.length > 0) {
        var l = that.data.list
        for (var i = 0; i < res.data.info.length; i++) {
          l.push(res.data.info[i])
        }
        that.setData({
          list: l,
          title: res.data.title,
        });
        p = p + 10;//10是每頁多少條資料
       
      //  console.log(p);
      //  console.log(res.data.info.length);
      } else {

        wx.showToast({
          title: '頁面載入結束',
          icon: "loading",
          duration: 1000
        })


      }
    
     

    },


  });
};

Page({
  data: {
    title: "載入中...",
    imgurl:"https://cs.xxxxxx.com/shop/",
    /** 分頁配置 */
    page: 0,
    list: [],

     
  },



  /**
    * 生命週期函式--監聽頁面載入
    */
  onLoad: function (options) {

    var that = this
    
    GetList(that,'正在載入資料...');

  },
  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
  },
  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
  },
  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },
  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

    p = 0;
    console.log("回走")
    this.setData({
      list: [],
    });
    var that = this
    GetList(that,"正在重新整理資料")
  },
  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function (res) {
    console.log("上拉")
    var that = this
 
    GetList(that,'載入更多資料')
    console.log(p)

  },
  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
  }

})

 

wxss頁面(隨便寫的可以忽略)：

/**app.wxss**/
 page{
   font-family: "Microsoft YaHei";
   background-color: #fff;
   display:flex;
   /*縱向排列*/
   flex-direction: column;
 }
 .page-header{
   display: flex;
   /*橫向居中對齊*/
   justify-content: center;
   border-bottom:2rpx solid #ccc;
   margin-bottom: 10rpx;
 }
 .page-header-text{
   padding:20rpx 40rpx;
   color:#999;
   font-size: 40rpx;
   text-align:center;
 }
 .page-body{
   display: flex;
   flex:1;
   flex-direction: column;
 }
 .item{
   display:flex;
   padding:20rpx 40rpx;
   border-bottom:2rpx solid #eee;
 } 
 .item .poster{
  width:128rpx;
  height:128rpx;
  margin-right:20rpx;
 }
 .item .meta{
   flex:1;
 }
 .item .title,.item .sub-title,.item .sub-jb{
    display:block;
   
 }
 .item .title{
   font-size: 32rpx;
 }
.item .sub-title{

   font-size:28rpx;
   font-weight:bold;
 }
 .item .sub-jg{
   font-size:28rpx;
   font-weight:bold;
   color:red;
 }
 .item .rating {
   font-size:22rpx;
   color:#c0c0c0;
  display:block;
 }
 .item .artists{
   font-size:26rpx;
   color:#999;
 }
 

Thinkphp後臺(3.2.3)：

	public function json(){
		
		
		S(array('prefix'=>'json'));
		if(!S('shuju')){
			//echo 1;exit;
			$goods = D('Goods');
			
			/** 小程式搜尋功能用到的 start **/
			$title=trim(I('q'));//
			//dump(I('get.q'));
			
			if(!empty($title)){
				$where['goods_name']=array('like','%'.$title.'%');
				$where['goods_introduce']=array('like','%'.$title.'%');
				$where['_logic'] = 'or';
				$data['_complex'] = $where;
			}
			/** end **/
			
			$count      = $goods->where($data)->count();
			$Page       = new \Think\Page($count,10);// 例項化分頁類 傳入總記錄數和每頁顯示的記錄數(10)
			
			$brand = D('Brand');
		
			
			$info=$goods->where($data)->join('LEFT JOIN __BRAND__  ON __GOODS__.goods_brand_id=__BRAND__.brand_id')->order('goods_id desc')->limit(I('page').','.$Page->listRows)->select();
			
	
			$data['title']=iconv('gb2312','utf-8','我 love 商品');//Json 只支援 utf-8 編碼 （iconv — 字串按要求的字元編碼來轉換）
			$data['info']=$info;
			//dump($info);exit;
			S('shuju',$data,300);//300秒  5分
			dump($this->ajaxReturn($data));
			
			
			exit;
		}else{
			dump($this->ajaxReturn(S('shuju')));
			exit;
	
		}
		
		
	
		
	}

好了，資料表就簡單了~~

類似這種效果...