本节任务
学会使用上拉加载更多组件<loading>
这个组件比较常用务必要掌握
接下来我带大家写一个这样的页面
第一步
创建一个loading.vue 文件
第二步
添加一个list组件
<template>
<div class="page">
<list class="list" >
<cell v-for="i in num" class="cell">
<text class="text">{{i}}</text>
</cell>
</list>
</div>
</template>
解释一下:
num 是一个数字,不是一个数组,vuejs语法支持这样遍历的写法
我们发现这个cell的背景是有渐变的我们来看一下布局的样式
.cell{
background-image:linear-gradient(to top,#F0AD4E,#F8C433);
width:750px;
height: 200px;
text-align: center;
}
.text{
font-size:50px;
color:white;
text-align: center;
line-height: 200px;
height: 200px;
}
重点讲解一个background-image:linear-gradient(to top,#F0AD4E,#F8C433);
这个就能实现背景渐变,解释一下
第一个参数 to 代表到
第二个参数 top代表渐变的最终位置
渐变开始的颜色#F0AD4E
渐变结束的颜色#F8C433
这句代码的意思是从底部向顶部渐变,渐变开始的颜色为#F0AD4E,渐变结束的颜色为#F8C433
你可以修改为background-image:linear-gradient(to bottom left,#F0AD4E,#F8C433)查看一下效果
解释一下:
渐变路线为top right -> left bottom
下面就是本节的重点内容
如何增加一个上拉加载更多
使用到一个组件
<loading>
<template>
<div class="page">
<list class="list" >
<cell v-for="i in num" class="cell">
<text class="text">{{i}}</text>
</cell>
<loading @loading="onloading" :display="showLoading" class="loading">
<loading-indicator class="indicator"></loading-indicator>
<text>加载更多</text>
</loading>
</list>
</div>
</template>
解释一下:
1.<loading>要放在
<list>组件或者<scroller>组件内部,cell上面或者下面没有关系,都可以,但是为了可读性,还是放在下面比较好
2.组件<loading-indicator>是系统给我提供的小菊花组件,可以用在<loading>和<refresh>组件内部,当做子组件使用
3.loading 事件,当用户上拉的距离大于<loading>组件高度后,然后放手,会触发这个事件
4.display 字段有两个可选值 show和hide,千万不能输入true和false,否则系统崩溃,如果你使用组件<<loading-indicator>那么你设置这个值为show,它会将其显示出来,但是注意一下,它不会对<text>或<image>等其他组件有效果
如何改变菊花的颜色?
color:green;
注意一个问题,加载区域的高度需要手动设置的,如果不设置,它会被子组件的撑开,所以你有两个选择,设置</loading> 组件的高度或者子组件的高度
下面的布局请参考
.loading{
width:750px;
justify-content: center;
align-items: center;
flex-direction: row;
background-color: gainsboro;
}
.indicator{
width:100px;
height: 100px;
color:green;
}
-
<loading>子组件 你也可以自己定义
下面是代码
<loading @loading="onloading" :display="showLoading" class="loading">
<image src="http://ww3.sinaimg.cn/large/006tNbRwly1feoqhig367g306r06rglx.gif" class="indicator"></image>
<text class="loading-title">加载更多</text>
</loading>
思考
下来加载的状态有多种(下拉加载,放手加载,加载中,没有数据了),我们应该怎么切换这些状态呢?
