list
  • {{item.name}}
示例:

html:

<div id="scroll" class="bui-scroll"> <div class="bui-scroll-head"></div> <div class="bui-scroll-main"> <ul id="list" class="bui-list"> <li v-for="item in datas" class="bui-btn"><i class="icon-facefill"></i>{{item.name}}</li> </ul> </div> <div class="bui-scroll-foot"></div> </div>

js:

bui.ready(function () { // 绑定list的数据 var listApp = new Vue({ el: '#list', data: { datas: [] } }); var uiList = bui.list({ id: "#scroll", url: siteDir + "userlist.json", page:1, pageSize:5, height:300, //如果分页的字段名不一样,通过field重新定义 field: { page: "page", size: "pageSize", data: "data" }, onRefresh: function (scroll,data) { //刷新的时候执行 listApp.datas = data; }, onLoad: function (scroll,data) { // 这里通过vue 设置的数据,会偏慢一点,导致页面高度不足,直接请求了2页数据再进行渲染 console.log( this.option("page") ); listApp.datas = listApp.datas.concat(data); }, callback: function (e) { // 点击整行的时候执行 } }); }) //生成模板 跟 artTemplate 重名 function template2 (data) { var html = template('test', {"data":data}); return html; }