uni-app实现加载公用组件的封装
App启动时可以根据业务需求添加加载进入~~,下面自己封装一个可全局使用的加载组件。创建组件:components/view-loader.vue<template><view><view class="fidex-loang" v-if="myloader"><view class="jiazai-view"><image class="lo
·
App启动时可以根据业务需求添加加载进入~~,下面自己封装一个可全局使用的加载组件。
创建组件:components/view-loader.vue
<template>
<view>
<view class="fidex-loang" v-if="myloader">
<view class="jiazai-view">
<image class="loang-jiazai" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577526765025&di=0ffa7fc92e51564c527cb3fa82ff4e5f&imgtype=0&src=http%3A%2F%2Fhbimg.huabanimg.com%2F23907369b8a233f4b426d739875621c6b0fc248a1d28c-8V4M0p_fw658"></image>
<image class="loand-logo" src="/static/logo.png"></image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "view-loader",
props:["myloader"],
}
</script>
<style lang='scss'>
.fidex-loang{
position: fixed;
top: 0;
left: 0;
background: #fbfbfb;
z-index: 10000000000;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.jiazai-view{
position:relative;
}
.fidex-loang .loand-logo{
position:absolute;
top:150rpx;
left:150rpx;
border-radius: 50%;
width: 100rpx;
height: 100rpx;
}
.fidex-loang .loang-jiazai{
width:400rpx;
height:400rpx;
}
</style>
全局注册:main.js
import viewLoader from './components/view-loader.vue';
Vue.component('view-loader',viewLoader);
实例应用:
<template>
<view >
<view-loader :myloader ="myloader"></view-loader>
</view>
</template>
<script>
export default {
data() {
return {
myloader:true
}
},
onLoad() {
},
methods: {
myloaderTimeout(){
var clearMyloaderTimeout = setTimeout(function(){
that.myloader =true;
},1000);
return clearMyloaderTimeout;
},
fneleiindezz(index,id){
var that = this;
//实际调用中请与ajax返回为准
// let returnclear = that.myloaderTimeout();
this.fneleiindez = index;
// console.log(id)
if(id!=null){
this.$ajax({
url: '/product/getTbProductTypeList.do',
data: {
"parentId":id,
},
success: function(res) {
// console.log(returnclear)
// window.clearTimeout(returnclear);
that.myloader =false;
var list = res.data.list;
that.zhuantop = list;
that.list = [];
that.noMore =false;
that.curPage = 1;
that.scrollTop();
that.id = id;
that.getproduct(id)
}
});
}
}
}
}
</script>
<style>
</style>
效果预览:
更多推荐
已为社区贡献7条内容
所有评论(0)