js动态拼接div完成列表循环

重生之it界大佬

于 2022-08-08 15:55:08 发布

阅读量982

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45650629/article/details/126229162

版权

//这里是mui框架，原理一样
<div class="mui-scroll-wrapper" id="refreshContent"  >
    <div class="mui-scroll">
        <ul class="mui-table-view" id="ulll">
        </ul>
    </div>
</div>

 function pullLoad() {
        var that = this;
        pageIndex += 1;
        $.ajax({
            url: "${ctx}/otcwjdc/getFourWjListBlackWhite",
            dataType: "json",
            type: "post",
            data:{
                userid: '${userid}',
                openid: '${openid}',
                isClerk: '${isClerk}',
                institutionno: '${institutionno}',
                search:'${search}',
                pageIndex: pageIndex
            },
            success: function(data) {
                console.log("打印测试数据")
                console.log(data)
                //拿到原来的
                var ulll = document.getElementById("ulll");
                if(pageIndex==1&&data.pageView.records&&data.pageView.records.length>0){

                    document.getElementById("empty").style.display="none"; //隐藏
                    var divv = document.createElement("div");
                    // divv.innerHTML = '<div class="div-contain">我的问卷</div>';
                    ulll.appendChild(divv);
                }else{
                    ulll.style.display="none";
                }
                mui.each(data.pageView.records,function (key, value) {
                //然后创建新的
                    var liii = document.createElement("li");
                    liii.innerHTML = '<div class="li-contain" wjuid="'+ value.wjuid +'">\n' +
                        '                    <div class="title">'+ value.wjmc + '</div>\n' +
                        '                    <div id="id" class="uuid"><img class="caseBackGroundFill" src="../../../../questionnaire/images/caseBackGroundFill.png"></div>\n' +
                        '                </div>\n' +
                        '                <div class="divider"></div>';
                        //循环拼接
                    ulll.appendChild(liii)
                })
                if(data.pageView.currentpage == data.pageView.totalpage){
                    that.endPullupToRefresh(true);
                    // setTimeout(function(){
                        //1s后提示性文字消失
                        //这里的类是mui自己添加的一个div，用来显示提示性文字。
                        $(".mui-pull-bottom-pocket").addClass("hide");
                    // },1000);

                }else{
                    that.endPullupToRefresh(false);
                    $(".mui-pull-bottom-pocket").addClass("hide");
                }
                console.log(data)
            }
        });

    }