小程序源码

source/wx/xzs-student/component/iView/rate/index.js

@@ -0,0 +1,69 @@
+Component({
+    externalClasses: ['i-class'],
+    properties : {
+        count : {
+            type : Number,
+            value : 5
+        },
+        value : {
+            type : Number,
+            value : 0
+        },
+        disabled : {
+            type : Boolean,
+            value : false
+        },
+        size : {
+            type : Number,
+            value : 20
+        },
+        name : {
+            type : String,
+            value : ''
+        }
+    },
+    data : {
+        touchesStart : {
+            pageX : 0
+        }
+    },
+    methods : {
+        handleClick(e){
+            const data = this.data;
+            if( data.disabled ){
+                return;
+            }
+            const index = e.currentTarget.dataset.index;
+            this.triggerEvent('change',{
+                index : index + 1
+            })
+        },
+        handleTouchMove(e){
+            const data = this.data;
+            if( data.disabled ){
+                return;
+            }
+            if( !e.changedTouches[0] ){
+                return;
+            }
+            const movePageX =  e.changedTouches[0].pageX;
+            const space = movePageX - data.touchesStart.pageX;
+
+            if( space <= 0 ){
+                return;
+            }
+            let setIndex = Math.ceil( space/data.size );
+            setIndex = setIndex  > data.count ? data.count : setIndex ;
+            this.triggerEvent('change',{
+                index : setIndex 
+            })
+        }
+    },
+    ready(){
+       const className = '.i-rate';
+        var query = wx.createSelectorQuery().in(this)
+        query.select( className ).boundingClientRect((res)=>{
+            this.data.touchesStart.pageX = res.left || 0;
+        }).exec()
+    }
+});

source/wx/xzs-student/component/iView/rate/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents":{
+      "i-icon": "../icon/index"
+  }
+}

source/wx/xzs-student/component/iView/rate/index.wxml

@@ -0,0 +1,23 @@
+<view class="i-class i-rate" 
+    bindtouchmove="handleTouchMove">
+    <input type="text" :name="name" wx:value="{{value}}" class="i-rate-hide-input" />
+    <view
+        wx:for="{{count}}"
+        wx:key="{{item}}" 
+        class="i-rate-star {{ parse.getCurrent( value,index ) }}" 
+        data-index="{{index}}" 
+        bindtap="handleClick">
+        <i-icon type="collection_fill" size="{{size}}"></i-icon>
+    </view>
+    <view class="i-rate-text" wx:if="{{ value !== 0 }}"><slot></slot></view>
+</view>
+<wxs module="parse">
+var prefixCls = 'i-rate';
+module.exports = {
+    getCurrent : function( value,index ){
+        if( index < value  ){
+            return prefixCls + '-current'
+        }
+    }
+}
+</wxs>

source/wx/xzs-student/component/iView/rate/index.wxss

@@ -0,0 +1 @@
+.i-rate{margin:0;padding:0;font-size:20px;display:inline-block;vertical-align:middle;font-weight:400;font-style:normal}.i-rate-hide-input{display:none}.i-rate-star{display:inline-block;color:#e9e9e9}.i-rate-current{color:#f5a623}.i-rate-text{display:inline-block;vertical-align:middle;margin-left:6px;font-size:14px}