小程序点击轮播图跳转到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 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第81天:jQuery 插件使用方法

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

1022
来自专栏守候书阁

vue组件开发练习--焦点图切换

vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等。今天,我就分享一...

2071
来自专栏知晓程序

开发 | 小程序不够「高级」?那是因为你没用上这 3 个特效!

最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成。

1213
来自专栏移动开发

小trick之tools

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

1062
来自专栏娱乐心理测试

移动端图标生成工具

1160
来自专栏xingoo, 一个梦想做发明家的程序员

JQuery向导插件Step——第一个阉割版插件

如果使用过JQuery Steps的朋友一定会发现这个插件有一个缺点,就是页面在第一次进入的时候,会进行一次很明显的DOM重绘——页面会闪一下。 尤其是前端...

3367
来自专栏全栈

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

1523
来自专栏iKcamp

React 深入系列2:组件分类

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

3895
来自专栏吴裕超

点击穿透原理及解决

一、事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行...

6196
来自专栏Material Design组件

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

2384

扫码关注云+社区