uniapp——点赞、取消点赞

案例

更新点赞状态,而不是每次都刷新整个列表。避免页面闪烁,提升用户体验

代码

html 复制代码
<view class="funcBtn zan" @click="onZan(index,item.id)">
	<image src="/static/images/circle/zan.png" mode="aspectFill"
		v-if="!item.like_status"></image>
	<image src="/static/images/circle/zan2.png" mode="aspectFill"
		v-if="item.like_status"></image>
	<view class="nums">{{item.like_num}}</view>
</view>
javascript 复制代码
// 点赞
function onZan(index, likeId) {
	if (list.value[index].like_status) {
		list.value[index].like_status = false
		list.value[index].like_num--
		likeImport(likeId)
	} else {
		list.value[index].like_status = true
		list.value[index].like_num++
		likeImport(likeId)
	}
}
//接口
function likeImport(likeId) {
	api.getLikeSave({
		release_id: likeId
	}).then(res => {
		if (res.code == 1) {

		}
	})
}
相关推荐
web150850966415 小时前
在uniapp Vue3版本中如何解决webH5网页浏览器跨域的问题
前端·uni-app
何极光15 小时前
uniapp小程序样式穿透
前端·小程序·uni-app
User_undefined1 天前
uniapp Native.js 调用安卓arr原生service
android·javascript·uni-app
流氓也是种气质 _Cookie1 天前
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
ffmpeg·uni-app
爱笑的眼睛111 天前
uniapp 极速上手鸿蒙开发
华为·uni-app·harmonyos
鱼樱前端2 天前
uni-app框架核心/常用API梳理一(数据缓存)
前端·uni-app
阿琳a_2 天前
解决uniapp中使用axios在真机和模拟器下请求报错问题
前端·javascript·uni-app
三天不学习2 天前
uni-app 跨端开发精美开源UI框架推荐
ui·uni-app·开源
多客软件佳佳2 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
洗发水很好用2 天前
uniApp上传文件踩坑日记
uni-app