前言

一、uniapp小程序收藏功能

思路分析：

父组件引入子组件.并且父组件通过属性绑定向子组件传递数据
子组件利用props来接收父组件传来的值，并且进行数据数据初始化赋值
子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏
点击收藏，切换状态，并且调用更新数据接口
在更新数据接口里面，通过 uni.showLoading() uni.hideLoading() uni.showToast({
title:this.like?‘收藏成功’:‘取消收藏’,
icon:‘none’
})
来切换状态

1 父组件向子组件传值

<likes :item="item"></likes>

2 子组件接收到值，将数据初始化

props: {item: {type: Object,default () {return {}}}},data() {return {like: false};},watch: {item(newVal) {this.like = this.item.is_like}},created() {this.like = this.item.is_like},

子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏

<uni-icons size="20" color="#f07373" :type="like?'heart-filled':'heart'"></uni-icons>

点击收藏，切换状态，并且调用更新数据接口

methods: {likeTap() {this.like = !this.likethis.setUpdateLikes()console.log('收藏成功');},setUpdateLikes() {uni.showLoading()console.log(111)this.$api.update_like({user_id: '5e76254858d922004d6c9cdc',article_id: this.item._id}).then(res => {console.log(111)uni.hideLoading()console.log('是否', this.like)uni.showToast({title:this.like?'收藏成功':'取消收藏',icon:'none'})console.log(res);}).catch(()=>{uni.hideLoading()})}

完整收藏组件

<template><view class="icons" @click.stop="likeTap"><uni-icons size="20" color="#f07373" :type="like?'heart-filled':'heart'"></uni-icons></view>
</template><script>export default {props: {item: {type: Object,default () {return {}}}},data() {return {like: false};},watch: {item(newVal) {this.like = this.item.is_like}},created() {this.like = this.item.is_like},methods: {likeTap() {this.like = !this.likethis.setUpdateLikes()console.log('收藏成功');},setUpdateLikes() {uni.showLoading()console.log(111)this.$api.update_like({user_id: '5e76254858d922004d6c9cdc',article_id: this.item._id}).then(res => {console.log(111)uni.hideLoading()console.log('是否', this.like)uni.showToast({title:this.like?'收藏成功':'取消收藏',icon:'none'})console.log(res);}).catch(()=>{uni.hideLoading()})}}}
</script><style>.icons {position: absolute;right: 0;top: 0;display: flex;justify-content: center;align-items: center;width: 20px;height: 20px;}
</style>

使用步骤

引入uniapp中的icons

下载icons插件 https://ext.dcloud.net.cn/plugin?id=2183

代码如下（示例）：

在项目里新建一个icons 文件，将icons.js 和 icons.vue导入文件(原因是文件名和文件一致符合easyCom规范，不用导入，注册组件，直接用即可).我这里是都改成了uni-icons

uniapp 收藏功能实现及组件封装相关推荐

【uniapp】组件封装与引用
前言 Hbuilder X 2.7.14.20200618 假设需求在 [uni-app]自定义导航栏/标题栏中提到,可以全局取消原生导航栏.全局取消原生导航栏后,就需要为每个页面均添加一个自定义 ...
uniapp写小程序组件封装修改数据不渲染
uniapp写小程序组件封装修改数据不渲染数据通过props传进来的,对数据进行修改,js打印是有修改的,但是页面无变化,最好找的原因,props传入的数据是不能去直接操作的,可以使用其他方法,比如 ...
微信小程序原生开发功能合集二：下拉选择组件封装
本章实现小程序中下拉选择组件的封装实现,通过自定义组件的方式实现下拉选择功能,使用小程序的picker组件实现下拉数据的展示及相关自定义处理,封装数据加载过程,数据切换逻辑监听等. 本节实现s ...
vue组件封装技巧，如何对vue模块进行功能封装
如何对vue模块进行功能封装,vue组件封装技巧当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用.与其让自己或他人面 ...
Vue + Element UI 实现权限管理系统前端篇（七）：功能组件封装
组件封装为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构组件封装重构后,试图组件结构如下图所示代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
大家好,这是小程序系列的第九篇文章,从这篇开始我们将进入提高篇,在这一个阶段,我们的目标是可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序 ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件
零.问题的由来一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...
layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...

uniapp 收藏功能实现及组件封装

前言

一、uniapp小程序收藏功能

思路分析：

1 父组件向子组件传值

2 子组件接收到值，将数据初始化

子组件利用属性绑定，根据当前的type值来显示已收藏还是未收藏

点击收藏，切换状态，并且调用更新数据接口

使用步骤

引入uniapp中的icons

uniapp 收藏功能实现及组件封装相关推荐

最新文章

热门文章