微信小程序高级开发(3):轮播图(远程调用API、指示器圆点样式、位置设置)

在微信小程序中生成轮播图可以使用swiper组件来实现，以下是一个简单的示例代码，包括wxml（页面结构）、wxss（页面样式）和js（页面逻辑）部分，能够展示一个基本的轮播图效果。

1.wxml

<!-- 轮播图 -->
    <view class="lock-box">
        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" style="height: 100%;">
            <view wx:for="{{imgUrls}}" wx:key="index">
                <swiper-item>
                    <image src="{{item}}" class="lock-pic" mode="widthFix"></image>
                </swiper-item>
            </view>
        </swiper>
    </view>

2.js

data: {
        imgUrls: [], //轮播图信息
        indicatorDots: true,
        autoplay: true,
        interval: 3000,
        duration: 500,
   },
       //轮播图
    getCarousel: function (e) {
        let that = this;
        wx.request({
            url: utils.host_domain + 'api/api.php?act=getMiniCarousel&token=3cab7ce4142608c0f40c785b5ab5ca24',
            method: "POST",
            data: JSON.stringify({}),
            header: {
                'content-type': 'application/json'
            },
            success(res) {
                //console.log(res.data);
                let data = res.data.data;
                let imgUrls = [];
                for (let i = 0; i < data.length; i++) {
                    imgUrls.push(data[i].car_url)
                }
                //console.log(imgUrls);
                that.setData({
                    imgUrls: imgUrls
                })
            },
            fail: function (err) {
                console.error('请求失败：', err);
            }
        })
    },

3.wxss

/* swiper 组件样式 */
.lock-box swiper {
    position: relative;
}

/* 指示器圆点样式 */
.lock-box swiper .wx-swiper-dots {
    position: absolute;
    /* 以下属性可根据需求调整 */
    bottom: 30px;
    /* 距离底部20px，可调整垂直位置 */
    left: 50%;
    /* 初始水平居中 */
    transform: translateX(-50%);
    /* 修正水平位置，使其真正居中 */
}

/* 指示器圆点的单个样式 */
.lock-box swiper .wx-swiper-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    /* 未选中的圆点颜色 */
    margin: 0 5px;
    border-radius: 50%;
}

/* 当前选中的指示器圆点样式 */
.lock-box swiper .wx-swiper-dot-active {
    background-color: white;
    /* 选中的圆点颜色 */
}

@漏刻有时