Vu3+Ts+UniApp开发微信小程序实现文章详情页面双击点赞

需求

最近用vue3+ts+uni-app开发微信小程序，文章详情页面可以进行双击对该文章进行点赞

实现效果：如下图

双击该页面下方点赞触发

实现思路：如下

uni-app官方并没有给出双击事件的api，所以就需要自己处理双击的逻辑，利用两次单击实现双击，双击就是连续的两次单击，所以我们利用setTimeout给定一个单击事件，在这一时间段中单击单击次数大于等于2次的话就判定为双击，然后调用点赞方法！

实现方法：代码如下

<template>
 <view @touchend="pageTouchend"></view>
</template>  

<script lang="ts" setup>

// 页面点击事件
const pageTouchend = () => {
  touchNum.value++
  setTimeout(() => {
    if (touchNum.value >= 2) {
      console.log('双击')
      handleDoubleClickLikeArticle()
    }
    touchNum.value = 0
  }, 200)
}


  // 文章双击点赞
  const handleDoubleClickLikeArticle = async () => {
    // 如果该文章已经点赞了就不再触发点赞
    if (articleExtra.value.isLike) return;
    const params: LikeCollectArticleParams = {
      articleCode: articleInfo.value.code,
      opType: 'up',
    }
    const res = await likeArticle(params)
    // 点赞成功后本地数据更新即可
    articleExtra.value.isLike = 1
    articleExtra.value.likeAmount++
  }
</script>

  

至此！就已经实现双击点赞了，比较简单的一个实现。

如有错误请及时指正！