記錄下 自己花了一上午時間做的 UNIAPP 自定義 loading 自定義 toast 同理 只是給元件傳個引數過去而已
個人覺得用UNIAPP開發小程式 還是vuex 好使 即使有的大佬 隨隨便便自己寫個狀態管理 或者自己寫個 計算屬性 之類的 反正我是做不到
先上個動圖 看看 先不說好不好看，我們主要實現功能 我是隨便找了個 loading動畫
首先自帶的loading及toast 雖然不難看 但是用多了 感覺千篇一律
使用到的知識點
- vuex
- 元件基本用法
######首先自己寫個 loading 的元件
// 引入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);
複製程式碼