【微信小程序|组件库】自定义加载动画(1)
海轰Pro
共 869字,需浏览 2分钟
·
2021-05-01 22:39
前言
在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多。
通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代码,通过使用wx:if来控制该动画的显示。
这样做在一定程度上也是可以实现需求,但是如果每个需要过度动画的页面都复写一遍该动画view代码,那么就会显得有点冗余。
下面将分享如何使用组件来自定义加载动画ଘ(੭ˊᵕˋ)੭
需求分析
小程序原生加载动画开放的权限
自定义title:加载时显示的文字 提供动画类型的选择:比如加载、完成、失败等,类型较少 mask:是否启用蒙层,防止触摸穿透
已实现效果(By Haihong)
title 支持自定义文字内容 支持多行、单行显示 中文、英文均不溢出(可修改) 溢出多余部分已省略号显示(可修改) 文字颜色、大小可以修改 动画样式 支持自定义动画样式 mask 模式1:启用蒙层,模糊全局页面,禁止用户操作 模式2:启用蒙层,页面显示与正常一致,禁止用户操作 模式3:不启用蒙层,允许用户操作 动画深色加载框 支持选择启用与不启用
效果展示
实现方法
步骤1
新建一个文件夹
命名为:components
用于存放我们在一个项目中需要使用的所有组件
【参考】
可以将components文件夹放置于pages、images文件夹处于同一级
步骤2
在components目录下新建一个文件夹
命名为:loading
用于存放自定义动画的代码
同时在loading文件夹内新建四个文件
分别为
loading.js loading.json loading.wxml loading.wxss
【参考】
步骤3
将下面代码分别粘贴至loading.js、loading.json、loading.wxml、loading.wxss
评论
RovingUI微信小程序组件库
RovingUI是个人在开发小程序过程中将用到的组件集合而成的一个UI库,包含一些基本通用组件(按钮、栅格、通用样式、徽标、通知和面包屑)。在组件设计上偏重动态效果以及阴影的使用。源起得归于我在开发中
RovingUI微信小程序组件库
0
ZanUI-WeApp微信小程序组件库
ZanUI-WeApp是有赞移动WebUI规范ZanUI的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感知。包含badge、btn、card、cell、color、dialog、fo
ZanUI-WeApp微信小程序组件库
0
wux微信小程序的自定义组件
wux是一个微信小程序自定义组件(对话框、指示器、五星评分...)预览用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)使用组件的wxml结构请看dist/componen
wux微信小程序的自定义组件
0
wxapp-img-loader微信小程序图片预加载组件
wxapp-img-loader适用于微信小程序的图片预加载组件,已应用于京东购物小程序版。使用步骤如下:1、将img-loader目录拷贝到你的项目中2、在页面的WXML文件中添加以下代码,将组件模
wxapp-img-loader微信小程序图片预加载组件
0
wxapp-img-loader微信小程序图片预加载组件
wxapp-img-loader适用于微信小程序的图片预加载组件,已应用于京东购物小程序版。使用步骤
wxapp-img-loader微信小程序图片预加载组件
0
Lin UI微信小程序组件库
LinUI 是由林间有风团队精心打造的一套微信小程序组件库,组件丰富、设计优美,并且拥有完整的商业案例,是您开发微信小程序的不二选择。特点现在市面上已经有了许多组件库:VantWeapp、iViewW
Lin UI微信小程序组件库
0