原生JavaScript使用Swiper
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/swiper/css/swiper.css">
<script src="./lib/swiper/js/swiper.js"></script>
<style>
.swiper-slide {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 通过js创建dom节点 -->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<script>
// 模拟ajax异步请求
setTimeout(()=>{
// 接收的请求数据
let list = ["111", "222", "3333"]
// 创建dom节点
let newList = list.map((item)=>`<div class="swiper-slide">${item}</div>`)
document.querySelector(".swiper-wrapper").innerHTML = newList.join("")
// 初始化Swiper
new Swiper ('.swiper-container', {
loop: true, // 循环模式选项
// direction: 'vertical', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 自动轮播
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
})
})
</script>
</body>
</html>
Vue中使用Swiper+axios获取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/swiper/css/swiper.css">
<script src="./lib/swiper/js/swiper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<script src="./lib/vue.js"></script>
<div id="app">
<!-- key值开始是零 swiper初始化是没用的 -->
<!-- 数据变化后 key不一样 算法就会重新创建新的swiper -->
<Swiper :key="dataList.length">
<div class="swiper-slide" v-for="data of dataList">
<img :src="datalist.imgUrl" alt="" srcset="">
</div>
</Swiper>
</div>
<script>
Vue.component("Swiper",{
template: `
<div class="swiper-container">
<div class="swiper-wrapper">
<slot></slot>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
`,
mounted() {
// 初始化Swiper
new Swiper ('.swiper-container', {
loop: true, // 循环模式选项
// direction: 'vertical', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 自动轮播
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
})
},
})
new Vue({
el: "#app",
data:{
dataList: []
},
mounted() {
// 异步获取数据
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>
