flow兼容artTemplate用法

分享 未结 0 40
sulia
sulia 4天前
悬赏:20飞吻
文档用法适用于简单结构,复杂的很麻烦
        for(var i = 0; i < 8; i++){
lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
}
使用layui自带的tpl模板引擎
var tpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(tpl).render(data, function(html){
view.innerHTML = html;
});
使用lis.push没效果
view放到lis里其他方法文档好像没有,目前layuitpl不太完善


使用artTemplate,既然文档flow没有使用tpl模板的内容
尝试方法一:
用js手动append
var lis = [];
var html=template('test', res);//artTemplate渲染模板生成的html
var view=document.getElementById(id).innerHTML+=html
无法实现类似 lis=view 的思路
而且flow获取lis不到一直加载layui-flow-more需要remove...(这和轻量背道而驰了,遂丢掉)

尝试方法二:
var lis = [];
var html=template('test', res);//artTemplate渲染模板生成的html
lis=[html];
//拼接html包含个[ ],就这么简单...

附完整代码
//javascript
layui.use('flow', function(){
var $ = layui.jquery; //不用额外加载jQuery,flow模块本身是有依赖jQuery的,直接用即可。
var flow = layui.flow;
flow.load({
elem: '#demo' //指定列表容器
,done: function(page, next){ //到达临界点(默认滚动触发),触发下一页
var lis = [];
//以jQuery的Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
$.get('/api/list?page='+page, function(res){
//假设你的列表返回在data集合中
var html=template('test', res);
lis=[html]
//执行下一页渲染,第二参数为:满足“加载更多”的条件,即后面仍有分页
//pages为Ajax返回的总页数,只有当前页小于总页数的情况下,才会继续出现加载更多
next(lis.join(''), page < res.pages);
});
}
});
});
//demo
<script id="test" type="text/html">
<h1>{{title}}</h1>//直接使用data里的属性title
<ul>
{{each list as value i}}//直接可遍历data里面的list属性,list是一个数组
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</script>
回帖
  • 消灭零回复