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

网络编程 2025/11/30 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

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

效果预览：

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

})

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

微信小程序,星级评价

标签：

微信小程序,星级评价

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无微信小程序实现星级评价效果的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年11月30日

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

微信小程序,星级评价

微信小程序下拉框组件使用方法详解

微信小程序实现日历效果

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接