移动端使用原生js动态创建列表

需求：移动端页面需要获取到后端接口返回的数据后，以列表形势，动态展示数据，由于项目使用了mui框架，所以借助mui-table-view的样式来实现。

思路：先将表头展示出来，设置每一项的宽度；再创建一个空的<ul>用来获取动态数据

效果：

代码如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell" style="display: flex;text-align: center;padding: 10px 0 !important;">
	    <div style='width:25%'>编码</div>
		<div style='width:40%'>代号</div>
		<div style='width:20%'>状态</div>
		<div style='width:15%'>数量</div>
	</li>
</ul>
<ul class="mui-table-view" id="table"></ul>
<div id="childLi" style="text-align: center;">
	<p style="height:50px;line-height: 50px;">暂无数据！</p>
</div>

        // 获取数据，渲染列表
		function getList() {
				var ajaxObj = new AjaxPost();
				ajaxObj.URL = '后端api';
				ajaxObj.Data = {}
				ajaxObj.callbackForSuccess = function (result, message) {
					var table = document.getElementById('table')
                    //数据为空时显示暂无数据
					if (result.data.length == 0) {
						document.getElementById('childLi').style.display = 'block'
						table.style.display = 'none'
					} else {
						document.getElementById('childLi').style.display = 'none'
						table.style.display = 'block'
						let content = ''
						for (let i = 0; i < result.RUBBERBOX.length; i++) {
							content += `<li class='mui-table-view-cell' style='display: flex;text-align: center;padding: 10px 0 !important;background-color:#fff' >` +
								"<p style='width:25%;overflow-wrap: break-word;'>" + result[i].code+ '</p>' +
								"<p style='width:40%'>" + result[i].code1+ '</p>' +
								"<p style='width:20%;overflow-wrap: break-word;'>" + result[i].code2 + '</p>' +
								"<p style='width:15%'>" + result[i].number + '</p>' +
								"</li>"
						}
						table.innerHTML = content
					}

				};
				ajaxObj.callbackForFailed = function (result, message) {
					mui.toast(message);
					document.getElementById('childLi').style.display = 'none'
					table.style.display = 'block'
				}
				ajaxObj.post();
			}
		}
    //在合适的位置调用该方法
        getList()