微信小程序+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)
        // 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框架

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值