小程序自定义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}" :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1410699069,2629528698&fm=26&gp=0.jpg',                    id: 0
                },
                {                    src: 'http://img.tupianzj.com/uploads/allimg/160810/9-160Q0161301.jpg',                    id: 1
                },
                {                    src: 'http://image2.cnpp.cn/upload/images/20180725/17473224963_1170x700.jpg',                    id: 2
                },
                {                    src: 'http://pic.yesky.com/uploadImages/2015/214/04/G777ARI259K9.jpg',                    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来就可以了。
先记录代码，很简单的效果，应该无需说明，有疑问可以留言~

作者：不二很纯洁
链接：https://www.jianshu.com/p/f13bdccc86d2