<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./swiper/css/swiper.css" />
<script src="./swiper/js/swiper.js"></script>
</head>
<style>
.kerwin {
width: 600px;
height: 300px;
background: yellow;
}
</style>
<body>
<div class="swiper-container kerwin">
<div class="swiper-wrapper">
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script>
//模擬ajax
setTimeout(()=>{
var list= ["aaaa","bbbb","cccc"]
var newlist = list.map(item=>`<div class="swiper-slide">${item}</div>`)
var owraper = document.querySelector(".swiper-wrapper")
owraper.innerHTML = newlist.join("")
// console.log(newlist)
//初始化
new Swiper(".kerwin",{
loop:true,
// direction:"vertical",
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
})
},2000)
</script>
</body>
</html>
vue-swiper
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
<link rel="stylesheet" href="./swiper/css/swiper.css" />
<script src="./swiper/js/swiper.js"></script>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<body>
<div id="app">
<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>
</div>
<script>
new Vue({
el:"#app",
data:{
datalist:[],
},
mounted(){
setTimeout(()=>{
this.datalist = ["aaaa","bbbbb","ccccc"]
//狀態立即被改變， dom異步更新
console.log("mouted",document.querySelectorAll(".swiper-slide").length)
},2100);
},
updated() {
console.log("updated",document.querySelectorAll(".swiper-slide").length)
new Swiper(".kerwin",{
loop:true,
// direction:"vertical",
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
})
},
});
</script>
</body>
</html>