效果图:
1.自定义组件 bw-swiper.vue 代码:
<template>
<view class="swiperContent">
<swiper
@change="change"
@animationfinish="animationfinish"
:indicator-dots="indicatorDots"
:indicator-active-color="indicatorActiveColor"
:indicator-color="indicatorColor"
:current="current"
:interval="interval"
:duration="duration"
:circular="circular"
:vertical="vertical"
:previous-margin="previousMargin"
:next-margin="nextMargin"
:display-multiple-items="displayMultipleItems"
:skip-hidden-item-layout="skipHiddenItemLayout"
:autoplay="(autoplay && flag)"
:style="{'height':swiperHeight+'px'}"
:class="(swiperType && displayMultipleItems ==1 && !vertical && !fullScreen)?'cardSwiper':'' "
class="screen-swiper"
>
<swiper-item class="swiper-item" v-for="(item,index) in swiperList" :key="index" :class="(cardCur==index && displayMultipleItems ==1 && !vertical && !fullScreen)?'cur':''" @tap="clickItem(index)">
<view v-if="item[imageKey] && !item[videoKey]">
<image :src="item[imageKey]" :style="{'height':swiperHeight+'px'}"></image>
<text v-if="textTip" class="swiperText" :style="{
'bottom':(swiperType?(textStyleBottom+12):textStyleBottom)+'%',
'right':textStyleRight+'%',
'color':textStyleColor,
'background':textStyleBgcolor,
'font-size':upxto