专栏首页编程微刊小程序点击轮播图跳转到tab导航界面

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

相关文章

  • React常用的5个UI框架

    推荐指数:star:60.2k 官网:https://ant.design/docs/react/introduce-cn Github: https://...

    王小婷
  • 2019最受欢迎的前端7个UI框架

    官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-u...

    王小婷
  • 在uni-app项目里使用node服务实现模拟接口

    在uniapp的项目里面,怎么写入模拟接口数据?现在使用node服务实现几个模拟接口,当然是用mock也是可以的哦,方法有很多种,目的只有一个,就是能够娴熟的应...

    王小婷
  • Tasking要拆到什么粒度?

    首先,如果是面向问题域的Tasking,即对业务需求的拆解,标准答案当然是:将所有的需求场景都考虑到。你没看错,是要将所有的需求场景都分析到。你可能会有新的问题...

    袁慎建@ThoughtWorks
  • 编程再好也只能当码农?那你肯定不知道AI量化程序员

    量化,一个横跨多个学科领域的工作。已经在不同场合,听了无数次的三座大山:较好的数学功底、编程技能、金融知识。

    abs_zero
  • 传统软件秒速沦落 被SaaS取代只是时间问题

    在 2014 年 Gartner 就曾预警表示本地 ERP 系统将成为「遗留」软件,2016 年将逐步的被云解决方案取代,当时并没有引起业内人的关注认为这只是一...

    人称T客
  • win64环境下使用curl命令

    想在windows环境下使用curl命令,其实很简单,简单配置如下: 工具下载 在官网下载工具包:https://curl.haxx.se/download.h...

    用户1141560
  • 论文拾萃 | 紧致化智能机器人存取系统的运行策略研究

    近年来,紧致化智能机器人存取系统(Robotic compact storage and retrieval systems)得到了广泛应用。该类系统将货物存储...

    用户1621951
  • 网页布局基础

    小胖
  • 当程序员需要高智商吗?

    缘起 ? 前两天看到一篇微信文章,名叫《程序员真的需要高智商吗?》。内容没细看,不过被题目触动了一下。 程序员看程序员 ? 笔者作为一个积年的老程序员,工作当中...

    叶锦鲤

扫码关注云+社区

领取腾讯云代金券