利用vue-awesome-swiper实现图片视频混播,话不多说,开干!
第一步:安装
//直接安装版本3即可,自动会选择3.1.3版本
cnpm i vue-awesome-swiper@3 -S
//或者手动指定
cnpm i vue-awesome-swiper@3.1.3 -S
第二步:引入
我是使用内部引入的方式,
//页面引入swiper
import {swiper, swiperSlide} from 'vue-awesome-swiper'
<style scoped>
@import '../../css/swiper.css';
</style>
由于我得项目中缺少一些组件,在<script></script>里面引用
import 'swiper/css/swiper.css'报错,所以我是复制swiper.css到本地,然后在style里面引入的
第三步,页面调用示例 —— 完整代码
components: {
swiper,
swiperSlide
},
<div>
<div>
<swiper
v-if="bannerList.length>0"
ref="mySwiper"
id="mySwiper"
@slideChange="onSlideChange"
:options="swiperOption"
:style="{
width: '100%',
margin: '0 auto',
height: '20rem',
background: '#fff'
}"
>
<swiper-slide v-for="(item,index) in bannerList" :key="item.id">
<img
style="width: 100%;height: 100%"
:src="item.imgUrl"
alt=""
v-if="item.type==1">
<video
:src="item.imgUrl"
ref="video"
autoplay
controls
style="width: 100%;height: 100%;object-fit: fill"
v-if="item.type==2"/>
</swiper-slide>
<!-- Optional controls ,显示小点-->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
data() {
return {
bannerList: [
{
id: 3,
type: 2,
imgUrl: 'http://8.136.101.204/v/饺子运动.mp4',
},
{
id: 1,
type: 1,
imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
}, {
id: 2,
type: 1,
imgUrl: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
}
],
swiperOption: {
direction: 'horizontal',
// 参数选项,显示小点
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'fraction'//'bullets’ 圆点(默认)‘fraction’ 分式 ‘progress’ 进度条‘custom’ 自定义
},
// autoplay: {
// delay: 2000,
// stopOnLastSlide: false,
// disableOnInteraction: false, //操作swiper后不会停止播放
// },
loop: false,
speed: 1000,
initialSlide: 0,
},
};
},
需要注意的点
1.视频图片混播根据数据类型来判断
<swiper-slide v-for="(item,index) in bannerList" :key="item.id">
<img
style="width: 100%;height: 100%"
:src="item.imgUrl"
alt=""
v-if="item.type==1">
<video
:src="item.imgUrl"
ref="video"
autoplay
controls
style="width: 100%;height: 100%;object-fit: fill"
v-if="item.type==2"/>
</swiper-slide>
bannerList: [
{
id: 3,
type: 2,
imgUrl: 'http://8.136.101.204/v/饺子运动.mp4',
},
{
id: 1,
type: 1,
imgUrl: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
}, {
id: 2,
type: 1,
imgUrl: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
}
],
2.如果想改变默认指示器的颜色,需要给<swiper>标签设置id,如图所示
微信图片_20211024163746.png
然后在<style>标签中修改相应vue-awesome-swiper源码样式;
首先展示下源码默认样式
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'bullets'
},
效果如图所示
微信图片_2.png 微信图片1.png
然后修改小圆点颜色
#mySwiper >>> .swiper-pagination-bullet-active {
background: #13d1be;
}
效果如图所示
微信图片_3.png
如果想换成数字表现形式
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'fraction'
},
#mySwiper >>> .swiper-pagination-fraction {
background: rgba(0, 0, 0, .5);
width: fit-content;
left: 87%;
padding: 1px 1rem;
border-radius: 1rem;
color: white;
/*line-height: 2rem;*/
font-size: 12px;
text-align: center;
}
效果如图所示
微信图片_4.png
微信图片_5.png
好了,这就是vue-awesome-swiper的简单使用,还有好多方法可以研究以及效果实现
最后附上vue-awesome-swiper源码地址vue-awesome-swiper
网友评论