微信小程序開發技術教程之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(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 小程序開發公司分析如何開發獲取用戶基本信息

    微信小程序平臺運營時,要獲取獲取用戶的基本信息,是需要用戶授權的,而這種授權獲取的開發,需要調用wx.login接口、login接口等

  • 微信官方為什么要開發小程序,互誠科技公司告訴你

    微信官方近些年在微信公眾號與微信小程序的開發上都有相似程度的大動作,就像曾經的公眾號一樣,如今小程序的開發與推廣也開始在風風火火地進行。

  • 目前微信小程序開發的市場反應如何

    對于微信小程序開發的市場反應可以分為三個階段:過去、目前與未來。過去式作為已經發生過的事情,小程序低迷的市場反應大家也已經看在眼中

  • 微信小程序開發,參數取值方法介紹

    一個微信小程序開發項目,在整個開發流程中,必要用到的就是參數取值,一般來說,常見的參數取值有列表index下標取值與form表單取值

  • 微信小程序開發能給線下商家帶來哪些好處

    小程序的出現,在一定程度上方便了微信用戶的生活外,也給企業商家帶來新一輪的微信營銷利益,

  • 餐飲行業開發微信小程序,有什么形式可以選擇

    衣食住行一直是人類生活的必須環節,而且這四個方面的商家經營模式大多數都是以線下門店體驗為主。現在小編以“食”這個維持人類生命的重點來舉例,說說餐飲行業開發微信小程序,到底可以有什么形式可供選擇。

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