小程序--数据更新--点赞功能

小程序–组件中的属性值和初始数据的更新

举个小栗子：平时经常遇到的点赞小功能

点击?形图标，心心点亮，点赞数+1；
再次点击?形图标，心心变暗，点赞数-1；
此处涉及到心心图标和点赞数的更新，具体实现如下⤵️

html代码：

<view bind:tap="onLike" class="container"><image src="{{like ? yesSrc : noSrc }}" /><text>{{count}}</text>
</view>

css代码：

.container{/* flex布局（inline-flex）使块状元素消除，同时让盒子自适应 */display:inline-flex;flex-direction: row;padding:10rpx;width:90rpx;
}
.container image{width:32rpx;height:28rpx;
}
.container text{font-size:24rpx;line-height: 24rpx;color:#bbb;position:relative;bottom:10rpx;left:6rpx;
}

js代码：

Component({/*** 组件的属性列表*/properties: {// 外部传入数据},/*** 组件的初始数据*/data: { // 组件内部数据like: false,count: 0,yesSrc: 'images/like.png', // 点赞时的图片路径noSrc: 'images/like@dis.png' // 没有点赞时的图片路径},/*** 组件的方法列表*/methods: {onLike: function(e) {let like = this.properties.likelet count = this.properties.countcount = like ? count - 1 : count + 1this.setData({ // 更新数据like: !like,count: count})}}
})

到此，页面上的心形点赞功能就实现啦。如果小伙伴们项目里用到此功能的话，记得对接后台接口呦~不然只是页面上的样式有变化，一刷新又恢复原状了呢！

结语：this.setData({ key: value })
它的作用主要是做数据更新，小程序中的data数据更新，必须通过setData来做。不光是data里的数据，properties里的属性值也是用 setData({}) 来更新的。

小程序--数据更新--点赞功能相关推荐

微信小程序文章点赞功能
小程序给文章点赞资讯列表页详情页小程序前端代码: (在前端添加点击事件 bindtap='update') <view style='padding-top:30rpx;width:93 ...
小程序的点赞功能能和浏览次数功能_扫码点餐小程序好用吗？小程序还能实现哪些功能？...
有不少的餐厅现在都可以用小程序扫码点餐了,为什么现在很少用公众号点餐了?原因其实很简单,用公众号点餐用户还要关注公众号,第二个就是在于公众号每天发消息很烦,而小程序则没有这样的烦恼,只在使用的时候打开 ...
微信小程序列表点赞功能
实现思路: 1.找到对应文章的id 2.前端利用缓存wx.setStorageSync或者在页面js中this.setData()保存列表中点赞的id 3.点赞和取消点赞对应点赞数改变 4.后台的数据 ...
微信小程序实现点赞功能（前端）
可以通过以下代码实现点赞效果,且只能点赞一次: <view class="card-right"><text class="topText"& ...
食堂团餐预定小程序开发制作功能介绍
食堂团餐预定小程序主要用于用户写字楼,食堂等针对指定区域大量订餐使用可提前设置一周菜品,允许开关周六周日来适应各种调休假期政策. 食堂团餐预定小程序开发制作功能介绍: 前端点餐:当天下单.选择开放地点 ...
微信小程序实现点赞气泡效果
微信小程序实现点赞气泡效果先上代码: <view class="listImg"><block wx:for="{{8}}" wx:key= ...
读书会小程序开发制作功能介绍
一款读书会小程序,能够浏览成千上万本著作,同时阅读界面功能齐全,阅读体验也不错,还能离线缓存,以及能够听书等等.让你发觉生活中的美好,增强自己的文化底蕴,里面的书籍读友们可以分享出来给你的读友们阅读. ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
字节跳动小程序接入支付功能
我个人博客文章地址:字节跳动小程序接入支付功能这个文章只是我做完支付后的总结,尽量写的简单易懂,也是方便自己以后忘了看一眼就能懂

小程序--数据更新--点赞功能

小程序–组件中的属性值和初始数据的更新

小程序--数据更新--点赞功能相关推荐

最新文章

热门文章