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