【收藏 / 取消收藏】uniapp&vue开发,实现点击收藏/取消收藏功能

导读:本篇文章讲解 【收藏 / 取消收藏】uniapp&vue开发,实现点击收藏/取消收藏功能,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、实现效果如下:

在这里插入图片描述
在这里插入图片描述

二、代码如下:

<!-- 收藏 -->
<view class="collectbox">
	<!-- 未收藏 -->
	<image v-if="collect==false" @click="changeImg" src="../../static/img/collect.png"></image>
	
	<!-- 选中收藏 -->
	<image v-if="collect==true" @click="changeImg" src="../../static/img/collect_active.png"> </image>
</view>

<script>
	export default {
		data() {
			return {
				collect: false, //判断是否已收藏
			}
		},

		onShow() {},
		onLoad(option) {}
		
		methods: {
			
			//点击收藏的效果
			changeImg() {
				var that = this;
				var params = {
					id: that.case_id
				}
				//收藏
				if (that.collect == false) {
					this.$api.appPlateForm('POST', 'example/collection', params, function(res) {
						if (res.code == 200) {
							that.collect = true;
							uni.showToast({
								icon: 'success',
								title: '收藏成功'
							})
						}
					}, function(err) {
						uni.showToast({
							icon: 'none',
							title: err.msg
						})
					});
				} else {
					//取消收藏
					this.$api.appPlateForm('POST', 'example/collectDel', params, function(res) {
						if (res.code == 200) {
							that.collect = false;
							uni.showToast({
								icon: 'none',
								title: '取消成功'
							})
						}
					}, function(err) {
						uni.showToast({
							icon: 'none',
							title: err.msg
						})
					});
				}
			},

	
		}
	}
</script>

##ending~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/96019.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!