自学vue 之使用vue-awesome-swiper轮播插件笔记

       最近,我正学习慕课网Dell Lee老师的Vue2.5开发去哪儿网App 从零基础入门到实战项目课程的实战篇,当使用swiper轮播引入插件时,我遇到了一个小小的bug,哈哈,其实也不算bug,我是按老师课程一步一步做的,按理应该不会有错,可真的报错,实属无奈,报错如下:

 

     仔细查看报错内容,swiper没有正确注册;于是我再一次认真观看老师的视频,也请教度娘,才发现引入vue-awesome-swiper这个插件的视频没有播放(可能被剪掉啦~),但是没关系,我们可以根据github仓库里的轮播插件引入详情将插件依赖包安装,并在主要入口文件main.js中引入相应文件入下图:

    1.在git命令工具中安装vue-awesome-swiper 依赖,用 npm install vue-awesome-swiper --save,在启动项目 npm run start

   2.在项目主要入口文件main.js中引入插件对应文件

    这样一来,轮播插件就可以正常引入,效果图如下:

注释:轮播插件引入详情 中摘要如下:

仅作为学习笔记,供大家参考。。。如有何建议,可发信息至我的邮箱1594137072@qq.com,大家加油~

Vue3中,`vue-awesome-swiper`是一个基于Swiper库的轮播组件,它提供了一种方便的方式来创建响应式的轮播效果,包括支持视频播放。要在Vue项目中使用`vue-awesome-swiper`处理轮播视频,你需要做以下几个步骤: 1. **安装依赖**: 使用npm或yarn安装`vue-awesome-swiper`组件: ``` npm install swiper vue-awesome-swiper --save ``` 或者 ``` yarn add swiper vue-awesome-swiper ``` 2. **引入并配置**: 在你的Vue组件中导入`AwesomeSwiper`和`SwiperOption`: ```javascript import { AwesomeSwiper, SwiperOption } from 'vue-awesome-swiper' ``` 然后在组件的`components`选项中注册`AwesomeSwiper`: ```javascript components: { AwesomeSwiper }, data() { return { swiperOptions: {} // 初始化swiper配置对象 } } ``` 3. **设置视频轮播配置**: 在`swiperOptions`对象中,添加`autoplay`、`loop`等属性来控制自动播放和循环,以及针对视频类型的`observer`和`observeParents`设置以监听内容变化: ```javascript swiperOptions: { autoplay: { disableOnInteraction: false, }, loop: true, observer: true, observeParents: true, slidesPerView: 1, breakpoints: [ { // 视频适配不同屏幕尺寸 width: 768, slidesPerView: 2, } ], // 如果有视频元素,可以添加如下的事件处理器: on: { init: function () { this.$refs.mySwiper.slides.forEach((slide) => { if (slide.querySelector('video')) { slide.swiperSlide.on('click', function () { slide.swiperSlide.video.play(); }); } }); }, slideChangeTransitionEnd: function () { this.$refs.mySwiper.slides.forEach((slide) => { if (slide.querySelector('video')) { slide.swiperSlide.video.pause(); } }); } } } ``` 4. **在模板中使用**: 将`AwesomeSwiper`绑定到数据的`swiper`数组,并引用`ref`来获取Swiper实例: ```html <div ref="mySwiper"> <!-- 渲染每个滑动项 --> <swiper-slide v-for="(item, index) in swiper" :key="index"> <video src="your_video_url.mp4" autoplay></video> </swiper-slide> </div> ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值