├── app.wxss
├── pages
    └── index
    │   ├── index.json
    │   ├── index.wxml
    │   ├── index.wxss
    │   └── index.js
├── .gitignore
├── app.js
├── app.json
├── wxStar
    ├── wxStar.wxml
    ├── wxStar.wxss
    └── wxStar.js
├── project.config.json
└── README.md


/app.wxss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {}


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | .DS_Store
3 | 
4 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | App({
 2 |   onLaunch: function () {
 3 |     
 4 |   },
 5 |   onShow: function(){
 6 |     
 7 |   },
 8 |   globalData: {
 9 |     
10 |   },
11 | })


--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 | <import src="/wxStar/wxStar.wxml" />
2 | <template is="wxStar" data="{{wxStar: wxStar}}" />
3 | 
4 | <view class='btn-panel'>
5 |   <button class='btn' bindtap='resetStar'>重置</button>
6 |   <button class='btn' bindtap='alertStar'>获取当前星数</button>
7 | </view>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/wxStar/wxStar.wxml:
--------------------------------------------------------------------------------
 1 | <template name="wxStar" >
 2 |   <view class='wx-star-panel'>
 3 |     <view class='wx-star' wx:for="{{wxStar}}" wx:for-item="starItem" wx:for-index="idx" wx:key="{{idx}}">
 4 |       <view class='wx-half-star {{index==0?"wx-star-left":"wx-star-right"}} {{item==1?"wx-star-checked":""}}' wx:for="{{starItem}}" wx:key="{{index}}" bindtap='wxStarChange' data-index='{{index}}' data-idx='{{idx}}'>★</view>
 5 |     </view>
 6 |   </view>
 7 | </template>
 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 | }


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


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # wxStar项目说明
 2 | 
 3 | wxStar是在小程序中实现评分/评星效果，见效果图，也可以直接看代码
 4 | 
 5 | ![Alt text](http://demos.pxuexiao.com/web_css/img/wxStar.gif)
 6 | 
 7 | ## 使用说明
 8 | 
 9 | ### wxml
10 | 
11 | &lt;import src="/wxStar/wxStar.wxml" />
12 | 
13 | &lt;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 | ![Alt text](http://demos.pxuexiao.com/web_css/img/xigua_net.jpeg)
58 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------