[重庆网站建设公司][微信小程序]「精品」微信小程序开发(六)————轮播图制作
大家好,我们又见面了,今天我来教给大家如何制作小程序的轮播图。其实轮播图大家应该又不陌生,在很多网站上都有轮播图,比如京东首页就有轮播图,如图:
轮播图
由于图片是静态的,展示不出效果,大家可以自行去京东看一下轮播图的效果(不是打广告哦)。那么,在微信小程序上我们又是如何来实现轮播图的制作呢,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秒图片就会切换一次。大家把这些属性加上赶紧试试效果吧,今天的教学就到这里,咱们下次见喽~~
特别希望大家能够多多关注我,多多收藏,多多分享,感谢观看。
普擎新闻
MORE- [重庆网站建设公司]垃圾分类微信小程序涌现,帮助用户轻松分类各样垃圾2020-05-29
- [重庆网站建设公司]在微信小程序早起打卡就能分到钱?醒醒吧,这其实是个骗局2020-05-28
- [重庆网站建设公司]回顾2018年微信小程序的发展历史,你值得拥有至少一款2020-05-28
- [重庆网站建设公司]细说小程序的优势,为何我们认定它为下一个互联网潮流2020-05-27
- [重庆网站建设公司]科普:除了源码下载,微信小程序还有哪些开发方式?2020-05-27
- [重庆网站建设公司]深氪 | 微信小程序被高估了吗?2020-05-25