weex-17-组件list

列表

学习list 组件的用法

  • list组件介绍

1.<list>组件是提供垂直列表功能的核心组件,拥有平滑的滚动和高效的内存管理 2.如果你的列表不是很长也可以使用div做循环,实现列表的效果,不过对于长列表,你应当考虑一种高效的方式,list 组件是你不二的选择

我制作了一个效果图如下,借助这个效果图的实现步骤,讲解一下list组件的使用

5EDE8BEB-C07D-4D23-B792-3498C7D2A1B7.png

  • **第一步 ** 创建一个list.vue文件来实现本节的内容
 <template>
  <div class="page">
  </div>
</template>

<script>
</script>

<style>
.page{
    display: flex;
    flex-direction: column;
}
</style>

**第二步 ** 添加一个list组件让其宽度和高度自适应屏幕

<template>
<div class="page">
    <list class="list">
    </list>
</div>
</template>

布局代码如下

.list{
    flex:1;
    width:750px;
    background-color:orange;
}

此时我们看一下效果

37F04F6C-25B2-4C15-A831-841C0174BBE7.png

第三步

我们根据数组动态的添加子区域,这里我们要使用到组件cell,当列表上数据比较多时,使用cell能够更高效的管理内存和组件重用

代码如下

<template>
<div class="page">
    <list class="list">
        <cell class="cell" v-for='(item,index) in list' >
        </cell>
    </list>
</div>
</template>

布局代码如下

.cell{
    width:750px;
    height: 320px;
    display: flex;
    position:relative;
            background-color:red;
}

解释一下:

position:relative; 设置这个属性的作用是什么,我们cell显示的内容是使用绝对定位,绝对定位参考组件为cell,这个属性就是指明子节点如果使用绝对定位,参考是自己

js部分为

<script>
export default{
    data(){
        return{
            list:[
            {src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493829745671&di=68c663b03f829420e4f37c35d95d42b6&imgtype=0&src=http%3A%2F%2Fimg2.downza.cn%2Fapple%2Fipad%2Fyyyl-332%2F2016-04-22%2F0a60729df8603efa34de212ec67564ab.png',title:"优酷视频"},
            {src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=228407861,2241632908&fm=23&gp=0.jpg',title:'爱奇艺'},
            {src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3665454193,1922651319&fm=23&gp=0.jpg',title:'腾讯视频'},
            {src:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2924906978,3545987802&fm=23&gp=0.jpg',title:'土豆视频'},
            {src:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1502096116,2161980529&fm=23&gp=0.jpg',title:'芒果TV'}
            ]
        }
    }
}
</script>

10F311D2-2AA6-4714-AD60-CB9582CCB43A.png

第四步 将图片和文字内容使用<image><text>组件添加到cell组件上

<template>
<div class="page">
    <list class="list">
        <cell class="cell" v-for='(item,index) in list' >
            <image :src="item.src" class="poster"></image>
            <text class="title">{{item.title}}</text>
        </cell>
    </list>
</div>
</template>

布局代码

.poster{
    width:750px;
    height: 300px;
    
}
.title{
    position:absolute;
    bottom: 20px;
    left:0px;
    right:0px;
    height: 88px;
    color:white;
    line-height: 88px;
    text-align: center;
    font-size: 40px;
    background-color: rgba(0,0,0,0.5);
}

到这里list的基本使用就讲解完毕

还有那些知识需要我们学习

  • 我们经常会看到列表上会有一个头标签,当用户向上滑动时会有悬停效果,这个效果weex也可以制作使用 <header>组件,后面实战练习的时候我们再讲它的用法
  • 怎么用代码设置list 滚动到指定cell,这个要使用dom module

list有哪些限制呢?

1.不允许相同方向的 <list> 或者 <scroller> 互相嵌套,换句话说就是嵌套的 <list>/<scroller> 必须是不同的方向。

2.<list> 为根节点时无需设置高度,但是内嵌 <list> 高度必须可计算,你可以使用 flex 或 postion 将 <list> 设为一个响应式高度(例如全屏显示), 也可以显式设置 <list> 组件的 height 样式。

我们平时使用的list会有两个基本功能 下拉刷新 上拉加载更多,这些内容后面dou'yao 这些内容会在后面实例讲解中讲解

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • weex-08-单击事件

    酷走天涯
  • OpenGL ES _ 着色器_预处理器

    编译GLSL 着色器的第一个步骤是由预处理进行解析的。你可能还是不知道干啥的,它的作用就是删除注释、包含其他文件以及执行宏(宏macro是一段重复文字的简短描写...

    酷走天涯
  • os 了解一下

    os包提供了操作系统函数的不依赖平台的接口。设计为Unix风格的,虽然错误处理是go风格的;失败的调用会返回错误值而非错误码。通常错误值里包含更多信息。例如,如...

    酷走天涯
  • Python:列表操作命令

    示例:三个函数:min(),max()sum()分别取列表中最小值,最大值,数值总和

    py3study
  • Python 嵌套列表展开

    问题1:对于列表形如 list_1 = [[1, 2], [3, 4, 5], [6, 7], [8], [9]] 转化成列表 list_2 = [1, 2, ...

    py3study
  • Python list(列表)

    Python一共有6种序列的内置类型,list和tuple是其中最常见的。6种序列的都可以进行的操作包括索引、切片,加(实际上是连接),乘(实际上是复制)...

    Steve Wang
  • Python Data Structures - C2 Sort

    参考内容: 1.Problem Solving with Python Chapter5: Search and Sorting online_link ...

    宅男潇涧
  • R语言数据清洗实战——高效list解析方案

    list是R语言中包容性最强的数据对象,几乎可以容乃所有的其他数据类型。 但是包容性最强也也意味着他对于内部子对象的类型限制最少,甚至内部可以存在递归结构,这样...

    数据小磨坊
  • Python基础(list类)

    5、pop([i]) #删除并返回位置为 i 的元素,若省略参数,则表示删除最后一个元素 栈:LIFO(后进先出)

    py3study
  • Python-列表+-01-两个列表各元素合并

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia

扫码关注云+社区

领取腾讯云代金券