一、下載layui文件包，部署到項目目錄
在html中引入其中兩個文件。
二、以分頁器爲例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
#biuuu_city_list {
width: 400px;
height: auto;
background-color: aquamarine;
box-sizing: border-box;
padding: 10px 30px;
}
</style>
</head>
<body>
<div id="demo20"></div>
<ul id="biuuu_city_list"></ul>
<script src="layui/layui.js"></script>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage
//測試數據
var data = [
'北京',
'上海',
'廣州',
'深圳',
'杭州',
'長沙',
'合肥',
'寧夏',
'成都',
'西安',
'南昌',
'上饒',
'瀋陽',
'濟南',
'廈門',
'福州',
'九江',
'宜春',
'贛州',
'寧波',
'紹興',
'無錫',
'蘇州',
'徐州',
'東莞',
'佛山',
'中山',
'成都',
'武漢',
'青島',
'天津',
'重慶',
'南京',
'九江',
'香港',
'澳門',
'臺北'
];
//調用分頁
laypage.render({
elem: 'demo20'
,count: data.length
,jump: function(obj){
//模擬渲染
document.getElementById('biuuu_city_list').innerHTML = function(){
var arr = []
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
arr.push('<li>'+ item +'</li>');
});
return arr.join('');
}();
}
});
});
</script>
</body>
</html>
效果：
