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


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 相关文章推荐
js 数组克隆方法 小结
Mar 20 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
微信小程序实现日历效果
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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
Laravel学习教程之从入口到输出过程详解
2017/08/27 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
js传值 判断
2006/10/26 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
vue实例的选项总结
2020/06/09 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python之super的使用小结
2018/08/13 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
运动会通讯稿200字
2014/02/16 职场文书
聘任书模板
2014/03/29 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
贷款承诺书范文
2014/05/19 职场文书
教师自荐信范文
2015/03/06 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
python元组打包和解包过程详解
2021/08/02 Python