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

52 篇文章 52 订阅

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

5640239-7d9260e1071b76a7.gif
点击轮播图的图片,跳转到我的界面上

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

微信小程序底部导航栏
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后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。

  • 2
    点赞
  • 3
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值