先來熟悉一個swiper元件，可以實現我們常見的輪播圖效果。

<view>
    <swiper class='swiper' indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" autoplay="true" interval="2000">
      <swiper-item><image src='/imgs/3.jpg'></image></swiper-item>
      <swiper-item><image src='/imgs/4.jpg'
 
></image></swiper-item>
      <swiper-item><image src='/imgs/5.jpg'></image></swiper-item>     
    </swiper>

indicator-dots=”true” 這個是顯示面板的指示點
indicator-color=”rgba(0, 0, 0, .3)”這個是設定小圓點的顏色
vertical=’true’縱向滾動
autoplay=”true” 自動滾動，輪播圖輪播圖這個肯定是要有的，不可能要使用者手動自己播吧-.-
interval=”2000” 這個是設定間隔的滾動時間，單位是ms，也就是兩秒

事件

<text class='moto' bindtap="onTap">開啟小程式之旅</text>

Page({
  onTap:function(){
    // //頁面跳轉，可返回
    // wx.navigateTo({
    //   url:'../post/post'
    // })

    wx.redirectTo({
      url: '../post/post',
      success:function(res){
        console.log(res);
      }
    })
  },
})

當滑鼠點選開啟小程式之旅的時候，會觸發onTap繫結的函式
wx.navigateTo和wx.redirectTo這兩個都可以進行頁面跳轉，他們的區別在於，wx.navigateTo這個用於平級頁面跳轉，也就是它跳轉頁面的時候前面的頁面並沒有關閉，而是隱藏起來了，來來來，往下看

看看上面多了一個返回的標誌

wx.redirectTo這個方法，它會把前一個頁面個關閉掉

再來看看其他的方法

 wx.navigateTo({
      url: '../post/post',
      success:function(res){
        console.log('跳轉成功執行')
      },
      fail:function(){
        console.log("跳轉失敗執行")
      },
      complete:function(){
        console.log('無論成功失敗都執行')
      }
    })

這兩個跳轉相對應的方法，來看一下

一個是onUnload，另一個是onHide

  //頁面隱藏的時候呼叫
  onHide:function () {
    console.log('haha')
  },
  //頁面被關閉時
  onUnload:function(){
    console.log('hahah')
  },

冒泡事件

什麼時冒泡時間？

也就是當觸發子節點的時候，父節點也會受到影響。

我們來你看一個例子

    <view class='moto-container' bindtap='onContainerTap'>
            <text class='moto' bindtap="onSubTap">開啟小程式之旅</text>
    </view>

  onContainerTap:function(){
    console.log('onContainerTap')
  },
  onSubTap:function(){
    console.log('sub')
  }

愁一愁控制檯啥樣

父節點受到影響

怎麼解決？來看。

    <view class='moto-container' bindtap='onContainerTap'>
            <text class='moto' catchtap="onTap">開啟小程式之旅</text>
    </view>

把bindtap改成catchtap就好，父節點不會受到影響。

獲取Page資料

page({
data:{name:"test"},
    showData:function(){
        var text=this.data.name
        console.log(text);
    }
})