小程序自定义swiper组件样式

看看设计稿

看看实现效果

基于 mpvue 实现

html代码

<template>
    <div class="rel bb1">
        <swiper class="bannerBox" autoplay="true" interval="3000" duration="500" previous-margin="50rpx" next-margin="50rpx" @change="bannerChange">
            <block v-for="(banner,inx) in bannerData" :key="banner.id">
                <swiper-item>
                    <div class="fix pl5 pr5 box_bb">
                        <navigator :url="'../list/main?id='+ banner.id">
                            <image class="banner mt10" :class="{active: currentBannerIndex==inx}" :src="banner.src" mode="aspectFill" />
                        </navigator>
                    </div>
                </swiper-item>
            </block>
        </swiper>
        <div class="bannerDots flex_c abs">
            <div class="dot" :class="{active: currentBannerIndex==inx}" v-for="(banner,inx) in bannerData" :key="banner.id"></div>
        </div>
    </div>
</template>

js代码

<script>
export default {
    data() {
        return {
            bannerData: [
                {
                    src: 
                    id: 0
                },
                {
                    src: 
                    id: 1
                },
                {
                    src: 
                    id: 2
                },
                {
                    src: 
                    id: 3
                },
            ],
            currentBannerIndex: 0,
        };
    },
    methods: {
        bannerChange: function(e){
            let current = e.mp.detail.current;
            this.currentBannerIndex = current;
        }
    },
};
</script>

css代码

<style scoped>
.bannerBox{
    height: 208px;
}
.banner{
    overflow: hidden;
    height: 168px;
    transition: transform 500ms;
    transform: scale(0.95,0.9);  /* 因为非主图看不清，所以可以变形处理 */
    border-radius: 8px;
    box-shadow: 0px 6px 10px 0px rgba(179,154,139,1);
}
.banner.active{
    transform: scale(1,1);
}
.bannerDots{
    width: 100%;
    left: 0;
    bottom: 40px;
    height: 6px;
}
.dot{
    width: 6px;
    height: 6px;
    margin: 0 3px;
    border-radius: 3px;
    background-color: #fff;
}
.dot.active{
    width: 15px;
    background-color: #7090E8;
}
</style>

说明

原生实现只是js按照原生的api来就可以了。
先记录代码，很简单的效果，应该无需说明，有疑问可以留言~