├── .gitignore
├── README.md
├── app.js
├── app.json
├── app.wxss
├── pages
└── index
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
├── project.config.json
└── wxStar
├── wxStar.js
├── wxStar.wxml
└── wxStar.wxss
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | .DS_Store
3 |
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # wxStar项目说明
2 |
3 | wxStar是在小程序中实现评分/评星效果，见效果图，也可以直接看代码
4 |
5 | 
6 |
7 | ## 使用说明
8 |
9 | ### wxml
10 |
11 | <import src="/wxStar/wxStar.wxml" />
12 |
13 | <template is="wxStar" data="{{wxStar: wxStar}}" />
14 |
15 |
16 |
17 | ### js
18 |
19 | // wxStar初始化
20 |
21 | wxStar.wxStar(this, 3, true);
22 |
23 | 参数说明：
24 | > this：当前Page对象
25 |
26 | 3：初始化星数
27 |
28 | true: 代码可编辑，即用户可以进行评星，如果是false，则表明只能查看，不可编辑
29 |
30 |
31 |
32 | ### wxss
33 |
34 | @import "/wxStar/wxStar.wxss";
35 |
36 |
37 |
38 |
39 | ## 方法说明
40 | ### 回调方法
41 | this.starChangeCb(); // 选择星数后的callback
42 |
43 | this.initSuccessCb(); // 初始化完成后的callback
44 |
45 | ### 获取当前星数
46 | this.wxStarCont(); // 获取当前星数
47 |
48 | ### 重置当前星数
49 | this.wxStarInit(5); // 重置星数
50 |
51 | ### 取消半星做法
52 | 在starChangeCb里面，重新调用wxStarInit方法即可~
53 |
54 |
55 |
56 | ## 想添加技术讨论群，可以联系我
57 | 
58 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | App({
2 | onLaunch: function () {
3 |
4 | },
5 | onShow: function(){
6 |
7 | },
8 | globalData: {
9 |
10 | },
11 | })
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages":[
3 | "pages/index/index"
4 | ],
5 | "window":{
6 | "backgroundColor":"#efeff4",
7 | "navigationBarBackgroundColor": "#00a8f3",
8 | "navigationBarTitleText": "wxStar 示例",
9 | "navigationBarTextStyle":"white"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lshxiao/wxStar/379f49acaeeb00bf5506bdd380f7f75540d34c7b/app.wxss
--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
1 | var wxStar = require('../../wxStar/wxStar.js');
2 | Page({
3 | data: {
4 | },
5 | onLoad: function (options) {
6 | // wxStar初始化
7 | wxStar.wxStar(this, 3, true);
8 | },
9 | resetStar: function () {
10 | this.wxStarInit(0);
11 | },
12 | alertStar: function () {
13 | var self = this;
14 | wx.showModal({
15 | title: '提示',
16 | content: '当前选中' + self.wxStarCont() + '星',
17 | })
18 | },
19 | starChangeCb: function () {
20 | console.log('选择星之后的回调~');
21 | }
22 | })
--------------------------------------------------------------------------------
/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
1 | @import "/wxStar/wxStar.wxss";
2 |
3 | /* button */
4 | .btn-panel{
5 | display: flex;
6 | }
7 |
8 | .btn{
9 | flex: 1;
10 | background: #12b7f5;
11 | height: 80rpx;
12 | line-height: 80rpx;
13 | text-align: center;
14 | margin: 10rpx 30rpx;
15 | font-size: 30rpx;
16 | color: #fff;
17 | border-radius: 10rpx;
18 | }
--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "项目配置文件。",
3 | "setting": {
4 | "urlCheck": true,
5 | "es6": true,
6 | "postcss": true,
7 | "minified": true,
8 | "newFeature": true
9 | },
10 | "compileType": "miniprogram",
11 | "libVersion": "1.9.91",
12 | "appid": "touristappid",
13 | "projectname": "wxStar",
14 | "condition": {
15 | "search": {
16 | "current": -1,
17 | "list": []
18 | },
19 | "conversation": {
20 | "current": -1,
21 | "list": []
22 | },
23 | "game": {
24 | "currentL": -1,
25 | "list": []
26 | },
27 | "miniprogram": {
28 | "current": -1,
29 | "list": []
30 | }
31 | }
32 | }
--------------------------------------------------------------------------------
/wxStar/wxStar.js:
--------------------------------------------------------------------------------
1 | function wxStar(self, count, isEidt){
2 | self.setData({
3 | wxStarEdit: isEidt ? true : false,
4 | })
5 | self.wxStarChange = wxStarChange;
6 | self.wxStarInit = wxStarInit;
7 | self.wxStarCont = wxStarCont;
8 |
9 | // 初始化星数
10 | self.wxStarInit(count);
11 | }
12 |
13 | function wxStarChange(e) {
14 | if (!this.data.wxStarEdit) return; // 只可展示，不可评星
15 | var dataset = e.currentTarget.dataset, idx = dataset.idx, index = dataset.index;
16 | var star = this.data.wxStar, len = star.length;
17 | for (var i = 0; i < len; i++) {
18 | if (i < idx) star[i] = [1, 1];
19 | else if (i == idx) {
20 | if (index == 0) star[i] = [1, 0];
21 | else star[i] = [1, 1];
22 | }
23 | else star[i] = [0, 0];
24 | }
25 | this.setData({
26 | wxStar: star,
27 | })
28 | // 选择星之后，回调方法
29 | if (this.starChangeCb) this.starChangeCb();
30 | }
31 |
32 | function wxStarInit(count) {
33 | count = count != undefined ? parseInt(count, 10) : 10;
34 | var str = '';
35 | for (var i = 1; i <= 10; i++) {
36 | if (i <= count) str += '1,';
37 | else str += '0,';
38 | }
39 | var arr = str.split(',');
40 | this.setData({
41 | wxStar: [
42 | [arr[0], arr[1]],
43 | [arr[2], arr[3]],
44 | [arr[4], arr[5]],
45 | [arr[6], arr[7]],
46 | [arr[8], arr[9]],
47 | ]
48 | })
49 | // 初始化完成之后，回调方法。是否需要回调，自己决定
50 | if (this.initSuccessCb) this.initSuccessCb();
51 | }
52 |
53 | function wxStarCont() {
54 | var star = this.data.wxStar, count = 0;
55 | for (var i = 0; i < 5; i++) {
56 | count += parseInt(star[i][0]);
57 | count += parseInt(star[i][1]);
58 | }
59 | return count;
60 | }
61 |
62 | module.exports = {
63 | wxStar: wxStar,
64 | }
--------------------------------------------------------------------------------
/wxStar/wxStar.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ★
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/wxStar/wxStar.wxss:
--------------------------------------------------------------------------------
1 | /* wx-star */
2 | .wx-star-panel{
3 | display: flex;
4 | }
5 | .wx-star{
6 | position: relative;
7 | flex: 1;
8 | height: 80rpx;
9 | margin: 10rpx;
10 | color: #ccc;
11 | text-align: center;
12 | line-height: 80rpx;
13 | font-size: 80rpx;
14 | }
15 | .wx-star-right{
16 | position: absolute;
17 | top: 0;
18 | right: 0;
19 | left: 50%;
20 | bottom: 0;
21 | overflow: hidden;
22 | text-indent: -50%;
23 | }
24 | .wx-star .wx-star-checked{
25 | color: #FF9800;
26 | }
--------------------------------------------------------------------------------