weex-19-refresh组件

本节学习任务

下拉刷新组件的使用

先看两个效果图

DEEAA10F-4057-4A52-9A4A-AA302E3275E8.png

E37CDFD4-F85E-4397-972B-9624A5640C24.png

下面围绕这个进行展开

<template>
<div class="page">
    <list class="list" >
                    <!--下拉刷新组件-->
        <refresh @pullingdown="pullingdown" :display="showLoading" @refresh="onrefresh" class="refresh">
            <!--<loading-indicator class="indicator"></loading-indicator>-->
            <image src="http://ww3.sinaimg.cn/large/006tNbRwly1feoqhig367g306r06rglx.gif" class="indicator"></image>
            <text class="loading-title">下拉刷新</text>
        </refresh>
                  <!--列表-->
        <cell v-for="i in num" class="cell">
            <text class="text">{{i}}</text>
        </cell>
    </list>
</div>
</template>

代码虽然不多,但是包含了很多小的细节,我一一进行讲解

1.pullingdown 事件,这个事件是连续的,系统只要检测的用户手有下拉的行为就会触发这个事件,这个事件会传一个参数对象,具体的值如下 dy: 前后两次回调滑动距离的差值 pullingDistance: 下拉的距离 viewHeight: refreshView 高度 type: "pullingdown" 常数字符串

2.refresh 刷新事件,当下拉的距离大于组件的高度,如果此时没有放✋,不会触发,一旦放手就会触发这个事件 3.display 决定了下拉组件的悬停显示效果,当触发refresh 事件时,务必设置这个值为'show',这样就会出现<refresh>悬停在list或者scroller组件头部的效果,这个时候,我们请求网络数据,一旦完成,就将display的值设置为hide,悬停动画消失 4.如果子组件为<loading-indicator>,这个时候要注意一下,display 的值会决定它的显示或者隐藏,比如你设置为‘show’ 则子组件<loading-indicator>会显示出来

js 代码如下

<script>    
export default{
    data(){
        return{
            num:3,
            showLoading:'false'
        }
    },
    methods:{
        pullingdown(event){
        },
        onrefresh(){
            this.showLoading = 'show'
            setTimeout(res=>{
                // 模拟网路请求
                this.num=4;
                this.showLoading = 'hide'
            },2000)
        }
    }
}
</script>

布局代码如下

<style>
.page{
    display: flex;
    flex-direction: column;
}
.list{
    flex:1;
    width:750px;
}
.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;
}
.refresh{
    width:750px;
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: center;
}
.indicator{
    width:100px;
    height: 100px;
    color:green;
}
</style>

注意

下拉刷新组件的高度和上拉加载组件的高度设置基本一致,如果不指定高度,以子组件的高度为自己的高度。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的博客

ewebeditor v3.8水印处理位置调整

今天使用ewebeditor编辑器,发现图片水印不能调节,只能在左上角。于是找相关调节水印代码。找到关键代码,将水印调节到右下角了。 找到php文件夹下的upl...

29450
来自专栏偏前端工程师的驿站

JS魔法堂:通过marquee标签实现信息滚动效果

一、前言                                      有限的空间展现无限的内容,这是滚动最常用到的地方。根据信息滚动效果我们可以有...

27770
来自专栏超然的博客

响应式图像

将picture元素和srcset,sizes属性纳入html5规范,新规范意在解决:

7710
来自专栏HTML5学堂

前端特效开发 | 图片翻转的制作

HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简...

54870
来自专栏HTML5学堂

标签的选择

这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有...

35990
来自专栏分享达人秀

最简单最常用的LinearLayout线性布局

良好的布局设计对于UI界面至关重要,在前面也简单介绍过,目前Android中的布局主要有6种,创建的布局文件默认为RelativeLayout相对布局,...

30480
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(2)---设置Spread表单

让我们从设置Spread的大小和表单的外观开始学习如何定制Spread,这些操作通常放在Form的构造函数中进行,在InitializeComponent()之...

24870
来自专栏达摩兵的技术空间

与我一起学css3:background-size,-clip

大家好,今天与大家一起学习分享css3中的background-size,background-clip使用与实践。

12220
来自专栏web前端-

Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性

69030
来自专栏林德熙的博客

WPF 解决 ViewBox 不显示线的问题

ViewBox 是一个好用的东西,但是在他缩小的时候,可能有一些线无法显示。 现在公司项目就是做一个类似 ppt 的软件,所以需要使用缩略图,而对于矩形形状,在...

18410

扫码关注云+社区

领取腾讯云代金券