vue移动端轮播图插件,swiper组件可以实现页面的轮播效果
本文主要介绍了vue使用swiper插件实现轮播图的例子，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
vue-使用swiper插件实现转盘图
使用watch和$nextTick解决carousel的Bug
大家好。最近在做一个类似饿了么的项目。我在这里同步一下我的项目经验，分享给大家！
vue - 使用swiper插件实现轮播图
下载：npm安装浏览器-保存
Msite.vue的HTML部分：
！-在msite_nav页面的导航部分使用swiper -
div class=" swiper-container "
div class=swiper-wrapper
div class=swiper-slide1/div
div class=swiper-slide2/div
div class=swiper-slide3/div
/div
！-旋转木马圆点-
div class= swiper-pagination /div
/div
脚本部分介绍并初始化：
脚本
从“swiper”导入Swiper
//同时引入swiper的css文件
导入 swiper/dist/css/swiper.min.css
导出默认值{
//请注意，swiper应该在页面加载(挂载)后初始化
已安装(){
//创建swiper实例来实现carousel
新刷机(。swiper-container ，{
自动播放：没错，
//如果你需要传呼机
分页：{
艾尔：。“翻页键”，
可点击：真
}
})
}
}
/脚本
需要注意的是，在引入css文件时，由于版本不同，引入方法也不同，否则会因为找不到对应的css文件，比如最新版本，而报错。
导入 swiper/swiper-bundle.min.css
具体用法参考【Swiper公文】。
需要特别注意的一点是，在请求数据之后，需要创建一个swiper实例。
使用watch与$nextTick解决轮播的Bug
Pager Swiper实际上应该在carousel列表显示后初始化(即categorys数组有数据)。
起初，类别是空数组，当数据可用时，将显示转盘列表。要监控类别的数据变化，需要watch。
//创建一个新的手表来收听类别
观察：{
category ys(value){//category ys数组中有数据。
//但是接口没有异步更新。
}
}
//删除新Swiper.代码已安装
实际上，改变状态中的状态数据(类别接收数据)和异步更新界面(显示轮播列表)是两个步骤。因此，需要等到接口异步更新后，才能初始化Swiper。
//使用setTimeout可以达到效果，但是计时不准确
setTimeout(()={
//创建Swiper实例对象实现carousel。
新刷机(。swiper-container ，{
自动播放：没错，
//如果你需要传呼机
分页：{
艾尔：。“翻页键”，
可点击：真
}
})
}, 100)
Vm。$nextTick( [callback])用于在接口异步更新后立即创建Swiper对象。
//修改后立即使用数据，然后等待DOM更新。
这个。$nextTick(()={
//一旦接口更新完成，回调将立即执行
新刷机(。swiper-container ，{
自动播放：没错，
分页：{
艾尔：。“翻页键”，
可点击：真
}
})
以上是vue使用swiper插件实现轮播地图的例子细节。更多关于vue使用swiper插件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。