weex-17-组件list-CSDN博客

本文链接：https://blog.csdn.net/u011525168/article/details/88400212

列表

学习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的基本使用就讲解完毕

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