swiper7- 30. 开启轮播图片懒加载 

  1 <template>
  2   <div
  3     style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
  4     class="swiper mySwiper"
  5   >
  6     <div class="swiper-wrapper">
  7       <div class="swiper-slide">
  8         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
  9         <img data-src="images/nature-1.jpg" class="swiper-lazy" />
 10         <!-- Preloader image -->
 11         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 12       </div>
 13       <div class="swiper-slide">
 14         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
 15         <img data-src="images/nature-2.jpg" class="swiper-lazy" />
 16         <!-- Preloader image -->
 17         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 18       </div>
 19       <div class="swiper-slide">
 20         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
 21         <img data-src="images/nature-3.jpg" class="swiper-lazy" />
 22         <!-- Preloader image -->
 23         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 24       </div>
 25       <div class="swiper-slide">
 26         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
 27         <img data-src="images/nature-4.jpg" class="swiper-lazy" />
 28         <!-- Preloader image -->
 29         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 30       </div>
 31       <div class="swiper-slide">
 32         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
 33         <img data-src="images/nature-5.jpg" class="swiper-lazy" />
 34         <!-- Preloader image -->
 35         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 36       </div>
 37       <div class="swiper-slide">
 38         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
 39         <img data-src="images/nature-6.jpg" class="swiper-lazy" />
 40         <!-- Preloader image -->
 41         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 42       </div>
 43       <div class="swiper-slide">
 44         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
 45         <img data-src="images/nature-7.jpg" class="swiper-lazy" />
 46         <!-- Preloader image -->
 47         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 48       </div>
 49       <div class="swiper-slide">
 50         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
 51         <img data-src="images/nature-8.jpg" class="swiper-lazy" />
 52         <!-- Preloader image -->
 53         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 54       </div>
 55       <div class="swiper-slide">
 56         <!-- Required swiper-lazy class and image source specified in data-src attribute -->
 57         <img data-src="images/nature-9.jpg" class="swiper-lazy" />
 58         <!-- Preloader image -->
 59         <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 60       </div>
 61     </div>
 62     <div class="swiper-button-next"></div>
 63     <div class="swiper-button-prev"></div>
 64     <div class="swiper-pagination"></div>
 65   </div>
 66   <!-- 开启轮播图片懒加载 -->
 67 </template>
 68 <script>
 69 import Swiper from "swiper/swiper-bundle.min.js";
 70 import "swiper/swiper-bundle.min.css";
 71 
 72 export default {
 73   components: {},
 74   methods: {},
 75   mounted() {
 76     this.$nextTick(() => {
 77       // 创建swiper对象
 78       var swiper = new Swiper(".mySwiper", {
 79         lazy: true,
 80         pagination: {
 81           el: ".swiper-pagination",
 82           clickable: true,
 83         },
 84         navigation: {
 85           nextEl: ".swiper-button-next",
 86           prevEl: ".swiper-button-prev",
 87         },
 88       });
 89     });
 90   },
 91 };
 92 </script>
 93 
 94 <style>
 95 html,
 96 body {
 97   position: relative;
 98   height: 100%;
 99 }
100 
101 body {
102   background: #eee;
103   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
104   font-size: 14px;
105   color: #000;
106   margin: 0;
107   padding: 0;
108 }
109 .swiper {
110   width: 100%;
111   height: 500px;
112 }
113 .swiper-slide {
114   text-align: center;
115   font-size: 18px;
116   background: #000;
117 }
118 
119 .swiper-slide img {
120   width: auto;
121   height: auto;
122   max-width: 100%;
123   max-height: 100%;
124   -ms-transform: translate(-50%, -50%);
125   -webkit-transform: translate(-50%, -50%);
126   -moz-transform: translate(-50%, -50%);
127   transform: translate(-50%, -50%);
128   position: absolute;
129   left: 50%;
130   top: 50%;
131 }
132 </style>

 

posted @ 2021-12-14 06:38  sky-su  阅读(484)  评论(0)    收藏  举报