二话不说先上图
简介:
优点:星星数量、选中的颜色、未选中颜色、星星大小都是可以自己控制的
缺点:只支持小星星,因为采用的并不是图片,而是星星文字
有兴趣的通知可以将星星改成字体图标,实现原理相同。这样只支持小星星的缺点也就不存在了。
实现方式:
核心代码:
for (var i = 0; i < a.index + 1; i++) {
list[i].color = that.data.starColorc;
}
for (var j = a.index + 1; j < that.data.starNum; j++) {
list[j].color = that.data.starColor;
}
<template name="star">
<view style='display: flex;flex-direction: row;'>
<block wx:for='{{starList}}' wx:key='{{*this}}'>
<view style='color:{{item.color}};font-size:{{item.size+"rpx"}};margin:0 17rpx;' data-color='{{item.color}}' data-index='{{index}}' bindtap='starClick'>★</view>
</block>
</view>
</template>
小星星是根据传进来的星星个数动态生成的,所以单击的时候能够取得小星星的下标,包含下标以前的小星星都是选中的颜色,下标以后的小星星都是未选中的颜色,所以有俩个for循环
其中的a.index是下标,starColorc是选中的颜色,starNum是星星数量,starColor是未选中的颜色
使用方式:
wxml界面
<import src="/star/star.wxml" />
<template is="star" data="{{starList}}" />
js界面
var star = require('../../star/star.js');
/**
* 初始化小星星
* num:几个小星星
* colorc:选中的小星星的颜色
* color:未选中的小星星的颜色
* size:字体大小
*/
star.starInit(this,5,"#ffcd1e","#eeeeee","70");
/**
* 展示小星星,而不能够选择小星星的初始化方式
* 在num参数后面加入了初始分值的参数
*/
star.defaultInit(this, 5, 4,"#ffcd1e", "#eeeeee", "70");
相关代码(有空会将前面的日期控件一并提交到github上,采取跟微信小程序demo案例一样的格式分功能展示模块):
码云:https://gitee.com/mrxu314/xcx_gh
gitHub:https://github.com/mrxu0/xcx_gh
wxml:
<template name="star">
<view style='display: flex;flex-direction: row;'>
<block wx:for='{{starList}}' wx:key='{{*this}}'>
<view style='color:{{item.color}};font-size:{{item.size+"rpx"}};margin:0 17rpx;' data-color='{{item.color}}' data-index='{{index}}' bindtap='starClick'>★</view>
</block>
</view>
</template>
js:
/**
* 初始化小星星
* num:几个小星星
* colorc:选中的小星星的颜色
* color:未选中的小星星的颜色
* size:字体大小
*/
var that;
function starInit(target,starNum = 5, colorc = "red", color = "#eeeeee", size = 26) {
that=target;
var list = [];
for (var i = 0; i < starNum; i++) {
list.push({
color: color,
size: size
})
}
that.setData({
starList: list,
starColorc: colorc,
starColor: color,
starNum: starNum
});
that.starClick = starClick;
}
/**
* 默认分数
*/
function defaultInit(target, starNum = 5,targetNum=2, colorc = "red", color = "#eeeeee", size = 26){
that = target;
var roundedNum = Math.round(targetNum);
var list = [];
for (var i = 0; i < roundedNum; i++) {
list.push({
color: colorc,
size: size
})
}
for (var j = roundedNum; j < starNum; j++) {
list.push({
color: color,
size: size
})
}
that.setData({
starList: list
});
}
/**
* 单击改变小星星的颜色,并且获取分值
*/
function starClick(e) {
var a = e.currentTarget.dataset;
var list = that.data.starList;
for (var i = 0; i < a.index + 1; i++) {
list[i].color = that.data.starColorc;
}
for (var j = a.index + 1; j < that.data.starNum; j++) {
list[j].color = that.data.starColor;
}
that.setData({
starList: list,
starPoints:a.index+1
});
}
module.exports = {
starInit: starInit,
defaultInit: defaultInit
}
想第一手获得博主发布的信息可以关注博主微信公众号,感谢观看