APICloud AVM框架列表组件list-view的使用、flex布局教程

avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一；全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致。

list-view 定义可复用内容的竖向滚动视图，可以优化内存占用和渲染性能，支持下拉刷新和上拉加载。可使用 scroll-view 的基本属性。
list-view 里面可放置 cell、list-header、list-footer、refresh 等组件，使用 cell 组件作为每项显示内容。

下面看一个list-view的示例：

效果如下图：

list-view 只支持APP，需要用自定义loader或APPloader 调试。调试教程可查看文档APICloud Studio3 WiFi真机同步和WiFi真机预览使用说明

list-view 自带内存回收功能，可以滚动加载更多。

给list-view 添加下拉刷新组件refresh

根据refresh 组件文档，把 refresh 标签添加到 list-view 标签中，如下:

把refresh 组件的css ，js 代码也复制到相应的style 和 script 标签中，并在项目目录image 标签下添加用到的两张下拉刷新图片。完整代码如下：

wi-fi 同步到手机 loader，下拉页面，运行效果如下：

Flex 布局介绍：
Flex 布局意思是弹性盒子布局，比较适合移动端场景，适配不同屏幕大小。

   
item
   
item
   
item

通常可以把父元素定义为弹性盒子或称为容器，其子元素为弹性盒子的项目。flex布局的主要功能是在主轴或交叉轴按预期排列分布项目，定义每个项目占用空间比例，并可跟随容器大小伸缩。

上图引自下面这篇博客，推荐阅读：
http://www.ruanyifeng.com/blo...

推荐一个flex git:
https://gitee.com/jiang_xinch...