小程序制作如何实现轮播效果

轮播图就是在首页最显眼的地方按照一定的规律自动切换带有链接的图片，在很多网站或者APP首页都会设置，微信小程序同样可以实现轮播效果，通过使用小程序中的swiper组件来实现图片轮番。

实现图片轮番使用swiper滑块视图容器组件，页面结构文件代码如下：

   autoplay={{autoplay}} interval={{interval}}duration={{duration}}> 

忽略最外层的父容器view和组件属性，页面文件结构简化如下：

以上代码看出，整个轮番图的代码是有一个swiper组件，包含着多个swiper-item组件形成的，其中swiper-item中放置的是image。

的作用是控制属性绑定一个imgUrls数组，使用数组中各项的数据重复渲染该组件。block标签并不会在页面中渲染，如需了解更多可进入官方文档：

代码中看到 的 {{}} 符号是Mustache 语法，意思是将双大括号中的变量名中的数据取出，实现数据绑定，这些变量在同名文件的.js文件中data对象中声明，如下：

// mySwiper.js 

Page({ 

  data:{ 

     imgUrls: [ 

     \'/asserts/img/001.jpg\', 

     \'/asserts/img/002.jpg\', 

     \'/asserts/img/003.jpg\' 

    ], 

    indicatorDots:true, 

    autoplay: true, 

    interval: 3000, 

    duration: 1000 

  }, 

 onLoad:function(options){ 

    // 生命周期函数--监听页面加载 

  } 

｝ 

其中，

indicator-dots： 是否显示面板指示点，默认为false;

autoplay：是否自动切换，默认为false;

interval：自动切换时间间隔，默认5000ms;

duration: 滑动动画时长，默认为1000ms;

需要注意的是swiper组件需要给他一个宽度，不然swiper不显示，这里给了一个具体的宽高，并设置居中显示：

/* pages/mySwiper/mySwiper.wxss */ 

swiper{ 

    margin: 0 auto; 

    height: 200px; 

    width: 300px; 

} 

现在不止是网页中或者APP中，在用户经常访问的地方，例如小程序，设置轮播图可以增加用户体验。小程序目前是流量最大的应用之一，并且小程序中嵌入轮播图在技术上是支持的，制作小程序时在首页设置轮播图更有利于展示自己的特点，可以吸引用户的点击，达到推广产品的作用。

推荐阅读：微信小程序怎么内嵌网页实现支付