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/blo...
推薦一個flex git:
https://gitee.com/jiang_xinch...