请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 154|回复: 0

微信小程序开发(五)轮播图制作

[复制链接]
  • TA的每日心情
    开心
    2019-5-7 14:15
  • 签到天数: 9 天

    [LV.3]偶尔看看II

    396

    主题

    399

    帖子

    1860

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1860
    admin实名认证 发表于 2019-5-11 17:57:03 | 显示全部楼层 |阅读模式
    大家好,我们又见面了,今天我来教给大家如何制作轮播图。其实轮播图大家应该又不陌生,在很多网站上都有轮播图,比如京东首页就有轮播图,如图:
    3501.jpg
    由于图片是静态的,展示不出效果,大家可以自行去京东看一下轮播图的效果(不是打广告哦)。那么,在微信小程序上我们又是如何来实现轮播图的制作呢,Let‘s Go!

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

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

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


    本文采集自百度百家号:web开发那些事 原文网址:https://mbd.baidu.com/newspage/data/landingshare?context=%7B%22nid%22%3A%22news_9627392983218073559%22%2C%22sourceFrom%22%3A%22bjh%22%2C%22url_data%22%3A%22bjhauthor%22%7D
    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|寿光赢创志诚信息技术有限公司 ( 鲁ICP备19000917号 )

    GMT+8, 2019-5-22 22:48 , Processed in 0.064494 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表