一、实现整颗星星评分(默认一颗星)

1.效果图

2.准备图片

3.remark.wxml

<view class="stars"><view wx:for="{{stars}}" wx:key="index" data-index="{{index}}" bindtap='score'><image src="{{index > 0 && item.flag == 1 ? item.bgImg : item.bgfImg}}"></image></view></view>

4.remark.wxss

.stars {display: flex;
}.stars view {width: 50rpx;height: 50rpx;margin-right: 20rpx;
}.stars view image {width: 100%;height: 100%;
}

5.remark.js

  data: {// 星星列表stars: [{flag: 1,bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar1.png"},{flag: 1,bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar2.png"},{flag: 1,bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar3.png"},{flag: 1,bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar4.png"},{flag: 1,bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar5.png"}],star_num: 1,  // 默认1分},// 选择范围score: function (e) {var _this = this;for (var i = 0; i < _this.data.stars.length; i++) {var allItem = 'stars[' + i + '].flag';// 全部变为未选中状态_this.setData({[allItem]: 1})}var index = e.currentTarget.dataset.index;for (var i = 0; i <= index; i++) {var item = 'stars[' + i + '].flag';// 选中项及以前,变为选中状态_this.setData({[item]: 2,})}// 评分_this.setData({star_num: index + 1 // 评分})},

二、实现半颗星星评分(默认半颗星)

1.效果图

2.准备图片

3.remark1.wxml

<view class="stars"><view wx:for="{{stars}}" wx:key="index"><image src="{{index > 0 && item.flag1 == 1 ? item.bgImgL : item.bgfImgL}}" data-index="{{index}}" bindtap='scoreL'></image><image src="{{item.flag2 == 1 ? item.bgImgR : item.bgfImgR}}" data-index="{{index}}" bindtap='scoreR'></image></view>
</view>

4.remark1.wxss

.stars {display: flex;margin: 200rpx 0;
}.stars view {position: relative;width: 50rpx;height: 50rpx;margin-right: 20rpx;
}.stars view image:nth-of-type(1) {width: 50%;height: 100%;margin-right: -2rpx;
}
.stars view image:nth-of-type(2) {width: 50%;height: 100%;margin-left: -1rpx;
}

5.remark1.js

  data: {// 星星列表stars: [{flag1: 1,flag2: 1,bgImgL: "/img/farmers/icon_star_1.png",bgfImgL: "/img/farmers/icon_star_active1.png",bgImgR: "/img/farmers/icon_star_2.png",bgfImgR: "/img/farmers/icon_star_active2.png",},{flag1: 1,flag2: 1,bgImgL: "/img/farmers/icon_star_1.png",bgfImgL: "/img/farmers/icon_star_active1.png",bgImgR: "/img/farmers/icon_star_2.png",bgfImgR: "/img/farmers/icon_star_active2.png",},{flag1: 1,flag2: 1,bgImgL: "/img/farmers/icon_star_1.png",bgfImgL: "/img/farmers/icon_star_active1.png",bgImgR: "/img/farmers/icon_star_2.png",bgfImgR: "/img/farmers/icon_star_active2.png",},{flag1: 1,flag2: 1,bgImgL: "/img/farmers/icon_star_1.png",bgfImgL: "/img/farmers/icon_star_active1.png",bgImgR: "/img/farmers/icon_star_2.png",bgfImgR: "/img/farmers/icon_star_active2.png",},{flag1: 1,flag2: 1,bgImgL: "/img/farmers/icon_star_1.png",bgfImgL: "/img/farmers/icon_star_active1.png",bgImgR: "/img/farmers/icon_star_2.png",bgfImgR: "/img/farmers/icon_star_active2.png",},],star_num: 0.5,  // 默认0.5分},// 点击星星左边-半颗星scoreL: function (e) {var _this = this;// 全部变为未选中状态for (var i = 0; i < _this.data.stars.length; i++) {var allItem1 = 'stars[' + i + '].flag1';var allItem2 = 'stars[' + i + '].flag2';_this.setData({[allItem1]: 1,[allItem2]: 1,})}var index = e.currentTarget.dataset.index;// 选中项以前,变为选中状态for (var i = 0; i < index; i++) {var item1 = 'stars[' + i + '].flag1';var item2 = 'stars[' + i + '].flag2';_this.setData({[item1]: 2,[item2]: 2,})}// 选中项左边,变为选中状态_this.setData({['stars[' + index + '].flag1']: 2,star_num: index + 0.5 // 评分})},// 点击星星右边-整颗星scoreR: function (e) {var _this = this;// 全部变为未选中状态for (var i = 0; i < _this.data.stars.length; i++) {var allItem1 = 'stars[' + i + '].flag1';var allItem2 = 'stars[' + i + '].flag2';_this.setData({[allItem1]: 1,[allItem2]: 1,})}var index = e.currentTarget.dataset.index;// 选中项及以前,变为选中状态for (var i = 0; i <= index; i++) {var item1 = 'stars[' + i + '].flag1';var item2 = 'stars[' + i + '].flag2';_this.setData({[item1]: 2,[item2]: 2,})}// 评分_this.setData({star_num: index + 1 // 评分})},

三、实现任意颗星星的展示

1.效果图


2.准备图片

3.remark2.wxml

<view class="stars"><view class="star" wx:for="{{stars}}" wx:key="index"><!-- 整颗星星显示个数 --><view class="icon_red" wx:if="{{index < int}}" style="width: 100%;"><image src="{{item.bgfImg}}"></image></view><!-- 非整颗星星显示个数 --><view class="icon_red" wx:if="{{index == int}}" style="width: {{percent}}%;"><image src="{{item.bgfImg}}"></image></view><!-- 灰色星星背景 --><view class="icon_grey"><image src="{{item.bgImg}}"></image></view></view><!-- 评分 --><view>{{remark_num}}</view>
</view>

4.remark2.wxss

.stars {display: flex;margin: 200rpx 0;
}
.star {position: relative;width: 50rpx;height: 50rpx;margin-right: 20rpx;
}
/* 红色星星 */
.star view.icon_red {position: absolute;left: 0;top: 0;z-index: 99;height: 50rpx;overflow: hidden;
}
/* 灰色星星背景 */
.star view.icon_grey {position: absolute;left: 0;top: 0;width: 50rpx;height: 50rpx;
}.star view image {width: 50rpx;height: 50rpx;display: block;
}

5.remark2.js

  data: {// 星星列表stars: [{bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar1.png",},{bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar2.png",},{bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar3.png",},{bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar4.png",},{bgImg: "/img/farmers/icon_bsta_no.png",bgfImg: "/img/farmers/icon_bstar5.png",},],// 要展示的评分remark_num: 2.3,// 整颗星的个数int: "",// 非整颗星的百分比percent: "",},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var _this = this;var int = Math.floor(_this.data.remark_num);  // 向下取整-得到整颗星的个数var percent = (_this.data.remark_num - int) * 100;  // 非整颗星的百分比_this.setData({int: int,percent: percent,})},

微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示相关推荐

  1. 微信小程序js无符号整型转换有符号整型

    在开发微信小程序读取金桔蓝牙设备的时候,经常用到设置RSSI或者读取RSSI,蓝牙设备的RSSI数据放在一个8位的BYTE 下面,这样就需要将无符号的整型转换为有服务的整型数据,即将uint8 转换为 ...

  2. 微信小程序中数字取整

    var data1=parseInt(data)//取data的整数部分给data1

  3. 微信小程序软件测试junit,微信小程序兼容性能测试方法

    本文为微信小程序兼容.性能测试方法介绍. 兼容 操作系统兼容 由于小程序依赖微信客户端本身,因此理论上来说只要微信客户端兼容的小程序应该都可以兼容,这里推荐覆盖Android和iOS主流版本系统即可, ...

  4. 微信小程序+.NET(十四) 悦听小说小程序(待续)

    微信小程序之第二版展示 悦听小说(YueTingBook) ==>2019.12.16 今天知道个人微信号无法使用web-view,直接影响该项目很多功能,该项目待商城项目完成后继续研究... ...

  5. 【项目实战课】微信小程序图像识别模型前后端部署实战

    欢迎大家来到我们的项目实战课,本期内容是<微信小程序图像识别模型前后端部署实战>.所谓项目实战课,就是以简单的原理回顾+详细的项目实战的模式,针对具体的某一个主题,进行代码级的实战讲解. ...

  6. android 分享小程序到微信,Android 分享微信小程序之图片优化

    小菜上周接入了微信分享小程序的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享微信小程序失败二三事,虽然功能都正常,但整体测试发现图片展示效果不佳.于是小菜整理了一个简单的小 ...

  7. 微信小程序版的登录注册

    ##使用微信小程序进行用户的登陆注册功能 使用了weui进行 ####1.登录界面展示: ####2.注册界面展示 ####3.代码列表展示: ####4.核心功能 #####(1)用户名密码错误: ...

  8. 微信小程序 - 婚礼邀请函

    marry  微信小程序端 + 服务端 扫码体验 免费制作流程 点我查看 主页面展示 项目说明 服务端架构:SpringMvc 服务器:阿里云服务 域名:pengmaster.com 数据库:在服务器 ...

  9. 基于SpringBoot和微信小程序的餐馆点餐系统的设计和实现

    作者主页:Designer 小郑 作者简介:Java全栈软件工程师一枚,来自浙江宁波,负责开发管理公司OA项目,专注软件前后端开发(Vue.SpringBoot和微信小程序).系统定制.远程技术指导. ...

  10. 山东大学项目实训——地图圈系统——微信小程序(16)

    地图圈系统--微信小程序(16) 一.社区功能 二.项目代码 三.效果展示 一.社区功能 这次项目实训的社区功能是一个很大的模块,包括显示用户发布的文字及图片.用户选择的地点.发布的时间.点赞.评论等 ...

最新文章

  1. SAP EWM - 存储类型 - 入库控制
  2. vsftpd虚拟用户帐号
  3. 【TYVJ】1359 - 收入计划(二分)
  4. 使用Statement接口实现增,删,改操作
  5. python使用curses库获取控制台的键盘输入(如上下左右)
  6. apollo修改配置刷新bean_技术文档丨Apollo软件概述
  7. 远程网络安装RHEL5
  8. win10 .net framework 3.5 安装报错 0x800F0954问题
  9. 随想录(vc仿真下的嵌入式开发)
  10. 华为交换机带宽不足会丢包吗_华为岳伟:品质家宽,释放F5G网络体验红利
  11. 《Head First设计模式》 读书笔记05 工厂模式(二)
  12. 淘系双十一全链路压测流程概览
  13. 几款常用UML建模工具解析
  14. 解决mac BigSur外接显示器发白、发黄、字体发虚 (OpenCore关闭SIP和Read-Only System)
  15. python pandas 增加一列_Python之pandas新增列
  16. linux mysql5.7.11_Centos7.2 Systemd 方式编译 Mysql5.7.11
  17. 在微型计算机中任何外部设备,微型计算机与外部设备之间的信息传输方式有( )。...
  18. 云主机是不是服务器?云主机和服务器有什么区别?
  19. Linux基础命令及用户相关操作
  20. 美通企业日报 | 护照含金量迎来亚洲时代;沃尔沃集团联网交通设备交付一百万台...

热门文章

  1. IDEA中Resource Bundle ‘application‘
  2. 疯狂考证的两年:通过CFA、FRM、CMA经验与收获
  3. Java实现微信公众号客服功能和本地联调
  4. C语言打印英文字母三角
  5. SAP ABAP 关于SMARTFORMS打印中英文时候出现乱码的问题
  6. html浅色_修改CSS样式实现网页灰色(没有颜色只有浅色黑白)的几个方法整理
  7. 解决eclipse neno在线下载安装缓慢及失败的问题
  8. JS中可以表示数字的最大值
  9. win10 cuda13 pytorch pycharm
  10. mac更新系统后xcode-select --install使用问题