uni-app uni-rate评分组件在H5平台提交的评分是鼠标最后停留位置不是最后点击位置

uni-app uni-rate评分组件在H5平台提交的评分是鼠标最后停留位置不是最后点击位置

示例代码：

<view class="rating-input">
<uni-rate v-model="newRating" size="20" @change="onChange" touchable="false"/>
</view>  

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 评论表单
const newRating = ref(0)
function onChange(e: any) {
console.log('rate发生改变:' + JSON.stringify(e))
}
</script>

操作步骤：

在H5平台的vue网页中使用代码示例即可看到

预期结果：

提交的评分是鼠标最后点击位置，常亮的黄色星星个数也是最后点击的个数

实际结果：

提交的评分是鼠标最后停留位置，但是常亮的黄色星星个数是最后点击的个数

bug描述：

uni-ui包的uni-rate评分组件，在H5平台提交的评分是鼠标最后停留位置，不是最后点击位置！！ 但是常亮星星数是要点击才会变化，但是实际提交值是鼠标滑过值


更多关于uni-app uni-rate评分组件在H5平台提交的评分是鼠标最后停留位置不是最后点击位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好 你是用的pc端吧？ 可以给uni-rate组件中的mousedown增加一个自定义事件 在自定义事件中获取到提交的评分 这个事件中的评分不会被鼠标滑动影响到


更多关于uni-app uni-rate评分组件在H5平台提交的评分是鼠标最后停留位置不是最后点击位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-rate组件在H5平台的事件处理问题。组件内部对mouseover和click事件的绑定存在冲突，导致评分值更新逻辑不一致。

问题分析：

  1. mouseover事件会实时更新评分值预览
  2. click事件应该确认最终评分值
  3. 但在H5平台，组件提交的仍然是mouseover的临时值

临时解决方案：

<template>
  <view class="rating-input">
    <uni-rate 
      :value="tempRating" 
      size="20" 
      @change="onChange"
      @click="confirmRating"
      touchable="false"
    />
  </view>  
</template>

<script setup lang="ts">
import { ref } from 'vue'

const newRating = ref(0)
const tempRating = ref(0)

function onChange(e: any) {
  tempRating.value = e.value
}

function confirmRating() {
  newRating.value = tempRating.value
  console.log('确认评分:' + newRating.value)
}
</script>
回到顶部