uni-app 自定義loading 自定義toast 兼容小程序&APP

記錄下 本身花了一上午時間作的 UNIAPP 自定義 loading 自定義 toast 同理 只是給組件傳個參數過去而已

我的以爲用UNIAPP開發小程序 仍是vuex 好使 即便有的大佬 隨隨便便本身寫個狀態管理 或者本身寫個 計算屬性 之類的 反正我是作不到

先上個動圖 看看 先不說好很差看，咱主要實現功能 我是隨便找了個 loading動畫

首先自帶的loading及toast 雖然不難看 可是用多了 感受千篇一概

使用到的知識點

• vuex
• 組件基本用法

######首先本身寫個 loading 的組件

######在main.js中註冊全局組件

// 引入vuex 狀態庫
import store from "./store";
// 在main.js中註冊全局組件
import toast from './components/toast/toast.vue'
Vue.component('toast',toast)
//掛在到Vue原型鏈上
Vue.prototype.$store = store;
//是否顯示加載中 的方法 調用store中的mutations方法
function loading(tf){
	if(tf){
		store.commit("switch_loading",tf)
	}else{
		store.commit("switch_loading")
	}
}
//也掛在到原型鏈上 方便在每一個頁面中  使用 this.$loading()  去顯示加載中
Vue.prototype.$loading = loading;
複製代碼

######在store中加上控制顯示隱藏的方法

//一個很是簡單的store的示例
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
		loading:false
	},
	mutations: {
		//tf做爲主動控制的參數
		switch_loading(state,tf){
			if(tf){
				state.loading = tf;
			}else{
				state.loading = !state.loading
			}
		}
	}
})
export default store

複製代碼

######最後在組件toast.vue中 加上控制方法 控制屬性

<template>
	<view class="loading_box" v-show="is_loading" @click="switch_loading">
		<view class="loading">
			<view class="loader loader-17">
			  <view class="css-square square1"></view>
			  <view class="css-square square2"></view>
			  <view class="css-square square3"></view>
			  <view class="css-square square4"></view>
			  <view class="css-square square5"></view>
			  <view class="css-square square6"></view>
			  <view class="css-square square7"></view>
			  <view class="css-square square8"></view>
			</view>
			 <!-- <view class="loader loader-4"></view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			switch_loading(){
				this.$store.commit("switch_loading")
			}
		},
        //實測直接在標籤屬性裏寫  $store.state.XX  拿不到數據  因此這裏經過 計算屬性去監聽一下
		computed:{
			is_loading(){
				return this.$store.state.loading
			}
		}
	}
</script>

複製代碼

最後 在任何一個頁面中 只要在頁面標籤加上

以及在請求中 或者須要顯示loading的時候 加上一句

this.$loading();
複製代碼

用法跟 uni.showLoading() 差很少

this.$loading(); 
//或者
this.$loading(false);
複製代碼