vue加载图标实现loading组件
程序员文章站
2022-09-27 07:58:35
当图片还没加载完成时，可以通过loading组件填充空白区 效果图 components/loading/index.vue
当图片还没加载完成时，可以通过loading组件填充空白区
效果图
components/loading/index.vue
<template>
<div class="mine-loading" :class="{'me-loading-inline':inline}">
<span class="mine-loading-indicator">
<img src="./loading.gif">
</span>
<span class="mine-loading-text" v-if="loadingtext">{{loadingtext}}</span>
</div>
</template>
<script>
export default {
name:"meloading",
props:{//过滤器
inline:{
type:boolean,
default:false
}
},
data(){
return{
loadingtext:"加载中..."
}
}
}
</script>
<style lang="scss" scoped>
.mine-loading{
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
//图文左右排列时
&.me-loading-inline{
flex-direction: row;
.mine-loading-indicator ~ .mine-loading-text{
margin-top:0px;
margin-left:7px;
}
}
// 存在.mine-loading-indicator和.mine-loading-text时
.mine-loading-indicator ~ .mine-loading-text{
margin-top:7px;
}
}
</style>
记得loading.gif也丢到这个目录里
src/components/slider/index.vue
<template>
<div class="slider-wrap">
<me-loading v-if="!sliders.length" />
<swiper ref="myswiper" :options="swiperoptions">
<swiper-slide v-for="(slider,index) in sliders" :key="index">
<a :href="slider.linkurl">
<img :src="slider.picurl">
</a>
</swiper-slide>
<div class="swiper-pagination" slot="pagination" v-if="sliders.length"></div>
<div class="swiper-button-prev" slot="button-prev" v-if="sliders.length"></div>
<div class="swiper-button-next" slot="button-next" v-if="sliders.length"></div>
</swiper>
</div>
</template>
<script>
import { swiper, swiperslide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import { getsliders } from 'api/slider';
import meloading from 'components/loading';
export default {
name:"slider",
title: 'autoplay',
components:{
swiper,
swiperslide,
meloading
},
data() {
return {
sliders:[],
swiperoptions: {
spacebetween: 30,
centeredslides: true,
autoplay: {
delay: 2500,
disableoninteraction: false
},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextel: '.swiper-button-next',
prevel: '.swiper-button-prev'
}
}
}
},
created(){
//一般在created里获取远程数据
this.getsliders();
},
computed: {
swiper() {
return this.$refs.myswiper.$swiper;
}
},
mounted() {
//console.log('current swiper instance object', this.swiper);
this.swiper.slideto(3, 1000, false);
},
methods:{
getsliders(){
return getsliders().then(data=>{
//console.log(data);
this.sliders=data;
});
}
}
}
</script>
<style lang="scss" scoped>
.swiper-container{
width:100%;
height:180px;
}
.slider-wrap{
height:180px;
}
.swiper-slide a{
display:block;
width:100%;
height:100%;
& img{
width:100%;
height:100%;
}
}
</style>
上一篇： python学习之由