您现在的位置是:首页 > 文章资讯 > 文章资讯详情文章资讯

[重庆网站建设公司][微信小程序]「精品」微信小程序开发(六)————轮播图制作

myblogSeekConcert2019-07-23【文章资讯】9255人已围观

简介微信小程序轮播图的制作教程

  大家好,我们又见面了,今天我来教给大家如何制作小程序的轮播图。其实轮播图大家应该又不陌生,在很多网站上都有轮播图,比如京东首页就有轮播图,如图:

  轮播图

  由于图片是静态的,展示不出效果,大家可以自行去京东看一下轮播图的效果(不是打广告哦)。那么,在微信小程序上我们又是如何来实现轮播图的制作呢,Let‘s Go!

  大家还是打开自己的项目,我们上一章中已经创建了post目录,我们今天的代码编写就是在post.wxml文件编写,

  不过在编码之前大家需要自己找三张图片把它放在我们的image目录里面,如图所示:

  

image目录

  我的image目录里现在有四张图片,有一张是首页的图片,其余三张就是为轮播图而做准备的,这些前期工作做完之后我们就开始进行我们的编码,如图:

  

轮播图代码

  微信小程序开发轮播图特别简单,就是调用swiper组件,大家不用去管它是什么意思,只需要记住swiper组件是用来做轮播图的就行了,因为前端的东西基本上都是死记硬背的。swiper组件里面有三个swiper-item,这三个swiper-item大家想都应该想到是用来进行轮播的,我在这三个swiper-item里面分别添加image标签,并给image标签的src属性写上图片对应的路径。那么我们来看一下效果吧:

  

第一张

  由于不是动态的图片,我只能把这三张图片给大家放上面,大家可以看看自己的界面是否实现了轮播的效果。虽然轮播实现了,但是这图片是不是宽度不够啊,不要紧,我们给最外层的swiper标签加个class,大家看了我前面的文章应该知道class是干什么用的吧,如果忘了赶紧去温习一下吧,(小程序)代码如图:

  

class属性

  我们给swiper一个class属性,值为lunbo,然后我们去post.wxss里面编写样式,如图:

  

样式

  我给大家解释一下这个样式,首先lunbo的样式我们给它一个width:100%,意思就是这个轮播组件的宽度为屏幕的宽度。下面的一句 .lunbo image的意思就是这个轮播组件里面的image标签,当然大家也可以给image加个class,方法很多,然后我们也给它一个width:100%,意思是图片的宽度等于轮播组件的宽度,那图片的宽度也是屏幕的宽度,所以我们来看一下效果图:

  

效果图

  大家可以惊奇地发现,图片的宽度和屏幕的宽度一样宽了。这样一来,我们的轮播图就大功告成了,仔细想想还是有点不妥,因为我们的轮播图只有我们自己用鼠标拖拽的时候才会轮播,我们能否让它自动轮播呢,当然可以,直接上代码:

  

post.wxml

  我们在swiper里面又加了三个属性,第一个属性是indicator-dots,它的意思是在图片下方加上小圆点,大家可以看看别的网站的轮播图,图片下方都会有小圆点,用来显示这是第几张图片。第二个属性是autoplay,这个很明显就是图片自动播放了,它的值我们设置为true,第三个属性是interval,意思是图片自动切换的时间间隔,我给的值是4000,它的单位是毫秒,也就是每隔4秒图片就会切换一次。大家把这些属性加上赶紧试试效果吧,今天的教学就到这里,咱们下次见喽~~

  

  特别希望大家能够多多关注我,多多收藏,多多分享,感谢观看。

微信小程序

Tags:小程序,小程序开发,微信小程序,公众号,普擎科技

很赞哦! (150)