微信小程序 swiper轮播图组件

最新推荐文章于 2024-08-21 17:47:57 发布

ZgaoYi

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量513

点赞数

分类专栏：微信小程序系列文章标签：微信小程序 Swiper swiper-item 轮播图组件

本文链接：https://blog.csdn.net/ZgaoYi/article/details/121779650

版权

微信小程序系列专栏收录该内容

6 篇文章 0 订阅

订阅专栏

官方文档
官方swiper简介
在这里插入图片描述
可以看出我们的swiper必须结合swiper-item来使用。

swiper-item组件

在这里插入图片描述
swiper-item组件里显示轮播图，相关代码如下

<!--pages/swiper/swiper.wxml-->
<swiper class="swiper" indicator-dots indicator-active-color="red" autoplay interval="1500" circular>
    <swiper-item class="num1">
    <image class="ing" src="/images/hahah.jpg"></image>
    </swiper-item>
    <swiper-item class="num2">
        <image class="ing" src="/images/lala.jpg"></image>
    </swiper-item>
    <swiper-item class="num3">
        <image class="ing" src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00064-625.jpg"></image>
    </swiper-item>
</swiper>

/* pages/swiper/swiper.wxss */
.swiper{
    height: 600rpx;
}
.num1{
    background: green;
}
.num2{
    background: rgb(128, 0, 49);
}
.num3{
    background: rgb(60, 0, 128);
}
.ing{
    width: 100%;
    height: 100%;
}