快捷導(dǎo)航

uniapp自定義頁(yè)面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼

更新時(shí)間：2023年06月01日 12:01:20 作者：清和哉

有些頁(yè)面加載起來(lái)比較慢,為了加強(qiáng)用戶(hù)體驗(yàn)效果,所以一般都會(huì)做一個(gè)頁(yè)面加載等待的提示,頁(yè)面加載完成后消失,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義頁(yè)面跳轉(zhuǎn)loading的實(shí)現(xiàn)代碼,需要的朋友可以參考下

前言

在開(kāi)發(fā)uniapp項(xiàng)目時(shí)，頁(yè)面切換的過(guò)程中，經(jīng)常需要添加loading效果以提高用戶(hù)體驗(yàn)。uniapp自帶的loading效果無(wú)法自定義，所以想著自己實(shí)現(xiàn)一個(gè)。

實(shí)現(xiàn)思路

封裝一個(gè)全局loading組件，放置插槽和loading效果，使用v-if或者v-show去進(jìn)行切換。
將切換的狀態(tài)isLoading放置在app.vue中的globalData里面來(lái)進(jìn)行狀態(tài)控制
使用uni.$on和uni.$emit來(lái)完成切換即可

實(shí)現(xiàn)代碼

globalData

app.vue

我們需要統(tǒng)一管理頁(yè)面切換時(shí)的loading狀態(tài)，以便在其他頁(yè)面中使用。

<script>
export default {
   globalData: {
      loading: false
   }
}
</script>

pageLoading組件實(shí)現(xiàn)

src/components/pageLoading/index.vue

在created中監(jiān)聽(tīng) pageSwitch 事件， res就是你傳遞的參數(shù)，true就是開(kāi)啟loading效果

<template>
	<view class="container">
            <slot v-if="!loading"></slot>
            <view v-else class="center">
                <!-- loading組件可以自己實(shí)現(xiàn), 不想自己寫(xiě)就找個(gè)網(wǎng)站cv一下 -->
                <!-- <loading></loading> -->
                加載中...
            </view>
	</view>
</template>

<script>
export default {
	name: 'pageLoading',
	data() {
            return {
                loading: false
            }
	},
	created() {
            this.loading = getApp().globalData.loading
            
            uni.$on('pageSwitch', res => {
                this.loading = res
                getApp().globalData.loading = res
            })
	}
}
</script>

<style lang="scss" scoped>
.center {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.6);
}
</style>

使用

在跳轉(zhuǎn)的時(shí)候開(kāi)啟loading效果，跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面之后再去手動(dòng)關(guān)閉即可，或者是在某個(gè)請(qǐng)求完成之后去關(guān)閉

<template>
   <page-loading>
      <button @click="jump">跳轉(zhuǎn)</button>
   </page-loading>
</template>
<script>
// 嫌麻煩注冊(cè)個(gè)全局組件
import pageLoading from '../../components/pageLoading/index.vue'
export default {
   components: { pageLoading },
   methods: {
      jump() {
         uni.$emit('pageSwitch', true)
         uni.switchTab({
            url: '/pages/my/my'
         })
      }
   }
}
</script>

使用擴(kuò)展

如果嫌每次跳轉(zhuǎn)都需要手動(dòng)開(kāi)啟loading，那就封裝一下uni的跳轉(zhuǎn)函數(shù)或者攔截一下跳轉(zhuǎn)，這種方式并不是很推薦，一般是請(qǐng)求完成了加載頁(yè)面，建議封裝在請(qǐng)求里面 —— 大概思路就是，每個(gè)頁(yè)面最主要的數(shù)據(jù)回來(lái)了就可以關(guān)閉loading了，又或者是直接寫(xiě)到頁(yè)面里面去等請(qǐng)求執(zhí)行完了關(guān)閉，這個(gè)得看實(shí)際場(chǎng)景。

攔截跳轉(zhuǎn)實(shí)現(xiàn)

const switchTabBarInterceptor = () => {
    uni.addInterceptor('switchTab', {
        success: function (res) {
           uni.$emit('pageSwitch', true)
        },
        complete() {
           uni.$emit('pageSwitch', false)
        }
    })
}
switchTabBarInterceptor()
// 丟main.js 里面就好了..

跳轉(zhuǎn)封裝大概實(shí)現(xiàn)

export class Jump {
     tabBarPage = []
    /**
     * Jump類(lèi)構(gòu)造函數(shù)
     * @param {Array} tabBar - 底部tab欄的頁(yè)面列表
     */
    constructor(tabBar) {
        this.tabBarPage = tabBar
    }

    /**
     * 將傳入的參數(shù)轉(zhuǎn)化成URL參數(shù)字符串
     * @param {Object} params - 需要轉(zhuǎn)化的參數(shù)對(duì)象
     * @returns {string} - 轉(zhuǎn)化后的URL參數(shù)字符串
     */
    parseParams(params) {
        return Object.entries(params).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&')
    }

    /**
     * 跳轉(zhuǎn)到某一個(gè)頁(yè)面
     * @param {string} url - 需要跳轉(zhuǎn)的頁(yè)面路徑
     * @param {Object} params - 需要傳遞的參數(shù)對(duì)象
     */
    push(url, params = {}) {
        const urlWithParams = Object.keys(params).length ? `${url}?${this.parseParams(params)}` : url
        const isTabBarPage = this.tabBarPage.some(page => page === url)

        if (isTabBarPage) {
            // 還是老樣子，在跳轉(zhuǎn)之前開(kāi)啟loading
            uni.$emit('pageSwitch', true)
            uni.switchTab({ url: urlWithParams })
        }
        else {
            uni.navigateTo({ url: urlWithParams })
        }
    }
}

掛載一手方便使用

/**
 * @typedef {Object} Vue
 * @property {Jump} $jump - 跳轉(zhuǎn)類(lèi)實(shí)例
 */
Vue.prototype.$jump = new Jump(['/pages/index/index', '/pages/my/my'])

請(qǐng)求關(guān)閉loading

在統(tǒng)一管理請(qǐng)求的時(shí)候就確定好哪些api是可以關(guān)閉loading的

// request.js
class Http {
    ...
    request(..., closeLoading = false) {
        // ...
        uni.request({
            complete() {
                if(closeLoading) uni.$emit('pageSwitch', false)
            }
        })
        // ...
    }
}

// api.js
const http = new Http()
const fetchOrderList = () => http.request(..., true)

總結(jié)

到此這篇關(guān)于uniapp自定義頁(yè)面跳轉(zhuǎn)loading的文章就介紹到這了,更多相關(guān)uniapp自定義頁(yè)面跳轉(zhuǎn)loading內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！