rate

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

组件结构

  1. <template>
  2.     <view class="tui-rate-class tui-rate-box" @touchmove="touchMove">
  3.         <block v-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.     export default {
  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;
  66.                 if (distance <= 0) {
  67.                     return;
  68.                 }
  69.                 let index = Math.ceil(distance / this.size);
  70.                 index = index > this.count ? this.count : index;
  71.                 this.$emit('change', {
  72.                     index: index
  73.                 })
  74.             }
  75.         },
  76.         onReady() {
  77.             const className = '.tui-rate-box';
  78.             let query = uni.createSelectorQuery().in(this)
  79.             query.select(className).boundingClientRect((res) => {
  80.                 this.pageX = res.left || 0
  81.             }).exec()
  82.         }
  83.     }
  84. </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 →