微信小程序图标点击后变色并跳转页面
至今不知道怎么上传动图的我只能用嘴描述了…在微信小程序里,希望出现点击图标图标先变色然后跳转到指定页面。
首先需要准备两张图标的图片,一张是未点击状态,一张是点击后的状态。
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博客园
- weekly周报
- loveBook
- 前端博客
- 技术交流学习社区
- saucxs
- segmentfault
- saucxs的博客
- haorooms
- luckyscript
- 东方财富期货
- 峰云就她了
- binlive
- songEagle
- 且听风吟
- (TX)Heying Ye
- CG Online Judge
- Chris's Blog
- vueRouter
- 龙恩0707
- 鑫空间,鑫生活
- 木易杨
- MDN-js
- Cherry's Blog
- InterviewMap
- 安安哥的小戏台
- xiaojun1994-cat
- JavaScript-Garden
- junruchen-daily
- 秋天爱美丽
- web-summary-daily
- w3cplus-tb
- 潜行者m
- 于江水
- KieSun-git
- cnodejs
- aerminBlog
- fex_bd
- gwuhaolin-git
- Deboy's Blog
- react-china
- react.docschina
- Vuejs社区
- vuejsDoc
- cdnSocketIo
- shuaihuaCC
- colorize
- stazhu
- 前端学习
- IBM Dev社区
- linux运维笔记
- webpackDoc
- sayskyGithub
- 前端里
- 996.ICU
- electronjs
- CS-Notes
- mqyqingfengBlog
- beego官方
- 编码规范
- 阮一峰个人网站
- sessionstack
- damonareGoUp
- 咀嚼之味
- fe-interview
- xd-tayde/blog
- css-tricks
- ghmagical个人中心
- markyunp6
- hellogithub
- 霜序廿
- rin部落
- 建站素材
- 前端资源网
- CSS开发手册
- web技术交流
- 程新松个人网站
- wangEditor
- 小松博客
- 交流学习社区