微信小程序逐屏分页刷新

wxml:

  <view class="page-section-spacing">
        <view>
           <text>商家列表</text>
        </view>
        <scroll-view scroll-y="true" class="page-scroll-style" bindscrolltolower="scroll">
        <block wx:for="{{goods}}" wx:key="goods">
          <view class="scroll-view-content">
            <image src="{{item.title}}" class="scroll-view-image"></image>
            <view class="scroll-view-text">
              {{item.price}}
            </view>
            <view class="scroll-view-name">
              {{item.type}}
            </view>
          </view>
        </block>
        </scroll-view>
  </view>
</view>

wxss:

/**index.wxss**/
.weui-search-bar {
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #EFEFF4;
  border-top: 1rpx solid #D7D6DC;
  border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
  position: absolute;
  left: 10px;
  top: 7px;
}
.weui-search-bar__form {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
          flex: auto;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.weui-search-bar__input {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
}
.weui-search-bar__cancel-btn {
  margin-left: 10px;
  line-height: 28px;
  color: #09BB07;
  white-space: nowrap;
}
.swp{
  height: 500rpx;
}
.page-section-spacing{
  margin-top: 60rpx;
}
 
.page-scroll-style{
  height: 1000rpx;
  background: aliceblue;
}
.scroll-view-content{
  height: 230rpx;
  margin: auto 10rpx;
  background: white;
  border: 1px solid gray;
}
.scroll-view-image{
  width: 200rpx;
  height: 200rpx;
  margin-top: 15rpx;
  margin-left: 20rpx;
  float: left;
}
.scroll-view-text{
  width: 400rpx;
  float: left;
  font-weight: 800;
  margin-top: 15rpx;
  margin-left: 20rpx;
}
.scroll-view-name{
  float: left;
  font-size: 30rpx;
  color: gray;
  margin-top: 20rpx;
  margin-left: 20rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}
 

wxjs:

// 获取应用实例
const app = getApp()
 
Page({
  data: {
   goods:[
     {
       'title':'22',
       'price':'22-徐汇校区',
       'type':'2',
       "info":"22222222222222"
     },
 
   ],
   page:1,
   last_page : ''
  },
//加载
  scroll(e){
    let that = this;
    let page = that.data.page+1;
    that.setData({
      page:page
    })
    let last_page = that.data.last_page
    if(page > last_page){
      wx.showToast({
        title: '到底了',
      })
      return ;
    }
    wx.showLoading({
        title: '加载中',
    })
    wx.request({
      // 请求的网址
      url: 'http://www.yan.com/api/xcx/goodIndex',
      data:{'page':page},
      header: {
        'content-type': 'application/json' // 默认值
      },
      method:"POST",
      success (res) {
        let goods = res.data.data.data;
        that.setData({
          goods:that.data.goods.concat(goods)
        })
        wx.hideLoading()
      }
    })
  },
  // 页面自动加载
  onLoad() {
    var that = this;
    wx.request({
      url: 'http://www.yan.com/api/xcx/goodIndex',
      header: {
        'content-type': 'application/json' // 默认值
      },
      method:'POST',
      success (res) {
        let goods = res.data.data.data;
        that.setData({
          goods:goods,
          last_page:res.data.data.last_page
        })
      }
    })
  },
})

laravel 路由

//商品展示
Route::post('xcx/goodIndex','xcx\LoginController@goodIndex');

控制器代码

//商品列表展示
    public function goodIndex(Request $request)
    {
//        接受页码
        $page=$request->post('page');
        $data=GoodRelease::orderBy('id','desc')->paginate($page);
        if(!$data){
            return ['code' => 500, 'meg' => 'no', 'data' =>''];
        }
        return ['code' => 200, 'meg' => '列表展示成功', 'data' => $data];
 
    }

效果图：