|
大家好,我们又见面了,今天我来教给大家如何制作轮播图。其实轮播图大家应该又不陌生,在很多网站上都有轮播图,比如京东首页就有轮播图,如图: 小程序 小程序开发报价 微信小程序开发文档由于图片是静态的,展示不出效果,大家可以自行去京东看一下轮播图的效果(不是打广告哦)。那么,在微信小程序上我们又是如何来实现轮播图的制作呢,Let‘s Go! 大家还是打开自己的项目,我们上一章中已经创建了post目录,我们今天的代码编写就是在post.wxml文件编写, 我的image目录里现在有四张图片,有一张是首页的图片,其余三张就是为轮播图而做准备的,这些前期工作做完之后我们就开始进行我们的编码,如图: 微信小程序开发轮播图特别简单,就是调用swiper组件,大家不用去管它是什么意思,只需要记住swiper组件是用来做轮播图的就行了,因为前端的东西基本上都是死记硬背的。swiper组件里面有三个swiper-item,这三个swiper-item大家想都应该想到是用来进行轮播的,我在这三个swiper-item里面分别添加image标签,并给image标签的src属性写上图片对应的路径。那么我们来看一下效果吧: 由于不是动态的图片,我只能把这三张图片给大家放上面,大家可以看看自己的界面是否实现了轮播的效果。虽然轮播实现了,但是这图片是不是宽度不够啊,不要紧,我们给最外层的swiper标签加个class,大家看了我前面的文章应该知道class是干什么用的吧,如果忘了赶紧去温习一下吧,代码如图: 我给大家解释一下这个样式,首先lunbo的样式我们给它一个width:100%,意思就是这个轮播组件的宽度为屏幕的宽度。下面的一句 .lunbo image的意思就是这个轮播组件里面的image标签,当然大家也可以给image加个class,方法很多,然后我们也给它一个width:100%,意思是图片的宽度等于轮播组件的宽度,那图片的宽度也是屏幕的宽度,所以我们来看一下效果图: 大家可以惊奇地发现,图片的宽度和屏幕的宽度一样宽了。这样一来,我们的轮播图就大功告成了,仔细想想还是有点不妥,因为我们的轮播图只有我们自己用鼠标拖拽的时候才会轮播,我们能否让它自动轮播呢,当然可以,直接上代码: 我们在swiper里面又加了三个属性,第一个属性是indicator-dots,它的意思是在图片下方加上小圆点,大家可以看看别的网站的轮播图,图片下方都会有小圆点,用来显示这是第几张图片。第二个属性是autoplay,这个很明显就是图片自动播放了,它的值我们设置为true,第三个属性是interval,意思是图片自动切换的时间间隔,我给的值是4000,它的单位是毫秒,也就是每隔4秒图片就会切换一次。大家把这些属性加上赶紧试试效果吧,今天的教学就到这里,咱们下次见喽~~ 
|
社会生活
