アプレット グローバル インターフェイス ファイルでは、指定されたページでの読み込みアニメーションの表示が制限されます。

デフォルトのローディングアニメーションはこんな感じ

ここで使用する方法は、指定したページのインスタンスオブジェクトを取得してページアドレスを判断し、指定したページ以外の場合のみグローバルローディングアニメーションを実行する方法です。

//先把接口暴露出去
// 测试接口
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)
	}
}

タブバーの第 1 レベルのページは、アプレットに付属する読み込みアニメーションを必要とせず、アニメーション コンポーネントをカスタマイズします。

アニメーションコンポーネントをloading.vueとして作成し、インポートして使用するページにマウントします

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

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

ページ内で使用されている

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