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 这些内容会在后面实例讲解中讲解