宜信同城网交流论坛

 找回密码
 立即注册
开启左侧

在wx开发中swiper组件的使用

[复制链接]
发表于 2023-2-16 18:55:00 | 显示全部楼层 |阅读模式 来自 LAN

在使用swiper组件中可以使用,

data : {

        imgs:[

                '  服务器传来的数组值1  ',

                '  服务器传来的数组值2  ',

                '  服务器传来的数组值3  '

        ]

}

4c3b467aaa4782bfa37678a1f18b609d.png

c051ef6c3fbdb36ecd3c4cf5215046ec.png

在wxss中可进行样式的调控

f43c798fad197da0657fbfdb17bdc9f1.png

swiper

常用属性

autoplay 自动播放

interval 指定播放间隔

indicator-dots 出现面板指示点

circular 是否采用衔接滑动

属性类型默认值必填说明最低版本
indicator-dotsbooleanfalse是否显示面板指示点1.0.0
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色1.1.0
indicator-active-colorcolor#000000当前选中的指示点颜色1.1.0
autoplaybooleanfalse是否自动切换1.0.0
currentnumber0当前所在滑块的 index1.0.0
intervalnumber5000自动切换时间间隔1.0.0
durationnumber500滑动动画时长1.0.0
circularbooleanfalse是否采用衔接滑动1.0.0
verticalbooleanfalse滑动方向是否为纵向1.0.0
previous-marginstring"0px"前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值1.9.0
next-marginstring"0px"后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值1.9.0
snap-to-edgeboolean"false"当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素2.12.1
display-multiple-itemsnumber1同时显示的滑块数量1.9.0
easing-functionstring"default"指定 swiper 切换缓动动画类型2.6.5
bindchangeeventhandlecurrent 改变时会触发 change 事件,event.detail = {current, source}1.0.0
bindtransitioneventhandleswiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}2.4.3
bindanimationfinisheventhandle动画结束时会触发 animationfinish 事件,event.detail 同上1.9.0

 

宜信网交流论坛 - 版权声明 1、在发表言论时,请遵守当地法律法规。主题所有言论纯属个人意见,与本站立场无关。
2、本站所有主题由作者发表,作者享有帖子相关版权,其他单位或个人使用、转载或引用本文时必须征得作者同意并注明来源于宜信网
3、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意。
4、帖子不遵守当地法律法规、广告、人身攻击等情况时,宜信网管理人员有权不事先通知发贴者而删除本文。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|宜信同城网交流论坛 ( 闽ICP备19021048号 )|站点地图

GMT+8, 2026-3-28 04:39 , Processed in 0.224163 second(s), 15 queries , Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表