微信小程序+PHP 搜索+分页

1、小程序wxml 小程序选择器

<view class="section"><view class="section__title">选择发布类型</view><picker bindchange="bindType" value="{{index}}" range="{{array}}"><view class="picker">当前选择：{{array[index]}}</view></picker>
</view>
<text>\n</text>
<view class="section"><view class="section__title">选择审核状态</view><picker bindchange="bindStatus" value="{{sindex}}" range="{{arrays}}"><view class="picker">当前选择：{{arrays[sindex]}}</view></picker>
</view>

2、js data 内定义数据

data: {// 已发布的卖房委托列表saleEntrustList: [],// 已发布的出租委托列表rentOutEntrustList: [],array: ['全部','新房', '二手房', '租房'],arrays: ['全部','审核中', '审核通过', '审核不通过'],index:0,sindex:0,page:1,limit:5},

3、分页js ：

/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if(this.data.type != undefined){var data = {token : wx.getStorageSync('token'),page : this.data.page + 1,limit : this.data.limit,type : this.data.type}}else if(this.data.status != undefined){var data = {token : wx.getStorageSync('token'),page : this.data.page + 1,limit : this.data.limit,status : this.data.status}}else if(this.data.type != undefined && this.data.status != undefined){var data = {token : wx.getStorageSync('token'),page : this.data.page + 1,limit : this.data.limit,status : this.data.status,type : this.data.type}}else{var data = {token : wx.getStorageSync('token'),page : this.data.page + 1,limit : this.data.limit}}// console.log(data)// returngetMyIssue(data).then((res)=>{let newData = this.data.saleEntrustList.concat(res.data)this.setData({saleEntrustList : newData,page : this.data.page + 1,})})},

ps：request函数封装的方法可以看我上一篇blog

4、js选择器筛选(两个条件) :

// 按状态进行筛选bindStatus:function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({sindex: e.detail.value})if(this.data.type != undefined){var data = {token : wx.getStorageSync('token'),page : 1,limit : this.data.limit,type : this.data.type,status : e.detail.value}}else{var data = {token : wx.getStorageSync('token'),page : 1,limit : this.data.limit,status : e.detail.value}}getMyIssue(data).then((res)=>{this.setData({saleEntrustList : res.data,status : e.detail.value,page : 1})})},// 进行条件筛选bindType: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})if(this.data.status != undefined){var data = {token : wx.getStorageSync('token'),page : 1,limit : this.data.limit,type : e.detail.value,status : this.data.status}}else{var data = {token : wx.getStorageSync('token'),page : 1,limit : this.data.limit,type : e.detail.value}}getMyIssue(data).then((res)=>{this.setData({saleEntrustList : res.data,type : e.detail.value,page : 1})})},

ps : 需要判断条件比较麻烦

5、效果图：

6、后端PHP接口：

// 我的发布public function getMyIssue(){$params = input();if ($params['page'] <= 0 && $params['limit'] <= 0){return error('参数错误');}$uid = checkToken($params['token']);$pre = ($params['page'] - 1) * $params['limit'];// 根据所有状态筛选if (isset($params['type']) && isset($params['status'])){$status = $params['status'] == 0 ? null : $params['status'] - 1 ;
//            echo $params['type']."<br>".$status."<br>".$pre;
//            die();$houseData = HousingResources::limit($pre,$params['limit'])->where('uid',$uid)->where('type',$params['type'])->where('is_examine',$status)->select();
//            dd($houseData);return success('我的发布类型+状态',$houseData);}// 根据房源类型筛选if (isset($params['type'])){$houseData = HousingResources::limit($pre,$params['limit'])->where('uid',$uid)->where('type',$params['type'])->select();return success('我的发布',$houseData);}// 根据房源状态筛选if (isset($params['status'])){$status = $params['status'] == 0 ? null : $params['status'] - 1 ;$houseData = HousingResources::limit($pre,$params['limit'])->where('uid',$uid)->where('is_examine',$status)->select();return success('我的发布',$houseData);}$houseData = HousingResources::limit($pre,$params['limit'])->where('uid',$uid)->select();return success('我的发布',$houseData);}

ps：使用的thinkphp框架

微信小程序+PHP 搜索+分页相关推荐

微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...
微信小程序input搜索解决中文问题(输入拼音) 实时搜索节流处理(bindinput 节流)
微信小程序input搜索解决中文问题(输入拼音) & 实时搜索节流处理(bindinput 节流) 问题微信小程序输入拼音的时候, 还没有完全输入完成, bindinput就会触发, 当我输 ...
微信小程序实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果一.效果图二.实现流程: 1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表 key = 小程序 2.处理结果列表:在 ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...

微信小程序+PHP 搜索+分页

微信小程序+PHP 搜索+分页相关推荐

最新文章

热门文章