百度小程序 swiper 轮播图自定义组件

百度小程序内部只允许使用 swiper-item 组件描述滑块内容，否则会导致未定义的行为，默认 swiper组件的指示点默认是圆的，丑的一逼，本人实在无法直视，只能通过自定义组件属性来修改样式，废话不多说，直接上dome，效果自行查看本站小程序。

为什么我不使用百度提供的轮播图组件，那是因不好管理，还影响加载，本来首页调用接口就需要 2-3 次了，还要在加载一次百度小程序的轮播图组件，想想都犯愁。

参考文档：https://smartprogram.baidu.com/docs/develop/component/view_swiper/

index.swan

<view class="swiper-box">
    <swiper class="banner" style='height:{{swiperH}}' bindchange="swiperChange" autoplay="true" interval="3000"
        duration="500" circular="true">
        <block s-for="item, index in swiper" s-key="{{index}}">
            <swiper-item>
                <navigator url="{{item.route}}">
                    <image src="{{item.img}}" class="slide-image" mode="widthFix" bindload='imgHeight' />
                </navigator>
            </swiper-item>
        </block>
    </swiper>
    <view class="dots">
        <block s-for="item, index in swiper" s-key="{{index}}">
            <view class="dot {{index == swiperCurrent  ? 'active' : ''}}"></view>
        </block>
    </view>
</view>

index.css

/* swiper
   就算你样式写的再好，你也一样不会拥有你想要的
*/
/* 轮播图*/
.slide-image {
 width:100%;
}
/* 圆点样式控制*/
.swiper-box {
 position:relative;
 width:100%;
}
.dots {
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 display:-webkit-box;
 display:-webkit-flex;
 display:-moz-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-pack:center;
 -webkit-justify-content:center;
 -moz-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center;
 padding:10rpx 0;
 background:rgba(0,0,0,.2)
}
.dots .dot {
 margin:0 8rpx;
 width:14rpx;
 height:14rpx;
 background:rgba(255,255,255,.8);
 border-radius:8rpx;
 -webkit-transition:all .6s;
 transition:all .6s;
}
.dots .dot.active {
 width:40rpx;
 background:#338ff0;
}
/* 圆点样式控制*/

index.js

//index.js
//获取应用实例
const app = getApp();

Page({
    data: {
        swiper: [{
            "route": null,
            "img": ""
        }],
        swiperCurrent: "",
        //轮播图圆点
        swiperH: ""
        //这是swiper框要动态设置的高度属性
    },

    swiperChange: function (e) {
        this.setData({
            swiperCurrent: e.detail.current   //获取当前轮播图片的下标
        })
    },
    imgHeight: function (e) {
        var winWid = swan.getSystemInfoSync().screenWidth;
        var imgh = e.detail.height;//图片高度
        var imgw = e.detail.width;//图片宽度
        var swiperH = winWid * imgh / imgw + "px";
        //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
        this.setData({
            swiperH: swiperH//设置高度
        });
    },

    // 加载首页数据
    // 通过GET自行添加

});

文档下载：百度小程序 swiper 轮播图自定义组件.doc文档

THE END