rate

Rate评分:可设置星星数,可设置大小颜色,支持手势touch选择

组件结构

  1. <template>
  2. <viewclass="tui-rate-class tui-rate-box" @touchmove="touchMove">
  3. <blockv-for="(item,index) in quantity" :key="index">
  4. <view class="tui-icon" :class="['tui-icon-collection'+(hollow && current<=index?'':'-fill')]" :data-index="index"
  5. @tap="handleTap" :style="{fontSize:size+'px',color:current>index?active:normal}"></view>
  6. </block>
  7. </view>
  8. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiRate",
  4. props:{
  5. //数量
  6. quantity:{
  7. type:Number,
  8. default:5
  9. },
  10. //当前选中
  11. current:{
  12. type:Number,
  13. default:0
  14. },
  15. //禁用点击
  16. disabled:{
  17. type:Boolean,
  18. default:false
  19. },
  20. //大小
  21. size:{
  22. type:Number,
  23. default:20
  24. },
  25. //未选中颜色
  26. normal:{
  27. type:String,
  28. default:"#b2b2b2"
  29. },
  30. //选中颜色
  31. active:{
  32. type:String,
  33. default:"#e41f19"
  34. },
  35. //未选中是否为空心
  36. hollow:{
  37. type:Boolean,
  38. default:false
  39. }
  40. },
  41. data(){
  42. return{
  43. pageX:0
  44. };
  45. },
  46. methods:{
  47. handleTap(e){
  48. if(this.disabled){
  49. return;
  50. }
  51. const index = e.currentTarget.dataset.index;
  52. this.$emit('change',{
  53. index:Number(index)+1
  54. })
  55. },
  56. touchMove(e){
  57. if(this.disabled){
  58. return;
  59. }
  60. if(!e.changedTouches[0]){
  61. return;
  62. }
  63. const movePageX = e.changedTouches[0].pageX;
  64. const distance = movePageX -this.pageX;
  65. if(distance <=0){
  66. return;
  67. }
  68. let index =Math.ceil(distance /this.size);
  69. index = index >this.count ?this.count : index;
  70. this.$emit('change',{
  71. index: index
  72. })
  73. }
  74. },
  75. onReady(){
  76. const className ='.tui-rate-box';
  77. let query = uni.createSelectorQuery().in(this)
  78. query.select(className).boundingClientRect((res)=>{
  79. this.pageX = res.left ||0
  80. }).exec()
  81. }
  82. }
  83. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "quantity" : 数量,类型:"Number",默认值:5
     "current" :  当前选中索引,类型:"Number",默认值:0
     "disabled" : 是否禁用点击,类型:"Boolean",默认值:false
     "size" :       星星大小,类型:"Number",默认值:20
     "normal" :   未选中颜色,类型:"String",默认值:"#b2b2b2"
     "active" :   选中颜色,类型:"String",默认值:"#e41f19"
     "hollow" :   未选中是否为空心,类型:"Boolean",默认值:false

 methods:
   "handleTap":点击事件
   "touchMove":touch事件

示例

... 此处省略n行,下载源码查看

numberbox sticky