需求：小程序點擊輪播圖跳轉(zhuǎn)到tab導(dǎo)航界面，效果如下所示

點擊輪播圖的圖片，跳轉(zhuǎn)到我的界面上

先實現(xiàn)以下的代碼，在以下的基礎(chǔ)上，開始實現(xiàn)需求

微信小程序底部導(dǎo)航欄
http://www.itdecent.cn/p/89a63dc99839

微信小程序輪播圖
http://www.itdecent.cn/p/bc3261557031

wxml部分

一切準(zhǔn)備好之后，在wxml文件里面，我們要使用 bindtap在圖片上綁定一個事件，在js里面寫事件函數(shù)的具體操作。

  <image src="{{item}}"  bindtap='click_swiper' class="slide-image"/>

具體代碼如下：

<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
   <image src="{{item}}"  bindtap='click_swiper' class="slide-image"/>
   <!-- 綁定一個事件，在js里面寫事件函數(shù)的具體操作 -->
  </swiper-item>
 </block>
</swiper>

js部分

寫一個click_swiper函數(shù)，函數(shù)執(zhí)行的是，當(dāng)點擊圖片上的事件的時候，觸發(fā)這個函數(shù)，進(jìn)入函數(shù)之后，因為是跳轉(zhuǎn)到tab界面，所以使用switchTab屬性，跳轉(zhuǎn)的指定路徑。

 click_swiper:function(e){
   // 當(dāng)點擊圖片上的事件的時候，觸發(fā)這個函數(shù)
    wx.switchTab({
    //  因為是跳轉(zhuǎn)到tab界面，所以使用switchTab屬性
      url: '/pages/logs/logs',//跳轉(zhuǎn)的指定路徑
    })
  }

具體代碼如下：

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: true,
    autoplay: true,
    interval: 3000,
    duration: 500,

  },

  click_swiper:function(e){
   // 當(dāng)點擊圖片上的事件的時候，觸發(fā)這個函數(shù)
    wx.switchTab({
    //  因為是跳轉(zhuǎn)到tab界面，所以使用switchTab屬性
      url: '/pages/logs/logs',//跳轉(zhuǎn)的指定路徑
    })
  }
})

原文作者：祈澈姑娘
技術(shù)博客：http://www.itdecent.cn/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。
堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見，歡迎大家加入群聊，一起探討交流。