小程序點擊輪播圖跳轉到tab導航界面

需求：小程序點擊輪播圖跳轉到tab導航界面，效果如下所示

點擊輪播圖的圖片，跳轉到我的界面上

先實現以下的代碼，在以下的基礎上，開始實現需求

微信小程序底部導航欄 https://www.jianshu.com/p/89a63dc99839

微信小程序輪播圖 https://www.jianshu.com/p/bc3261557031

wxml部分

一切準備好之後，在wxml文件裏面，我們要使用 bindtap在圖片上綁定一個事件，在js裏面寫事件函數的具體操作。

  <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裏面寫事件函數的具體操作 -->
  </swiper-item>
 </block>
</swiper>

js部分

寫一個click_swiper函數，函數執行的是，當點擊圖片上的事件的時候，觸發這個函數，進入函數之後，因爲是跳轉到tab界面，所以使用switchTab屬性，跳轉的指定路徑。

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

具體代碼如下：

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){
   // 當點擊圖片上的事件的時候，觸發這個函數
    wx.switchTab({
    //  因爲是跳轉到tab界面，所以使用switchTab屬性
      url: '/pages/logs/logs',//跳轉的指定路徑
    })
  }
})

原文作者：祈澈姑娘 技術博客：https://www.jianshu.com/u/05f416aefbe1 90後前端妹子，愛編程，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家加入羣聊，一起探討交流。