index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. "use strict";
  2. var _component = require("../common/component");
  3. var _touch = require("../mixins/touch");
  4. var _utils = require("../common/utils");
  5. function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
  6. function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
  7. function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
  8. function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
  9. function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
  10. function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  11. var _my = require("../../__antmove/api/index.js")(my);
  12. var wx = _my;
  13. (0, _component.VantComponent)({
  14. mixins: [_touch.touch],
  15. classes: ["nav-class", "tab-class", "tab-active-class", "line-class"],
  16. relation: {
  17. name: "tab",
  18. type: "descendant",
  19. current: "tabs",
  20. linked: function linked(target) {
  21. target.index = this.children.length - 1;
  22. this.updateTabs();
  23. },
  24. unlinked: function unlinked() {
  25. this.children = this.children.map(function (child, index) {
  26. child.index = index;
  27. return child;
  28. });
  29. this.updateTabs();
  30. }
  31. },
  32. props: {
  33. sticky: Boolean,
  34. border: Boolean,
  35. swipeable: Boolean,
  36. titleActiveColor: String,
  37. titleInactiveColor: String,
  38. color: String,
  39. animated: {
  40. type: Boolean,
  41. observer: function observer() {
  42. var _this = this;
  43. wx.nextTick(function () {
  44. _this.children.forEach(function (child, index) {
  45. return child.updateRender(index === _this.data.currentIndex, _this);
  46. });
  47. });
  48. }
  49. },
  50. lineWidth: {
  51. type: [String, Number],
  52. value: 40,
  53. observer: "resize"
  54. },
  55. lineHeight: {
  56. type: [String, Number],
  57. value: -1
  58. },
  59. active: {
  60. type: [String, Number],
  61. value: 0,
  62. observer: function observer(name) {
  63. var _this2 = this;
  64. wx.nextTick(function () {
  65. if (name !== _this2.getCurrentName()) {
  66. _this2.setCurrentIndexByName(name);
  67. }
  68. });
  69. }
  70. },
  71. type: {
  72. type: String,
  73. value: "line"
  74. },
  75. ellipsis: {
  76. type: Boolean,
  77. value: true
  78. },
  79. duration: {
  80. type: Number,
  81. value: 0.3
  82. },
  83. zIndex: {
  84. type: Number,
  85. value: 1
  86. },
  87. swipeThreshold: {
  88. type: Number,
  89. value: 5,
  90. observer: function observer(value) {
  91. this.setData({
  92. scrollable: this.children.length > value || !this.data.ellipsis
  93. });
  94. }
  95. },
  96. offsetTop: {
  97. type: Number,
  98. value: 0
  99. },
  100. lazyRender: {
  101. type: Boolean,
  102. value: true
  103. }
  104. },
  105. data: {
  106. tabs: [],
  107. lineStyle: "",
  108. scrollLeft: 0,
  109. scrollable: false,
  110. trackStyle: "",
  111. currentIndex: 0,
  112. container: null,
  113. skipTransition: true,
  114. lineOffsetLeft: 0
  115. },
  116. mounted: function mounted() {
  117. var _this3 = this;
  118. wx.nextTick(function () {
  119. _this3.resize(true);
  120. _this3.scrollIntoView();
  121. }, 200);
  122. },
  123. methods: {
  124. updateContainer: function updateContainer() {
  125. var _this4 = this;
  126. this.setData({
  127. container: function container() {
  128. return _this4.createSelectorQuery().select(".van-tabs");
  129. }
  130. });
  131. },
  132. updateTabs: function updateTabs() {
  133. var _this$children = this.children,
  134. children = _this$children === void 0 ? [] : _this$children,
  135. data = this.data;
  136. this.setData({
  137. tabs: children.map(function (child) {
  138. return child.data;
  139. }),
  140. scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
  141. });
  142. this.setCurrentIndexByName(this.getCurrentName() || data.active);
  143. },
  144. trigger: function trigger(eventName, child) {
  145. var currentIndex = this.data.currentIndex;
  146. var currentChild = child || this.children[currentIndex];
  147. if (!(0, _utils.isDef)(currentChild)) {
  148. return;
  149. }
  150. this.$emit(eventName, {
  151. index: currentChild.index,
  152. name: currentChild.getComputedName(),
  153. title: currentChild.data.title
  154. });
  155. },
  156. onTap: function onTap(event) {
  157. var _this5 = this;
  158. var index = event.currentTarget.dataset.index;
  159. var child = this.children[index];
  160. if (child.data.disabled) {
  161. this.trigger("disabled", child);
  162. } else {
  163. this.setCurrentIndex(index);
  164. wx.nextTick(function () {
  165. _this5.trigger("click");
  166. });
  167. }
  168. },
  169. // correct the index of active tab
  170. setCurrentIndexByName: function setCurrentIndexByName(name) {
  171. var _this$children2 = this.children,
  172. children = _this$children2 === void 0 ? [] : _this$children2;
  173. var matched = children.filter(function (child) {
  174. return child.getComputedName() === name;
  175. });
  176. if (matched.length) {
  177. this.setCurrentIndex(matched[0].index);
  178. }
  179. },
  180. setCurrentIndex: function setCurrentIndex(currentIndex) {
  181. var _this6 = this;
  182. var data = this.data,
  183. _this$children3 = this.children,
  184. children = _this$children3 === void 0 ? [] : _this$children3;
  185. if (!(0, _utils.isDef)(currentIndex) || currentIndex >= children.length || currentIndex < 0) {
  186. return;
  187. }
  188. children.forEach(function (item, index) {
  189. var active = index === currentIndex;
  190. if (active !== item.data.active || !item.inited) {
  191. item.updateRender(active, _this6);
  192. }
  193. });
  194. if (currentIndex === data.currentIndex) {
  195. return;
  196. }
  197. var shouldEmitChange = data.currentIndex !== null;
  198. this.setData({
  199. currentIndex: currentIndex
  200. });
  201. wx.nextTick(function () {
  202. _this6.resize();
  203. _this6.scrollIntoView();
  204. _this6.updateContainer();
  205. _this6.trigger("input");
  206. if (shouldEmitChange) {
  207. _this6.trigger("change");
  208. }
  209. });
  210. },
  211. getCurrentName: function getCurrentName() {
  212. var activeTab = this.children[this.data.currentIndex];
  213. if (activeTab) {
  214. return activeTab.getComputedName();
  215. }
  216. },
  217. resize: function resize() {
  218. var _this7 = this;
  219. var skipTransition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  220. if (this.data.type !== "line") {
  221. return;
  222. }
  223. var _this$data = this.data,
  224. currentIndex = _this$data.currentIndex,
  225. ellipsis = _this$data.ellipsis;
  226. Promise.all([_utils.getAllRect.call(this, ".van-tab"), _utils.getRect.call(this, ".van-tabs__line")]).then(function (_ref) {
  227. var _ref2 = _slicedToArray(_ref, 2),
  228. _ref2$ = _ref2[0],
  229. rects = _ref2$ === void 0 ? [] : _ref2$,
  230. lineRect = _ref2[1];
  231. var rect = rects[currentIndex];
  232. if (rect == null) {
  233. return;
  234. }
  235. var lineOffsetLeft = rects.slice(0, currentIndex).reduce(function (prev, curr) {
  236. return prev + curr.width;
  237. }, 0);
  238. lineOffsetLeft += (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
  239. _this7.setData({
  240. lineOffsetLeft: lineOffsetLeft,
  241. skipTransition: skipTransition
  242. });
  243. });
  244. },
  245. // scroll active tab into view
  246. scrollIntoView: function scrollIntoView() {
  247. var _this8 = this;
  248. var _this$data2 = this.data,
  249. currentIndex = _this$data2.currentIndex,
  250. scrollable = _this$data2.scrollable;
  251. if (!scrollable) {
  252. return;
  253. }
  254. Promise.all([_utils.getAllRect.call(this, ".van-tab"), _utils.getRect.call(this, ".van-tabs__nav")]).then(function (_ref3) {
  255. var _ref4 = _slicedToArray(_ref3, 2),
  256. tabRects = _ref4[0],
  257. navRect = _ref4[1];
  258. var tabRect = tabRects[currentIndex];
  259. var offsetLeft = tabRects.slice(0, currentIndex).reduce(function (prev, curr) {
  260. return prev + curr.width;
  261. }, 0);
  262. _this8.setData({
  263. scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
  264. });
  265. });
  266. },
  267. onTouchScroll: function onTouchScroll(event) {
  268. this.$emit("scroll", event.detail);
  269. },
  270. onTouchStart: function onTouchStart(event) {
  271. if (!this.data.swipeable) return;
  272. this.touchStart(event);
  273. },
  274. onTouchMove: function onTouchMove(event) {
  275. if (!this.data.swipeable) return;
  276. this.touchMove(event);
  277. },
  278. // watch swipe touch end
  279. onTouchEnd: function onTouchEnd() {
  280. if (!this.data.swipeable) return;
  281. var direction = this.direction,
  282. deltaX = this.deltaX,
  283. offsetX = this.offsetX;
  284. var minSwipeDistance = 50;
  285. if (direction === "horizontal" && offsetX >= minSwipeDistance) {
  286. var index = this.getAvaiableTab(deltaX);
  287. if (index !== -1) {
  288. this.setCurrentIndex(index);
  289. }
  290. }
  291. },
  292. getAvaiableTab: function getAvaiableTab(direction) {
  293. var _this$data3 = this.data,
  294. tabs = _this$data3.tabs,
  295. currentIndex = _this$data3.currentIndex;
  296. var step = direction > 0 ? -1 : 1;
  297. for (var i = step; currentIndex + i < tabs.length && currentIndex + i >= 0; i += step) {
  298. var index = currentIndex + i;
  299. if (index >= 0 && index < tabs.length && tabs[index] && !tabs[index].disabled) {
  300. return index;
  301. }
  302. }
  303. return -1;
  304. }
  305. }
  306. });