广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
4008-888-888

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

怎么做游戏小程序_微信小程序完成星级评价效果

日期:2021-01-08 浏览:
微信小程序实现星级评价效果       这篇文章主要为大家详细介绍了微信小程序实现星级评价效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果预览:

wxml代码部分:

 view 
 view 
 image src='images//tooopen_sy_6.jpg' /image 
 /view 
 view 
 view 
 text 商品名称 /text 
 text {{ evaluate }} /text 
 /view 
 view 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();
  = {
 width: res.windowWidth,//可使用窗口宽度
 height: res.windowHeight,//可使用窗口高度
 system: res.system,//操作系统版本
 statusBarHeight: res.statusBarHeight//状态栏的高度
 ;

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
})

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




新闻资讯

联系方式丨CONTACT

  • 全国热线:4008-888-888
  • 传真热线:010-88888888
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系