微信小程序開發技術教程之swiper組件

2018/8/6 19:30:33
摘要: 微信小程序滑塊視圖容器swiper類似于安卓的ViewPager,但是微信小程序的swiper相比于安卓的ViewPager要容易實現一點,下面將為大家介紹

微信小程序滑塊視圖容器swiper類似于安卓的ViewPager,但是微信小程序的swiper相比于安卓的ViewPager要容易實現一點,下面將為大家介紹swiper的一些使用方法。

 

主要屬性:

屬性名

類型

默認值

說明

Indicator-dots

Boolean

False

是否顯示面板指示點

Autoplay

Boolean

False

是否主動切換

Current

Number

0

當前所在頁碼的index

Interval

Number

5000

自動切換時間間隔

Duration

Number

1000

滑動動畫時長

Bindchange

eventHandle


Current改變是會觸發change事件,event.detail={current:current}

 

數據可以通過抽到js文件中的data進行數據綁定,對bindchange進行監聽,在js中進行業務處理。

 

以下是效果圖:

image.png

 image.png

 

以下是wxml代碼:

 

<!--是否顯示圓點,自動播放, 間隔時間, 監聽滾動和點擊事件-->

<swiper indicator-dots="true" autoplay="true" duration="1000" bindchange="listenSwiper" >

<!--swiper-item只能包含一個節點再多會自動刪除-->

    <swiper-item>

        <view style="background: red; height: 150px"></view>

    </swiper-item>

    <swiper-item>

         <view style="background: green; height: 150px"></view>

    </swiper-item>

        <swiper-item>

          <view style="background: blue; height: 150px"></view>

    </swiper-item>    

</swiper>

 

以下是js代碼:

 

Page({ data:{ // text:"這是一個頁面" },

 /**

* 這里處理滾動事件處理

*/ listenSwiper:function(e) { 

//打印信息 

console.log(e)

 },

onLoad:function(options){ 

// 頁面初始化 options為頁面跳轉所帶來的參數

 },

 onReady:function(){ 

// 頁面渲染完成 

},

onShow:function(){

 // 頁面顯示 

},

onHide:function(){ 

// 頁面隱藏 

},

onUnload:function(){

 // 頁面關閉 

} })



聲明:文章"微信小程序開發技術教程之swiper組件"為互誠科技—微信小程序開發公司的原創文章,轉載請注明出處,謝謝合作!
標簽:小程序干貨
電話咨詢:18011971195(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 小程序在未來的應用場景可以有哪些?

    現在的微信小程序應用場景除了線上之外,更多的是線下的。不過由于現在仍處于發展的初級階段,所以不是每個行業都能在小程序開發的服務范圍之內,一些仍未涉及到的行業還有待開發。這些有待開發的行業與應用場景,就是我們今天這篇文章要說的中心點。

  • 開發微信小程序商城系統,形成O2O場景互動格局

    在微信小程序開發技術的支持上,衍生出一種叫微信小程序商城系統的產品

  • 微信小程序開發市場,真的有免費模板嗎?

    現在去網頁上搜索微信小程序開發模板,都會出現很多文案或者鏈接都在說免費模板、免費模板跟免費模板。可是,現在的市場上,真的有免費的小程序開發模板嗎?其實還真有,不過好不好用、會不會騙人就是另外一回事了。

  • 微信小程序最終會不會取代公眾號?

    微信小程序自出現以來就很多人在預言,說由于小程序跟公眾號沒什么不同,但使用比公眾號更加方便,所以最終可能就會取代公眾號。這個說法到底對不對呢,有沒有可能呢,是不是會成真呢?小編認為還是不太可能的,兩者雖然有相似的地方,但是也有不同

  • 開發微信小程序必須做的四件事情

    注冊與開發微信小程序之后,除了必要的建設之外,還有四件企業商家必須要做的事情,這些工作關乎到小程序上線之后的發展快慢與好

  • 開發拼團小程序,讓商城營銷傳播效果更佳

    對于微信小程序的開發方向,由于小程序開發限制條件比公眾號更寬松,所以它的開發方向想象空間更大,在服務類目與開發條款允許的范圍內,基本能想象出來的開發內容與形式都能被最終呈現出來。比如商城類的折扣小程序、集贊小程序、拼團小程序。本文以拼團小程序為例,說下這類小程序的開發價值。

上海快三走势图上海快3形态走势