swiper.js

swiper 之 vue.js 中使用

作者：子长

  自从摒弃了 mvc 模式，不再从事展示型的网站建设，已经三年多没用过swiper.js了，至此它已经进行了几个大版本的更新，最新版本为 swiper6。
  今天突然需要用到滑动效果，瞬间想起了它，顺便来分享一下swiper在vue中的使用

vue-awesome-swiper

  vue-awesome-swiper 是 swiper在vue框架下的一个npm包，使用方式如下：

1、下载依赖

// npm下载
npm i vue-awesome-swiper -S    // i：install，-S: --save-dev
// cnpm下载
cnpm i vue-awesome-swiper -S 
// yarn 下载
yarn add vue-awesome-swiper

2、引入

// 在入口 main.js 引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper) 

// 页面 引入
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

3、使用

// 页面中注册组件（通过main.js引入的，可跳过这一步）
components: {
  Swiper,
  SwiperSlide
},

// 模板中调用
<div class="swiper-container">
  <swiper :options="swiperOption" v-if="list.length > 0">
    <swiper-slide v-for="(rowItem, index) in list" :key="index">
      <div class="line-box">
        {{ rowItem.name}}
      </div>
    </swiper-slide>
  </swiper>
</div>

// data 中配置展示方式等
data () {
  return {
    lineSwiperOption:{ // 各类情况数据统计配置
      loop: true,   // loop模式，默认true
      initialSlide: 2,  // 设定初始化时slide的索引，默认为0
      direction: 'vertical', // 轮播滑动的方向，默认水平'horizontal’
      autoplay: { // 自动切换
        delay: 3000,  // 切换间隔
        disableOnInteraction: false, // 用户操作后，是否禁止autoplay，默认true：即用户操作后，不再自动切换
      },
    },
  }
}

  其它配置可参考官网，https://www.swiper.com.cn/api/index.html，

  官网的配置虽然全面，但不够清晰易懂，这里分享一下其它同学的的文章：https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10521462.html