APICloud AVM framework list component list-view usage, flex layout tutorial

avm.js is a multi-terminal development framework launched by APICloud. Using avm.js technology stack, you can develop Android & iOS native apps, small programs and iOS light apps at the same time, and the multi-end rendering effect is unified; the new App Engine 3.0 does not rely on webView, provides 100% native rendering, guarantees App performance and The experience is the same as the native app.

list-view defines a vertical scroll view of reusable content, which can optimize memory usage and rendering performance, and support pull-down refresh and pull-up loading. The basic properties of scroll-view can be used.
Components such as cell, list-header, list-footer, refresh can be placed in the list-view, and the cell component is used as the display content for each item.

Here's an example of a 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>

The effect is as follows:

list-view only supports APP and needs to be debugged with a custom loader or APPloader. The debugging tutorial can be viewed in the document APICloud Studio3 WiFi real machine synchronization and WiFi real machine preview Instructions for use

List-view has its own memory recycling function, which can scroll to load more.

Add drop-down refresh component refresh to list-view

According to the refresh component documentation, add the refresh tag to the list-view tag as follows:

<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>

Copy the css and js codes of the refresh component to the corresponding style and script tags, and add the two pull-down refresh images used under the image tag of the project directory. The complete code is as follows:

<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>

Synchronize the wi-fi to the mobile phone loader, pull down the page, and the effect is as follows:

Flex layout introduction:
Flex layout means flexible box layout, which is more suitable for mobile scenarios and adapts to different screen sizes.

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

Usually, the parent element can be defined as a flexbox or container, and its child elements are the items of the flexbox. The main function of flex layout is to arrange and distribute items as expected on the main axis or cross axis, define the proportion of space occupied by each item, and can scale with the size of the container.

The above picture is quoted from the following blog, recommended reading:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Recommend a flex git:
https://gitee.com/jiang_xincheng/c-layout