0
点赞
收藏
分享

微信扫一扫

微信小程序 swiper组件

Aliven888 2022-05-31 阅读 72

swiper 是个轮播图组件

其中只可放置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​​

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​​

easing-function 的合法值


说明

最低版本

default

默认缓动函数

 

linear

线性动画

 

easeInCubic

缓入动画

 

easeOutCubic

缓出动画

 

easeInOutCubic

缓入缓出动画

 

​change​​​事件 ​​source​​ 返回值

从 ​​1.4.0​​​ 开始,​​change​​​事件增加 ​​source​​字段,表示导致变更的原因,可能值如下:

  1. ​autoplay​​ 自动播放导致swiper变化;
  2. ​touch​​ 用户划动引起swiper变化;
  3. 其它原因将用空字符串表示。

 

例:

微信小程序  swiper组件_滑块

 

 


 

  所以就是这样算出来的:

解决方案:

1。设置一下 swiper 的 长宽,宽为100% ,长按照上面算:

微信小程序  swiper组件_边距_02

 

 

2.图片设置宽为100%  扯平swiper

 

3.设置图片模式为   widthFix 

<swiper >   <swiper-item> <image src="https://assets.lexus.com.cn/images/index/kv/2880x1480_newes_1.jpg?x-oss-process=image/resize,w_1898/quality,q_80" mode="widthFix"></image></swiper-item>


  <swiper-item> <image src="https://assets.lexus.com.cn/images/models/ls/ls-kv-1-2880.jpg?x-oss-process=image/resize,w_1898/quality,q_80" mode="widthFix"></image></swiper-item>


  <swiper-item> <image src="https://assets.lexus.com.cn/images/index/kv/ux_300e-kv-1-2880.jpg?x-oss-process=image/resize,w_1898/quality,q_80" mode="widthFix"></image></swiper-item>

</swiper>

   呐

 


作者:​​咸瑜​​​

举报

相关推荐

0 条评论