需求: 小程序点击轮播图跳转到 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',// 跳转的指定路径
- })
- }
- })
来源: http://www.jianshu.com/p/8b7c01e2e9a4