rate.js 1.6 KB

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