前言

在編寫微信小程序的代碼時(shí)，我們會(huì)發(fā)現(xiàn)：原生加載動(dòng)畫樣式不多，可供我們?cè)O(shè)置的參數(shù)也不多。

通過查詢可以得知，若是需要自己定義加載動(dòng)畫，一般的做法就是：在當(dāng)前頁面寫加載動(dòng)畫的view代碼，通過使用wx:if來控制該動(dòng)畫的顯示。

這樣做在一定程度上也是可以實(shí)現(xiàn)需求，但是如果每個(gè)需要過度動(dòng)畫的頁面都復(fù)寫一遍該動(dòng)畫view代碼，那么就會(huì)顯得有點(diǎn)冗余。

下面將分享如何使用組件來自定義加載動(dòng)畫?(?ˊ?ˋ)?

需求分析

小程序原生加載動(dòng)畫開放的權(quán)限

• 自定義title：加載時(shí)顯示的文字
• 提供動(dòng)畫類型的選擇：比如加載、完成、失敗等，類型較少
• mask：是否啟用蒙層，防止觸摸穿透

已實(shí)現(xiàn)效果（By Haihong）

• title
• 支持自定義文字內(nèi)容
• 支持多行、單行顯示
• 中文、英文均不溢出（可修改）
• 溢出多余部分已省略號(hào)顯示（可修改）
• 文字顏色、大小可以修改
• 動(dòng)畫樣式
• 支持自定義動(dòng)畫樣式
• mask
• 模式1:啟用蒙層，模糊全局頁面，禁止用戶操作
• 模式2:啟用蒙層，頁面顯示與正常一致，禁止用戶操作
• 模式3:不啟用蒙層，允許用戶操作
• 動(dòng)畫深色加載框
• 支持選擇啟用與不啟用

效果展示

實(shí)現(xiàn)方法

步驟1

新建一個(gè)文件夾

命名為：components

用于存放我們?cè)谝粋€(gè)項(xiàng)目中需要使用的所有組件

【參考】

• 可以將components文件夾放置于pages、images文件夾處于同一級(jí)

步驟2

在components目錄下新建一個(gè)文件夾

命名為：loading

用于存放自定義動(dòng)畫的代碼

同時(shí)在loading文件夾內(nèi)新建四個(gè)文件

分別為

1. loading.js
2. loading.json
3. loading.wxml
4. loading.wxss

【參考】

步驟3

將下面代碼分別粘貼至loading.js、loading.json、loading.wxml、loading.wxss