【微信小程序】小程序实现轮播图效果 |
您所在的位置:网站首页 › 如何实现照片和视频轮播 › 【微信小程序】小程序实现轮播图效果 |
文章目录
前言1、引入外部链接图片资源2、让swiper来调整适应图片的宽高3、实现轮播效果--autoplay总结欢迎点赞,收藏,加关注
前言
此例子是用微信小程序组件swiper来实现轮播图效果 小tips: 1.轮播图的外层容器是swiper 2.每个轮播项是swiper-item 1、引入外部链接图片资源 //swiper.wxml因微信小程序打包后的图片资源大小不能超过2兆,所以我们引用图片时选择引入外部链接的图片 2、让swiper来调整适应图片的宽高调整前(页面太难看辽~~) 页面和我们平时所看的不一样,那是因为我们还没有进行调整: 知识点来咯~ swiper的默认宽度是100% 默认高度是150px;但swiper是无法实现将内容撑开的(即对此标签加任何样式都是无效的);所以我们需要手动计算swiper的高度,并添加进wxss样式里面 原理:等比例公式: 原图的宽度 / 高度 = swiper的宽度 / 高度 又因为图片默认的宽高是320*240,所以我们需要把我们引入的图片加一个width:100% 的样式 我所引入的原图大小是:810*442 而swiper默认的宽度高度是:width:100% height:150px 公式:(等比例) 原图width / height = swiper width / height 所以得出计算swiper高度的公式 swiper的高度=100% * 原图height / 原图width //swiper.wxss swiper{ width: 100%; //套用计算swiper高度的公式 height: calc(100vw*442/810); } image{ //图片自适应屏幕大小 width: 100%; }调整过后的效果,我们还不能满足于此!我们还要为图片加上 mode="widthFix"这个强大武器!!以让图片更完美地显示出来~~ 图片资源已调整完毕,接下来就是实现让它们”动“起来 3、实现轮播效果–autoplay关于swiper的属性有以下多种: //swiper.wxml |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |