Uni app swiper rotation chart (full screen / card)

design sketch ：

 

1. Custom components  bw-swiper.vue Code ：

<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':upxtopx(textStyleSize)
                    }">{ {item[textKey]}}</text>
                </view>
                <view v-if="item[videoKey]">
                <video :src="item[videoKey]" @play="play" @pause="pause" :style="{'height':swiperHeight+'px'}" autoplay loop muted :autoplay="videoAutoplay" objectFit="cover"></video>
                </view>
            </swiper-item>
            <swiper-item class="swiper-item"  v-if="swiperList.length==0" >
                <text></text>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        name:'bw-swiper',
        created:function(){
            var that = this;
            if(this.fullScreen){
                uni.getSystemInfo({
                    success:function(e){
                    that.swiperHeight = e.screenHeight -44
                }})
            }
        },
        mounted:function(){
            if(!this.fullScreen){
                const query = uni.createSelectorQuery().in(this);
                query.select('.swiper-item').boundingClientRect(data => {
                    if(!!data){
                        this.swiperHeight = data.width/this.w_h;
                    }
                }).exec();
            }    
        },
        props: {
            fullScreen:{ // Is it full screen
                type:Boolean,
                default:false
            },
            swiperList:{ // Slider view container data
                type:Array,
                required: true,
                default:function(){
                    return []
                }
            },
            swiperType:{  // false => Full screen height limit rotation chart  true => Kata carousel
                type:Boolean,
                default:false
            },
            videoAutoplay:{ // true =>video Auto play
                type:Boolean,
                default:false
            },
            videoKey:{  // Keys for video mapping
                type:String,
                default:'src'
            },
            imageKey:{ //   Key of image mapping
                type:String,
                default:'img'
            },
            textKey:{ //   The key of the text description mapping
                type:String,
                default:'text'
            },
            textTip:{ // Picture caption false => hide
                type:Boolean,
                default:false
            },
            textStyleSize:{ // Picture text size
                type:Number,
                default:24
            },
            textStyleBottom:{ // Picture text position
                type:Number,
                default:5
            },
            textStyleRight:{ // Picture text position
                type:Number,
                default:5
            },
            textStyleColor:{ // Picture text color
                type:String,
                default:'#ffffff'
            },
            textStyleBgcolor:{ // Picture text background color
                type:String,
                default:'transparent'
            },
            w_h:{  // Aspect ratio recommend w/h => 2
                type:Number,
                default:2
            },
            skipHiddenItemLayout:{ // Do you want to skip the slide layout that is not shown , Set to true It can optimize the sliding performance in complex situations , But the layout information of the hidden state slider will be lost  
                type:Boolean,
                default:false
            },
            displayMultipleItems:{ // Number of sliders displayed at the same time
                type:Number,
                default:1
            },
            nextMargin:{ // Back margin , Can be used to expose a small part of the latter , Accept px and rpx value Headline applet not supported
                type:String,
                default:'0px'
            },
            previousMargin:{// Front margin , Can be used to expose a small part of the previous item , Accept px and rpx Value header applet does not support
                type:String,
                default:'0px'
            },
            vertical:{ // Whether the sliding direction is longitudinal The card   Vertical and simultaneous display are not supported 2 Number of blocks or more
                type:Boolean,
                default:false
            },
            circular:{ // Whether to adopt the joint sliding
                type:Boolean,
                default:true
            },
            duration:{ // The length of the slide animation
                type:Number,
                default:400
            },
            interval:{ // Auto switch interval
                type:Number,
                default:2500
            },
            current:{ // The current slider index
                type:Number,
                default:0
            },
            autoplay:{ // Auto switch or not -- Wheel planting
                type:Boolean,
                default:false
            },
            indicatorColor:{ // Indicate the color
                type:String,
                default:'#CCCCCC'
            },
            indicatorActiveColor: { // The currently selected indicator color
                type: String,
                default: '#ffffff'
            },
            indicatorDots: { // Display panel indicator
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                flag:true,
                cardCur:0,
                swiperHeight:300
            }
        },
        computed:{
            
        },
        methods: {
            upxtopx:function(size){
                // #ifdef MP-WEIXIN
                return uni.upx2px(size)+'px'
                // #endif
                // #ifndef MP-WEIXIN
                return size+'upx';
                // #endif
            },
            play:function(){
                this.flag = false
            },
            pause:function(){
                this.flag = true
            },
            clickItem:function(index){
                if(this.swiperList.length>0){
                    this.$emit('clickItem',this.swiperList[index])
                }
            },
            change:function(e){
                this.$emit('change',e)
            },
            animationfinish:function(e){
                this.cardCur = e.detail.current;
                this.$emit('animationfinish',e)
            }
        }
    }
</script>

<style>
.cardSwiper .swiper-item{
    width:86%!important; 
    overflow: initial;
}
.cardSwiper .swiper-item view{
    width: 100%;
    display: block;
    height: 100%;
    border-radius: 10upx;
    transform: scale(0.9,0.8);
    opacity: 0.7;
    transition: all 0.1s ease-in 0s;
    overflow: hidden;
    box-sizing: border-box;
    margin-left:8.1%;
}
.cardSwiper .cur  view{
    transform:  initial;
    opacity: 1;
    transition: all 0.1s ease-in 0s;
}
.swiper-item view{
    height:100%;
    width:100%;
    position: relative;
}
.swiperText{
    position: absolute;
    color:#ffffff;
    z-index:2;
    border-radius: 4upx;
    padding:0 4upx;
}
.screen-swiper image{
    width:100%;
}
.screen-swiper video,
.swiper-item video {
    width: 100%;
    display: block;
    height: 100%;
} 
.swiperContent{
    width:100%;
}
</style>

 2. Call of custom component ：

  Code ：

<template>
    <view class="content">
        <bwSwiper :swiperList="swiperList" style="width:100%" :swiperType="true" :autoplay="false"></bwSwiper>
    </view>
</template>

<script>
    import bwSwiper from "../../comment/bw-swiper/bw-swiper.vue"
    export default {
        components: {
            bwSwiper
        },
        data() {
            return {
                swiperList: [{
                        img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
                    },
                    {
                        img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
                    },
                    {
                        img: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
                    }
                ]
            }
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: white;
        width: 100%;
        height: 100%;
    }

    page {
        background-color: white;
    }
</style>
 

explain ：

resources Demohttps://download.csdn.net/download/yyxhzdm/26321747?spm=1001.2014.3001.5503