锐客网

  1. 首页 > 睿知 > it技术 > >

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

flex布局IT知识View的使用

亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述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>

效果如下图：
APICloud AVM框架列表组件list-view的使用flex布局教程

文章图片
< 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语句

    下一篇：创投日报|钛媒体Pro创投日报：6月6日收录投融资项目6起