微信小程序点击图片切换图片

实现的效果图

实现的方式有2中先说下思路

1 使用wx:if 写2个图片点击的显示一张即可,

2 使用数据传递当拿到图片的时候更换图片即可.

看下代码

2中方式:xml

<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

微信小程序点击图片切换图片相关推荐

微信小程序点击卡片切换动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: html <view class='aa'><image animation=&qu ...
微信小程序点击换头像-图片从本地获取-tab选项卡-点击按钮出弹框
 <view class='member'><image class='header' src=&qu ...
微信小程序点击右下角的图片移动到当前位置
这个功能呢看了官方的demo 里面有,由于项目中用到了这个功能这里记录一下一般的地图有这个图标点击地图会跳转到个人当前定位的位置首先在wxml 中给 map 取名一个id 下面是我的id 取名为 ...
微信小程序-点击按钮，图片重新加载
在按钮绑定的响应方法里用setData给imageUrl设定新的地址即可 reLoadImage:function(event){console.log(event)var that = this;t ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
初学者笔记——微信小程序点击图片放大
微信小程序点击图片放大 wx.previewImage 官方文档的解释 PS:红色框框内要注意,需要预览的图片连接列表只支持网络连接图片,2.2.3版本以上支持云文件ID. 将图片dream.jpg上 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...

微信小程序点击图片切换图片

微信小程序点击图片切换图片相关推荐

最新文章

热门文章