<!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>
<!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>
<script src="../../lib/vue.js"></script>
<script src="../../lib/axios.js"></script>
</head>
<style>
.swiper-container{
width:600px;
height: 300px;
}
</style>
<body>
<div id="app">
<swiper :key="datalist.length" :myoptions="{loop:true}">
<!--
<div class="swiper-slide">
<img src="https://pic.maizuo.com/usr/movie/57cb9b5889ea70e6ec5da639e1452583.jpg?x-oss-process=image/quality,Q_70"/>
</div>
<div class="swiper-slide">
<img src="https://pic.maizuo.com/usr/movie/cb67c23e8e9124cfb44e222297907b0e.jpg?x-oss-process=image/quality,Q_70"/>
</div>
<div class="swiper-slide">
<img src="https://pic.maizuo.com/usr/movie/6655766a79fd9ac6b41715cf9a1f3aad.jpg?x-oss-process=image/quality,Q_70"/>
</div> -->
<div class="swiper-slide" v-for="data in datalist">
{{data}}
</div>
<template #pagination>
<div class="swiper-pagination"></div>
</template>
</swiper>
</div>
<script>
Vue.component("swiper",{
props:["myoptions"],
template:`
<div class="swiper-container kerwin">
<div class="swiper-wrapper">
<slot></slot>
</div>
<slot name="pagination"></slot>
</div>
`,
mounted(){
console.log(this.myoptions)
new Swiper(".kerwin",{
loop:true,
pagination: {
el: '.swiper-pagination',
},
})
}
})
new Vue({
el:"#app",
data:{
datalist:[],
},
mounted(){
setTimeout(()=>{
this.datalist=["aaa","bbb","ccc"]
},2000)
}
});
</script>
</body>
</html>
自定義指定：