微信小程序 swiper組件

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. 其它原因將用空字符串表示。

 

例：

 

 

 

 　所以就是這樣算出來的：

解決方案：

1。設置一下 swiper 的 長寬，寬為100% ,長按照上面算：

 

 

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>

   吶