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

Posted 2022-02-16 ffapi

​​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 使用APICloud AVM框架开发预约应用

 使用APICloud AVM多端组件快速实现app中的搜索功能
 APICloud AVM 封装日期和时间选择组件
 使用APICloud AVM多端框架开发课程表功能
 使用APICloud AVM框架开发人事档案管理助手app实战
 使用APICloud AVM多端框架开发消防检查助手App项目实践分享