源自开源项目:http://github.crmeb.net/u/blue
1,引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
2,初始化样式,绑定标签
<swiper class="swiper-wrapper" :options="swiperVip" ref="mySwiper">
<swiperSlide
class="swiper-slide memberBg"
:class="item.class"
v-for="(item, index) in vipList"
:key="index"
:style="{ backgroundImage: 'url(' + item.image + ')' }"
>
<!-- <img :src="item.icon" />-->
<div class="name">{{ item.name }}</div>
<div class="discount">
可享受商品折扣: {{ item.discount / 10 }}折<span
class="iconfont icon-zhekou"
></span>
</div>
<div class="nav acea-row" v-if="item.grade == grade">
<div
class="item"
v-for="(val, indexn) in vipComplete"
:key="indexn"
>
<div class="num">{{ val.new_number }}</div>
<div>{{ val.real_name }}</div>
</div>
</div>
<div class="lock" v-if="item.grade > grade">
<span class="iconfont icon-quanxianguanlisuozi"></span
>该会员等级尚未解锁
</div>
<div class="lock" v-if="item.grade < grade">
<span class="iconfont icon-xuanzhong1"></span>已解锁更高等级
</div>
</swiperSlide>
</swiper>
3,数据操作
export default {
name: "Poster",
components: {
swiper,
swiperSlide
},
props: {},
data: function() {
return {
vipList: [], //会员等级列表
vipRequire: [], //等级要求
grade: 0, //当前会员等级
swiperVip: {
speed: 1000,
effect: "coverflow",
slidesPerView: "auto",
centeredSlides: true,
coverflowEffect: {
rotate: 0, // 旋转的角度
stretch: -20, // 拉伸 图片间左右的间距和密集度
depth: 100, // 深度 切换图片间上下的间距和密集度
modifier: 2, // 修正值 该值越大前面的效果越明显
slideShadows: false // 页面阴影效果
},
observer: true,
observeParents: true
},
activeIndex: 0//当前滑块索引
};
},
watch: {
vipList: function() { //通过数据判断并切换至对应滑块
let that = this;
if (that.vipList.length > 0) {
that.vipList.forEach(function(item, index) {
if (item.is_clear === true) {
that.swiper.slideTo(index);
that.activeIndex = index;
that.grade = item.grade;
}
});
}
}
},
computed: {
swiper() {//实例swiper对象
return this.$refs.mySwiper.swiper;
}
},
mounted: function() {
let that = this;
that.getInfo();
that.swiper.on("slideChange", function() { //绑定滑块切换事件,异步获取数据
that.activeIndex = that.swiper.activeIndex;
that.getTask();
});
},
methods: {
getInfo: function() {
let that = this;
getVipInfo().then(
res => {
that.vipList = res.data.list;
},
err => {
that.$dialog.message(err.msg);
}
);
},
getTask: function() {
let that = this;
getVipTask(that.vipList[that.activeIndex].id).then(
res => {
that.vipRequire = res.data.list;
},
err => {
that.$dialog.message(err.msg);
}
);
}
}
};
效果: