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)
// return
getMyIssue(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框架