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

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"
})
}
})
},
})

/**
* 查询数据 分页展示
* @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];
}

<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>

/**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;
}