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外链的页面需要注意配置它的大小尺寸
标签：vue,轮播,img,100%,slider,currentIndex,left,页面 来源： https://www.cnblogs.com/zbbk/p/15043865.html