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

原创 麻木  2019-05-30 16:28:28  阅读 219 次 评论 2 条
麻木博客
摘要:

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

效果图:

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第1张


准备工作:

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

2:电脑一台。

3:微信开发者账户

4:手机一台(安装过微信)


开始操作:

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

然后点击立即创建即可。


微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第2张


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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第3张


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

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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第4张


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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第5张


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

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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第6张


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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第7张


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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第8张


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>


indicator就是图片下方的点点,几张图片就显示几个点

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第9张


autoplay就是自动播放控件,interval就是时间控件。

完整代码:

<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>


微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第10张


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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第11张


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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第12张

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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第13张


刚才总共放了三张图,分别名称为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>


微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第14张

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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第15张

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第16张


效果有了,但是发现几个问题:

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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第17张

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第18张


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

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

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


微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第19张


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

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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第20张


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

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第21张


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

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

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

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

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

}

})


微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第22张

效果:

微信小程序-自动播放图片实现轮播图 微信小程序幻灯片 微信小程序自动播放图片 第23张


教程到此结束,不知道你学会了吗??


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

编辑:麻木


打赏 支付宝打赏 微信打赏
本文地址:https://www.mamublog.cn/post/22.html
版权声明:本文为原创文章,版权归 麻木 所有,欢迎分享本文,转载请保留出处!

站点广告专区

发表评论


表情

评论列表

  1. 麻木
    麻木  @回复

    牛逼

  2. 麻木
    麻木  @回复

    测试评论哈哈哈哈哈