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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏雪胖纸的玩蛇日常

Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门)

还有选最后一条时,让你选npm、yarn、No,I can handle it myselft,要选第三个No,I can handle it myselft,...

23630
来自专栏娱乐心理测试

移动端图标生成工具

16600
来自专栏coding for love

CSS入门11-定位与覆盖

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

12520
来自专栏移动开发

小trick之tools

以前写布局时为了观看布局效果,会写些静态的测试数据,以便在androidstudio中观察布局的效果.等到写完布局的时候在进行擦除.当布局很多的时候,这确实也是...

11420
来自专栏iKcamp

React 深入系列2:组件分类

文:徐超,《React进阶之路》作者 授权发布,转载请注明作者及出处 ---- React 深入系列2:组件分类 React 深入系列,深入讲解了...

40650
来自专栏快乐八哥

使用jQuery的animate方法制作滑动菜单

周末看Ziv小威的博客《制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿》,参见地址:http://www.cnblogs.com/zivxiaowei/p/...

25490
来自专栏Google Dart

AngularDart Material Design 卡片 顶

材料卡是由Google材料团队(也称为mdc-web)提供的卡片样式。 这是一个允许在AngularDart应用程序中使用样式的包装器。 有关如何使用这些样式的...

16740
来自专栏小程序之家

如何在小程序中实现音频播放

在如何使用小程序媒体组件这篇文章中,我们介绍了小程序媒体组件的使用,但是对音频组件部分讲的不够详细,本文将对音频部分做些补充。

4.5K10
来自专栏全栈

前端工程化(三)---Vue的开发模式

17630
来自专栏前端知识分享

第81天:jQuery 插件使用方法

在追求页面互动效果的时代,大家都想把页面效果做的美轮美奂,这一切都离不开前端技术脚本Javascript,而最近常被人用到的Javascript库文件则是jQu...

11920

扫码关注云+社区

领取腾讯云代金券