一、效果演示

演示地址：https://sxs1995.github.io/vueSwiper/dist/index.html#/

---

二、代碼全景

<!--* @Author: shenxsh* @Date: 2019-05-31 10:21:03* @LastEditTime: 2019-05-31 11:44:06* @LastEditors: Do not edit* @Description: 常用的swiper移動端效果--> <template><div class="home"><h3>1.中間顯示完整,兩邊少量顯示</h3><swiper :options="option1"><swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index"><div class="box">item{{index}}</div></swiper-slide></swiper><h3>2.左側顯示完整,右側少量顯示</h3><swiper :options="option2"><swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index"><div class="box">item{{index}}</div></swiper-slide></swiper><h3>3.中間突出顯示,兩邊縮放</h3><div class="option3"><swiper :options="option3"><swiper-slide class="benefitBox" v-for="(item, index) in 8" :key="index"><div class="box">item{{index}}</div></swiper-slide></swiper></div></div> </template><script> export default {name: "home",data() {let _this = this;return {option1: {slidesPerView: 1.18, //顯示slide的數量centeredSlides: true, //居中顯示loop: true, //循環initialSlide: 1, //初始索引spaceBetween: 15, //間距on: {click: function() {// 獲取點擊的索引.const realIndex = this.realIndex;// 此處可自定義點擊事件,注意此處this指向swiper,定義_this}}},option2: {slidesPerView: 2.15,spaceBetween: 15// slidesOffsetBefore: -1 //左偏移},option3: {slidesPerView: 1.49,centeredSlides: true,loop: true,touchRatio: 1, //觸摸距離與slide滑動距離的比率。spaceBetween: 0}};} }; </script> <style lang="less" scoped> .home {width: 100%;padding-bottom: 40px;.box {background: red;height: 200px;color: #fff;line-height: 200px;text-align: center;font-size: 24px;} } .option3 {.box {height: 300px;}.swiper-slide:not(.swiper-slide-active) {transition: 400ms;transform: scale(0.85);} } </style>

---

三、實例展示

封裝組件：

<template><div class="option3"><swiper :options="option3"><swiper-slide class="benefitBox" v-for="(item, index) in test" :key="index"><div class="box"><img :src="item.item_icon" alt="" /></div></swiper-slide></swiper></div> </template><script> import { swiper, swiperSlide } from 'vue-awesome-swiper'; export default {name: 'home',components: {swiper,swiperSlide},//傳遞list 值即可props: { list: {default: [],type: Array}},data() {let _this = this;return {option3: {slidesPerView: 1.49,centeredSlides: true,loop: false,touchRatio: 1, //觸摸距離與slide滑動距離的比率。spaceBetween: 0},test: [{item_icon: 'https://img.dota2.com.cn/file/81/cd/81cd37231b8e28f0fb8d5ce0e40dfc521573990152.png'},{item_icon: 'https://img.dota2.com.cn/file/88/8a/888a35e8d12383b865e4f490fde7f4591573990231.png'},{item_icon:'https://steamcommunity-a.opskins.media/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsVFx5KAVo5PSkKV4xhfGfKTgVvIXlxNPSwaOmMLiGwzgJvJMniO-Zoo_z2wXg-EVvfSmtc78HsNoy'}]};} }; </script> <style lang="scss" scoped> @import '../../../../../css/_base.scss';.option3 {.box {color: #fff;font-size: 24px;text-align: center;height: 24rem;line-height: 20px;margin-top: 2rem;display: flex;align-items: center;img {width: 32rem;object-fit: cover;}}.swiper-slide:not(.swiper-slide-active) {transition: 400ms;transform: scale(0.85);} } </style>

四、注意點

npm install vue-awesome-swiper -save

類似于直接安裝的，會安裝到最新版，最新版是沒法用的，只能安裝2.6.7，這里很坑，不過沒辦法，只能這樣子，其他所有安裝都會報錯

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

總結

以上是生活随笔為你收集整理的vue-awesome-swiper使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。