uniapp-文章收藏功能实现

最新推荐文章于 2024-11-11 18:01:45 发布

我是人间烟火气

最新推荐文章于 2024-11-11 18:01:45 发布

阅读量3.2k

点赞数 5

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_41558808/article/details/122407004

版权

本文介绍了如何在uniapp中实现文章收藏功能。通过布局图文，点击文章上的红心进行收藏，首先检查用户是否已登录，未登录则跳转到登录页面。使用Mixin混入全局来处理登录检验，完成收藏后更新用户信息并获取最新数据。文章详细描述了添加点击提示框、传递文章id和用户id到后端以及动态设置红心状态的过程。

摘要由CSDN通过智能技术生成

uniapp实现文章收藏

首先布局为图文
我们实现点击文章上的红心进行收藏操作
红心组件如下

<template>
  <view class="save-incons" @click.stop="_changeSaveStatus">
    <uni-icons color="#ff6600" :type="isLike ? 'heart-filled':'heart'" size="20"></uni-icons>
  </view>
</template>

在功能实现之前我们需要验证是否为登录的状态如未登录则跳转登录页面
像是检验登录的功能一般会多次用到直接Mixin混入全局使用

checkedIsLogin () {
   
          return new Promise(resolve => {
   
            if (this.userInfo) {
   
              resolve()
            } else {
   
              uni.navigateTo(