直播平台开发，使用swiper实现轮播效果

直播平台开发，使用swiper实现轮播效果

第一步：安装swiper`

 

1	<br>  npm install swiper@4.5.1 --save-dev  // 安装swiper<br>

​

第二步：在main.js中引入

 

1	<br>  //引入swiper<br>      import 'swiper/dist/css/swiper.min.css'<br>      import 'swiper/dist/js/swiper.min'<br>

 

第三步：在component下新建一个名为swiper的组件

其html如下：

 

1

<br><template><br>    <div class="container"><br>      <div class="containerBox"><br>        <div class="swiper-container"><br>          <div class="swiper-wrapper"><br>            <div class="swiper-slide item" v-for="(item, index) in pointImgList" :key="index"><br>              <img class="img" :src="item.thumb1" alt=""><br>            </div><br>         <br>          </div><br>                 <!-- 如果需要导航按钮 --><br>        <div class="swiper-button-prev"></div><br>        <div class="swiper-button-next"></div><br>       <br>            <div class="swiper-pagination"></div>//分页器<br>        </div><br>      </div><br>    </div><br></template>

 

 需要data提供数据：图片路径仅供参考

 

1

<br>data() {<br>    return {<br>      pointImgList: [<br>        {<br>          thumb1: require('../assets/1.webp')<br>        },<br>        {<br>          thumb1: require('../assets/2.webp'),<br>        },<br>        {<br>          thumb1: require('../assets/3.jpg'),<br>        },<br>        {<br>          thumb1: require('../assets/4.jpg'),<br>        },<br>      ]<br>    }<br>  },

 

 以上就是直播平台开发，使用swiper实现轮播效果， 更多内容欢迎关注之后的文章