封装一个可以复用的异步后台请求的轮播组件。
前提：需要用到swiper第三方插件。
https://www.swiper.com.cn/
当然可以自己写，但有轮子的情况下，自然先用现成的。
静态展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="lib/swiper/css/swiper.css">
<script src="lib/swiper/js/swiper.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container kerwin">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 11111</div>
<div class="swiper-slide">Slide 22222</div>
<div class="swiper-slide">Slide 333333</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div>
--> </div>
<script type="text/javascript">
new Swiper ('.kerwin',{
pagination: {
el: '.swiper-pagination',
},
// direction: 'vertical',
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
</body>
</html>
动态展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="lib/swiper/css/swiper.css">
<script src="lib/swiper/js/swiper.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container kerwin">
<div class="swiper-wrapper">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<script type="text/javascript">
setTimeout(() => {
var list=["111","222","333","4444"]
var owrapper = document.getElementsByClassName("swiper-wrapper")[0];
var olist= list.map(item=>`<div class="swiper-slide">${item}</div>`);
console.log(olist.join(""));
owrapper.innerHTML = olist.join("");
new Swiper ('.kerwin',{
pagination: {
el: '.swiper-pagination',
},
// direction: 'vertical',
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
}, 2000)
</script>
</body>
</html>
vue-swiper
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<link rel="stylesheet" href="lib/swiper/css/swiper.css">
<script src="lib/swiper/js/swiper.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div id="box">
<div class="swiper-container kerwin">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in datalist">
{{data}}
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
datalist:[]
},
mounted(){
setTimeout(() => {
this.datalist=["111","222","333"]
//数据更新完了 === dom更新完了吗？ no 这个过程是异步
// var oslide= document.querySelector(".swiper-slide");
// console.log(oslide);
}, 2000)
},
updated(){
// var oslide= document.querySelectorAll(".swiper-slide");
// console.log(oslide);
new Swiper ('.kerwin',{
pagination: {
el: '.swiper-pagination',
},
// direction: 'vertical',
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
}
})
</script>
</body>
</html>
这里需要考虑到生命周期，初始化必须在dom更新之后执行
vue-swiper组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<link rel="stylesheet" href="lib/swiper/css/swiper.css">
<script src="lib/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide img{
width: 100%;
}
</style>
</head>
<body>
<div id="box">
<swiper>
<div class="swiper-slide" v-for="data in datalist">
<img :src="data.imgUrl" />
</div>
</swiper>
</div>
<script type="text/javascript">
Vue.component("swiper",{
template:`<div class="swiper-container kerwin">
<div class="swiper-wrapper">
<slot></slot>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>`,
updated(){
console.log("新的数据插入插槽了")
new Swiper ('.kerwin',{
pagination: {
el: '.swiper-pagination',
},
// direction: 'vertical',
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
}
})
}
})
var vm = new Vue({
el:"#box",
data:{
datalist:[]
},
mounted(){
// setTimeout(() => {
// this.datalist=["111","222","333"]
// //数据更新完了 === dom更新完了吗？ no 这个过程是异步
// // var oslide= document.querySelector(".swiper-slide");
// // console.log(oslide);
// }, 2000)
axios({
url:"https://m.maizuo.com/gateway?type=2&cityId=110100&k=97815",
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154277371928424093566579"}',
'X-Host': 'mall.cfg.common-banner'
}
}).then(res=>{
console.log(res.data);
this.datalist= res.data.data
})
}
})
</script>
</body>
</html>
```+++++
网友评论