列表页调用的字段`$listdb`,如下图: ![](https://img.kancloud.cn/35/90/3590691d901864aedf64e01db5f5ef77_1920x1048.png) * [ ] 这里有一个限制字数的方法,格式如下`{:get_word(字段名,字数)}`,将简介字数限制为300,示例如下: `{:get_word($cx.description,'300')}` * [ ] 循环列表页的示例代码: ``` <div class="layout"> {volist name='listdb.data' id='cx' empty=''} <div class="layout cx-fex-l cx-pad-tb20 news-item ll-color-hover" style="border-bottom: 1px dashed #e5e5e5;"> <div class="cx-xs6 cx-xl12"> <div class="cx-bg-img4x3" style="overflow: hidden;"> <a href="/home/article-{$cx.id}.html" title="{$cx.title}" class="cx-bg-img cx-fex-c cx-fex-itemsc cx-bg-white new-pic"> <img class="cx-img-responsive" src="{$cx.picurl}" /> </a> </div> </div> <div class="cx-xs18 cx-xl12 cx-fex-l cx-fex-column cx-text-lh cx-pad-l20"> <a href="/home/article-{$cx.id}.html" title="{$cx.title}" class="cx-text-f18 cx-pad-b10 cx-pos-r new-title index-text-14 index-mobile-shenglv1 index-guanyu-pad">{$cx.title}</a> <div class="cx-text-black-6 mobile-text-12 index-mobile-shenglv1">发布日期:{$cx.addtime}</div> <div class="cx-text-black-8 cx-text-f14 mobile-text-12 index-mobile-shenglv3">{:get_word($cx.description,'300')}</div> </div> </div> {/volist} </div> <div class="cx-text-center" id="pages"></div> ``` * [ ] 列表的分页我这里使用的是layui的分页:在页面写上`<div class="cx-text-center" id="pages"></div>`,写下如下示例代码 ``` <script> layui.use('laypage', function(){ var laypage = layui.laypage, getUrlPapram = function (name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"), r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; }; //执行一个laypage实例 laypage.render({ elem: 'pages',//这里绑定的为id为pages的dom count: "{$listdb.total}",//列表内容的总数 limit: "{$listdb.per_page}",//列表当前页码 curr: "{$listdb.current_page}",//列表内容的总数 theme: '#333',//分页主题颜色为#333 jump: function(obj, first){ let url = window.location.href; if(url.indexOf('page=') > 0){ let v = getUrlPapram('page'); url = v != null ? url.replace(`page=${v}`,`page=${obj.curr}`) : url.replace(`page=`,`page=${obj.curr}`); }else{ url = url.indexOf("?") > 0 ? url + `&page=${obj.curr}` : url + `?page=${obj.curr}`; } if(!first){ window.location.href = url; } } }); }); </script> ```