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>
具体出的效果：
page2:
page3: 这里是iframe外链的页面需要注意配置它的大小尺寸
