index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var component_1 = require("../common/component");
  4. var touch_1 = require("../mixins/touch");
  5. component_1.VantComponent({
  6. mixins: [touch_1.touch],
  7. classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
  8. relation: {
  9. name: 'tab',
  10. type: 'descendant',
  11. linked: function (child) {
  12. this.child.push(child);
  13. this.updateTabs(this.data.tabs.concat(child.data));
  14. },
  15. unlinked: function (child) {
  16. var index = this.child.indexOf(child);
  17. var tabs = this.data.tabs;
  18. tabs.splice(index, 1);
  19. this.child.splice(index, 1);
  20. this.updateTabs(tabs);
  21. }
  22. },
  23. props: {
  24. color: String,
  25. sticky: Boolean,
  26. animated: Boolean,
  27. swipeable: Boolean,
  28. lineWidth: {
  29. type: Number,
  30. value: -1
  31. },
  32. lineHeight: {
  33. type: Number,
  34. value: -1
  35. },
  36. active: {
  37. type: Number,
  38. value: 0
  39. },
  40. type: {
  41. type: String,
  42. value: 'line'
  43. },
  44. border: {
  45. type: Boolean,
  46. value: true
  47. },
  48. duration: {
  49. type: Number,
  50. value: 0.3
  51. },
  52. zIndex: {
  53. type: Number,
  54. value: 1
  55. },
  56. swipeThreshold: {
  57. type: Number,
  58. value: 4
  59. },
  60. offsetTop: {
  61. type: Number,
  62. value: 0
  63. }
  64. },
  65. data: {
  66. tabs: [],
  67. lineStyle: '',
  68. scrollLeft: 0,
  69. scrollable: false,
  70. trackStyle: '',
  71. wrapStyle: '',
  72. position: ''
  73. },
  74. watch: {
  75. swipeThreshold: function () {
  76. this.set({
  77. scrollable: this.child.length > this.data.swipeThreshold
  78. });
  79. },
  80. color: 'setLine',
  81. lineWidth: 'setLine',
  82. lineHeight: 'setLine',
  83. active: 'setActiveTab',
  84. animated: 'setTrack',
  85. offsetTop: 'setWrapStyle'
  86. },
  87. beforeCreate: function () {
  88. this.child = [];
  89. },
  90. mounted: function () {
  91. var _this = this;
  92. this.setLine(true);
  93. this.setTrack();
  94. this.scrollIntoView();
  95. this.getRect('.van-tabs__wrap').then(function (rect) {
  96. _this.navHeight = rect.height;
  97. _this.observerContentScroll();
  98. });
  99. },
  100. destroyed: function () {
  101. this.createIntersectionObserver().disconnect();
  102. },
  103. methods: {
  104. updateTabs: function (tabs) {
  105. tabs = tabs || this.data.tabs;
  106. this.set({
  107. tabs: tabs,
  108. scrollable: tabs.length > this.data.swipeThreshold
  109. });
  110. this.setActiveTab();
  111. },
  112. trigger: function (eventName, index) {
  113. this.$emit(eventName, {
  114. index: index,
  115. title: this.data.tabs[index].title
  116. });
  117. },
  118. onTap: function (event) {
  119. var index = event.currentTarget.dataset.index;
  120. if (this.data.tabs[index].disabled) {
  121. this.trigger('disabled', index);
  122. }
  123. else {
  124. this.trigger('click', index);
  125. this.setActive(index);
  126. }
  127. },
  128. setActive: function (active) {
  129. if (active !== this.data.active) {
  130. this.trigger('change', active);
  131. this.set({ active: active });
  132. this.setActiveTab();
  133. }
  134. },
  135. setLine: function (skipTransition) {
  136. var _this = this;
  137. if (this.data.type !== 'line') {
  138. return;
  139. }
  140. var _a = this.data, color = _a.color, active = _a.active, duration = _a.duration, lineWidth = _a.lineWidth, lineHeight = _a.lineHeight;
  141. this.getRect('.van-tab', true).then(function (rects) {
  142. var rect = rects[active];
  143. var width = lineWidth !== -1 ? lineWidth : rect.width / 2;
  144. var height = lineHeight !== -1 ? "height: " + lineHeight + "px;" : '';
  145. var left = rects
  146. .slice(0, active)
  147. .reduce(function (prev, curr) { return prev + curr.width; }, 0);
  148. left += (rect.width - width) / 2;
  149. var transition = skipTransition
  150. ? ''
  151. : "transition-duration: " + duration + "s; -webkit-transition-duration: " + duration + "s;";
  152. _this.set({
  153. lineStyle: "\n " + height + "\n width: " + width + "px;\n background-color: " + color + ";\n -webkit-transform: translateX(" + left + "px);\n transform: translateX(" + left + "px);\n " + transition + "\n "
  154. });
  155. });
  156. },
  157. setTrack: function () {
  158. var _this = this;
  159. var _a = this.data, animated = _a.animated, active = _a.active, duration = _a.duration;
  160. if (!animated)
  161. return '';
  162. this.getRect('.van-tabs__content').then(function (rect) {
  163. var width = rect.width;
  164. _this.set({
  165. trackStyle: "\n width: " + width * _this.child.length + "px;\n left: " + -1 * active * width + "px;\n transition: left " + duration + "s;\n display: -webkit-box;\n display: flex;\n "
  166. });
  167. var props = { width: width, animated: animated };
  168. _this.child.forEach(function (item) {
  169. item.set(props);
  170. });
  171. });
  172. },
  173. setActiveTab: function () {
  174. var _this = this;
  175. this.child.forEach(function (item, index) {
  176. var data = {
  177. active: index === _this.data.active
  178. };
  179. if (data.active) {
  180. data.inited = true;
  181. }
  182. if (data.active !== item.data.active) {
  183. item.set(data);
  184. }
  185. });
  186. this.set({}, function () {
  187. _this.setLine();
  188. _this.setTrack();
  189. _this.scrollIntoView();
  190. });
  191. },
  192. // scroll active tab into view
  193. scrollIntoView: function () {
  194. var _this = this;
  195. var _a = this.data, active = _a.active, scrollable = _a.scrollable;
  196. if (!scrollable) {
  197. return;
  198. }
  199. Promise.all([
  200. this.getRect('.van-tab', true),
  201. this.getRect('.van-tabs__nav')
  202. ]).then(function (_a) {
  203. var tabRects = _a[0], navRect = _a[1];
  204. var tabRect = tabRects[active];
  205. var offsetLeft = tabRects
  206. .slice(0, active)
  207. .reduce(function (prev, curr) { return prev + curr.width; }, 0);
  208. _this.set({
  209. scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
  210. });
  211. });
  212. },
  213. onTouchStart: function (event) {
  214. if (!this.data.swipeable)
  215. return;
  216. this.touchStart(event);
  217. },
  218. onTouchMove: function (event) {
  219. if (!this.data.swipeable)
  220. return;
  221. this.touchMove(event);
  222. },
  223. // watch swipe touch end
  224. onTouchEnd: function () {
  225. if (!this.data.swipeable)
  226. return;
  227. var _a = this.data, active = _a.active, tabs = _a.tabs;
  228. var _b = this, direction = _b.direction, deltaX = _b.deltaX, offsetX = _b.offsetX;
  229. var minSwipeDistance = 50;
  230. if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
  231. if (deltaX > 0 && active !== 0) {
  232. this.setActive(active - 1);
  233. }
  234. else if (deltaX < 0 && active !== tabs.length - 1) {
  235. this.setActive(active + 1);
  236. }
  237. }
  238. },
  239. setWrapStyle: function () {
  240. var _a = this.data, offsetTop = _a.offsetTop, position = _a.position;
  241. var wrapStyle;
  242. switch (position) {
  243. case 'top':
  244. wrapStyle = "\n top: " + offsetTop + "px;\n position: fixed;\n ";
  245. break;
  246. case 'bottom':
  247. wrapStyle = "\n top: auto;\n bottom: 0;\n ";
  248. break;
  249. default:
  250. wrapStyle = '';
  251. }
  252. // cut down `set`
  253. if (wrapStyle === this.data.wrapStyle)
  254. return;
  255. this.set({ wrapStyle: wrapStyle });
  256. },
  257. observerContentScroll: function () {
  258. var _this = this;
  259. if (!this.data.sticky) {
  260. return;
  261. }
  262. var offsetTop = this.data.offsetTop;
  263. var windowHeight = wx.getSystemInfoSync().windowHeight;
  264. this.createIntersectionObserver().disconnect();
  265. this.createIntersectionObserver()
  266. .relativeToViewport({ top: -(this.navHeight + offsetTop) })
  267. .observe('.van-tabs', function (res) {
  268. var top = res.boundingClientRect.top;
  269. if (top > offsetTop) {
  270. return;
  271. }
  272. var position = res.intersectionRatio > 0 ? 'top' : 'bottom';
  273. _this.$emit('scroll', {
  274. scrollTop: top + offsetTop,
  275. isFixed: position === 'top'
  276. });
  277. _this.setPosition(position);
  278. });
  279. this.createIntersectionObserver()
  280. .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) })
  281. .observe('.van-tabs', function (res) {
  282. var _a = res.boundingClientRect, top = _a.top, bottom = _a.bottom;
  283. if (bottom < _this.navHeight) {
  284. return;
  285. }
  286. var position = res.intersectionRatio > 0 ? 'top' : '';
  287. _this.$emit('scroll', {
  288. scrollTop: top + offsetTop,
  289. isFixed: position === 'top'
  290. });
  291. _this.setPosition(position);
  292. });
  293. },
  294. setPosition: function (position) {
  295. var _this = this;
  296. if (position !== this.data.position) {
  297. this.set({ position: position }).then(function () {
  298. _this.setWrapStyle();
  299. });
  300. }
  301. }
  302. }
  303. });