直播平台开发,使用swiper实现轮播效果
直播平台开发,使用swiper实现轮播效果
第一步:安装swiper`
npm install swiper@4.5.1 --save-dev // 安装swiper
第二步:在main.js中引入
//引入swiper
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min'
第三步:在component下新建一个名为swiper的组件
其html如下:
<template>
<div class="container">
<div class="containerBox">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide item" v-for="(item, index) in pointImgList" :key="index">
<img class="img" :src="item.thumb1" alt="">
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>//分页器
</div>
</div>
</div>
</template>
需要data提供数据:图片路径仅供参考
data() {
return {
pointImgList: [
{
thumb1: require('../assets/1.webp')
},
{
thumb1: require('../assets/2.webp'),
},
{
thumb1: require('../assets/3.jpg'),
},
{
thumb1: require('../assets/4.jpg'),
},
]
}
},
以上就是直播平台开发,使用swiper实现轮播效果, 更多内容欢迎关注之后的文章