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

海的盡頭發表於2022-01-26
原文網址 : https://segmentfault.com/a/1190000041340546
APICloud框架元件ViewFlex

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>

效果如下圖：
image.png

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，下拉頁面，執行效果如下：

image.png

Flex 佈局介紹：
Flex 佈局意思是彈性盒子佈局，比較適合移動端場景，適配不同螢幕大小。

<div>
   <div>item</div>
   <div>item</div>
   <div>item</div>
</div>

通常可以把父元素定義為彈性盒子或稱為容器，其子元素為彈性盒子的專案。flex佈局的主要功能是在主軸或交叉軸按預期排列分佈專案，定義每個專案佔用空間比例，並可跟隨容器大小伸縮。

image.png

上圖引自下面這篇部落格，推薦閱讀：
http://www.ruanyifeng.com/blo...

推薦一個flex git:
https://gitee.com/jiang_xinch...

相關文章