index.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. "use strict";
  2. var _component = require("../common/component");
  3. var _utils = require("../common/utils");
  4. var DEFAULT_DURATION = 200;
  5. (0, _component.VantComponent)({
  6. classes: ["active-class"],
  7. props: {
  8. valueKey: String,
  9. className: String,
  10. itemHeight: Number,
  11. visibleItemCount: Number,
  12. initialOptions: {
  13. type: Array,
  14. value: []
  15. },
  16. defaultIndex: {
  17. type: Number,
  18. value: 0,
  19. observer: function observer(value) {
  20. this.setIndex(value);
  21. }
  22. }
  23. },
  24. data: {
  25. startY: 0,
  26. offset: 0,
  27. duration: 0,
  28. startOffset: 0,
  29. options: [],
  30. currentIndex: 0
  31. },
  32. created: function created() {
  33. var _this = this;
  34. var _this$data = this.data,
  35. defaultIndex = _this$data.defaultIndex,
  36. initialOptions = _this$data.initialOptions;
  37. this.set({
  38. currentIndex: defaultIndex,
  39. options: initialOptions
  40. }).then(function () {
  41. _this.setIndex(defaultIndex);
  42. });
  43. },
  44. methods: {
  45. getCount: function getCount() {
  46. return this.data.options.length;
  47. },
  48. onTouchStart: function onTouchStart(event) {
  49. this.setData({
  50. startY: event.touches[0].clientY,
  51. startOffset: this.data.offset,
  52. duration: 0
  53. });
  54. },
  55. onTouchMove: function onTouchMove(event) {
  56. var data = this.data;
  57. var deltaY = event.touches[0].clientY - data.startY;
  58. this.setData({
  59. offset: (0, _utils.range)(data.startOffset + deltaY, -(this.getCount() * data.itemHeight), data.itemHeight)
  60. });
  61. },
  62. onTouchEnd: function onTouchEnd() {
  63. var data = this.data;
  64. if (data.offset !== data.startOffset) {
  65. this.setData({
  66. duration: DEFAULT_DURATION
  67. });
  68. var index = (0, _utils.range)(Math.round(-data.offset / data.itemHeight), 0, this.getCount() - 1);
  69. this.setIndex(index, true);
  70. }
  71. },
  72. onClickItem: function onClickItem(event) {
  73. var index = event.currentTarget.dataset.index;
  74. this.setIndex(index, true);
  75. },
  76. adjustIndex: function adjustIndex(index) {
  77. var data = this.data;
  78. var count = this.getCount();
  79. index = (0, _utils.range)(index, 0, count);
  80. for (var i = index; i < count; i++) {
  81. if (!this.isDisabled(data.options[i])) return i;
  82. }
  83. for (var _i = index - 1; _i >= 0; _i--) {
  84. if (!this.isDisabled(data.options[_i])) return _i;
  85. }
  86. },
  87. isDisabled: function isDisabled(option) {
  88. return (0, _utils.isObj)(option) && option.disabled;
  89. },
  90. getOptionText: function getOptionText(option) {
  91. var data = this.data;
  92. return (0, _utils.isObj)(option) && data.valueKey in option ? option[data.valueKey] : option;
  93. },
  94. setIndex: function setIndex(index, userAction) {
  95. var _this2 = this;
  96. var data = this.data;
  97. index = this.adjustIndex(index) || 0;
  98. var offset = -index * data.itemHeight;
  99. if (index !== data.currentIndex) {
  100. return this.set({
  101. offset: offset,
  102. currentIndex: index
  103. }).then(function () {
  104. userAction && _this2.$emit("change", index);
  105. });
  106. }
  107. return this.set({
  108. offset: offset
  109. });
  110. },
  111. setValue: function setValue(value) {
  112. var options = this.data.options;
  113. for (var i = 0; i < options.length; i++) {
  114. if (this.getOptionText(options[i]) === value) {
  115. return this.setIndex(i);
  116. }
  117. }
  118. return Promise.resolve();
  119. },
  120. getValue: function getValue() {
  121. var data = this.data;
  122. return data.options[data.currentIndex];
  123. }
  124. }
  125. });