微信小程序> 微信小程序图标点击后变色并跳转页面

微信小程序图标点击后变色并跳转页面

浏览量:592 时间: 来源:三足乌乌乌

至今不知道怎么上传动图的我只能用嘴描述了…在微信小程序里,希望出现点击图标图标先变色然后跳转到指定页面。
首先需要准备两张图标的图片,一张是未点击状态,一张是点击后的状态。
index.wxml

<view>        <image catchtap='change' wx:if="{{click}}" src='/icon/1.png'></image>        <image wx:else src='/icon/2.png'></image></view>

wxml里用到了官方文档中的wx.if、wx.else条件渲染。当click为true时,显示1.png,否则,暨click为false,显示2.png。
click在js中先进行初始化定义为true


index.js

page({    data:{    ...    ...    click:true    },    change: function () {    var click = this.data.click;    this.setData({      click: false    })    setTimeout(function () {      wx.switchTab({        url: '/pages/mine/mine',      })    }, 50)  }})

这里用到了setTimeout()来做延时,用wx.switchTab是因为要跳转的页面已经在tabBar列表中了,所以只能用switchTab。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎