移動端頁面的下拉重新整理，用到jquery和layui的彈窗，layui的下拉重新整理配合上條件篩選有點難搞，所以沒有用，原生js寫的，有用到的話可以採納

html部分：

<div class="seo_Box">
                <input class="case_search" type="text" placeholder="大家都在搜“現代風格”" />
</div>

//篩選條件，點擊出現彈窗
<ul class="search_list">
                <li class
 
="searchLi" data-method="offsetFG" data-type="b">
                    風格
                    <img src="images/bottom.png" alt="">
                </li>
                <li class="searchLi" data-method="offsetHX" data-type="b">
                    戶型
                    <img src
 
="images/bottom.png" alt="">
                </li>
                <li class="searchLi" data-method="offsetMJ" data-type="b">
                    面積
                    <img src="images/bottom.png" alt="">
                </li>
                <li class="searchLi" data-method
 
="offsetKJ" data-type="b">
                    空間
                    <img src="images/bottom.png" alt="">
                </li>
                <li class="searchLi" data-method="offsetZJ" data-type="b">
                    造價
                    <img src="images/bottom.png" alt="">

                </li>
            </ul>

<!-- 內容列表 -->
        <div class="case_main">
            <ul class="newList" id="LAY_List">

            </ul>
        </div>

js部分：

 // 載入搜尋條件資料
    $.ajax({
        methods: "get",
        url: ajaxUrl + "mobile/website/caseInfo/sysDictItem",
        success: function (res) {
            let data = res.result
            showSearchData(data)//初始化渲染搜尋條件
        }
    })
//layui彈窗
layui.use('layer', function () {
        var layer = layui.layer
        //觸發事件
        var active = {

            offsetFG: function (othis) {
                var type = othis.data('type')
                    , text = othis.text();

                layer.open({
                    type: 1
                    , area: ['3.55rem', '2.5rem']
                    // , area: ['100%', '300px']
                    , title: "請選擇房屋風格"
                    // , offset: 'auto'//具體配置參考：http://www.layui.com/doc/modules/layer.html#offset
                    , id: 'layerDemo' + type //防止重複彈出
                    , content: text1
                    , shadeClose: true//點選遮罩關閉
                    , btn: '確定'
                    , btnAlign: 'c' //按鈕居中
                    , shade: .5 //不顯示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            },
            offsetHX: function (othis) {
                //同上面彈窗一樣
                  //content: text2
            },
            offsetMJ: function (othis) {
                //content: text3
                
            },
            offsetKJ: function (othis) {
                   //content: text4
                 
            },
            offsetZJ: function (othis) {
               //content: text5
            },

        }


$('.searchLi').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
            let index = $(this).index();//當前點選的index
            // 點選搜尋條件載入資料
            $('.search_data li').click(function () {
                // console.log($(this).index())
                // console.log(index)
                $(this).addClass('redBg').siblings("li").removeClass('redBg')//更改樣式Class
                // console.log($(".search_list").children(".searchLi").eq(index).html())
                // $(".search_list").children(".searchLi").eq(index).html($(this).html()+`<img src="images/bottom.png" style="margin-left:.05rem;" alt="">`)
                $(".search_list").children(".searchLi").eq(index).css("color", "red")
                // console.log($(this).parent().html())
                // 更改text1等內容，不然會一直重複渲染初始化的dom
                if (index == 0) {
                    text1 = '<ul class="search_data">' + $(this).parent().html() + '</ul>'
                } else if (index == 1) {
                    text2 = '<ul class="search_data">' + $(this).parent().html() + '</ul>'
                } else if (index == 2) {
                    text3 = '<ul class="search_data">' + $(this).parent().html() + '</ul>'
                } else if (index == 3) {
                    text4 = '<ul class="search_data">' + $(this).parent().html() + '</ul>'
                } else if (index == 4) {
                    text5 = '<ul class="search_data">' + $(this).parent().html() + '</ul>'
                }
            })

            searchClick(index);//更改渲染條件

        });
    })




//////////////////////////////////////////////////////////////////////
//公用的請求引數
    var sxData = { upAndDown: 0, caseState: 1, pageNo: 0, status: 1, pageSize: 12 }
    var isloading = false;//是否滑動到底部
    var dataPages = 0;//總頁數
    var searchButton = false;//是否點選賽選條件

    var p = 0, t = 0; //上下滾動時隱藏導航欄
//滑鼠滾輪事件
    $(window).scroll(function (e) {
        //下滑
        p = $(this).scrollTop();
        if (t < p && p !== 0) {
            $('.header_right ul').slideUp('fast');
        }
        // else {
        //     //上滑
        //     $('.header_right ul').slideDown('fast');
        // }
        t = p;

        var scrtop = document.documentElement.scrollTop || document.body.scrollTop;
        var wheight = document.documentElement.clientHeight || document.body.clientHeight;
        var scrheight = document.documentElement.scrollHeight || document.body.scrollHeight;
        var windowheight = window.innerHeight


        // console.log(isloading, scrtop, wheight, scrheight)

        if (scrtop + wheight >= (scrheight - 10) && isloading == false) {
            if (sxData.pageNo >= dataPages) {
                // console.log('沒有更多了')
                return false
            }
            isloading = true //正在請求值改為真，請求完成之後改為假
            getData()
        }

    })


    getData();//初始化載入資料
    function getData() {
        sxData.pageNo++
        $.ajax({
            type: "get",
            dataType: "json",
            data: sxData,//請求的頁碼和每頁顯示條數
            async: true,
            url: Url + 'xxx/xxx/xxx/list',//Url地址
            success: function (res) {
                if (res.success && res.result.records.length >= 0) {//資料插入
                    isloading = false
                    dataPages = res.result.pages;
                    if (searchButton) {//點選了賽選按鈕
                        var html = '';
                    } else {
                        var html = $("#LAY_List").html()
                        searchButton = false;
                    }
                    res.result.records.forEach( function (item) {
                        html += `
                                <li pid="${item.id}">
                                    <h1 style="background: url('${(item.headFiles.length == 0) ? ('') : (item.showRootPath + item.headFiles[0].fileUrl)}') no-repeat; background-size: 100% 100%;"></h1>
                                    <h2>${item.title}</h2>
                                </li>
                                `
                    });

                    $("#LAY_List").html(html)
                    $("#LAY_List li").click(function () {
                        location.href = "caseDetails.html?id=" + $(this).attr("pid");//跳轉頁面攜帶id
                    })
                }
            },
            error: function () {
                //請求出錯處理
                isloading = false
            }
        })
    }




    /////////////////////////////////////////////////////////////////////////
    
    var text1, text2, text3, text4, text5 = ''
    function showSearchData(data) {
        text1 = `<ul class="search_data"><li class="redBg" pid="null">全部</li>`
        text2 = `<ul class="search_data"><li class="redBg" pid="null">全部</li>`
        text3 = `<ul class="search_data"><li class="redBg" pid="null">全部</li>`
        text4 = `<ul class="search_data"><li class="redBg" pid="null">全部</li>`
        text5 = `<ul class="search_data"><li class="redBg" pid="null">全部</li>`

        for (let i = 0; i < data.designStyle.length; i++) {
            text1 += `<li pid="${data.designStyle[i].id}">${data.designStyle[i].itemText}</li>`
        }
        text1 += `</ul>`
        for (let i = 0; i < data.apartmentLayout.length; i++) {
            text2 += `<li pid="${data.apartmentLayout[i].id}">${data.apartmentLayout[i].itemText}</li>`
        }
        text2 += `</ul>`

        for (let i = 0; i < data.houseArea.length; i++) {
            text3 += `<li pid="${data.houseArea[i].id}">${data.houseArea[i].itemText}</li>`
        }
        text3 += `</ul>`

        for (let i = 0; i < data.housingFeatures.length; i++) {
            text4 += `<li pid="${data.housingFeatures[i].id}">${data.housingFeatures[i].itemText}</li>`
        }
        text4 += `</ul>`

        for (let i = 0; i < data.cost.length; i++) {
            text5 += `<li pid="${data.cost[i].id}">${data.cost[i].itemText}</li>`
        }
        text5 += `</ul>`

    }





    function searchClick(index) {
        if (index == '0') {
            $(".search_data li").click(function () {//風格
                let designStyle = $(this).attr("pid")
                if (designStyle != "null") {
                    sxData.designStyle = designStyle;
                } else {
                    delete sxData.designStyle
                }
                sxData.pageNo = 0;//重新定義到搜尋
                searchButton = true;//點選了賽選條件
                getData()
            })
        } else if (index == '1') {
            $(".search_data li").click(function () {//戶型
                let houseType = $(this).attr("pid")
                if (houseType != "null") {
                    sxData.houseType = houseType;
                } else {
                    delete sxData.houseType
                }
                searchButton = true;//點選了賽選條件
                sxData.pageNo = 0;//重新定義到搜尋
                getData()
            })
        } else if (index == '2') {
            $(".search_data li").click(function () {//面積
                let floorSpace = $(this).attr("pid")
                if (floorSpace != "null") {
                    sxData.floorSpaceType = floorSpace
                } else {
                    delete sxData.floorSpaceType
                }

                searchButton = true;//點選了賽選條件
                sxData.pageNo = 0;//重新定義到搜尋
                getData()
            })
        } else if (index == '3') {
            $(".search_data li").click(function () {//空間
                let feature = $(this).attr("pid")
                if (feature != "null") {
                    sxData.feature = feature;
                } else {
                    delete sxData.feature
                }
                searchButton = true;//點選了賽選條件
                sxData.pageNo = 0;//重新定義到搜尋
                getData()
            })
        } else if (index == '4') {
            $(".search_data li").click(function () {//費用
                let cost = $(this).attr("pid")
                if (cost != "null") {
                    sxData.costType = cost;
                } else {
                    delete sxData.costType
                }
                searchButton = true;//點選了賽選條件
                sxData.pageNo = 0;//重新定義到搜尋
                getData()
            })
        }


    }
    // // 監聽鍵盤
    document.addEventListener("keyup", function (e) {
        // console.log(e.keyCode)
        if (e.keyCode == 13) {
            // console.log("按下了enter")
            let title = $(".case_search").val()
            // console.log(title)
            sxData.title = title
            searchButton = true;//點選了賽選條件
            sxData.pageNo = 0;//重新定義到搜尋
            getData()
        }
    })