小程式點選輪播圖跳轉到tab導航介面
摘要：
需求：小程式點選輪播圖跳轉到tab導航介面，效果如下所示
點選輪播圖的圖片，跳轉到我的介面上
先實現以下的程式碼，在以下的基礎上，開始實現需求
微信小程式底部導航欄
https://www.jianshu.com/p/89a63...
需求：小程式點選輪播圖跳轉到tab導航介面，效果如下所示
點選輪播圖的圖片，跳轉到我的介面上
先實現以下的程式碼，在以下的基礎上，開始實現需求
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後前端妹子，愛程式設計，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家加入群聊，一起探討交流。