逻辑论坛里另外一个大神分享计划将更加开放空间

逻辑论坛里另外一个大神分享的代码里抄的

1. <template>
   
2.   <div class="certify">
   
3.     <swiper :options="swiperOption" ref="mySwiper">
   
4.       <swiper-slide class="swiper-slide">
   
5.         <img src="images/certify01.png">
   
6.       </swiper-slide>
   
7.       <swiper-slide class="swiper-slide">
   
8.         <img src="images/certify01.png">
   
9.       </swiper-slide>
   
10.       <swiper-slide class="swiper-slide">
    
11.         <img src="images/certify01.png">
    
12.       </swiper-slide>
    
13.       <swiper-slide class="swiper-slide">
    
14.         <img src="images/certify01.png">
    
15.       </swiper-slide>
    
16.       <swiper-slide class="swiper-slide">
    
17.         <img src="images/certify01.png">
    
18.         <div class="all_text">全部&gt;</div>
    
19.       </swiper-slide>
    
20.     </swiper>
    
21.   </div>
    
22. </template>
    
23. <script>
    
24. import { swiper, swiperSlide } from "vue-awesome-swiper";
    
25. import "swiper/dist/css/swiper.css";
    
26. export default {
    
27.   components: {
    
28.     swiper,
    
29.     swiperSlide
    
30.   },
    
31. 
    
32.   data() {
    
33.     return {
    
34.       swiperOption: {
    
35.         watchSlidesProgress: true,
    
36.         slidesPerView: "auto",
    
37.         centeredSlides: true,
    
38.         loop: false,
    
39.         loopedSlides: 5,
    
40.         autoplay: false,
    
41. 
    
42.       }
    
43.     };
    
44.   },
    
45.   computed: {
    
46.     swiper() {
    
47.       return this.$refs.mySwiper.swiper;
    
48.     }
    
49.   },
    
50.   mounted() {
    
51.     this.swiper.on("progress", function() {
    
52.       for (let i = 0; i < this.slides.length; i++) {
    
53.         let slide = this.slides.eq(i);
    
54.         let slideProgress = this.slides[i].progress;
    
55.         let modify = 1;
    
56.         if (Math.abs(slideProgress) > 1) {
    
57.           modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
    
58.         }
    
59.         let translate = slideProgress * modify * 260 + "px";
    
60.         let scale = 1 - Math.abs(slideProgress) / 5;
    
61.         let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
    
62.         slide.transform("translateX(" + translate + ") scale(" + scale + ")");
    
63.         slide.css("zIndex", zIndex);
    
64.         slide.css("opacity", 1);
    
65.         if (Math.abs(slideProgress) > 3) {
    
66.           slide.css("opacity", 0);
    
67.         }
    
68.       }
    
69.     });
    
70.     this.swiper.on("setTransition", function(transition) {
    
71.       for (var i = 0; i < this.slides.length; i++) {
    
72.         var slide = this.slides.eq(i);
    
73.         slide.transition(transition);
    
74.       }
    
75.     });
    
76.   }
    
77. };
    
78. </script>
    
79. <style>
    
80. .certify {
    
81.   position: relative;
    
82.   width: 375px;
    
83.   margin: 0 auto;
    
84. }
    
85. 
    
86. .certify .swiper-slide {
    
87.   position: relative;
    
88.   width: 30vw;
    
89.   height: 150px;
    
90.   background: #fff;
    
91.   box-shadow: 0 2px 4px #ddd;
    
92. }
    
93. .certify .swiper-slide img {
    
94.   display: block;
    
95.   width: 100%;
    
96.   height: 100%;
    
97. }
    
98. 
    
99. .all_text {
    
100.   position: relative;
     
101.   top: -50%;
     
102. }
     
103. </style>
     
104. 
     

复制代码

这是完整的代码

比如最后一个 全部 跑到第一项去了