uniapp实现动态标记效果详细步骤【前端开发】，前端面试送分题

这个效果的场景有很多的实际意义，比如说制作一个实时的点赞、收藏或关注某个人、商品等等功能的时候，需要一个实时的前端反馈效果。

这个效果看似非常简单，但是有两个难点：

🌀第一个点在于实现：事先没有定义的、需要从后端实时获取的内容选中。这是什么意思呢？比如说上面gif图中的这些人物的信息，每一行都是从后端发起请求获取后渲染到前端的，而不是我们实现就定义好的内容，因此实现选中它们中的某一行，是需要一些特殊方法的。

🌀第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。

---

II.动态标记效果实现思路和步骤

---

首先，整体的思路是利用动态类名对不同的元素进行选择。下面对具体的步骤进行介绍：

1️⃣搭建该效果的基础前端组件：

{ {item.name}}

<span @click = “addSpecialList(item.uid,index)” :class=“currentFontIconClass” >

简单介绍一下上面的部分：“content”类的view组件