微信小程序开发,点击图片依次切换

1、在WXML文件中，使用swiper组件，设置swiper-items的数量以及每个swiper-item的内容，使用wx:for循环来实现图片的遍历显示。

2、在JS文件中，定义images数组，将需要显示的图片地址存储到数组中，并设置swiper组件的相关属性，如自动播放、循环播放、切换时间等。这样就能够实现点击图片依次切换的功能了。用户点击图片时，swiper组件会自动切换到下一张图片。

首先在wxml中是无法显示app.js中的全局变量（也就是app.js里面globalData中的变量），如果想用到app.js中的变量时可以在当前页面中的js文件里面先将全局变量获取的本地。

方法/步骤

在小程序中为了实现一个中添加多个内容重复的标签，那就需要使用循环。如果按小程序的简易教程，循环加在中，而放在里面。所有数据都会遍历到每一个中。这不是我们想要的。

请点击输入图片描述

在微信小程序中有个属性,是指当点击列表元素时当按下鼠标左键会显示样式,但是鼠标离开样式就会复原.

请点击输入图片描述

核心点：模板文件中使用三元运算符,通过dateCurrent指定当前item的id。

请点击输入图片描述

在组件上使用控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 事例。

请点击输入图片描述

接着用在标签上，以渲染一个包含多节点的结构块。

请点击输入图片描述

接着只需要把放入文件中就可以，把循环数据绑定到上就可以了。

请点击输入图片描述

---