更新记录

1.0.0（2026-09-17） 下载此版本

上架第一版

平台兼容性

uni-app x(5.25)

lin-zan 点赞组件使用说明

组件简介

lin-zan 是一个带动画效果的点赞组件，支持点赞/取消点赞状态切换、粒子散开特效和图标抖动动画。适用于商品、食谱、内容等场景的点赞交互。

功能特性

• ✅ 状态切换：支持点赞/取消点赞双向切换
• ✅ V-model 绑定：通过 v-model 实现点赞状态的双向绑定
• ✅ 粒子动画：点赞时触发 12 个随机颜色粒子向四周扩散
• ✅ 抖动动画：图标在点击后有上下抖动反馈效果
• ✅ 自定义图标：可分别设置未点赞和已点赞状态的图标
• ✅ 尺寸自适应：支持自定义图标尺寸和容器样式

Props 属性

Events 事件

Exposed 方法

通过 ref 引用组件实例后可调用以下方法：

使用示例

示例一：直接点击组件触发点赞

最常用的方式，用户点击组件区域即可切换点赞状态。

<template>
    <view class="container">
        <lin-liked
            ref="linLiked"
            v-model="isLiked"
            img-width="18px"
            img-height="18px"
            defaultIcon="/static/liked.png"
            activeIcon="/static/liked-active.png"
        />
    </view>
</template>

<script lang="uts" setup>
    const linLiked = ref<LinLikedComponentPublicInstance | null>(null)
    const isLiked = ref(false)

    const handleClick = () => {
        linLiked.value?.toggleLike?.()
    }

    onMounted(()=>{
        linLiked.value?.initParticles?.()
    })

</script>
<style lang="scss" scoped>
    .container {
        width: 150px;
        height: 150px;
        border: 1px solid #cfcfcf;
        margin: 150px auto 0 auto;
    }

</style>

内部动画参数

以下参数在组件内部定义，如需要调整动画效果可修改源码顶部常量：

注意事项

⚠️ 必须调用 initParticles()

组件在使用前必须先调用 initParticles() 方法进行粒子初始化。未初始化时粒子动画不会生效。通常在 onMounted 生命周期中调用。

⚠️ 图标路径必填

defaultIcon 和 activeIcon 两个属性必须传入有效图片路径，否则图标无法显示。

💡 customStyle 是内联样式字符串

customStyle 属性接收的是内联样式字符串（如 "width: 40px; height: 40px;"），而非对象格式。

💡 点击热区

组件本身不绑定点击事件（粒子层设置了 pointer-events: none），需要通过以下方式之一触发点赞：

1. 给外层容器绑定 @click 事件，调用 toggleLike()
2. 如果希望组件自身可点击，可在组件外包一层可点击容器

💡 v-model 同步

使用 v-model 时，父组件的响应式变量会自动与组件内部状态同步，无需手动监听 update:modelValue 事件。

实现原理简述

1. 粒子动画：使用 uni.getElementById 获取粒子 DOM 元素，通过 el.animate() 方法执行关键帧动画，12 个粒子均匀分布在 360° 圆周上，扩散距离随机化产生自然散开效果。

2. 抖动动画：获取 likeIcon 元素，使用关键帧 0 → -8px → 0 → -4px → 0 模拟自然的上下弹跳反馈。

3. 初始化流程：initParticles() 先创建粒子 DOM 元素，再通过 nextTick 确保 DOM 渲染完成后执行 init() 同步外部传入的初始点赞状态。