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) {

		}
	})
}
相关推荐
林涧泣11 小时前
【Uniapp-Vue3】解决uni-popup弹窗在安全区显示透明问题
前端·vue.js·uni-app
寰宇软件2 天前
PHP场馆预定系统小程序
小程序·uni-app·vue·php
林涧泣2 天前
【Uniapp-Vue3】触底加载更多
uni-app
新青年.3 天前
【uniapp】uniapp使用java线程池
javascript·uni-app
答题卡上的情书3 天前
uniapp版本升级
前端·javascript·uni-app
向明天乄3 天前
uniapp 地图添加,删除,编辑标记,在地图中根据屏幕范围中呈现标记
android·java·uni-app
大叔_爱编程3 天前
wx044基于springboot+vue+uniapp的智慧物业平台小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
林涧泣3 天前
【Uniapp-Vue3】图片lazy-load懒加载
uni-app
大叔_爱编程5 天前
wx043基于springboot+vue+uniapp的智慧物流小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
林涧泣6 天前
【Uniapp-Vue3】StorageSync数据缓存API
前端·javascript·uni-app