index.js 7.3 KB

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