《微信小程序开发从入门到实战》学习九十三

7.1 视图容器组件

7.1.3 swiper与swiper-item组件

swiper组件的显示效果如下图所示:

indicator-dots、indicator-color和indicator-active-color三个属性用于设置swiper组件下方的指示点。设置指示点的颜色时,可以使用HexColor,也可以使用rgba。rgba后面括号中的四个数字分别表示red、green、blue和alpha的值,前三个值即颜色的RGB数值,取值范围是0~255,对应十六进制的00~FF。Alpha的值表示的是颜色的透明度,它的取值范围是0~1的小数,从0到1表示透明度从完全透明逐渐变为不透明。

current属性用于设置swiper组件当前显示的滑块,其值对应swiper-item所处位置的序号(从0开始)。如果将current的值设定为一个固定的数值,则该值表示swiper显示的初始滑块的序号。如果将current的值设定为一个变量,则当变量的值改变时,swiper显示的滑块也会随之切换(之前还以为index是指位置,原来是滑块序号索引)

autoplay设置true,swiper自动切换滑块的内容,和自动切换的时间间隔interval组合使用。

duration设置滑块滑动的动画时长,对手动和自动切换都生效。希望该切换的动画类型,组合easing-function使用。

circle为true则最后一个滑块和第一个滑块衔接,滑块内容会循环重复。

vertical,滑块的滑动方向默认为横向,设置vertical为true,滑块的滑动方向会变为纵向。

previous-margin和next-margin可以设置滑块的前后边距。设置边距后可以显示出当前的swiper-item前后相领项的一部分内容。

bindchange和bindtransition和bindanimation三个属性可以用于绑定事件监听函数。

swiper组件实例代码如下:

<swiper indicator-dots>

<swiper-item><image src="/imgs/btn-img1.png" class="slide-image" width="355" height="150"></image></swiper-item>

<swiper-item><image src="/imgs/btn-img2.png" class="slide-image" width="355" height="150"></image></swiper-item>

</swiper>

相关推荐
试剂界的爱马仕1 小时前
α-Cyano-4-hydroxycinnamic acid(CHCA)用作 MALDI-TOF 基质的配制与使用
大数据·人工智能·深度学习·学习
小向是个Der1 小时前
嵌入式进阶——编译与链接
汇编·单片机·学习·编译原理·交叉编译
学网安的肆伍2 小时前
认证机制攻防学习|PortSwigger Authentication 靶场复现总结(二):用户名枚举进阶
学习·web安全·网络安全·burpsuite·portswigger·认证安全·靶场复现
上线再说2 小时前
小程序图片处理从 2.9 秒到 420 毫秒:云函数冷启动的 5 个坑
微信小程序
海绵宝宝转agent2 小时前
Leetcode二叉树算法个人理解
笔记·学习·算法·leetcode·深度优先
沃达德软件2 小时前
智慧教育教学资源管理系统(PC端+微信小程序)
微信小程序·小程序
小oo呆2 小时前
【学习心得】MCP工具开发学习笔记
笔记·学习
kyrie_sakura2 小时前
大模型学习19 大模型学习 - LangChain2_Retrieval(RAG-文档处理-向量处理检索-Milvus)
学习·langchain·milvus
女神下凡3 小时前
芯参谋(79):嵌入式学习进阶_(硬件与软件)深入实践指南
arm开发·单片机·嵌入式硬件·学习·fpga开发·设计规范
星恒随风3 小时前
Linux Socket TCP编程(二):逐文件重构多进程、多线程与线程池服务器,深入fork、pthread_create、popen和std::bind
linux·服务器·笔记·学习·tcp/ip