百度小程序-swiper组件

.swan

        <!-- 轮播图S -->
        <view class="swiper-box">
            <swiper class="banner" style='height:{{swiperH}}' bindchange="swiperChange" autoplay="true" interval="3000" duration="500"
             circular="true">
                <block s-for="banner" s-for-index="index" s-for-item="item">
                    <swiper-item>
                        <image src="{{item.cover_id}}" class="slide-image" mode="widthFix" bindload='imgHeight' />
                    </swiper-item>
                </block>
            </swiper>
            <view class="dots">
                <block s-for="banner" s-for-index="index" s-for-item="item">
                    <view class="dot {{index == swiperCurrent  ? 'active' : ''}}"></view>
                </block>
            </view>
        </view>
        <!-- 轮播图E -->

.css

/* 轮播图 S*/
.slide-image{width: 100%;}
/* 圆点样式控制 S*/
.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: #ef782c;}
/* 圆点样式控制 E*/
/* 轮播图 E*/

.js

const app = getApp();
Page({
    data: {
        banner: [],//轮播图
        swiperCurrent: "",//轮播图圆点
        swiperH: "",  //这是swiper框要动态设置的高度属性
    },
    onLoad: function () {
        // 监听页面加载的生命周期函数
        this.getBanner();
    },
    onReady: function() {
        // 监听页面初次渲染完成的生命周期函数
    },
    onShow: function() {
        // 监听页面显示的生命周期函数
        app.setInfo();
    },
    onHide: function() {
        // 监听页面隐藏的生命周期函数
    },
    onUnload: function() {
        // 监听页面卸载的生命周期函数
    },
    onPullDownRefresh: function() {
        // 监听用户下拉动作
    },
    onReachBottom: function() {
        // 页面上拉触底事件的处理函数
    },
    onShareAppMessage: function () {
        // 用户点击右上角转发
    },
    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//设置高度
        });
    },
    getBanner: function () {//获取banner轮播图
        var that = this;
        swan.request({
            url: app.globalData.baseUrl + 'list/banner',
            method: 'GET',
            header: {
                genToken: app.globalData.genToken,
            },
            success: function (res) {
                // console.log(res);
                that.setData({
                    banner: res.data.lines
                })
                // console.log(that.data.banner)
            }
        });
    }
});

 效果图