微信小程序图片轮转播放

微信小程序图片轮播

步骤一：创建项目，注意创建的路径，路径中涉及到的文件最好用英文命名。

这里将项目创建在D:\SotfWare\WechatPG\test1。test1是项目的文件名。创建结束之后，会自动在test1中出现如图所示的各类文件。

步骤二：在pages中创建pictures文件。并将需要轮播的图片导入。

步骤三：在需要轮播的页面中打开wxml文件（这里在logs所在页面进行图片的轮播）在logs.wxml中添加代码（图后提供可复制代码）

<!--logs.wxml-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval = "{{interval}}" duration="{{duration}}"
 style='height:200px;width:100%'>
  <block wx:for="{{pictureUrls}}">
    <swiper-item>
       <image src = "{{item}}" class = "slide-image"/>
    </swiper-item>
  </block>
</swiper>

在swiper中通过style='height:200px;width:100%可调节swiper控件大小

步骤四：在logs.js文件中添加如图所示代码（图后提供可复制代码）

Page({
  data: {
    pictureUrls: [
      '/pages/pictures/1.jpg',
      '/pages/pictures/2.jpg',
      '/pages/pictures/3.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000    
  }
})

注意：这里图片的路径就是我们之前创建文件的picture所在的地方。

步骤五：在logs.wxss文件中可以控制轮播图片的大小，这里的slide-image需要在<image>中的class中定义。

到这里，图片就可以进行轮播了。

END