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

一、实现整颗星星评分（默认一颗星）

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

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

微信小程序js无符号整型转换有符号整型
在开发微信小程序读取金桔蓝牙设备的时候,经常用到设置RSSI或者读取RSSI,蓝牙设备的RSSI数据放在一个8位的BYTE 下面,这样就需要将无符号的整型转换为有服务的整型数据,即将uint8 转换为 ...
微信小程序中数字取整
var data1=parseInt(data)//取data的整数部分给data1
微信小程序软件测试junit,微信小程序兼容性能测试方法
本文为微信小程序兼容.性能测试方法介绍. 兼容操作系统兼容由于小程序依赖微信客户端本身,因此理论上来说只要微信客户端兼容的小程序应该都可以兼容,这里推荐覆盖Android和iOS主流版本系统即可, ...
微信小程序+.NET(十四) 悦听小说小程序（待续）
微信小程序之第二版展示悦听小说(YueTingBook) ==>2019.12.16 今天知道个人微信号无法使用web-view,直接影响该项目很多功能,该项目待商城项目完成后继续研究... ...
【项目实战课】微信小程序图像识别模型前后端部署实战
欢迎大家来到我们的项目实战课,本期内容是<微信小程序图像识别模型前后端部署实战>.所谓项目实战课,就是以简单的原理回顾+详细的项目实战的模式,针对具体的某一个主题,进行代码级的实战讲解. ...
android 分享小程序到微信,Android 分享微信小程序之图片优化
小菜上周接入了微信分享小程序的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享微信小程序失败二三事,虽然功能都正常,但整体测试发现图片展示效果不佳.于是小菜整理了一个简单的小 ...
微信小程序版的登录注册
##使用微信小程序进行用户的登陆注册功能使用了weui进行 ####1.登录界面展示: ####2.注册界面展示 ####3.代码列表展示: ####4.核心功能 #####(1)用户名密码错误: ...
微信小程序 - 婚礼邀请函
marry 微信小程序端 + 服务端扫码体验免费制作流程点我查看主页面展示项目说明服务端架构:SpringMvc 服务器:阿里云服务域名:pengmaster.com 数据库:在服务器 ...
基于SpringBoot和微信小程序的餐馆点餐系统的设计和实现
作者主页:Designer 小郑作者简介:Java全栈软件工程师一枚,来自浙江宁波,负责开发管理公司OA项目,专注软件前后端开发(Vue.SpringBoot和微信小程序).系统定制.远程技术指导. ...
山东大学项目实训——地图圈系统——微信小程序（16）
地图圈系统--微信小程序(16) 一.社区功能二.项目代码三.效果展示一.社区功能这次项目实训的社区功能是一个很大的模块,包括显示用户发布的文字及图片.用户选择的地点.发布的时间.点赞.评论等 ...

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

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

最新文章

热门文章