<div id="app">
<!-- 因为在main.js中全局引入过了，所以组件可以直接拿来用 -->
<swiper ref="mySwiper" :options="swiperOptions" v-if="imgList.length">
<!-- @click.native 如果组件使用点击事件无效 可以使用修饰符.native 转成原生事件 -->
<swiper-slide
v-for="(v, i) in imgList"
:key="i"
@click.native="goto(v.url)"
>
<img :src="v.imgurl" width="100%" height="100%" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
created: function () {
/* 数据是异步的， 数据还没有到情况下，轮播图组件已经开始加载了，
导致配置无缝轮播的时候效果出不来 怎么办？*/
/* 解决方法：使用条件判断，当数据还没有获取到的时候不加载轮播图，
数据到了，再加载 */
axios.get("/data/imgJson.json").then((res) => {
this.imgList = res.data.imglist;
/* 使用refs的方法 必须要配置$nextTick获取到dom之后再执行slideTo方法 */
/* 在这里使用$nextTick方法 是因为组件是后来有数据的时候加载上去的，
担当于更新了dom的值，这时候想获取dom就必须借助于$nextTick方法 */
this.$nextTick(()=>{
/* 在异步操作里面slideTo第一个参数表示第几张 */
this.$refs.mySwiper.swiper.slideTo(2,1000,false)
})
});
},
methods: {
goto: function (url) {
/* console.log(url) */
/* window.open会打开一个新的窗口 */
window.open(url);
/* location.href在当前页跳转 */
/* location.href = url; */
},
},
data() {
return {
imgList: [],
swiperOptions: {
pagination: {
el: ".swiper-pagination",
},
loop:true,
autoplay: {
delay: 1000,
/* 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。 */
stopOnLastSlide: false,
/* 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 */
disableOnInteraction: false,
},
},
};
},
mounted() {
/* console.log("Current Swiper instance object", this.$refs.mySwiper.swiper); */
/* this.swiper.slideTo(3, 1000, true); */
// console.log(this.$refs.mySwiper.swiper.slideTo(1,1000,false) )
},
};
</script>
<style>
.swiper-container {
width: 700px;
height: 500px;
border: 1px solid red;
}
</style>
