使用统软云 AVM框架列表组件列表视图,灵活布局教程
浏览:1097 次

是的,统软云多端开发框架已启动。使用avm Js A技术堆栈可以同时开发Android;IOS原生app、小程序和IOS轻app,具有统一的多终端渲染效果;新的App Engine 3.0不依赖webView,提供100%的原生渲染,并确保应用性能和体验与原生应用一致。
列表视图定义可重用内容的垂直滚动视图,以优化内存消耗和渲染性能,并支持下拉刷新和上拉加载。您可以使用滚动视图的基本属性。
在列表视图中,可以放置单元格、列表页眉、列表页脚、刷新和其他组件,并将单元格组件用作每个显示内容。

让我们看一个列表视图的示例:
<;list view id=“listView”class=“main”启用返回顶部onscrolltollower={this.onscrollTollower}><;cell class=“cell c-lc-rl_ac c-sy-border_bottom c-lc-ptb”onclick={this.itemClick}><;img class=“img”src={item.url}alt=“";>;<;text class=“title c-filling-w c-pl”>;{item.title}<;/cell><,list footer class=“footer”>,<;text>正在加载…<;/text><;/list footer><<;/list view>< 。单元格{宽度:100%;高度:70px;} 。img{height:50px;width:50px,margin-left:10px;}。标题{height:50px;字体大小:20px;行高:50px;} 。页脚{对齐内容:中心;对齐项目:中心;}<;/样式>书信电报;script>导出默认值{name:“test”,方法:{apiready(){this.initData(false);},InitData(loadMore){var that=this;var skip=that.dataList?that.dataList.length:0;var dataList=[];for(var i=0;i<20;i++){dataList[i]={title:';Project';+(i+skip),url:';../../image/nav_tab_2.png';}}var listView=文档。getElementById('listView');if(loadMore){that.dataList=that.dataList.contat(dataList);listView.insert({data:dataList});}否则{that.dataList=dataList;listView.load({data:dataList});}},onscrolltolower(){this.initData(true);},ItemClick(e){api.alert({msg:';当前项目索引:';+e.currentTarget.index});}}<;/脚本>复制代码
效果如下:

仅支持APP,您需要使用自定义加载器或APPloader进行调试。调试教程可以查看文档
列表视图使用内存回收功能,您可以滚动以加载更多内容。
将下拉刷新组件刷新添加到列表视图

根据刷新组件文档;添加到列表视图标记中的刷新标记,如下所示:
nbsp;&书信电报;list view id=“listView”class=“main”启用返回顶部onscrolltollower={this.onscrollTollower}> ; ; ;&书信电报;refresh class=“refresh”state={refreshState}onstachange={this.onstachange}> ; ; ; ; ;&书信电报;image class={refreshIconClass}src=“../../image/refresh.png”>;<;/图像>nbsp; ; ; ; ;&书信电报;image class={refreshLoadingClass}src=“../../image/liloading_more.gif”>;<;/图像>nbsp; ; ; ; ;&书信电报;text class=“refreshStateDesc”>;{refreshStateDesc} ; ; ;<;/刷新><;cell class=“cell c-lc-rl_ac c-sy-border_bottom c-lc-ptb”onclick={this.itemClick}> ; ; ;