vue + swiper の正しい使用姿勢 (プラグアンドプレイ CSS、動的更新データ、使用方法の提案付き)
1.実証効果
まず結果を見てみましょう。一般的に使用される画像スクロールの色と、データを動的に変更した後のプラグインの応答と新しい効果を示します。
2.トゥカオ
こんなに使いにくいプラグインは見たことがありません! Vueを使う場合、単純な画像スクロール+データ変更プラグインの応答更新の効果を実現したいだけなのですが、1日放置してしまいました！
3. 使い方のご提案
1. 公式ドキュメントに詳細が記載されていないため、最新バージョン (6.x) の使用は推奨されません。公式の指示「Vue でのスワイパーの使用」によると、2 時間投げた後では、このような単純な効果は達成できません;
建议使用3.x，因为网上大部分教程都是使用这个版本，遇到坑也好解决。
2. スワイパー コンポーネント (つまり ) の使用は推奨されません<swiper></swiper>。スワイパーのバージョンとスワイパー コンポーネントのバージョンが異なり、「4.x バージョンを使用していると思っているが、実際には 4.x バージョンを使用している」という状況が発生するためです。 3.x バージョンを使用しているため、API が無効になります。そして、スワイパー コンポーネントがデータ変更を処理できないことを測定しました。
建议使原始的 new Swiper()的方式
4. 正式な使用
1. swiper3のバージョンを指定してインストールする
npm install vue-awesome-swiper@3 --save-dev
2. 詳細コード (詳細についてはコメントを参照)
<template>
<section class="swiper">
<!-- 使用原始的div方式，不使用swiper组件 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div
class="swiper-slide"
v-for="item in pics"
:style="`background-image: url(\/${item.picUrl})`"
></div>
</div>
<div class="swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</div>
<!-- 自定义分页 -->
<div class="swiper-pagination"></div>
</section>
</template>
<script>
//引入插件
import Swiper from 'swiper';
import "swiper/dist/css/swiper.css";
export default {
data() {
return {
pics: [],
};
},
created() {
//swiper设置
this.swiperOption = {
loop: true,
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 10,
//自动播放，按需选择
// autoplay: {
// delay: 3000,
// },
// 自定义分页（因为分页在slider外面）
pagination: {
el: ".swiper-pagination",
clickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
},
// 设置点击箭头
navigation: {
clickable: true,
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
}
},
mounted() {
this.queryList();
},
methods: {
//request查询后端数据
queryList() {
//ajax获取数据后，并且页面元素更新后this.$nextTick 进行更新swiper
ajax(data).then((res) => {
.......
this.$nextTick(() => {
//如果已存在swiper则更新插件，否则新建插件
if (this.swiper) {
this.swiper.loopDestroy(); //销毁循环分页
this.swiper.loopCreate(); //创建循环分页
this.swiper.update(); //更新样色
} else {
this.swiper = new Swiper(".swiper-container",this.swiperOption)
}
})
});
},
}
}
</script>
<!-- 针对本示例的css -->
<style lang="scss" scoped>
.swiper ::v-deep .swiper-pagination-bullet {
border-radius: 0;
outline: none;
margin: 0 3px;
width: 15px;
height: 3px;
vertical-align: top;
}
.swiper-container {
position: relative;
height: 220px;
width: 100%;
}
.swiper-container .swiper-slide {
color: #000;
font-size: 16px;
text-align: center;
line-height: 220px;
}
.swiper-pagination {
text-align: center;
width: 100%;
position: relative;
height: 3px;
overflow: hidden;
margin-top: 20px;
}
.swiper-button-prev,
.swiper-button-next {
width: 35px;
height: 35px;
border-radius: 100%;
background-size: 10px;
color: #fff;
text-align: center;
line-height: 35px;
background: rgba($color: #000, $alpha: 0.1);
&:hover {
background: rgba($color: #000, $alpha: 0.3);
}
}
.swiper-slide {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: #eee;
}
</style>