小程序点击轮播图跳转到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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家加入群聊，一起探讨交流。

扫描二维码关注公众号，回复： 3969320 查看本文章