• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

uniapp实现滑动评分效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了uniapp实现滑动评分的具体代码,供大家参考,具体内容如下

uniapp开发、 滑动评分、点击评分

<template>
 <view>
  <view class="flex" style="margin:200rpx;">
    <block v-for="(item,index) in scoreArray" :key='index' ><!-- 遍历评分列表 -->
      <!-- 设置触摸事件和点击事件为同一个方法,否则点击却不滑动的话,不触发事件 -->
      <view class='starLen' @touchmove='changeScore'  @tap='changeScore' >
        <!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scoreArray的下标 -->
        <!-- src部分可以这样写 src="{{score>index?'../../images/fullStar.png':'../../images/nullStar.png'}}"  ,这样可以在js文件把fullStarUrl和nullStarUrl去掉 -->
        <image class='star' mode="aspectFill" :src="score>index?fullStarUrl:nullStarUrl" style="width: 30rpx; height: 30rpx;"/>    
      </view>
    </block>
    <view class='scoreContent'>{{scoreContent}}</view><!-- 显示当前评分 -->
  </view>
 </view>
</template>

<script>
 export default{
  onLoad() {
  },
  data(){
   return{
        fullStarUrl: '满星的图片', //满星图片
        nullStarUrl: '空星图片', //空星图片
        score: 0, //评价分数
        scoreArray: [1, 2, 3, 4, 5], //分为1-5个评分层次
        scoreText: ['1星', '2星', '3星', '4星', '5星'], //评分列表
        scoreContent: '' //文字显示评分情况
   }
  },
  methods:{
     changeScore: function(e) {
       console.log(e)//控制台触摸事件信息
       var that = this;
       var num = 0;//临时数字,动态确定要传入的分数
       var touchX = e.touches[0].pageX;//获取当前触摸点X坐标
       var starMinX = 110;//最左边第一颗星的X坐标,假设距离页面距离为110,距离左边的距离是多少
       var starWidth = 15;//星星图标的宽度,假设15(已在wxss文件中设置".star")
       var starLen = 5;//星星之间的距离假设为5(已在wxss文件中设置".starLen")
       var starMaxX = starWidth * 5 + starLen * 4+starMinX;//最右侧星星最右侧的X坐标,需要加上5个星星的宽度和4个星星间距
       if (touchX > starMinX && touchX < starMaxX) {//点击及触摸的初始位置在星星所在空间之内
       //使用Math.ceil()方法取得当前触摸位置X坐标相对于(星星+星星间距)之比的整数,确定当前点击的是第几个星星
         num = Math.ceil((touchX - starMinX) / (starWidth + starLen));
         if (num != that.score) {//如果当前得分不等于刚设置的值,才赋值,因为touchmove方法刷新率很高,这样做可以节省点资源
             that.score = num,
             that.scoreContent=that.scoreText[num - 1]
         }
       } else if (touchX < starMinX) {//如果点击或触摸位置在第一颗星星左边,则恢复默认值,否则第一颗星星会一直存在
           that.score = 0,
           that.scoreContent =''
       }
     },
  }
 }
</script>

<style lang="less" scoped>
.starLen{
  margin-right: 10rpx;
  display: inline-block;
}

.star{
  width:30rpx;
  height:30rpx;
}

.scoreContent{
  margin-left: 100rpx;
  display: inline-block;
  color: #fff;
}
</style> 

代码中的距离都是按照10px/2,转为5rpx,(如果使用其他单位,请自行转换)
var starMinX = 110,最左边的星星离屏幕左边的距离
var starWidth = 15 ,为星星的宽度
var starLen = 5,为两个星星之间相隔的距离。
示例效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue3自己封装面包屑功能组件的几种方式发布时间:2022-02-05
下一篇:
vue中LocalStorage与SessionStorage的区别与用法发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap