微信小程序实现星级评价效果
作者：豆i浆
这篇文章主要为大家详细介绍了微信小程序实现星级评价效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现星级评价效果的具体代码，供大家参考，具体内容如下
效果预览：
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
});
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。