vue学习tanvel：6-vue-awesome-swiper的使用

最新推荐文章于 2023-06-14 17:09:39 发布

原创最新推荐文章于 2023-06-14 17:09:39 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并配置vue-awesome-swiper插件来实现轮播图效果，包括安装指定版本、引入样式及组件，并展示了如何通过数据绑定动态展示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先:注意：要使用2.6.7版本。新版本有点问题

npm install vue-awesome-swiper@2.6.7 --save

第二步：main.js中引用

代码如下

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'

在组件中使用：

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet-active
    background #fff
  .wrapper
    overflow hidden
    width 100%
    height 0
    padding-bottom 26.6%
    .swiper-img
      width 100%
</style>

因为vue是数据驱动的，所以图片路径不能写死。要定义个数据，具体如下：

swiperList:[{
        id: '0001',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1804/15/9250dbc86a456302.jpg_750x200_b423f532.jpg'
      },{
        id: '0002',
        imgURL: 'http://img1.qunarzz.com/piao/fusion/1804/15/9250dbc86a456302.jpg_750x200_b423f532.jpg'
      }],

然后使用：

<swiper-slide v-for="item of swiperList" :key="item.id">
   <img class="swiper-img" :src="item.imgURL">
</swiper-slide>

到这里，基本就结束了。最后，在git上面新建分支。

新建好了，gitpull 把远程的分支拉下来

git checkout swiper 切换到swiper分支

git commit -m “addswiper”

git push

git checkout master 切换到主分支

git merge origin/swiper 把远程分支上的swiper的内容合并到本地的master

git push

大功告成