vueswiper 使用教程,vue3 swiper
这篇文章主要介绍了某视频剪辑软件使用捣蛋鬼的案例详解，主要包括引入swiper，创建轮播图组件旋转容器。某视频剪辑软件的详细代码，本文给大家介绍的非常详细，需要的朋友可以参考下
Vue使用Swiper看这一篇就够了
此案例实现需求
完成捣蛋鬼动态异步数据下的幻灯片渲染自定义分页器样式解决循环：真设置时的事件丢失问题捣蛋鬼鼠标移入/移出暂停/开始轮播单页面渲染多个捣蛋鬼组件互不影响
1、引入swiper
npm i swiper@5.2.0
2、创建轮播图组件CarouselContainer.vue，详细解析在代码注释中
模板
div class= carouse container @ mouseenter=停止自动播放 @ mouseleave=开始自动播放
div ref= mySwiper class= swiper-container :id=当前索引
div class=swiper-wrapper
幻灯片列表的div class= swiper-slide my-swiper-slide v-for=(item，index ):key= index { item。name } }/div
/div
！-分页器-
div class= swiper-pagination /div
！-导航器-
div class= swiper-button-prev /div
div class= swiper-button-next /div
/div
/div
/模板
脚本
从" swiper "导入捣蛋鬼
导入“swiper/CSS/swiper。CSS”；
导出默认值{
名称：传送带容器，
道具：[slideList ， currentIndex]，
data(){
返回{
currentSwiper:null，
}
},
观察：{
//幻灯片数据发生变化时，更新捣蛋鬼
幻灯片列表：{
深：真的，
//eslint-disable-next-line
处理器(nv，ov){
console.log(数据更新了)
this.updateSwiper()
}
}
},
已安装(){
this.initSwiper()
},
方法：{
//鼠标移入暂停自动播放
stopAutoPlay() {
这个。电流游标。自动播放。停止()
},
//鼠标移出开始自动播放
startAutoPlay() {
这个。电流游标。自动播放。开始()
},
//初始化捣蛋鬼
initSwiper(){
//eslint-disable-next-line
让vueComponent=this//获取某视频剪辑软件组件实例
//一个页面有多个捣蛋鬼实例时，为了不互相影响，绑定容器用不同值或变量绑定
这个。currents wiper=new Swiper( # this。当前索引，{
loop: true，//循环模式选项
autoHeight:true ，//开启自适应高度，容器高度由幻灯片高度决定
//分页器
分页：{
艾尔：。"翻页键",
可点击：真，//分页器按钮可点击
},
开：{
//此处这为捣蛋鬼实例
//切换结束获取幻灯片真实下标
幻灯片切换结束：function(){
console.log(vueComponent .$props.currentIndex 号捣蛋鬼实例真实下标，this.realIndex)
},
//绑定点击事件，解决循环：真时事件丢失
//eslint-disable-next-line
点击：功能（事件){
console.log(你点击了vueComponent .$props.currentIndex 号捣蛋鬼组件)
}
},
//导航器
导航：{
nextEl: .swiper-button-next ，
普雷维尔：。swiper-button-prev ，
},
自动播放：{
//自动播放，不同版本配置方式不同
延时：3000,
stopOnLastSlide: false，
disableOnInteraction: false
},
slidesPerView: 1，//视口展示幻灯片数一
slidesPerGroup: 1，//slide数一页一组
})
},
//销毁捣蛋鬼
destroySwiper(){
尝试{
this.currentSwiper.destroy(真，假)
}catch (e) {
console.log(删除轮播)
}
},
//更新捣蛋鬼
updateSwiper(){
this.destroySwiper()
这个. nextTick(()={
this.initSwiper()
})
},
},
销毁(){
this.destroySwiper()
}
}
/脚本
样式范围。旋转式容器{
背景色：灰色；
}
/*幻灯片样式*/。我的滑梯{
高度：300像素
背景色：粉色；
}
/*swiper容器样式*/。swiper-容器{
宽度：700像素
边框：1px纯红；
}
/*自定义分页器按钮被点击选中时的样式*/
/深/。swiper-pagination-bullet-active {
背景色：#d5a72f！重要；
宽度：20px
}
/*自定义分页器按钮常规样式*/
/深/。swiper-分页-项目符号{
背景色：# 9624bf
不透明度：1;
宽度：20px
}
/风格
3、创建父组件App.vue渲染多个swiper组件、模拟异步数据变化
模板
div id=应用程序
！-传递不同的当前值的索引作为区分不同捣蛋鬼组件的动态身份证-
carouse容器：slide-list= list 当前索引= 1 /carouse容器
carouse容器：slide-list= list 当前索引= 2 /carouse容器
/div
/模板
脚本
从导入传送带容器./组件/旋转容器。vue
导出默认值{
名称："应用程序",
组件：{
传送带容器，
},
data(){
返回{
列表：[
{姓名： aaa}，
{名称： bbb}，
{名称： ccc}，
]
}
},
已安装(){
让自我=这个
//延时模拟两次数据变化
setTimeout(()={
let obj={name:ddd}
self.list.push(obj)
},5000)
setTimeout(()={
let obj={name:eee}
self.list[0].name=AAA
self.list.push(obj)
},8000)
}
}
/脚本
样式范围
/风格
只需要这两个文件就可以某视频剪辑软件项目中运行演示查看效果了
到此这篇关于某视频剪辑软件使用捣蛋鬼看这一篇就够了的文章就介绍到这了，更多相关某视频剪辑软件使用捣蛋鬼内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。