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

		}
	})
}
相关推荐
耶啵奶膘4 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o11 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index11 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情18 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00721 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字21 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo14161 天前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app