当前位置:首页 » 《随便一记》 » 正文

uniapp 滑动评分_Harold_22的博客

10 人参与  2021年11月26日 11:43  分类 : 《随便一记》  评论

点击全文阅读


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,为两个星星之间相隔的距离。

示例效果:

在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/31286.html

星星  距离  评分  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 谢承钧小说整本+后续(穿成佛子的恶毒后妈)清爽版阅读
  • 你惹她干啥她疯起来嘎乱杀结局+番外+完结(楚瑶)全书浏览_你惹她干啥她疯起来嘎乱杀结局+番外+完结全书浏览
  • 清冷逆徒动情后,反派师尊被缠哭(洛凝墨寒砚)_清冷逆徒动情后,反派师尊被缠哭
  • 高考分数出来那天,全家哭着求我原谅后续+番外_何思涵妹妹何思墨未删减_小说后续在线阅读_无删减免费完结_
  • 婚礼前夜未婚夫喂我安眠药,只为让养妹当新娘独家番外_许绍宁养妹全文_小说后续在线阅读_无删减免费完结_
  • 以身入局,我要掀翻这座城的天结局+番外+续集(程少云阮朵)_以身入局,我要掀翻这座城的天结局+番外+续集(程少云阮朵)
  • 出狱后,真千金手撕白莲杀疯了全文免费阅读无弹窗大结局_秦季姜沁最新章节列表_笔趣阁(出狱后,真千金手撕白莲杀疯了:完结+结局+番外)
  • 似锦的夫君停妻另娶挚友遗孀后,我杀疯了贺朝朝贺凌洲全书在线
  • 今夜雨将至(安佩项齐晟)_今夜雨将至
  • 暗恋逢光(江司聿夏未央)全书浏览_暗恋逢光全书浏览
  • 全文季总他图谋已久列表(秦韵季野)列表_全文季总他图谋已久列表
  • 重回高考前一天,我不再阻止同学们去参加班花组织的成人礼高口碑_林绾绾绾孟瑶故事会_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1