一、实现整颗星星评分（默认一颗星）
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,})},
