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

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. javascript密码强度验证!
  2. mongodb 与 mysql区别 NOSQL 型号与SQL型号的区别 是非关系型号与关系型号的区别
  3. SpringCloud之Hystrix
  4. shell编程之文本处理工具awk
  5. 计算机进制简称,NO.A.0007——二进制;计算机容量单位B、KB、MB、GB和TB关系
  6. vCenter Server Appliance(VCSA )6.7部署指南
  7. java读流方式,下载网络上的图片
  8. [转] 面向对象编程 - 获取对象信息
  9. [游戏] - 游戏教程
  10. 梯度消失与梯度爆炸---解决方案(二)--杀手锏
  11. RESTORE DATAFILE TO A NEW LOCATION
  12. 学习笔记/音视频面试
  13. 图解通信原理与案例分析-1:开篇-通信系统大全与快速概览
  14. 用Math函数中的random随机数模拟骰子
  15. 网络姻缘一线牵 大数据精准推广才能让合适的产品遇到合适的人!
  16. 计算机主机光驱弹不出来怎么办,电脑光驱弹不出来的原因及解决方法
  17. cs224u Overview of the Stanford Sentiment Treebank
  18. Linux 查看查找文件
  19. 2022 年的 React 生态
  20. 克里斯·保罗:永不停滞的冠军梦

热门文章

  1. 电烙铁使用方法总结集合
  2. 2021-07-28 Python爬虫
  3. matlab 弗洛伊德算法,手写matlab的弗洛伊德算法的函数(注释很详细)
  4. 英伟达驱动安装成功之后,指令nvidia-smi表格里有ERR!
  5. 京东云主机挂载云硬盘、分区、格式化
  6. IDEA配置JPBC
  7. 线性代数行列式计算方法之三角法
  8. iOS 九宫格键盘的UIKeyboardTypeNumbersAndPunctuation默认类型
  9. Notepad++的64位HexEditor免费下载
  10. 访问控制列表之基本ACL、高级ACL 、 高级ACL之ICMP、高级ACL之telnet