需求：小程序点击轮播图跳转到tab导航界面，效果如下所示
点击轮播图的图片，跳转到我的界面上
先实现以下的代码，在以下的基础上，开始实现需求
微信小程序底部导航栏
https://www.jianshu.com/p/89a63dc99839
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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家加入群聊，一起探讨交流。
