为什么切换成手机模拟就无法正常使用swiper翻也呢？并且loop设置成true也无法进行循环呢？
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕云游商城</title>
<link rel="stylesheet" href="fonts/iconfont.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/init.css">
<link rel="stylesheet" href="js/swiper-master/package/swiper-bundle.min.css">
</head>
<body>
<div class="index">
<header class="index-header">
<i class="iconfont icon-fangdajing"></i>
<input type="text" placeholder="搜索目的地/折扣/关键字" autocomplete="off" name="words">
</header>
<div class="index-carousel">
<div class="swiper-container">
<div class="swiper-wrapper" id="swiperWrapper">
<!-- <div class="swiper-slide"><a href="###"><img src="images/header-carousel1.png" alt=""></a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div> -->
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<script src="js/swiper-master/package/swiper-bundle.min.js"></script>
<script src="js/index-carousel.js"></script>
<script src="js/indexCarouselAjax.js"></script>
</div>
swiper设置
var mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
ajax
(function(){
var xhr=new XMLHttpRequest();
const url='https://www.imooc.com/api/mall-wepApp/index/slider';
const swiperWrapper=document.getElementById('swiperWrapper')
xhr.onload=function(){
if(xhr.status>=200&&xhr.status<300||xhr.status==304){
console.log(JSON.parse(xhr.response) )
var data=JSON.parse(xhr.response).data;
console.log(data)
for(var item of data){
console.log(item.url);
swiperWrapper.innerHTML+=` <div class="swiper-slide"><a href="###"><img src="${item.url}" alt=""></a></div>`;
console.log(swiperWrapper);
}
}
}
xhr.open('POST',url,true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send();
})()
正在回答 回答被采纳积分+1
同学你好，请求数据是异步操作，有可能实例化之后数据还没有请求回来，就会导致这种情况，建议：数据请求成功之后，再实例化，例子：
<!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="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<style>
body,
div,
ul,
ol,
li,
input,
nav {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul,
ol {
list-style: none;
}
input {
outline: none;
}
body {
font-family: PingFangSC-Regular;
background-color: #F5F5F5;
}
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
img {
vertical-align: top;
}
input::-webkit-input-placeholder {
color: white;
}
input::-moz-placeholder {
color: white;
font-size: 14px;
}
input:-moz-placeholder {
color: white;
font-size: 14px;
}
input:-ms-input-placeholder {
color: white;
font-size: 14px;
}
.index {
overflow-y: auto;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.index-.index-carousel {
width: 100%;
height: 15rem;
}
.swiper-container,
swiper-wrapper,
swiper-slide,
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="index" id="index">
<div class="index-carousel">
<div class="swiper-container">
<div class="swiper-wrapper" id="swiperWrapper"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<script>
(function () {
var xhr = new XMLHttpRequest();
const url = 'https://www.imooc.com/api/mall-wepApp/index/slider';
const swiperWrapper = document.getElementById('swiperWrapper')
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
console.log(JSON.parse(xhr.response))
var data = JSON.parse(xhr.response).data;
console.log(data)
for (var item of data) {
console.log(item.url);
swiperWrapper.innerHTML += ` <div class="swiper-slide"><a href="###"><img src="${item.url}" alt=""></a></div>`;
console.log(swiperWrapper);
}
var mySwiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
})
}
}
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send();
})()
</script>
</body>
</html>祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星