vue中使用swiper把页面组装成轮播-轮播自适应高度的页面

需求:有三个页面:index1,index2,iframe外链页面。

这三个页面分别配置的有各自的路由。除了iframe页面,其它两个页面分别都有自己的各种组件组装而成,第二个页面的banner显示两个地图轮播:

正常组件cursor进行地图banner轮播。index页面因为高度是自适应的,使用a-cursor 进行轮播是显示不出来的,因为没有固定高度。

就是用了swiper组件进行组装页面:

实现代码:

首先是最外层的lunbo页面:专门进行轮播插件引用(可以改造成其它轮播组件进行轮播):

 1 <template>
 2     <div style="height:100%;">
 3         <mySwiperCom></mySwiperCom>  
 4     </div>
 5 </template>
 6 <script>
 7 import mySwiperCom from './mySwiperCom.vue'
 8 import index1 from "./index.vue";
 9 import index2 from "./index2.vue";
10 export default {
11     name : "lunbo",
12      data() {
13         return {
14             autoplaySpeed:4000
15         }
16     },
17     components:{
18         index1,index2,
19         mySwiperCom
20     }
21 }
22 </script>
23 <style scoped="scoped">
24 html,body{
25       height: 100%;
26     width: 100%;
27     margin: 0px;
28     padding: 0px;
29     visibility: visible;
30 }
31 </style>

重点代码:swiper组件-swiper的配置可以具体根据需求在这里配:

其中 imgList 可以放到date内,如果添加轮播元素就先添加数组元素:

需要注意背景图公用地图底色rell类的添加

  1 <template>
  2   <div class="slider-container rell">
  3     <div
  4       class="img-slider-touchwindow"
  5       @touchstart="touchstart"
  6       @touchmove="touchmove"
  7       @touchend="touchend"
  8     >
  9       <transition
 10         name="img-slider"
 11         tag="div"
 12         :enter-class="enterClass"
 13         :leave-active-class="leaveActiveClass"
 14         :enter-active-class="enterActiveClass"
 15       >
 16         <div
 17           v-for="(item, i) in imgList"
 18           :key="i"
 19           v-if="i === currentIndex - 1"
 20           class="img-slider-bar"
 21         >
 22           <div v-if="i == 0" class="bg1">
 23             <index1></index1>
 24           </div>
 25           <div v-if="i == 1">
 26             <index2></index2>
 27           </div>
 28           <div v-if="i == 2">
 29             <iframe
 30               class="iframeStyle"
 31               width="1900"
 32               height="1200"
 33               v-bind:src="iframSrc"
 34             ></iframe>
 35           </div>
 36         </div>
 37       </transition>
 38     </div>
 39     <ul ref="imgSliderDirection" class="img-slider-direction">
 40       <li class="img-slider-direction-left" @click="pre()">
 41         <svg
 42           class="img-slider-direction-left-icon"
 43           width="30px"
 44           height="30.00px"
 45           viewBox="0 0 1024 1024"
 46           version="1.1"
 47           xmlns="http://www.w3.org/2000/svg"
 48         >
 49           <path
 50             fill="#ffffff"
 51             d="M481.233 904c8.189 0 16.379-3.124 22.628-9.372 12.496-12.497 12.496-32.759 0-45.256L166.488 512l337.373-337.373c12.496-12.497 12.496-32.758 0-45.255-12.498-12.497-32.758-12.497-45.256 0l-360 360c-12.496 12.497-12.496 32.758 0 45.255l360 360c6.249 6.249 14.439 9.373 22.628 9.373z"
 52           />
 53         </svg>
 54       </li>
 55       <li class="img-slider-direction-right" @click="next()">
 56         <svg
 57           class="img-slider-direction-right-icon"
 58           width="30px"
 59           height="30.00px"
 60           viewBox="0 0 1024 1024"
 61           version="1.1"
 62           xmlns="http://www.w3.org/2000/svg"
 63         >
 64           <path
 65             fill="#ffffff"
 66             d="M557.179 904c-8.189 0-16.379-3.124-22.628-9.372-12.496-12.497-12.496-32.759 0-45.256L871.924 512 534.551 174.627c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0l360 360c12.496 12.497 12.496 32.758 0 45.255l-360 360c-6.249 6.249-14.439 9.373-22.628 9.373z"
 67           />
 68         </svg>
 69       </li>
 70     </ul>
 71     <ul class="img-slider-dots">
 72       <li
 73         v-for="(dot, i) in imgList"
 74         :key="i"
 75         :class="{ dotted: i === currentIndex - 1 }"
 76         @click="jump(i + 1)"
 77       ></li>
 78     </ul>
 79   </div>
 80 </template>
 81 <script>
 82 import index1 from "./index.vue";
 83 import index2 from "./index2.vue";
 84 export default {
 85   props: {
 86     //initInterval:每张图片轮播的间隔时间,默认3秒,单位秒
 87     initInterval: {
 88       type: Number,
 89       default: 10, //设置默认间隔时间
 90     },
 91     //imgList:需要轮播的图片集合
 92     imgList: {
 93       type: Array,
 94       default: function () {
 95         return [
 96           {
 97             img: "../public/img/X6000",
 98           },
 99           {
100             img: "../public/img/banner/view1.png",
101           },
102           {
103             img: "/public/img/banner/view2.png",
104           },
105         ];
106       },
107     },
108   },
109   data() {
110     return {
111       iframSrc: "", //其它相关页面
112       currentIndex: 1, //当前显示图片的位置
113       direction: -1, //-1从左向右,1从右向左
114       timer: null, //轮播的定时器
115       flag: true, // 节流阀 防止快速滑动
116       startX: 0, // 手指开始触摸位置
117       moveX: 0, // 手指移动距离
118     };
119   },
120   components: {
121     index1,
122     index2,
123   },
124   computed: {
125     enterClass: function () {
126       return this.direction === -1
127         ? "img-slider-enter-left-to-right"
128         : "img-slider-enter-right-to-left";
129     },
130     leaveActiveClass: function () {
131       return this.direction === -1
132         ? "img-slider-leave-active-left-to-right"
133         : "img-slider-leave-active-right-to-left";
134     },
135     enterActiveClass: function () {
136       return "img-slider-enter-active-all";
137     },
138     interval: function () {
139       return this.initInterval * 1000;
140     },
141     isMobile() {
142       return (
143         navigator.userAgent
144           .toLowerCase()
145           .match(
146             /(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i
147           ) != null
148       );
149     },
150   },
151   methods: {
152     pre() {
153       var currentIndex =
154         this.currentIndex - 1 <= 0
155           ? this.imgList.length
156           : this.currentIndex - 1;
157       this.animate(currentIndex, 1);
158     },
159     next() {
160       var currentIndex =
161         this.currentIndex + 1 > this.imgList.length ? 1 : this.currentIndex + 1;
162       this.animate(currentIndex, -1);
163     },
164     jump(idx) {
165       this.animate(idx, this.currentIndex < idx ? -1 : 1);
166     },
167     animate(index, imgDirection) {
168       if (this.timer) {
169         window.clearInterval(this.timer);
170         this.timer = null;
171       }
172 
173       this.direction = imgDirection;
174       this.currentIndex = index;
175 
176       this.timer = window.setInterval(() => {
177         this.currentIndex =
178           this.currentIndex + 1 > this.imgList.length
179             ? 1
180             : this.currentIndex + 1;
181         this.direction = -1;
182       }, this.interval);
183     },
184     play() {
185       if (this.timer) {
186         window.clearInterval(this.timer);
187         this.timer = null;
188       }
189       this.timer = window.setInterval(() => {
190         this.currentIndex =
191           this.currentIndex + 1 > this.imgList.length
192             ? 1
193             : this.currentIndex + 1;
194         this.animate(this.currentIndex, this.direction);
195       }, this.interval);
196     },
197     stop() {
198       window.clearInterval(this.timer);
199       this.timer = null;
200     },
201     init() {
202       this.play();
203       window.onblur = function () {
204         this.stop();
205       }.bind(this);
206       window.onfocus = function () {
207         this.play();
208       }.bind(this);
209     },
210     touchstart(event) {
211       // 手指开始触摸事件
212       window.clearInterval(this.timer); // 关闭自动轮播
213       this.startX = event.targetTouches[0].clientX; // 获取开始触摸位置
214     },
215     touchmove(event) {
216       // 手指开始移动
217       this.moveX = event.targetTouches[0].clientX - this.startX; // 手指移动位置
218     },
219     touchend(event) {
220       // 结束触摸
221       if (this.moveX > 10) this.pre();
222       else if (this.moveX < -10) this.next();
223     },
224   },
225   mounted() {
226     this.init();
227     this.$nextTick(function () {
228       //console.log(this.isMobile);
229       if (this.isMobile) {
230         this.$refs.imgSliderDirection.style.display = "none";
231       }
232     });
233     this.iframSrc = `http://www.sqllzx.com/hiapp/73AF135F06A3EE09/modules/SQmonitor/monitorHome.jsp?authid=66666&authsign=77560d4b63658ffb2e4f86b3c3c8114501715584`;
234   },
235 };
236 </script>
237 <style scoped lang="less">
238 .iframeStyle {
239   position: absolute;
240   left: -50px;
241 }
242 .rell {
243   //这里注意直接放置在全局中 默认轮播公用
244   width: 100%;
245   height: 100%;
246   // background: url("/img/bj@2x.png");
247   background: url("/img/bgBlue.png");
248   padding: 0 38px;
249 }
250 .bg1 {
251   background: red;
252 }
253 .slider-container {
254   width: 100%;
255   height: 100%;
256   overflow: hidden;
257   margin: 0 auto;
258   position: relative;
259 }
260 .img-slider-touchwindow {
261   width: 100%;
262   height: 100%;
263   position: relative;
264 }
265 .img-slider-bar {
266   width: 100%;
267   height: 100%;
268   position: absolute;
269   top: 0;
270   left: 0;
271 }
272 .img-slider-bar img {
273   width: 100%;
274   height: 100%;
275   object-fit: cover;
276 }
277 .img-slider-enter-active-all {
278   transition: all 1s;
279 }
280 .img-slider-leave-active-left-to-right {
281   transition: all 1s;
282   transform: translateX(-100%);
283 }
284 .img-slider-leave-active-right-to-left {
285   transition: all 1s;
286   transform: translateX(100%);
287 }
288 .img-slider-enter-left-to-right {
289   transform: translateX(100%);
290 }
291 .img-slider-enter-right-to-left {
292   transform: translateX(-100%);
293 }
294 ol,
295 ul {
296   list-style: none;
297 }
298 .img-slider-direction-left,
299 .img-slider-direction-right {
300   position: absolute;
301   top: 50%;
302   transform: translateY(-50%);
303   width: 50px;
304   height: 50px;
305   background-color: rgba(0, 0, 0, 0.3);
306   border-radius: 50%;
307   cursor: pointer;
308   z-index: 999999;
309 }
310 .img-slider-direction-left {
311   left: 3%;
312   padding-left: 12px;
313   padding-top: 10px;
314 }
315 .img-slider-direction-right {
316   right: 3%;
317   padding-right: 12px;
318   padding-top: 10px;
319 }
320 
321 .img-slider-dots {
322   position: absolute;
323   bottom: 10px;
324   left: 50%;
325   transform: translateX(-50%);
326 }
327 .img-slider-dots li {
328   display: inline-block;
329   width: 15px;
330   height: 15px;
331   margin: 0 3px;
332   border: 1px solid white;
333   border-radius: 50%;
334   background-color: #333;
335   cursor: pointer;
336 }
337 .img-slider-dots .dotted {
338   background-color: orange;
339 }
340 </style>

具体出的效果:

vue中使用swiper把页面组装成轮播-轮播自适应高度的页面

page2:

vue中使用swiper把页面组装成轮播-轮播自适应高度的页面

page3: 这里是iframe外链的页面需要注意配置它的大小尺寸

vue中使用swiper把页面组装成轮播-轮播自适应高度的页面

上一篇:项目经理(PM)


下一篇:【PM 产品】产品经理的思维方式