AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-02-09 205
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一；全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致。

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>


效果如下图：

1.png


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，下拉页面，运行效果如下：

2.png


Flex 布局介绍：Flex 布局意思是弹性盒子布局，比较适合移动端场景，适配不同屏幕大小。

<div>
   <div>item</div>
   <div>item</div>
   <div>item</div>
</div>

通常可以把父元素定义为弹性盒子或称为容器，其子元素为弹性盒子的项目。flex布局的主要功能是在主轴或交叉轴按预期排列分布项目，定义每个项目占用空间比例，并可跟随容器大小伸缩。

3.png


上图引自下面这篇博客，推荐阅读：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


推荐一个flex git:https://gitee.com/jiang_xincheng/c-layout

文章标签：
iOS开发
Android开发
开发工具
容器
git
开发框架
小程序
关键词：
flex布局
组件flex
组件flex布局
框架List
列表List
lygcorey
目录
相关文章
我是快乐的嘟嘟
|
28天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么？
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时，需要对其基本原理和特性有深入的理解，同时结合具体的布局需求和场景，进行细致的调整和优化。通过合理的设置和注意事项的把握，才能实现理想的自适应效果，提升用户体验。还可以根据实际情况进行更深入的探索和实践，以不断提升 Flex 布局的应用能力。
我是快乐的嘟嘟
108 34
游客g5tp3lgf24cqc
|
15天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中，还可以用table元素来实现双行夹批效果，但比flex布局代码更复杂，效果也不见得更理想。
游客g5tp3lgf24cqc
38 10
米果粒
|
11天前
|
索引 Python
List（列表）
List（列表）。
米果粒
20 4
lqj_本人
|
17天前
|
开发者 UED 容器
鸿蒙next版开发：ArkTS组件通用属性（Flex布局）
在HarmonyOS next中，ArkTS的Flex布局是一种强大且灵活的布局方式，支持水平或垂直方向排列元素，并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap，适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
lqj_本人
50 10
互联网课堂
|
1月前
|
测试技术 开发者 Python
在 Python 中创建列表时，应该写 `[]` 还是 `list()`？
在 Python 中，创建列表有两种方法：使用方括号 `[]` 和调用 `list()` 函数。虽然两者都能创建空列表，但 `[]` 更简洁、高效。性能测试显示，`[]` 的创建速度比 `list()` 快约一倍。此外，`list()` 可以接受一个可迭代对象作为参数并将其转换为列表，而 `[]` 则需要逐一列举元素。综上，`[]` 适合创建空列表，`list()` 适合转换可迭代对象。
互联网课堂
22 1
在 Python 中创建列表时，应该写 `[]` 还是 `list()`？
lqj_本人
|
25天前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础：掌握列表渲染与动态数据管理
在HarmonyOS应用开发中，ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础，包括数据展示、性能优化和用户交互，以及如何在实际开发中应用这些知识，提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理，结合虚拟化列表和条件渲染等技术，帮助开发者构建高效、响应式的用户界面。
lqj_本人
160 2
软件求生
|
1月前
|
安全 Java 程序员
深入Java集合框架：解密List的Fail-Fast与Fail-Safe机制
本文介绍了 Java 中 List 的遍历和删除操作，重点讨论了快速失败（fail-fast）和安全失败（fail-safe）机制。通过普通 for 循环、迭代器和 foreach 循环的对比，详细解释了各种方法的优缺点及适用场景，特别是在多线程环境下的表现。最后推荐了适合高并发场景的 fail-safe 容器，如 CopyOnWriteArrayList 和 ConcurrentHashMap。
软件求生
58 5
dufadayang
|
28天前
|
容器
在 Flex 布局中，如何设置元素在侧轴上的初始对齐方式？
【10月更文挑战第22天】同时，还可以进一步探索其他 Flex 布局相关的属性和技巧，以更好地掌握 Flex 布局的强大功能，创造出更具创意和适应性的页面布局。
dufadayang
28 2
听白
|
1月前
|
NoSQL 关系型数据库 MySQL
Redis 列表(List)
10月更文挑战第16天
听白
20 2
好奇的菜鸟
|
5月前
|
安全 Java
java线程之List集合并发安全问题及解决方案
java线程之List集合并发安全问题及解决方案
好奇的菜鸟
953 1

热门文章

最新文章

  • 1
    list去重
  • 2
    LeetCode 82 Remove Duplicates from Sorted List II（从已排序链表中移除重复元素）（Linked List）（*）
  • 3
    List之根据某个字段在add的时候过滤掉重复的数据
  • 4
    How to delete a large number of data in SharePoint for List when refreshing data?
  • 5
    [LeetCode] Rotate List 旋转链表
  • 6
    java list中的对象去重原理
  • 7
    编写高质量代码改善C#程序的157个建议[勿选List<T>做基类、迭代器是只读的、慎用集合可写属性]
  • 8
    Hibernate之查询中get()和load()的区别，list()和iterate()的区别
  • 9
    python内置数据结构 - list
  • 10
    Java - List＜Byte＞ 转 byte[ ]
  • 1
    DOM 节点列表长度（Node List Length）
    34
  • 2
    Java一分钟之-Java集合框架入门：List接口与ArrayList
    52
  • 3
    【JAVA基础篇教学】第八篇：Java中List详解说明
    76
  • 4
    Java容器类List、ArrayList、Vector及map、HashTable、HashMap
    46
  • 5
    【C++】手搓 list 容器
    47
  • 6
    Redis基础操作 String List
    42
  • 7
    List＜String＞ 如何传参
    442
  • 8
    使用 Gson 将 Map、List等转换为json string
    169
  • 9
    节点列表长度（Node List Length）
    41
  • 10
    【Python 基础】列表（list）和元组（tuple）有什么区别？
    155

    • 相关电子书

    更多
  • UI2CODE智能生成flutter代码--整体架构 【上叶】
  • Flutter in action——闲鱼最佳实践
  • ui-model，跨框架复用

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础2：VS Code和Edge的联动开发
  • 零基础入门Serverless：TodoList应用创建
    • 下一篇
    无影云桌面