微信小程序MINA框架之轮播图(三)

轮播图不论是在小程序,还是web页面、APP里面,都是常用的一个组件,在微信小程序里面就提供了这个好用的组件,我这个小白,表示很快就能上手。下面来看一下我是怎么写的吧!

轮播图基本构建

先不管它太多的动态功能,先将图片放上去,能正常的滑动。

  • wxml中的代码
1
2
3
4
5
6
<swiper>
<swiper-item><image src="../../styles/banner/1.jpg"></image></swiper-item>
<swiper-item><image src="../../styles/banner/2.jpg"></image></swiper-item>
<swiper-item><image src="../../styles/banner/3.jpg"></image></swiper-item>
<swiper-item><image src="../../styles/banner/4.jpg"></image></swiper-item>
</swiper>

微信小程序中轮播图使用的标签就是swiperswiper-item两个,这是最简洁的代码,下面来一步一步的修饰。

  • 图片展示会变形,这个时候就需要用到image的一个属性mode,这个属性值使用的是widthFix,表示缩放模式,宽度不变,高度自动变化,保持原图宽高比不变。加上它后,图片就不会发生被动拉伸缩放,导致图片变形问题。
  • 上面设置完还有一个问题,那就是当前调试手机屏幕大小的问题,当屏幕变大或者变小,会导致图片只能显示其中一部分,这个时候需要设置swiper的宽高。
1
2
3
4
5
6
首先需要了解的是swiper的默认宽是100%,默认的高是150rpx,这个时候就需要通过计算得到实际swiper的高度
这里有一个计算公式:swiper高度/swiper宽度=图片的高度/图片的宽度
因为最终是要得到swiper的高度,那么就是:swiper高度=图片高度*swiper宽度/图片宽度
swiper的高度是100%,也可写成100vw
假设图片的宽度是1000,高度是300,
最终结果:swiper高度=(100vw*300)/1000

按照上面计算的公式设置swiper的css样式:

1
2
3
4
swiper{
width: 100%;
height: calc(100vw * 300 / 1000);/*这里的calc公式是通用的*/
}

到这里就可以完成一个轮播图,可以手动的去滑动,但是存在几个问题,那就是不能自动轮播,轮播图上没有圆点标识等。

轮播图优化

先来看看swiper还有哪些重要的属性。

属性 类型 默认值 说明
indicator-dots boolean false 是否显示面板指示点
indicator-color color 指示点颜色
indicator-active-color color 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动

这几个属性下面依次来说一下:

  • indicator-dots:这个就是在轮播图下面显示的点,官方称呼是指示点
  • indicator-color、indicator-active-color:两个颜色分别表示指示点当前未被激活和被激活的颜色
  • autoplay:自动播放,刚才写的轮播图只能手动滑动,无法自动轮播,加上它就可以
  • interval:这个属性是配合autoplay使用的,表示轮播过程中,切换的间隔时间,不写默认是5000ms
  • circular:以前经常会遇到轮播图滑到最后一个再往后滑就滑不动的问题,还有就是上面的自动轮播,轮播到最后一个切换到第一个时出现的效果很不好,加上这个属性就可以完美解决这两个问题

最终代码

1
2
3
4
5
6
7
<!-- 没有加上指示点,感觉不好看,现在很多app或者小程序,这些指示点也就不加了 -->
<swiper autoplay circular interval="3000">
<swiper-item><image mode="widthFix" src="../../styles/banner/1.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../styles/banner/2.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../styles/banner/3.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="../../styles/banner/4.jpg"></image></swiper-item>
</swiper>
1
2
3
4
5
6
7
8
9
swiper {
width: 90%;
height: calc(90vw * 300 / 768);/*让轮播图不贴左右边上*/
margin: 15rpx auto; /*让轮播图上下不完全贴在其他控件上,左右居中*/
}
image {
width: 100%;
border-radius: 10rpx;/*给轮播图加上圆角,可能会更好看一点*/
}

不得不说,这个代码真的很简洁,很给力。如果以后需要使用,直接拷贝过去就好了。效果图如下:

微信公众号


本文作者:IT-CRUD
原文地址:http://blog.itcrud.com/blogs/2020/08/weixin-mina-banner-03
版权归作者所有,转载请注明出处

支付宝 微信

如果文章对你有帮助,欢迎点击上方按钮打赏作者