swiper小程序開發示例分析

這篇“swiper小程序開發示例分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“swiper小程序開發示例分析”文章吧。

　　swiper中文文檔

　　基礎庫 1.0.0 開始支持，低版本需做兼容處理。

　　滑塊視圖容器。其中只可放置swiper-item組件，否則會導致未定義的行為。

　　屬性類型默認值必填說明最低版本

　　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

　　bindchangeeventhandle否current 改變時會觸發 change 事件，event.detail = {current, source}1.0.0

　　bindtransitioneventhandle否swiper-item 的位置發生改變時會觸發 transition 事件，event.detail = {dx: dx, dy: dy}2.4.3

　　bindanimationfinisheventhandle否動畫結束時會觸發 animationfinish 事件，event.detail 同上1.9.0

　　easing-function 的合法值

　　值說明最低版本

　　default默認緩動函數

　　linear線性動畫

　　easeInCubic緩入動畫

　　easeOutCubic緩出動畫

　　easeInOutCubic緩入緩出動畫

　　change事件 source 返回值

　　從 1.4.0 開始，change事件增加 source字段，表示導致變更的原因，可能值如下：

　　autoplay 自動播放導致swiper變化;

　　touch 用戶劃動引起swiper變化;

　　其它原因將用空字符串表示。

　　Bug & Tip

　　tip: 如果在 bindchange 的事件回調函數中使用 setData 改變 current 值，則有可能導致 setData 被不停地調用，因而通常情況下請在改變 current 值前檢測 source 字段來判斷是否是由于用戶觸摸引起。

　　Page({

　　onShareAppMessage() {

　　return {

　　title: 'swiper',

　　path: 'page/component/pages/swiper/swiper'

　　}

　　},

　　data: {

　　background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],

　　indicatorDots: true,

　　vertical: false,

　　autoplay: false,

　　interval: 2000,

　　duration: 500

　　},

　　changeIndicatorDots() {

　　this.setData({

　　indicatorDots: !this.data.indicatorDots

　　})

　　},

　　changeAutoplay() {

　　this.setData({

　　autoplay: !this.data.autoplay

　　})

　　},

　　intervalChange(e) {

　　this.setData({

　　interval: e.detail.value

　　})

　　},

　　durationChange(e) {

　　this.setData({

　　duration: e.detail.value

　　})

　　}

　　})

以上就是關于“swiper小程序開發示例分析”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。