#每天都是崭新的一天#再累也要照顾好自己
微信小程序图标点击后变色并跳转页面
发布于 作者 suning 417 次浏览 来自 分享

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


发布评论
微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11