微信小程序轮播图

Posted 2022-01-28 权。

需要用到swiper swiper-item image这三个标签

在wxml中

<swiper circular="true"    autoplay="true"     interval="10" indicator-dots="true">
    <swiper-item ><image mode="widthFix" src="//img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png" /></swiper-item>
     <swiper-item ><image mode="widthFix" src="//img.alicdn.com/simba/img/TB1lUZLJVXXXXXtXFXXSutbFXXX.jpg" /></swiper-item>
      <swiper-item ><image mode="widthFix" src="//img.alicdn.com/imgextra/i4/6000000004047/O1CN01Y8A3Cu1flZaFyZZft_!!6000000004047-0-alimamazszw.jpg" /></swiper-item>
</swiper>

在wxss中

swiper
    width:100%;
    height: calc(100vx * 280 / 520);

image
    width: 100%;

注意高度需要用自己图片的比例去计算。

最后的效果

 

 

 

 

swiper

基础库 1.0.0 开始支持，低版本需做兼容处理。

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

	属性	类型	默认值	必填	说明	最低版本
	indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
	indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
	indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
	autoplay	boolean	false	否	是否自动切换	1.0.0
	current	number	0	否	当前所在滑块的 index	1.0.0
	interval	number	5000	否	自动切换时间间隔	1.0.0
	duration	number	500	否	滑动动画时长	1.0.0
	circular	boolean	false	否	是否采用衔接滑动	1.0.0
	vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
	previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
	next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
	snap-to-edge	boolean	false	否	当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素	2.12.1
	display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
	easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5
	合法值 说明 default 默认缓动函数 linear 线性动画 easeInCubic 缓入动画 easeOutCubic 缓出动画 easeInOutCubic 缓入缓出动画
	bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = current, source	1.0.0
	bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = dx: dx, dy: dy	2.4.3
	bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0