关于javascript:APICloud-AVM框架列表组件listview的使用flex布局教程

35次阅读

共计 5748 个字符，预计需要花费 15 分钟才能阅读完成。

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…

正文完
javascript
发表至： javascript
2022-01-25
 0
js系列之目录
前端词典分享-8-个有趣且实用的-API
关于javascript:笔记JS异步编程2Event-Loop机制
技术栈小菜前端的技术栈是如何规划和演进的