實現的效果圖

?

實現的方式有2中 先說下思路

1 使用wx:if?寫2個圖片 點擊的顯示一張即可,

2 使用數據傳遞當拿到圖片的時候更換圖片即可.

看下代碼

2中方式:xml

<view class="intro">

<image catchtap='open_tap' wx:if="{{isShow}}" src="/images/icon_flashlight_open.png" class="coding_flash_image"></image>

<image wx:else catchtap='close_tap' src='/images/icon_flashlight_close.png' class="coding_flash_image"></image>

<view>

<image catchtap='open' wx:if="{{iShow}}" src="{{url}}" data-msg="{{url}}" class="coding_flash_image"></image>

</view>

</view>

?

js中

data: {

isShow:false,

url:"../images/icon_flashlight_close.png",

iShow:true

},

?

close_tap:function(){

this.setData({

isShow:true

})

},

open_tap:function(){

this.setData({

isShow: false

})

},

?

open:function(res){

console.log(res);

let url

if (res.currentTarget.dataset.msg =="../images/icon_flashlight_close.png"){

url ="../images/icon_flashlight_open.png"

}else{

url ="../images/icon_flashlight_close.png"

}

this.setData({

url:url

})

},

方式2 使用的時候需要先打印下值

就可拿到值了

給出demo地址參考

demo地址如果幫助了您,希望給一個免費的star

?

總結

以上是生活随笔為你收集整理的微信小程序点击图片切换图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。