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


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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
JavaScript+html5 canvas实现本地截图教程
Apr 16 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
js表数据排序 sort table data
2009/02/18 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python的unittest测试类代码实例
2017/12/07 Python
Python列表list排列组合操作示例
2018/12/18 Python
tensorflow的计算图总结
2020/01/12 Python
详解python itertools功能
2020/02/07 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
css3实现动画的三种方式
2020/08/24 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
财务总监管理职责范文
2014/03/09 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
冬季安全检查方案
2014/05/23 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
捐助倡议书
2015/01/19 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL