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的示例：

<template><list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}><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}</text></cell><list-footer class="footer"><text>加载中...</text></list-footer></list-view>
</template>
<style src='../../css/c-layout-mini.css' scoped>
</style>
<style>
.main {width: 100%;height: 100%;
}.cell {width: 100%;height: 70px;
}.img {height: 50px;width: 50px;margin-left: 10px;
}
.title {height: 50px;font-size: 20px;line-height: 50px;
}.footer {justify-content: center;align-items: center;
}
</style><script>
export default {name: 'test',methods: {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: '项目' + (i + skip),url: '../../image/nav_tab_2.png'}}var listView = document.getElementById('listView');if (loadMore) {that.dataList = that.dataList.concat(dataList);listView.insert({data: dataList});} else {that.dataList = dataList;listView.load({data: dataList});}},onscrolltolower() {this.initData(true);},itemClick(e) {api.alert({msg: '当前项索引：' + e.currentTarget.index});}}
}
</script>

效果如下图：

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

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

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

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

<template><list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}><refresh class="refresh" state={refreshState} onstatechange={this.onstatechange}><image class={refreshIconClass} src="../../image/refresh.png"></image><image class={refreshLoadingClass} src="../../image/loading_more.gif"></image><text class="refreshStateDesc">{refreshStateDesc}</text></refresh><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}</text></cell><list-footer class="footer"><text>加载中...</text></list-footer></list-view>
</template>

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

<template><list-view id="listView" class="main" enable-back-to-top onscrolltolower={this.onscrolltolower}><refresh class="refresh" state={refreshState} onstatechange={this.onstatechange}><image class={refreshIconClass} src="../../image/refresh.png"></image><image class={refreshLoadingClass} src="../../image/loading_more.gif"></image><text class="refreshStateDesc">{refreshStateDesc}</text></refresh><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}</text></cell><list-footer class="footer"><text>加载中...</text></list-footer></list-view>
</template>
<style  src='../../css/c-layout-mini.css' scoped>
</style>
<style>
.main {width: 100%;height: 100%;
}.cell{width: 100%;height: 70px;
}.img{height: 50px;width: 50px;margin-left: 10px;
}
.title {height: 50px;font-size: 20px;line-height: 50px;
}.footer {justify-content: center;align-items: center;}.refresh {align-items: center;justify-content: center;background-color: #eee;}.refreshStateDesc {color: #e3007f;font-size: 13px;}.refreshIcon {position: absolute;width: 25px;height: 22px;bottom: 21px;left: 70px;transition-property: transform;transition-duration: 100ms;}.refreshIcon-normal {transform: rotate(0);visibility: visible;}.refreshIcon-dragging {transform: rotate(180deg);visibility: visible;}.refreshIcon-refreshing {visibility: hidden;}.refreshLoading {position: absolute;width: 22px;height: 22px;bottom: 21px;left: 70px;visibility: hidden;}.refreshLoading-refreshing {visibility: visible;}</style><script>export default {name: 'test',data(){return {refreshState: 'normal'}},computed: {refreshIconClass(){if (this.data.refreshState == 'normal') {return 'refreshIcon refreshIcon-normal';} else if (this.data.refreshState == 'dragging') {return 'refreshIcon refreshIcon-dragging';} else if (this.data.refreshState == 'refreshing') {return 'refreshIcon refreshIcon-refreshing';}},refreshLoadingClass() {if (this.data.refreshState == 'refreshing') {return 'refreshLoading refreshLoading-refreshing';} else {return 'refreshLoading';}},refreshStateDesc() {if (this.data.refreshState == 'normal') {return '下拉可以刷新';} else if (this.data.refreshState == 'dragging') {return '松开可以刷新';} else if (this.data.refreshState == 'refreshing') {return '刷新中...';}}},methods:{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: '项目' + (i + skip),url: '../../image/nav_tab_2.png'}}var listView = document.getElementById('listView');if (loadMore) {that.dataList = that.dataList.concat(dataList);listView.insert({data: dataList});} else {that.dataList = dataList;listView.load({data: dataList});}},onscrolltolower() {this.initData(true);},itemClick(e) {api.alert({msg: '当前项索引：' + e.currentTarget.index});},onstatechange(e) {var state = e.detail.state;if (state == 'normal') {this.data.refreshState = 'normal';} else if (state == 'dragging') {this.data.refreshState = 'dragging';} else if (state == 'refreshing') {this.data.refreshState = 'refreshing';var that = this;setTimeout(function(){that.data.refreshState = 'normal';}, 2000);}}}}
</script>

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

Flex 布局介绍：

Flex 布局意思是弹性盒子布局，比较适合移动端场景，可以自动伸缩适配不同屏幕大小。

<div>

</div>

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

上图引自下面这篇博客，推荐阅读：

Flex 布局教程：语法篇 - 阮一峰的网络日志

推荐一个flex git:

https://gitee.com/jiang_xincheng/c-layout

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

APICloud AVM框架开发消防检查助手APP
把消防检查过程中,需要手写填报的文档,在APP端以表单填写进行实现.同时可以添加手写签名,关联照片,而且APP端表单填报很多项目进行下拉选择,极大的提高了工作效率:表单填报完成之后可通过系统后台生成w ...
APICloud AVM框架开发企业OA办公项目
这是用AVM框架开发的第一个项目,踩了很多的坑,但是也成长了很多. 本项目主要是针对企业内部员工使用,除了大部分OA办公常用的功能模块,也有部分定制化的功能模块.后台用的PHP+BootStrap+E ...
APICloud AVM框架开发视频会议APP
APP开发采用的APICloud平台的AVM 多端应用开发框架使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App.小程序和 iOS 轻 App,且多端渲染效果 ...
使用APICloud AVM框架开发预约应用
前段时间跟朋友一起搞了一个预约的项目,前端用的APICloud的AVM框架做的,后端用的php开发的,用的tp5框架,没几天就搞出来了.简单跟大家分享一下开发中的一些功能点的实现吧.也欢迎大家一起探讨 ...
使用APICloud AVM框架开发人事档案管理助手APP
由于人事档案具有涉密性,所以本应用没有使用后台服务,全部功能都在APP本地实现. 数据库采用sqllite,没有使用UI框架,个人觉得AVM本身支持的flex布局配合自写CSS样式,完全可以实现市面上 ...
APICloud AVM框架封装日历组件
AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完 ...
APICloud AVM框架封装SKU（商品规格选择）组件
AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完 ...
新闻列表页flex_使用css3的Flex布局实现列表展示
实现效果图如下: 通过css3样式实现(部分代码): .box{display:flex;flex-wrap:wrap;justify-content:space-between;align-cont ...
html 价格列表组件,评价列表ratings组件
需要注意的是main.js里面需要取消vue-router的默认路由,src/main.js的router.replace('/goods');需要去掉原因是在添加了其他页面(原来路由只有一个页面g ...
android 电商app组件化,APICloud AVM多端开发案例深度解析(一)--生鲜电商app开发
AVM多端开发是APICloud定义的一套新的代码编写标准(DSL):基于标准Web Components组件化思想,兼容Vue / React语法特性,通过一次编码,分别编译为Android和iOS ...

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

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

最新文章

热门文章