手写一个小程序评分组件

miniprogram-rate

小程序自定义评分组件

使用此组件需要依赖小程序基础库 2.2.1 以上版本，同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

GitHub: [github.com/qq449245884…][1]

使用方法

1.安装 rate

npm install --save miniprogram-rate
复制代码

2.在需要使用 srate 的页面 page.json 中添加 rate 自定义组件配置

{
  "usingComponents": {
    "rate": "miniprogram-rate"
  }
}
复制代码

3.WXML 文件中引用 rate

<rate />
复制代码

##示例

基础示例

评论的个数，只读模式

// wxml
<rate value="{{value}}"  disabled="{{disabled}}" />

// js
  Page({
    data: {
      value: 3,
      disabled: true
    }
  })
复制代码

评论的 star 总个数

// wxml
  <rate  count="{{count}}"  />

// js
  Page({
    data: {
      count: 10
    }
  })
复制代码

显示取消(重置)按键

// wxml
  <rate  cancel="{{cancel}}"/>

// js
  Page({
    data: {
      cancel: true
    }
  })
复制代码

取消(重置)按键位置(右边)

// wxml
  <rate  cancel="{{cancel}}"  cancelPlace="{{cancelPlace}}"/>

// js
  Page({
    data: {
      cancel: true,
      cancelPlace: 'right'
    }
  })

复制代码

自定义图标

// wxml
  <rate star-on="{{starOn}}"  star-off="{{starOff}}" />

// js
  Page({
    data: {
      starOn: './img/medal-on.png',
      starOff: './img/medal-off.png'
    }
  })
复制代码

注意,这边图标的路径,需要根据自己当前项目位置决定

开启自定义一系列图标

// wxml
  <rate  faceIcon="{{faceIcon}}"/>

// js
  Page({
    data: {
      faceIcon: true
    }
  })
复制代码

自己有默认5个图标，如果需要自己定义的图标可以faceIconArr这个属性来设置: 如下

// wxml
  <rate  faceIcon="{{faceIcon}}"  faceIconArr="{{faceIconArr}}"/>

// js
  Page({
    data: {
      faceIcon: true,
      faceIconArr: ['./img/face-a.png', './img/face-b.png', './img/face-c.png',
        './img/face-d.png', './img/coffee.png', './img/cancel-off.png']
    }
  })

复制代码

注意: 此时的总个数是没数组的大小决定的, 而不是 count.

change事件

// wxml

  <view class="container">
    <rate  bind:change="change"/>
    <view>{{curentScope}} 分</view>
  </view>

// js
  Page({
    data: {
      curentScope: 0,
    },
    change(event) {
      const curentScope = event.detail.index
      this.setData({
        curentScope
      })
    }
  })
复制代码

##API

Rate properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
count	star 总数	Number	5
value	当前 star 数	Number	0
disabled	是否只读，无法进行交互	Boolean	false
size	图标大小，单位 rpx	Number	32
cancel	显示取消按钮来重置 star 数量	Boolean	false
cancelPlace	取消按钮的位置（left|right）	String	left
starOn	选中的图标	String	'./img/star-on.png'
starOff	未选中的图标	String	'./img/star-off.png'
faceIcon	开启定义表情包	Boolean	false
faceIconArr	定义表情包数组	Array	['./img/face-a.png', './img/face-a.png', './img/face-b.png', './img/face-c.png', './img/face-d.png']

Rate events

事件名	说明	返回值
bind:change	点击评分时触发	{{index}}
bind:cancel	点击重置按钮时触发	{{index}}

一个笨笨的码农，我的世界只能终身学习！