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 组件文档,把 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>item</div> <div>item</div> <div>item</div> </div>
通常可以把父元素定义为弹性盒子或称为容器,其子元素为弹性盒子的项目。flex布局的主要功能是在主轴或交叉轴按预期排列分布项目,定义每个项目占用空间比例,并可跟随容器大小伸缩。
上图引自下面这篇博客,推荐阅读:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
推荐一个flex git:https://gitee.com/jiang_xincheng/c-layout