uniapp 点击动画_GitHub - wkiwi/uni-loading: uniapp loading加载动画

uni-loading

uniapp loading加载动画

封装集合多款纯css loading加载动画

使用注意事项

uni-app插件中心只上传了w-loading组件,其他30+加载组件在完整包中,选择下载完整包,或进入github下载完整包,地址:https://github.com/wkiwi/uni-loading

更新历史

2019/7/23 10:47 更新防止遮罩滚动事件穿透

@touchmove.stop.prevent="preventTouchMove"

使用方法

//全局注入w-loading组件

import wLoading from "@/components/w-loading.vue";

Vue.component('w-loading',wLoading)

text: 加载提示文字

mask: true 无遮罩层 | false 有遮罩层

click: true 点击空白无法关闭加载状态 | false 点击空白可关闭加载状态

//初次进入页面触发加载,请将打开加载动画钩子,放入页面

onReady中,放入onLoad中会报错

原因为this.$refs.loading需要找到dom节点,在onLoad时

dom不能保证渲染完毕,在onReady中可在dom渲染完毕才会触发

//打开加载动画

this.$refs.loading.open()

//关闭加载动画

this.$refs.loading.close()

使用文档

目前有30款加载动画,如想将其中之一作为自己的加载动画,将loading(N)中的html拷贝至

w-loading组件中

这里放置拷贝的html

将loading(N)中的CSS拷贝至

w-loading组件中css注视下方

/* loading加载动画的css */

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值