-
使用swiper插件生成轮播图, 图片卡死不能滑动的bug
原因: 数据还没有渲染完成, 已经创建了Swiper对象
解决办法: 请求回来的数据是banners, 在watch中监视banners, 使用vue的$nextTick回调方法,在数据加载完成就执行里面的代码
watch: {
banners(value) {
// 界面更新执行$nextTick()立即创建swiper对象
this.$nextTick(() => {
var bannerSwiper = new Swiper(".swiper-banner", {
// 循环播放
loop: true,
// 自动播放
autoplay: {
delay: 2500,
disableOnInteraction: false
},
// 小圆点
pagination: {
el: ".banner_pagination"
}
});
});
}
}
<button id="button2" v-on:click="clickButton1();clickButton2()" v-on:click="">按钮2</button>
<div id="app">
<ul>
<li v-for="(item,index) of arr"
:key="index"
@click=changeCurrent(index)
:class="{current:num==index}">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
arr:["语文","数学","英语","物理"],
num:0
},
methods:{
changeCurrent(index){
this.num=index
}
}
});
