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

参考文档: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自行添加

});

分享到此为止,有什么问题,可以留言!