vux 使用 loading 组件
1)声明引入Loading
import { Loading } from 'vux'
2)在模版底部添加 组件(需要添加到 template>div 标签里)
<template>
<div>
……
<loading v-model="showLoading" :text="loadText"></loading>
</div>
</template>
3)通过控制 showLoading 变量 和 loadText 变量即可控制 Loading 组件
export default {
components: {
AjaxPlugin,
Loading
},
data () {
return {
showLoading: false,
loadText: 'Loading',
articleList: this.getArticleList(1)
}
},
methods: {
getArticleList: function (catId) {
let _this = this _this.showLoading = true htttpRequest('/api', {method: 'article.getList', 'catId': catId}, function (data) {
_this.showLoading = false
_this.articleList = data.Result.ArticleList
})
return []
}
}
}
完
vux 使用 loading 组件的更多相关文章
- [Loading Component]Loading组件的v-model设计是否不合理?
vue在2.4.2版本中给computed里的属性加了限制,详见assigning to a computed property without setter does not fail 项目将vue ...
- ReactJS实践(一)—— FrozenUI React化之Loading组件
在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...
- Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题
问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...
- Vue 封装的loading组件
<template> <div class="loadEffect"> <span></span> <span>< ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- Angular23 loading组件、路由配置、子路由配置、路由懒加载配置
1 需求 由于Angular是单页面的应用,所以在进行数据刷新是进行的局部刷新:在进行数据刷新时从浏览器发出请求到后台响应数据是有时间延迟的,所以在这段时间就需要进行遮罩处理来提示用户系统正在请求数据 ...
- vue2.0 仿手机新闻站(五)全局的 loading 组件
1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...
- 小程序使用wepy框架自定义loading组件
1:定义组 <template> <view class="app-loading-container" style="{{options.cssTex ...
- 微信小程序把玩(二十五)loading组件
原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <butt ...
随机推荐
- GitHub developer API 学习
官网地址:https://developer.github.com/v3/ 目录 当前版本 schema parameters root endpoint client errors http red ...
- Java数组排序和搜索
如何排序数组并搜索其中的元素? 以下示例显示如何使用sort()和binarySearch()方法来完成任务.用户定义的方法printArray()用于显示数组输出: package com.yiib ...
- asp 写文件
'写文件 Sub WriteToTextFile (FileUrl,byval Str,CharSet) set fso = Server.CreateObject("Scripting.F ...
- 简单入门dos程序
--1.关机程序 注意:文件保存为.bat echo 晚安了,宝贝! @echo off shutdown -s -t exist --2.快捷/批量启动程序 title "程序系统启动&q ...
- Keepalived + Nginx + Tomcat 的高可用负载均衡架构搭建
Keepalived + Nginx + Tomcat 的高可用负载均衡架构搭建 Nginx 是一个高性能的 HTTP反向代理服务器 Keepalived 是一个基于VRRP协议来实现的LVS服务高可 ...
- FastJson---高性能JSON开发包
SVN:http://code.alibabatech.com/svn/fastjson/trunk/WIKI:http://code.alibabatech.com/wiki/display/Fas ...
- fedora26在编译s3c2440内核时make menuconfig *** Unable to find the ncurses libraries
[root@fedora-26 linux-2.6.32.2]# make menuconfig *** Unable to find the ncurses libraries or the *** ...
- 调整iRedmail之Roundcube webmail服务不可不知的几件事
iRedMail集成了roundcube webmail,极大的方便了安装维护工作,但是需求是千遍万化的,总有需要深入调整的地方.下面就是我调整roundcube时遇到的几点问题: 一.修改网页标题p ...
- 小程序的tab切换事件
index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...
- 【WP8】MultiBinding
WP中系统没有像WPF中直接支持MultiBinding,可以通过以下代码实现 五个类 public class BindingCollection : Collection<BindingBa ...