亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述APICloud AVM框架列表组件list-view的使用flex布局教程相关的知识，希望能为你提供帮助。
??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 组件作为每项显示内容。
【APICloud AVM框架列表组件list-view的使用flex布局教程】下面看一个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=https://www.songbingjia.com/android/item.url >
< 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=https://www.songbingjia.com/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 class=refreshLoadingClass src="https://www.songbingjia.com/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=https://www.songbingjia.com/android/item.url >
< 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推荐阅读
- MySQL数据库——高级SQL语句
- #yyds干货盘点# 剖析 Kubernete 业务副本及水平扩展底层原理(06)
- #yyds干货盘点# 如何在 Linux 上安装配置 NTP 服务器和客户端（）
- #yyds干货盘点# Kubernetes 如何通过 StatefulSet 支持有状态应用（(07)）
- #yyds干货盘点#k8s资源清单常用参数
- #yyds干活盘点# 2 CSS3 的边框
- 卷积神经网络结构优化综述
- #yyds干货盘点#想说爱你不容易 | 使用最小 WEB API 实现文件上传
- AWK入门到精通系列——awk快速入门