前言
此例子是用微信小程序组件swiper来实现轮播图效果
小tips:
1.轮播图的外层容器是swiper
2.每个轮播项是swiper-item
1、引入外部链接图片资源
//swiper.wxml
<swiper>
<swiper-item>
<image src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
</swiper-item>
<swiper-item>
<image src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
</swiper-item>
<swiper-item>
<image src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
</swiper-item>
</swiper>
因微信小程序打包后的图片资源大小不能超过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的属性有以下多种:
<!--
autoplay:是否自动切换
circular:是否采用衔接滑动
indicator-dots:是否显示面板指示点
interval:设置自动切换时间间隔
-->
//swiper.wxml
<swiper
autoplay="{{true}}"
circular="{{true}}"
indicator-dots="{{true}}"
interval="2000"
>
<swiper-item>
<image mode="widthFix" src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
</swiper-item>
<swiper-item>
<image mode="widthFix" src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
</swiper-item>
<swiper-item>
<image mode="widthFix" src="http://imgweb.kejipro.cn/p3037/t4/201807/ec494985-726c-4ce9-9186-e7ba0830a0c0.jpg" />
</swiper-item>
</swiper>
加上上面所提到的autoplay等一些属性,就可达到轮播图的效果啦
总结
实现微信小程序的轮播图效果其实就是使用swiper和swiper-item标签以及设置属性计算swiper的高度即可。
想起之前的HTML5动画设计课程,老师叫我们通过Javascript来实现页面的轮播图效果,对比小程序,用js来实现轮播图那可就太复杂了!
此次微信小程序的轮播图效果实现详细步骤讲解希望能带给你帮助~~~
如有不足之处,请评论区提出批评指正!多多指教!
今后会继续分享关于Vue.js、Node.js等知识干货,大家一起交流学习~