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>
Flex 布局介绍:
Flex 布局意思是弹性盒子布局,比拟适宜挪动端场景,能够主动伸缩适配不同屏幕大小。
<div>
<div>item</div>
<div>item</div>
<div>item</div>
</div>
通常能够把父元素定义为弹性盒子或称为容器,其子元素为弹性盒子的我的项目。flex 布局的次要性能是在主轴或穿插轴按预期排列散布我的项目,定义每个我的项目占用空间比例,并可追随容器大小伸缩。
APICloud- 业余 APP 开发、app 定制服务商,提供一站式挪动利用解决方案,满足您的各类需要,欢送收费评估需要和获取报价。