微信小程序MINA框架之轮播图（三）

发布时间: 2020-08-20

文章字数: 1.1k

阅读时长: 4 分

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

1. 轮播图基本构建

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

wxml中的代码

<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>

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

图片展示会变形，这个时候就需要用到image的一个属性mode，这个属性值使用的是widthFix，表示缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。加上它后，图片就不会发生被动拉伸缩放，导致图片变形问题。
上面设置完还有一个问题，那就是当前调试手机屏幕大小的问题，当屏幕变大或者变小，会导致图片只能显示其中一部分，这个时候需要设置swiper的宽高。

首先需要了解的是swiper的默认宽是100%，默认的高是150rpx，这个时候就需要通过计算得到实际swiper的高度
这里有一个计算公式：swiper高度/swiper宽度=图片的高度/图片的宽度
因为最终是要得到swiper的高度，那么就是：swiper高度=图片高度*swiper宽度/图片宽度
swiper的高度是100%，也可写成100vw
假设图片的宽度是1000，高度是300，
最终结果：swiper高度=(100vw*300)/1000

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

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

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

2. 轮播图优化

先来看看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：以前经常会遇到轮播图滑到最后一个再往后滑就滑不动的问题，还有就是上面的自动轮播，轮播到最后一个切换到第一个时出现的效果很不好，加上这个属性就可以完美解决这两个问题

3. 最终代码

<!-- 没有加上指示点，感觉不好看，现在很多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>

swiper {
  width: 90%;
  height: calc(90vw * 300 / 768);/*让轮播图不贴左右边上*/
  margin: 15rpx auto; /*让轮播图上下不完全贴在其他控件上，左右居中*/
}
image {
  width: 100%;
  border-radius: 10rpx;/*给轮播图加上圆角，可能会更好看一点*/
}