本文主要详细介绍微信小程序视图容器(swiper)组件创建的轮播图。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

本文分享微信小程序swiper组件创建轮播地图的具体代码，供大家参考。具体内容如下

1.swiper:滑块视图容器

微信官方文档

1.页面逻辑(index.js)

页面({

数据：{

imgUrls: [

{

链接：“/页面/索引/索引”，

网址：/images/001.jpg

}, {

链接：“/页面/列表/列表”，

网址：/images/002.jpg

}, {

链接：“/页面/列表/列表”，

网址：/images/003.jpg

}

],

IndicatorDots:真，//点

IndicatorColor:白色，//表示点的颜色

ActiveColor: coral ，//当前选择的指示点的颜色

Autoplay: false，//是否自动旋转？

间隔：3000，//间隔时间

持续时间：3000，//滑动时间

}

ImgUrls是我们的轮播中使用的图像地址和跳转链接。

指示器焦点对准了吗？

Autoplay自动播放？

自动播放间隔时间

持续时间滑动动画时间

2.页面结构(index.wxml)

！-旋转地图-

swiper indicator-dots= { { indicator dots } } autoplay= { { autoplay } } interval= { { interval } } duration= { { duration } } indicator-color= { { indicator color } }

indicator-active-color= { { active color } }

block wx:for={{imgUrls}}

swiper-项目

导航器URL= { { item . link } } hover-class= navigator-hover

image src= { { item . URL } } class= slide-image width= 355 height= 200 /

/导航器

/swiper-item

/阻止

/swiper

注意：swiper不应在外部贴上任何标签，如view。如果加了，转盘可能就出不来了。

3.页面样式(index.wxss)

/*旋转木马地图*/。幻灯片图像{

宽度：100%；

}

快速练习，可以看到如图所示的效果图：

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。