微信小程序——首页轮播图

最新推荐文章于 2024-08-15 03:17:12 发布

一碗白菜豆腐

最新推荐文章于 2024-08-15 03:17:12 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端小程序

本文链接：https://blog.youkuaiyun.com/weixin_37910098/article/details/86629149

前端小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一种在小程序中实现首页轮播图的方法，包括wxml、js和wxss的代码片段，展示了如何设置图片轮播的自动播放、切换时间间隔及动画时长等关键参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.轮播图(直接用)

wxml.<!-- 首页的轮播图 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"     interval="{{interval}}"duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" />
        </swiper-item>
    </block>
</swiper>

Js.

首页的轮播图
imgUrls:["/images/shouye/lunbotu7.jpg",
         "/images/shouye/lunbotu6.jpg",
         "/images/shouye/lunbotu3.png",
         "/images/shouye/lunbotu2.png",
        ],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔
duration: 1000, //滑动动画时长
inputShowed: false,
inputVal: "",

wxss.

/* 首页的轮播图 */
.swiper {
    height: 400rpx;
    width: 100%;
}
.swiper-image {
    height: 100%;
    width: 100%;
}
.slide-image{
    height: 100%;
    width: 100%;
}