概述

最近在使用Vant Weapp组件库，但是没有轮播图这个组件，经过一番对比发现：使用微信官方的swiper组件最方便，和Vant Weapp搭配看着也不错

实现过程

wxml代码

1
2
3
4
5
6
7
<view class="banner">
    <swiper indicator-dots indicator-active-color="#ef5243" circular autoplay interval="3000">
        <swiper-item wx:for="{{carouselImageList}}">
            <image src="{{item}}"></image>
        </swiper-item>
    </swiper>
</view>

wxss代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.banner {
    width: 100%;
    height: 350rpx;
}

.banner swiper {
    height: 100%;
    width: 100%;
}

.banner image {
    width: 100%;
    height: 350rpx;
}

js代码（初始数据）

1
2
3
4
5
6
7
8
9
data: {
    carouselImageList: [
        "https://image.zoutl.cn/hexo-blog/blogCoverImage/11.jpg",
        "https://image.zoutl.cn/hexo-blog/blogCoverImage/12.jpg",
        "https://image.zoutl.cn/hexo-blog/blogCoverImage/13.jpg",
        "https://image.zoutl.cn/hexo-blog/blogCoverImage/14.jpg",
        "https://image.zoutl.cn/hexo-blog/blogCoverImage/15.jpg"
    ]
}

效果

2022-11-24 225004

PS.

swiper属性查看：swiper属性说明 | 微信开放文档 (qq.com)