服装公司网站建设策划,长春网站建设于健,友情链接怎么购买,杭州做网站好的公司7.1 视图容器组件
7.1.3 swiper与swiper-item组件
swiper组件的显示效果如下图所示#xff1a; indicator-dots、indicator-color和indicator-active-color三个属性用于设置swiper组件下方的指示点。设置指示点的颜色时#xff0c;可以使用HexColor#xff0c;也可以使用r…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-itemimage src/imgs/btn-img1.png classslide-image width355 height150/image/swiper-item
swiper-itemimage src/imgs/btn-img2.png classslide-image width355 height150/image/swiper-item
/swiper
