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

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

一、视图容器（Swiper）

1.swiper:滑块视图容器

微信官方文档

二、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%；

}

三、小程序效果图

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

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。