微信小程序实现星级评价效果


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了微信小程序实现星级评价效果的具体代码,供大家参考,具体内容如下

效果预览:

微信小程序实现星级评价效果

wxml代码部分:

<view class='topMaxBox'>
 <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'>
 <image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image>
 </view>
 <view class='topRight'>
 <view class='r_top'>
 <text>商品名称</text>
 <text>{{ evaluate }}</text>
 </view>
 <view class='r_bottom' catchtouchmove='moveFun' catchtouchstart='moveFun'>
 <image src='{{ starSrc }}'></image>
 </view>
 </view>
</view>

wxss代码部分:

.topMaxBox{
 padding: 5%;
 display: flex;
 flex-direction: row;
}

.topLeft{
 border: 1px solid #e5e5e5;
 margin-right: 10px;
}

.topLeft image{
 width: 100%;
 height: 100%;
}

.topRight{
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.r_top{
 display: flex;
 justify-content: space-between;
 margin-bottom: 2%;
}

.r_bottom image{
 width: 130px;
 height: 18px;
}

app.sysInfo()封装在了app.js 文件全局使用下面是代码部分

/**
 * 获取系统信息
 */
 sysInfo: function () {
 let res = wx.getSystemInfoSync();
 let info = {
 width: res.windowWidth,//可使用窗口宽度
 height: res.windowHeight,//可使用窗口高度
 system: res.system,//操作系统版本
 statusBarHeight: res.statusBarHeight//状态栏的高度
 }
 return info;
 },

js代码部分:

const app = new getApp();

// page/issueEvaluate/issueEvaluate.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 imgW: app.sysInfo().width * 0.146,//根据屏幕宽度动态设置图片宽度
 starLen: 5,//星星评价的初始等级
 starSrcArr: ['../../image/star2-1.png', '../../image/star2-2.png', '../../image/star2-3.png', '../../image/star2-4.png', '../../image/star2-5.png', '../../image/star2-6.png'],//星星评价的图片资源数组
 starSrc: '../../image/star2-6.png',//星星评价的初始图片
 evaluate: '非常好',
 evaluateArr: ['非常差', '差', '一般', '好', '比较好', '非常好']
 },

 moveFun: function (e) {
 let imgBoxW = app.sysInfo().width * 0.146 + 10;//商品图片X轴尽头坐标(即星星的初始坐标值)
 let starW = 130 / 5;//每一颗星星的宽度(用于计算星星的X轴坐标)
 let xAxial = e.touches[0].clientX;//获取当前触摸的X轴坐标

 //如果当前触摸的X轴坐标小于初始坐标则显示为0颗星星
 if (xAxial < imgBoxW) {
 this.data.starLen = 0;
 //如果当前触摸的X轴坐标大于初始坐标并小于第2颗星星的初始坐标则显示为1颗星星
 } else if (imgBoxW + (starW * 2) > xAxial && xAxial > imgBoxW) {
 this.data.starLen = 1;
 //如果当前触摸的X轴坐标大于第2颗星星的初始坐标并小于第3颗星星的初始坐标则显示为2颗星星
 } else if (imgBoxW + (starW * 3) > xAxial && xAxial > imgBoxW + (starW * 2)) {
 this.data.starLen = 2;
 //如果当前触摸的X轴坐标大于第3颗星星的初始坐标并小于第4颗星星的初始坐标则显示为3颗星星
 } else if (imgBoxW + (starW * 4) > xAxial && xAxial > imgBoxW + (starW * 3)) {
 this.data.starLen = 3;
 //如果当前触摸的X轴坐标大于第4颗星星的初始坐标并小于第5颗星星的初始坐标则显示为4颗星星
 } else if (imgBoxW + (starW * 5) > xAxial && xAxial > imgBoxW + (starW * 4)) {
 this.data.starLen = 4;
 //如果当前触摸的X轴坐标大于第5颗星星初始坐标则显示为5颗星星
 } else if (xAxial > imgBoxW + (starW * 5)) {
 this.data.starLen = 5;
 }
 //设置img标签的SRC路径 替换成对应的星星图片
 this.data.starSrc = this.data.starSrcArr[this.data.starLen];
 //设置为对应的评价等级文字
 this.data.evaluate = this.data.evaluateArr[this.data.starLen];
 this.setData({
 starSrc: this.data.starSrc,
 evaluate: this.data.evaluate
 });
 },

})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
通过修改referer下载文件的方法
May 11 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
微信小程序实现日历效果
Dec 28 #Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 #Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 #Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 #Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 #Javascript
微信小程序时间控件picker view使用详解
Dec 28 #Javascript
微信小程序时间选择插件使用详解
Dec 28 #Javascript
You might like
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python短信轰炸的代码
2020/03/25 Python
django rest framework 过滤时间操作
2020/07/12 Python
python编程的核心知识点总结
2021/02/08 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
十八大感想感言
2014/02/10 职场文书
对教师的评语
2014/04/28 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
初三英语教学计划
2015/01/23 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
上班旷工检讨书
2015/08/15 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
Python实现老照片修复之上色小技巧
2021/10/16 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python