默认加载动画是这样
我这里使用的方法是获取到指定页面的实例对象,然后对他页面地址进行判断,当不是指定页面时才去执行全局的加载动画
//先把接口暴露出去
// 测试接口
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'&¤tPage.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)
}
}
tabbar一级页面不想要小程序自带的加载动画,自己自定义了一个动画组件
创建一个动画组件为loading.vue,在使用的页面引入并挂载
import Loading from "../loading"
components:{
Loading
},
data(){
return{
isShow:false//动画开关 默认不显示
}
},
//常见场景
//下拉刷新的时候需要将isShow设置为true
//切换页面更改了定位之后回到首页也需要设置为true
//请求页面数据时候也需要设置为true
//数据请求成功并处理赋值之后设置为false
//数据请求超时也设置为false
}
页面中使用
<Loading v-if="isShow"></Loading>