微信小程序 和 laravel8 实现搜索后分页 加载

1.微信小程序页面

.wxml  页面

<view>
  <view>
     <view>
      <form bindsubmit="dopost">
        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
            <!-- 搜索框 -->
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" name="keyword" value="{{keyword}}" class="weui-search-bar__input" placeholder="请输入搜索内容" />
                </view>
            </view>
            <!-- 搜索按钮,调用搜索查询方法 -->
            <button size="mini" class="weui-search-bar__cancel-btn" form-type="submit">搜索</button>
        </view>
        </form>
    </view>
  </view>
  <view class="page-section-spacing">
        <scroll-view scroll-y="true" class="page-scroll-style" bindscrolltolower="scroll">
        <block wx:for="{{activity}}" wx:key="activity">
          <view class="scroll-view-content">
            <image src="{{item.img}}" class="scroll-view-image"></image>
            <view class="scroll-view-text">
              {{item.title}}
            </view>
            <view class="scroll-view-name">
              {{item.surplus_number}}
            </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;
}
 

.js 文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    activity:{},
    page:1,
    last_page : 0,
    keyword:''
  },


//加载
scroll(e){
  let that = this;
  let page = that.data.page+1;
  let keyword = that.data.keyword
  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.week2.skill.com/api/activity/index',
    data:{page,keyword},
    header: {
      'content-type': 'application/json' // 默认值
    },
    success (res) {
      console.log(res.data)
      let activity = res.data.data.data
      that.setData({
        activity:that.data.activity.concat(activity),
      })
      wx.hideLoading()
    }
  })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.request({
      url: 'http://www.week2.skill.com/api/activity/index',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res.data)
        let activity = res.data.data.data
        that.setData({
          activity:activity,
          last_page:res.data.data.last_page,
          page:res.data.data.current_page
        })
      }
    })
  },

//搜索
  dopost:function(e){
    console.log(e);
    let formData = e.detail.value;
    wx.request({
      url: 'http://www.week2.skill.com/api/activity/index',
      data:formData,
      method:"GET",
      success:res=>{
        console.log(res);
        if(res.data.status==200){
          this.setData({
            activity:res.data.data.data,
            keyword:formData.keyword,
            last_page:res.data.data.last_page,
            page:res.data.data.current_page
          })
        }
      },
      fail(e){
        wx.showToast({
          title: '请求失败',
          icon:"error"
        })
      }
    })
  },
})

2.laravel 代码

/**
     * 查询数据 分页展示
     * @param Request $request
     * @return array
     */
    public function index(Request $request)
    {
        $keyword = $request->input('keyword');
        $data = Activity::when($keyword,function ($query,$keyword){
            return $query->where('title','like','%'.$keyword.'%');
        })->select('title','img','surplus_number')->paginate(5);
        return ['status'=>200,'msg'=>'success','data'=>$data];
    }

效果图