index.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. import { VantComponent } from '../common/component';
  2. import { touch } from '../mixins/touch';
  3. import {
  4. getAllRect,
  5. getRect,
  6. groupSetData,
  7. nextTick,
  8. requestAnimationFrame,
  9. } from '../common/utils';
  10. import { isDef } from '../common/validator';
  11. import { useChildren } from '../common/relation';
  12. VantComponent({
  13. mixins: [touch],
  14. classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
  15. relation: useChildren('tab', function () {
  16. this.updateTabs();
  17. }),
  18. props: {
  19. sticky: Boolean,
  20. border: Boolean,
  21. swipeable: Boolean,
  22. titleActiveColor: String,
  23. titleInactiveColor: String,
  24. color: String,
  25. animated: {
  26. type: Boolean,
  27. observer() {
  28. this.children.forEach((child, index) =>
  29. child.updateRender(index === this.data.currentIndex, this)
  30. );
  31. },
  32. },
  33. lineWidth: {
  34. type: null,
  35. value: 40,
  36. observer: 'resize',
  37. },
  38. lineHeight: {
  39. type: null,
  40. value: -1,
  41. },
  42. active: {
  43. type: null,
  44. value: 0,
  45. observer(name) {
  46. if (!this.skipInit) {
  47. this.skipInit = true;
  48. }
  49. if (name !== this.getCurrentName()) {
  50. this.setCurrentIndexByName(name);
  51. }
  52. },
  53. },
  54. type: {
  55. type: String,
  56. value: 'line',
  57. },
  58. ellipsis: {
  59. type: Boolean,
  60. value: true,
  61. },
  62. duration: {
  63. type: Number,
  64. value: 0.3,
  65. },
  66. zIndex: {
  67. type: Number,
  68. value: 1,
  69. },
  70. swipeThreshold: {
  71. type: Number,
  72. value: 5,
  73. observer(value) {
  74. this.setData({
  75. scrollable: this.children.length > value || !this.data.ellipsis,
  76. });
  77. },
  78. },
  79. offsetTop: {
  80. type: Number,
  81. value: 0,
  82. },
  83. lazyRender: {
  84. type: Boolean,
  85. value: true,
  86. },
  87. },
  88. data: {
  89. tabs: [],
  90. scrollLeft: 0,
  91. scrollable: false,
  92. currentIndex: 0,
  93. container: null,
  94. skipTransition: true,
  95. scrollWithAnimation: false,
  96. lineOffsetLeft: 0,
  97. },
  98. mounted() {
  99. requestAnimationFrame(() => {
  100. this.setData({
  101. container: () => this.createSelectorQuery().select('.van-tabs'),
  102. });
  103. if (!this.skipInit) {
  104. this.resize();
  105. this.scrollIntoView();
  106. }
  107. });
  108. },
  109. methods: {
  110. updateTabs() {
  111. const { children = [], data } = this;
  112. this.setData({
  113. tabs: children.map((child) => child.data),
  114. scrollable:
  115. this.children.length > data.swipeThreshold || !data.ellipsis,
  116. });
  117. this.setCurrentIndexByName(data.active || this.getCurrentName());
  118. },
  119. trigger(eventName, child) {
  120. const { currentIndex } = this.data;
  121. const currentChild = child || this.children[currentIndex];
  122. if (!isDef(currentChild)) {
  123. return;
  124. }
  125. this.$emit(eventName, {
  126. index: currentChild.index,
  127. name: currentChild.getComputedName(),
  128. title: currentChild.data.title,
  129. });
  130. },
  131. onTap(event) {
  132. const { index } = event.currentTarget.dataset;
  133. const child = this.children[index];
  134. if (child.data.disabled) {
  135. this.trigger('disabled', child);
  136. } else {
  137. this.setCurrentIndex(index);
  138. nextTick(() => {
  139. this.trigger('click');
  140. });
  141. }
  142. },
  143. // correct the index of active tab
  144. setCurrentIndexByName(name) {
  145. const { children = [] } = this;
  146. const matched = children.filter(
  147. (child) => child.getComputedName() === name
  148. );
  149. if (matched.length) {
  150. this.setCurrentIndex(matched[0].index);
  151. }
  152. },
  153. setCurrentIndex(currentIndex) {
  154. const { data, children = [] } = this;
  155. if (
  156. !isDef(currentIndex) ||
  157. currentIndex >= children.length ||
  158. currentIndex < 0
  159. ) {
  160. return;
  161. }
  162. groupSetData(this, () => {
  163. children.forEach((item, index) => {
  164. const active = index === currentIndex;
  165. if (active !== item.data.active || !item.inited) {
  166. item.updateRender(active, this);
  167. }
  168. });
  169. });
  170. if (currentIndex === data.currentIndex) {
  171. return;
  172. }
  173. const shouldEmitChange = data.currentIndex !== null;
  174. this.setData({ currentIndex });
  175. requestAnimationFrame(() => {
  176. this.resize();
  177. this.scrollIntoView();
  178. });
  179. nextTick(() => {
  180. this.trigger('input');
  181. if (shouldEmitChange) {
  182. this.trigger('change');
  183. }
  184. });
  185. },
  186. getCurrentName() {
  187. const activeTab = this.children[this.data.currentIndex];
  188. if (activeTab) {
  189. return activeTab.getComputedName();
  190. }
  191. },
  192. resize() {
  193. if (this.data.type !== 'line') {
  194. return;
  195. }
  196. const { currentIndex, ellipsis, skipTransition } = this.data;
  197. Promise.all([
  198. getAllRect(this, '.van-tab'),
  199. getRect(this, '.van-tabs__line'),
  200. ]).then(([rects = [], lineRect]) => {
  201. const rect = rects[currentIndex];
  202. if (rect == null) {
  203. return;
  204. }
  205. let lineOffsetLeft = rects
  206. .slice(0, currentIndex)
  207. .reduce((prev, curr) => prev + curr.width, 0);
  208. lineOffsetLeft +=
  209. (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
  210. this.setData({ lineOffsetLeft });
  211. if (skipTransition) {
  212. nextTick(() => {
  213. this.setData({ skipTransition: false });
  214. });
  215. }
  216. });
  217. },
  218. // scroll active tab into view
  219. scrollIntoView() {
  220. const { currentIndex, scrollable, scrollWithAnimation } = this.data;
  221. if (!scrollable) {
  222. return;
  223. }
  224. Promise.all([
  225. getAllRect(this, '.van-tab'),
  226. getRect(this, '.van-tabs__nav'),
  227. ]).then(([tabRects, navRect]) => {
  228. const tabRect = tabRects[currentIndex];
  229. const offsetLeft = tabRects
  230. .slice(0, currentIndex)
  231. .reduce((prev, curr) => prev + curr.width, 0);
  232. this.setData({
  233. scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
  234. });
  235. if (!scrollWithAnimation) {
  236. nextTick(() => {
  237. this.setData({ scrollWithAnimation: true });
  238. });
  239. }
  240. });
  241. },
  242. onTouchScroll(event) {
  243. this.$emit('scroll', event.detail);
  244. },
  245. onTouchStart(event) {
  246. if (!this.data.swipeable) return;
  247. this.touchStart(event);
  248. },
  249. onTouchMove(event) {
  250. if (!this.data.swipeable) return;
  251. this.touchMove(event);
  252. },
  253. // watch swipe touch end
  254. onTouchEnd() {
  255. if (!this.data.swipeable) return;
  256. const { direction, deltaX, offsetX } = this;
  257. const minSwipeDistance = 50;
  258. if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
  259. const index = this.getAvaiableTab(deltaX);
  260. if (index !== -1) {
  261. this.setCurrentIndex(index);
  262. }
  263. }
  264. },
  265. getAvaiableTab(direction) {
  266. const { tabs, currentIndex } = this.data;
  267. const step = direction > 0 ? -1 : 1;
  268. for (
  269. let i = step;
  270. currentIndex + i < tabs.length && currentIndex + i >= 0;
  271. i += step
  272. ) {
  273. const index = currentIndex + i;
  274. if (
  275. index >= 0 &&
  276. index < tabs.length &&
  277. tabs[index] &&
  278. !tabs[index].disabled
  279. ) {
  280. return index;
  281. }
  282. }
  283. return -1;
  284. },
  285. },
  286. });