如果对本例有更好的意见和建议,希望给予留言或是加群跟群主联系,交流学习。

WXML:

<block wx:for="{{nums}}" wx:for-index='idx' wx:for-item='item'>
<view class="maxbox" bindtap="imgchange" data-id="{{idx}}">
<view class="zan">
<image wx:if="{{ item.id == idx }}" class="zan01" src="img/zan1.png" ></image>
<image wx:else class="zan01" src="img/zan2.png"></image>
</view>
<text class="nums">{{item.num}}</text>
</view>
</block>

JS:

Page({
data: {
nums: [
{ id: 0, num: 11 },
{ id: 1, num: 22 }
]
},
imgchange: function (event) {
//获取当前item的下标id 通过currentTarget.id
//data-id
var dataid = event.currentTarget.dataset.id;
var nums = this.data.nums[dataid].num;
//数据里面的id;
var ids = this.data.nums[dataid].id;
if ( dataid == ids ){
nums++;
this.data.nums[dataid].num = nums;
this.data.nums[dataid].id = ids + 1;
this.setData({
nums: this.data.nums
});
}else{
nums--;
this.data.nums[dataid].id = ids - 1;
this.data.nums[dataid].num = nums;
this.setData({
nums: this.data.nums
});
}
},
})

效果如下:

小程序数据绑定点赞效果切换(交流QQ群:604788754)的更多相关文章

  1. 针对小程序for循环绑定数据,实现toggle切换效果(交流QQ群:604788754)

    如有更好的方法实现,可以留言或加群交流学习.谢谢(交流QQ群:604788754) WXML: <block wx:for="{{datanum}}" wx:for-inde ...

  2. 小程序中通过判断id来删除数据,当数据长度为0时,显示隐藏部分(交流QQ群:604788754)

    欢迎加入小程序交流群:本群定期更新在工作种遇到的小知识(交流QQ群:604788754) WXML: <!--遍历循环的数据部分--> <block wx:for="{{d ...

  3. 微信小程序wx.previewImage实用案例(交流QQ群:604788754)

    本案例是可以滑动预览多张图片效果.(本案例在本地配置好之后,请扫描二维码到手机滑动预览.在开发者工具上预览,滑动不是很流畅) 图片必须选择远程图片,本地图片无法实现预览. 或是通过wx.chooseI ...

  4. 微信小程序的动画效果

    前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是 ...

  5. 物联网 软硬件系统 树莓派 单片机 esp32 小程序 网页 开发 欢迎相互交流学习~

    物联网软硬件开发 知识分享 多年学生项目开发经验 物联网 软硬件系统 树莓派 单片机 esp32 小程序 网页 开发 欢迎相互交流学习~ http://39.105.218.125:9000/

  6. 电脑问题交流QQ群

    各种电脑问题交流QQ群号 164853622 系统重装 系统恢复 系统出问题 电脑主页 修改 主页 搜狗 软件卸载 顽固 病毒 讨论

  7. 小程序animation动画效果综合应用案例(交流QQ群:604788754)

    如果案例有问题,可到QQ群找到今日相关压缩文件下载测试. WXML: <view class="cebian"> <view animation="{{ ...

  8. 最新小程序教学视频,欢迎加小程序交流群免费获取(微信小程序开发(交流QQ群:604788754)

    本群会定期分享在工作中做的一些小程序页面,不懂之处也可以随时咨询,可以互相交流学习. 教学视频直接入群,在群公告中显示,优秀小程序代码在群文件中免费获取. 今日代码小程序首页欢迎页面,效果图如下.代码 ...

  9. 小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

    本来呢,我是有专门整理小程序恶心bug的文章的,每次只要添加汇总就好, 但是呢,鉴于这个问题的恶心程度,所以我把他单独拿出来说了. ---------------------------------- ...

随机推荐

  1. linux 常用命令 和 nginx(反响代理、负载均衡)安装和配置

    (1)linux常用命令 [1]在光标前输入内容:i [2]删除输入方式下所输入的文本:Ctrl+u  [3]文件保存退出:wq [4]文件不保存退出:q [5]文件强制退出:q! [6]常规删除文件 ...

  2. 火狐开发----Web开发者工具

    作为开发Web相关人员,有必要了解这个开发工具,会提供给你不少的帮助,进入正题.经典的F12启动,这个大家都知道. 一 控制台可以很好的帮我们掌控错误,包括文件的加载.JS语法.CSS语法.安全问题. ...

  3. python dict字典和set集合用法

    创建字典:键  值  key  value c = {'张三':59, '李四':60, '王五':100} #查 print(c['张三'])  #打印张三的成绩 #改 c['张三'] = 60 # ...

  4. php 随机红包算法

    <?php /** * 红包分配算法 * * example * $coupon = new Coupon(200, 5); * $res = $coupon->handle(); * p ...

  5. JSP等模板引擎已死,大前端为趋势

    我们先来看一下tomcat版本数据: 我们可以看到,从tomcat8之后JSP就再没有新的支持了,tomcat8大概是2013年发布的,也就是说,从2013年开始jsp技术已经实质上不被官方继续维护了 ...

  6. shell实现大批量word转码然后分析相关字段

    需求 需要从服务器中的所有附件(2013-2019) 共60G查找相关字段 在linux上面直接打开doc等是乱码的 思路 先全部附件转码为txt, 然后用grep遍历查找字段实现 转码shell # ...

  7. HDU 1074 Doing Homework【状压DP】

    Doing Homework Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he ...

  8. 【做题】CERC2017B. Buffalo Barricades——时间倒流

    原文链接 https://www.cnblogs.com/cly-none/p/CERC2017B.html 题意:在一个网格平面上,有\(n\)个点,其中第\(i\)个点在以\((x_i, y_i) ...

  9. 优雅的使用Linux

    优雅的使用Linux 系统安装 启动盘制作 通过rufus烧制官网镜像,注意根据自己系统的引导模式选择相应模式,不确定的,可以在windows中通过Win + R 快捷键调出"运行" ...

  10. Maven下载与环境变量配置

    前言: Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK.如果还未安装 JDK,可以参考Win10下JDK下载与环境变量配置. 项目 要求 JDK Maven 3.3+ ...