当图片还没加载完成时,可以通过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 { name:"Slider" { sliders:[],swiperOptions: { spaceBetween: 30true },loop: '.swiper-button-prev' } } } },created(){ 一般在created里获取远程数据 this.getSliders(); },computed: { swiper() { return .$refs.mySwiper.$swiper; } },mounted() { console.log('Current Swiper instance object',this.swiper); this.swiper.slideTo(3,1000,); },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%; & img{ width:100%; height:100%; } } </style>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。