微信小程序中的轮播图

最新推荐文章于 2025-04-28 14:36:56 发布

原创最新推荐文章于 2025-04-28 14:36:56 发布 · 245 阅读

CC 4.0 BY-SA版权

本文详细介绍了微信小程序中Swiper组件的使用，包括autoplay、interval、circular等属性的配置，以及如何根据原图尺寸动态设置Swiper的高度。同时，讲解了Image标签的特性，如src、lazy-load、mode等属性，并提供了相应的示例代码。通过调整mode属性，可以实现图片的适应展示。

轮播图外层容器 swiper

1 swiper常用属性值

属性	类型	默认值	说明
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动
indicator-dots	boolean	false	显示指示器分页器索引器
indicator-color	color	rgba(0, 0, 0, .3)	指示器的未选择的颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
display-multiple-items	number	1	同时显示的滑块数量

2 每一个轮播项 swiper-item

3 swiper标签存在默认样式

1 width 100%

2 height 150px image 存在默认宽度和高度 320 * 240

3 swiper 高度无法实现由内容撑开

4 先找出来原图的宽度和高度等比例给swiper 定宽度和高度

原图的宽度和高度 1125 * 352 px

swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

wxml

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

wxss

swiper {
  width: 100%;
  /* height: calc(100vw * 352 /  1125); */
  height: 31.28vw;
}
image {
  width: 100%;
}

在这里普及一下小程序中的image标签

支持 JPG、PNG、SVG、WEBP、GIF 等格式

属性	类型	默认值	说明
src	string	默认的宽度和高度 320 * 240	图片资源地址
lazy-load	boolean	false	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
mode	string	scaleToFill	图片裁剪、缩放的模式

mode属性的值

属性	说明
scaleToFill	默认值不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	保持宽高比确保图片的长边显示出来页面轮播图常用
aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。少用
widthFix	以前web的图片的宽度指定了之后高度会自己按比例来调整常用
bottom	类似以前的backgroud-position