## 点击图片切换  [TOC] ### 1.基本配置 **** **** ### 2.切换图片页面编写 #### index.wxml ##### if-else判断 ``` <image wx:if="{{show}}" src="/images/tab/ciwei.png" bindtap="click"></image> <image wx:else src="/images/tab/ciwei_hl.png" bindtap="click"></image> ``` >wx：if、wx：else组成一个完整的条件语句判断图片显示状态进行图片切换 ##### 三目运算 ``` <image bindtap="click" src="{{show?'/images/tab/ciwei.png':'/images/tab/ciwei_hl.png'}}"></image> ``` >三目运算 show?url_1:url_2 对show的值进行判断进行图片地址选择实现图片切换 ***** #### index.wxss ``` image{ display: inline-block; width: 175rpx; height: 175rpx; } ``` ***** #### index.json ``` {} ``` ***** #### index.js ``` Page({ if-else判断时使用注释部分 // data:{ // show:false // }, click(){ if(this.data.show){ this.setData({ show:false }) } else{ this.setData({ show:true }) } }, }); ``` >wxml中image绑定点击事件click 此处进行show的判断