小程序点击轮播图跳转到tab导航界面

王小婷

发布于 2018-10-11 09:53:33

1.4K0

发布于 2018-10-11 09:53:33

文章被收录于专栏：编程微刊编程微刊

需求：小程序点击轮播图跳转到tab导航界面，效果如下所示

点击轮播图的图片，跳转到我的界面上

先实现以下的代码，在以下的基础上，开始实现需求

微信小程序底部导航栏 https://cloud.tencent.com/developer/article/1140238 微信小程序轮播图 https://cloud.tencent.com/developer/article/1140235

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',//跳转的指定路径
    })
  }
})