微信小程序-自动播放图片实现轮播图

效果图：

准备工作：

1：微信开发者工具，如没有请参考该文章：微信小程序初章-注册微信小程序账户及安装微信小程序开发者工具篇

2：电脑一台。

3：微信开发者账户

4：手机一台（安装过微信）

开始操作：

1：打开微信开发者工具，创建新项目；填写三个必要内容：项目名称，存放目录，APPID。

然后点击立即创建即可。

2：打开界面如下，这是默认获取用户头像的界面。

3：一般显示的东西都是放在pages的后缀为wxml的文件中 

主页的获取头像的代码就是存放在pages/index/index.wxml文件中。

4：默认的当然不是我们今天想要的效果，所以，删了获取头像的所有代码。

5:现在开始准备图片部分。图片想要显示，当然需要对应的图片，图片就必须先存在项目文件夹中才能被引用。

所以，先点击右上方的详情，点击下方的本地目录，可以查看项目文件的存放目录，点击该目录会跳到该文件夹。

6：我们在pages中创建一个新的文件夹命名为:images,然后将想要显示的图片黏贴或者下载到该目录即可开始写代码引用了。

最好命名有顺序性好记一些。如1.png,2.png .

7:返回微信开发者工具，开始写代码了。

首先先创建view视图属性代码，支持可以回车自动补写代码的。

<view class="news1-container">

</view>

写完了开始引用图片代码了

将下方代码继续复制到view 中间部分。

<swiper indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interval}}">     
       
<swiper-item>
<image class="logo"src="/pages/images/03.jpg"></image>                  
</swiper-item>

</swiper>

<view class="news1-container">

<swiper indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interval}}"> 
<swiper-item>

<image class="logo"src="/pages/images/1.png"></image>  
</swiper-item>

</swiper>
</view>

8:目前只显示了一张图，因为只引用了一张

9：将这段代码复制两三份继续黏贴至下一行即可再显示几张

记得更改image图片路径，不然一直只显示同一张图片。

刚才总共放了三张图，分别名称为1.png,2.png,3.png，所以引用图片目录得改引用图片名称。

<view class="news1-container">

<swiper indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interval}}"> 

<swiper-item>
<image class="logo"src="/pages/images/1.png"></image>  
</swiper-item>

<swiper-item>
<image class="logo"src="/pages/images/2.png"></image>  
</swiper-item>

<swiper-item>
<image class="logo"src="/pages/images/3.png"></image>  
</swiper-item>

</swiper>
</view>

10：点击上方的编译后看下效果。

效果有了，但是发现几个问题：

1：图片显示不完整：需调整高度

这些设置的代码需要到wxss文件中更改。

将原来wxss中的默认代码删除添加如下代码即可控制宽高度

.news1-container swiper{
width: 100%;
height: 450rpx;
margin-top: 1rpx;
}

这个是由class的名称来控制的，如果名称不对，就控制不了对应的属性。

刚才wxml文件中将主view属性的class命名为：news1-container但是只控制这个属性没用，图片是包在swiper中，也就是news1-container的小弟swiper中，所以要精确属性，就是需要输入：news1-container swiper来控制图片

设置完点击上方编译按钮即可查看效果：发现可以完整显示图片了。

2：不自动播放图片，需要手动点击：需要设置自动播放开关及切换时间。

这就需要到js文件中添加相关控制代码才能实现。

在pages/index/index.js文件中删除原来代码，写入下方代码，即可。

这些也是对应class的名称来实现控制的，所以名称对了，代码也对了点击编译即可查看效果！

Page({
data: {
indicatordots: true,/*加入图标指示点*/
autoplay: true,/*自动切换图片开关*/
interval: 1000,   /*切换时间属性1000=1秒*/

}

})

效果：

教程到此结束，不知道你学会了吗？？

麻木博客微信公众号期待您的加入!

编辑：麻木

打赏 支付宝打赏 微信打赏