Vue.js
自己写的轮播图在手机浏览器上需要刷新一下才能正确显示？
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
<template>
<div class="lunbo_div" ref="lunbo_div" :style="{height:lunbo_div_height+'px'}">
<div class="lunbo_box">
<v-touch v-on:swipeleft="next" v-on:swiperight="pre">
<ul
class="lb_ul"
ref="lb_ul"
:style="{width:lb_ul_width+'px'}"
@mouseenter="stop_lb"
@mouseleave="start_lb"
>
<li
class="lb_li"
:style="{width:lb_li_width+'px'}"
v-for="(item,index) in images"
:key="index"
>
<img :src="item.src" />
<div class="text_area_bg"></div>
<div class="text_area">{{item.title}}</div>
</li>
<li class="lb_li" :style="{width:lb_li_width+'px'}">
<img :src="images[0].src" />
<div class="text_area_bg"></div>
<div class="text_area">{{images[0].title}}</div>
</li>
<div class="clearfix"></div>
</ul>
</v-touch>
<div class="pagenation_dotted">
<div
v-for="(item,index) in images"
:key="index"
:class="{'dot current_dot_bg':item.current,'dot default_dot_bg':!item.current}"
@click="clickDot(index)"
></div>
</div>
</div>
<div class="pre_nav" @click="pre" v-show="images.length>2">
<i class="iconfont"></i>
</div>
<div class="next_nav" @click="next" v-show="images.length>2">
<i class="iconfont"></i>
</div>
</div>
</template>
<script>
import Velocity from "velocity-animate";
export default {
name: "myslider",
components: {
// touchRipple
},
data() {
return {
images: [
{ src: "/img/01.jpg", title: "01", current: true },
{ src: "/img/02.jpg", title: "02", current: false },
{ src: "/img/03.jpg", title: "03", current: false }
],
currentIdx: 0,
lb_ul_width: 0,
lb_li_width: 0,
interval: 3000,
move_distance: 0,
ml_total_distance: 0,
stop_SIT: 0,
imgsHeight: []
};
},
computed: {
lunbo_div_height() {
if (this.imgsHeight.length) {
return this.imgsHeight[this.currentIdx];
} else {
return 300;
}
}
},
mounted() {
this.init();
window.onresize = () => {
this.init();
};
},
methods: {
// 初始化轮播图
init() {
this.lb_ul_width =
(this.images.length + 1) * this.$refs.lunbo_div.clientWidth;
this.lb_li_width = this.$refs.lunbo_div.clientWidth;
let lb_ul_children = this.$refs.lb_ul.children;
let imgsHeight = [];
for (let i = 0; i < this.images.length; i++) {
let naturalWidth = lb_ul_children[i].children[0].naturalWidth;
let naturalHeight = lb_ul_children[i].children[0].naturalHeight;
let imgHeight = (this.lb_li_width * naturalHeight) / naturalWidth;
imgsHeight.push(imgHeight);
}
imgsHeight.push(imgsHeight[0]);
this.imgsHeight = imgsHeight;
this.move_distance = this.lb_li_width;
this.start_lb();
},
// 上一张
pre() {
this.stop_lb();
this.currentIdx--;
this.run();
},
// 下一张
next() {
this.stop_lb();
this.currentIdx++;
this.run();
},
clickDot(dotIndex) {
this.stop_lb();
this.currentIdx = dotIndex;
this.run();
},
stop_lb() {
clearInterval(this.stop_SIT);
},
run() {
if (this.images.length < 3) {
return;
}
let dom = this.$refs.lb_ul;
Velocity(dom, "stop");
let lunbo_items = this.images.length + 1;
if (this.currentIdx < 0) {
let max_ml_total_distance =
"-" + this.move_distance * (lunbo_items - 1) + "px";
this.currentIdx = lunbo_items - 2;
this.ml_total_distance =
"-" + this.move_distance * this.currentIdx + "px";
Velocity(
dom,
// 从max_ml_total_distance 开始 到this.ml_total_distance结束
{ translateX: [this.ml_total_distance, max_ml_total_distance] },
{ duration: "normal" }
);
} else if (this.currentIdx < lunbo_items) {
this.ml_total_distance =
"-" + this.move_distance * this.currentIdx + "px";
Velocity(
dom,
{ translateX: this.ml_total_distance },
{ duration: "normal" }
);
} else {
this.currentIdx = 1;
Velocity(
dom,
// 从0开始到-this.move_distance结束
{ translateX: [-this.move_distance, 0] },
{ duration: "normal" }
);
}
if (this.currentIdx == lunbo_items - 1) {
for (let i = 0; i < this.images.length; i++) {
if (i == 0) {
this.images[i].current = true;
} else {
this.images[i].current = false;
}
}
} else {
for (let i = 0; i < this.images.length; i++) {
if (i == this.currentIdx) {
this.images[i].current = true;
} else {
this.images[i].current = false;
}
}
}
},
start_lb() {
clearInterval(this.stop_SIT);
if (this.images.length > 2) {
this.stop_SIT = setInterval(() => {
this.currentIdx++;
this.run();
}, this.interval);
}
}
}
};
</script>
<style scoped>
.lunbo_div {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
border: solid 5px #ddaadd;
}
.lunbo_div .lunbo_box {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.lunbo_div .lunbo_box .lb_ul {
position: relative;
padding: 0;
margin-top: 0;
list-style: none;
}
.lunbo_div .lunbo_box .lb_ul .lb_li {
position: relative;
float: left;
height: auto;
text-align: center;
}
.lunbo_div .lunbo_box .lb_ul .lb_li img {
width: 100%;
margin: 0;
border: none;
height: auto;
}
.lunbo_div .lunbo_box .lb_ul .lb_li .text_area_bg {
position: absolute;
width: 100%;
height: 25px;
background: #000000;
opacity: 0.5;
bottom: 0;
}
.lunbo_div .lunbo_box .lb_ul .lb_li .text_area {
position: absolute;
width: 100%;
height: 25px;
color: #fff;
bottom: 0;
line-height: 25px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12px;
text-align: left;
}
.lunbo_div .lunbo_box .pagenation_dotted {
position: absolute;
width: 100%;
height: 10px;
line-height: 10px;
text-align: center;
top: 10px;
}
.lunbo_div .lunbo_box .pagenation_dotted .dot {
width: 10px;
height: 10px;
cursor: pointer;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.lunbo_div .lunbo_box .default_dot_bg {
background: #909eaa;
}
.lunbo_div .lunbo_box .current_dot_bg {
background: #fff;
}
.lunbo_div .pre_nav,
.next_nav {
position: absolute;
width: 20px;
height: 20px;
background: #000000;
opacity: 0.5;
cursor: pointer;
color: #fff;
text-align: center;
line-height: 20px;
border-radius: 50%;
top: 0;
bottom: 0;
margin: auto;
}
.lunbo_div .pre_nav {
left: 5px;
}
.lunbo_div .next_nav {
right: 5px;
}
.lunbo_div .pre_nav:hover,
.lunbo_div .next_nav:hover {
opacity: 0.7;
}
.clearfix {
clear: both;
width: 0;
height: 0;
}
</style>
自己写的是高度自适应的轮播图
第一次用手机浏览器打开
浏览器刷新后的效果
