In the applet global interface file, the loading animation is restricted from being displayed on the specified page

The default loading animation is like this
insert image description here

The method I use here is to get the instance object of the specified page, and then judge the page address, and only execute the global loading animation when it is not the specified page

//先把接口暴露出去
// 测试接口
var baseURL='https://aaa.bbb.cn/api/';
// 预发布接口
// var baseURL='https://aaa.bbb.cn/api/';
// 正式接口
 // var baseURL='https://aaa.bbb.cn/api/';
 // let app = getApp();
export default{
    
    
	//我们先定一个uni-app方法 以便于以下操作使用uni-app调取接口时便利
	request(options){
    
    
		console.log(options,'我是个啥')
		///我们使用Promise方法来实现调用接口时后面多个.then()的方法
		//只有Promise能实现如同$axios后面连续多个.then()的方法
		// 获取当前页面的实例对象
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
	 	return new Promise((reslove,reject)=>{
    
    
			// 需要调用 uni.showLoading 的地方
			if (currentPage.route != 'pages/index/index'&&currentPage.route != 'pages/brandCoupon/brandCoupon') {
    
    
			  uni.showLoading({
    
    
			    title: '加载中'
			  })
			}
			uni.request({
    
    
				...options,
				success:res=>{
    
    
					//判断我们在使用封装的自定义时第三个参数是否为native
					//当native为true时 我们返回原数据
					uni.hideLoading()
					// app.isShow = false
					if(options.native){
    
    
						reslove(res)
					}
					//当native为false时 我们直接返回data中的数据
					if(res.statusCode === 200){
    
    
						reslove(res.data)
					}else{
    
    
						console.log(res)
						if (res.data.error.message == 'Token has expired' && res.data.error.status_code == 401) {
    
    
							let app = getApp()
							app.get_token()
						}
						//加入接口参数错误或接口地址错误时 我们返回原错误提示
						reject(res)
					}
				},
				fail: res=> {
    
    
					console.log(res)
					uni.hideLoading()
					// app.isShow = false
				}
			})
		})
	},
	//在方法中 第二个参数和第三个参数用ES6新语法来添加默认值
	//接口调取get方法
	get(url,data={
    
    },options={
    
    }){
    
    
		//我们把传过来的参数赋给options,这样我们在使用uni-app
		//this.request()方法时 传递一个参数就可以
		options.url = baseURL + url;
		options.data = {
    
    
			version: '251',
			client: 'wxmp',
			...data
		};
		options.method = 'get';
		//调用上面自己定义的this.request()方法传递参数
		return this.request(options)
	},
	//接口调取post方法
	post(url,data={
    
    },options={
    
    }){
    
    
		options.url = baseURL + url;
		options.data = {
    
    
			version: '251',
			client: 'wxmp',
			...data
		};
		options.method = 'post';
		return this.request(options)
	}
}

The tabbar first-level page does not want the loading animation that comes with the applet, and customizes an animation component.
insert image description here

Create an animation component as loading.vue, import and mount it on the used page

import Loading from "../loading"
components:{
    
    
	Loading
},
data(){
    
    
	return{
    
    
		isShow:false//动画开关  默认不显示
	}
},
//常见场景
//下拉刷新的时候需要将isShow设置为true
//切换页面更改了定位之后回到首页也需要设置为true
//请求页面数据时候也需要设置为true

//数据请求成功并处理赋值之后设置为false
//数据请求超时也设置为false
}

used in the page

<Loading v-if="isShow"></Loading>

Guess you like

Origin blog.csdn.net/qq_47272950/article/details/130624189