ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2022-01-26 15:35:37  阅读：206  来源： 互联网

标签：flex APICloud return dataList list height refreshIcon data


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/blog/2015/07/flex-grammar.html

 

 

 

推荐一个flex git:

 

https://gitee.com/jiang_xincheng/c-layout

 

标签：flex,APICloud,return,dataList,list,height,refreshIcon,data
来源： https://www.cnblogs.com/fc-uz/p/15846698.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有