建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序視圖容器swiper
swiper
基礎(chǔ)庫 1.0.0 開始支持，低版本需做兼容處理。
我們注重客戶提出的每個要求，我們充分考慮每一個細(xì)節(jié)，我們積極的做好做網(wǎng)站、網(wǎng)站建設(shè)服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)建站贏得了業(yè)內(nèi)的良好聲譽，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,成都微信小程序,網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。
滑塊視圖容器。
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否顯示面板指示點 | 1.0.0 |
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示點顏色 | 1.1.0 |
| indicator-active-color | color | #000000 | 否 | 當(dāng)前選中的指示點顏色 | 1.1.0 |
| autoplay | boolean | false | 否 | 是否自動切換 | 1.0.0 |
| current | number | 0 | 否 | 當(dāng)前所在滑塊的 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 |
| display-multiple-items | number | 1 | 否 | 同時顯示的滑塊數(shù)量 | 1.9.0 |
| skip-hidden-item-layout | boolean | false | 否 | 是否跳過未顯示的滑塊布局，設(shè)為 true 可優(yōu)化復(fù)雜情況下的滑動性能，但會丟失隱藏狀態(tài)滑塊的布局信息 | 1.9.0 |
| easing-function | string | "default" | 否 | 指定 swiper 切換緩動動畫類型 | 2.6.5 |
| bindchange | eventhandle | 否 | current 改變時會觸發(fā) change 事件，event.detail = {current, source} | 1.0.0 | |
| bindtransition | eventhandle | 否 | swiper-item 的位置發(fā)生改變時會觸發(fā) transition 事件，event.detail = {dx: dx, dy: dy} | 2.4.3 | |
| bindanimationfinish | eventhandle | 否 | 動畫結(jié)束時會觸發(fā) animationfinish 事件，event.detail 同上 | 1.9.0 |
easing-function 的合法值
| 值 | 說明 | 最低版本 |
|---|---|---|
| default | 默認(rèn)緩動函數(shù) | |
| linear | 線性動畫 | |
| easeInCubic | 緩入動畫 | |
| easeOutCubic | 緩出動畫 | |
| easeInOutCubic | 緩入緩出動畫 |
從公共庫v1.4.0開始，change事件返回detail中包含一個source字段，表示導(dǎo)致變更的原因，可能值如下：
autoplay自動播放導(dǎo)致swiper變化；touch用戶劃動引起swiper變化；- 其他原因?qū)⒂每兆址硎尽?/li>
注意：如果在 bindchange 的事件回調(diào)函數(shù)中使用 setData 改變 current 值，則有可能導(dǎo)致 setData 被不停地調(diào)用，因而通常情況下請在改變 current 值前檢測 source 字段來判斷是否是由于用戶觸摸引起。
swiper-item
基礎(chǔ)庫 1.0.0 開始支持，低版本需做兼容處理。
僅可放置在
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| item-id | string | 否 | 該 swiper-item 的標(biāo)識符 | 1.9.0 |
示例代碼：
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
}
})
當(dāng)前題目：創(chuàng)新互聯(lián)小程序教程：微信小程序視圖容器swiper
分享路徑：http://www.dlmjj.cn/article/djpdcpc.html
