index.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var component_1 = require('../common/component');
  4. var color_1 = require('../common/color');
  5. var page_scroll_1 = require('../mixins/page-scroll');
  6. var indexList = function () {
  7. var indexList = [];
  8. var charCodeOfA = 'A'.charCodeAt(0);
  9. for (var i = 0; i < 26; i++) {
  10. indexList.push(String.fromCharCode(charCodeOfA + i));
  11. }
  12. return indexList;
  13. };
  14. component_1.VantComponent({
  15. relation: {
  16. name: 'index-anchor',
  17. type: 'descendant',
  18. current: 'index-bar',
  19. linked: function () {
  20. this.updateData();
  21. },
  22. unlinked: function () {
  23. this.updateData();
  24. },
  25. },
  26. props: {
  27. sticky: {
  28. type: Boolean,
  29. value: true,
  30. },
  31. zIndex: {
  32. type: Number,
  33. value: 1,
  34. },
  35. highlightColor: {
  36. type: String,
  37. value: color_1.GREEN,
  38. },
  39. stickyOffsetTop: {
  40. type: Number,
  41. value: 0,
  42. },
  43. indexList: {
  44. type: Array,
  45. value: indexList(),
  46. },
  47. },
  48. mixins: [
  49. page_scroll_1.pageScrollMixin(function (event) {
  50. this.scrollTop = event.scrollTop || 0;
  51. this.onScroll();
  52. }),
  53. ],
  54. data: {
  55. activeAnchorIndex: null,
  56. showSidebar: false,
  57. },
  58. created: function () {
  59. this.scrollTop = 0;
  60. },
  61. methods: {
  62. updateData: function () {
  63. var _this = this;
  64. wx.nextTick(function () {
  65. if (_this.timer != null) {
  66. clearTimeout(_this.timer);
  67. }
  68. _this.timer = setTimeout(function () {
  69. _this.setData({
  70. showSidebar: !!_this.children.length,
  71. });
  72. _this.setRect().then(function () {
  73. _this.onScroll();
  74. });
  75. }, 0);
  76. });
  77. },
  78. setRect: function () {
  79. return Promise.all([
  80. this.setAnchorsRect(),
  81. this.setListRect(),
  82. this.setSiderbarRect(),
  83. ]);
  84. },
  85. setAnchorsRect: function () {
  86. var _this = this;
  87. return Promise.all(
  88. this.children.map(function (anchor) {
  89. return anchor
  90. .getRect('.van-index-anchor-wrapper')
  91. .then(function (rect) {
  92. Object.assign(anchor, {
  93. height: rect.height,
  94. top: rect.top + _this.scrollTop,
  95. });
  96. });
  97. })
  98. );
  99. },
  100. setListRect: function () {
  101. var _this = this;
  102. return this.getRect('.van-index-bar').then(function (rect) {
  103. Object.assign(_this, {
  104. height: rect.height,
  105. top: rect.top + _this.scrollTop,
  106. });
  107. });
  108. },
  109. setSiderbarRect: function () {
  110. var _this = this;
  111. return this.getRect('.van-index-bar__sidebar').then(function (res) {
  112. _this.sidebar = {
  113. height: res.height,
  114. top: res.top,
  115. };
  116. });
  117. },
  118. setDiffData: function (_a) {
  119. var target = _a.target,
  120. data = _a.data;
  121. var diffData = {};
  122. Object.keys(data).forEach(function (key) {
  123. if (target.data[key] !== data[key]) {
  124. diffData[key] = data[key];
  125. }
  126. });
  127. if (Object.keys(diffData).length) {
  128. target.setData(diffData);
  129. }
  130. },
  131. getAnchorRect: function (anchor) {
  132. return anchor.getRect('.van-index-anchor-wrapper').then(function (rect) {
  133. return {
  134. height: rect.height,
  135. top: rect.top,
  136. };
  137. });
  138. },
  139. getActiveAnchorIndex: function () {
  140. var _a = this,
  141. children = _a.children,
  142. scrollTop = _a.scrollTop;
  143. var _b = this.data,
  144. sticky = _b.sticky,
  145. stickyOffsetTop = _b.stickyOffsetTop;
  146. for (var i = this.children.length - 1; i >= 0; i--) {
  147. var preAnchorHeight = i > 0 ? children[i - 1].height : 0;
  148. var reachTop = sticky ? preAnchorHeight + stickyOffsetTop : 0;
  149. if (reachTop + scrollTop >= children[i].top) {
  150. return i;
  151. }
  152. }
  153. return -1;
  154. },
  155. onScroll: function () {
  156. var _this = this;
  157. var _a = this,
  158. _b = _a.children,
  159. children = _b === void 0 ? [] : _b,
  160. scrollTop = _a.scrollTop;
  161. if (!children.length) {
  162. return;
  163. }
  164. var _c = this.data,
  165. sticky = _c.sticky,
  166. stickyOffsetTop = _c.stickyOffsetTop,
  167. zIndex = _c.zIndex,
  168. highlightColor = _c.highlightColor;
  169. var active = this.getActiveAnchorIndex();
  170. this.setDiffData({
  171. target: this,
  172. data: {
  173. activeAnchorIndex: active,
  174. },
  175. });
  176. if (sticky) {
  177. var isActiveAnchorSticky_1 = false;
  178. if (active !== -1) {
  179. isActiveAnchorSticky_1 =
  180. children[active].top <= stickyOffsetTop + scrollTop;
  181. }
  182. children.forEach(function (item, index) {
  183. if (index === active) {
  184. var wrapperStyle = '';
  185. var anchorStyle =
  186. '\n color: ' + highlightColor + ';\n ';
  187. if (isActiveAnchorSticky_1) {
  188. wrapperStyle =
  189. '\n height: ' +
  190. children[index].height +
  191. 'px;\n ';
  192. anchorStyle =
  193. '\n position: fixed;\n top: ' +
  194. stickyOffsetTop +
  195. 'px;\n z-index: ' +
  196. zIndex +
  197. ';\n color: ' +
  198. highlightColor +
  199. ';\n ';
  200. }
  201. _this.setDiffData({
  202. target: item,
  203. data: {
  204. active: true,
  205. anchorStyle: anchorStyle,
  206. wrapperStyle: wrapperStyle,
  207. },
  208. });
  209. } else if (index === active - 1) {
  210. var currentAnchor = children[index];
  211. var currentOffsetTop = currentAnchor.top;
  212. var targetOffsetTop =
  213. index === children.length - 1
  214. ? _this.top
  215. : children[index + 1].top;
  216. var parentOffsetHeight = targetOffsetTop - currentOffsetTop;
  217. var translateY = parentOffsetHeight - currentAnchor.height;
  218. var anchorStyle =
  219. '\n position: relative;\n transform: translate3d(0, ' +
  220. translateY +
  221. 'px, 0);\n z-index: ' +
  222. zIndex +
  223. ';\n color: ' +
  224. highlightColor +
  225. ';\n ';
  226. _this.setDiffData({
  227. target: item,
  228. data: {
  229. active: true,
  230. anchorStyle: anchorStyle,
  231. },
  232. });
  233. } else {
  234. _this.setDiffData({
  235. target: item,
  236. data: {
  237. active: false,
  238. anchorStyle: '',
  239. wrapperStyle: '',
  240. },
  241. });
  242. }
  243. });
  244. }
  245. },
  246. onClick: function (event) {
  247. this.scrollToAnchor(event.target.dataset.index);
  248. },
  249. onTouchMove: function (event) {
  250. var sidebarLength = this.children.length;
  251. var touch = event.touches[0];
  252. var itemHeight = this.sidebar.height / sidebarLength;
  253. var index = Math.floor((touch.clientY - this.sidebar.top) / itemHeight);
  254. if (index < 0) {
  255. index = 0;
  256. } else if (index > sidebarLength - 1) {
  257. index = sidebarLength - 1;
  258. }
  259. this.scrollToAnchor(index);
  260. },
  261. onTouchStop: function () {
  262. this.scrollToAnchorIndex = null;
  263. },
  264. scrollToAnchor: function (index) {
  265. var _this = this;
  266. if (typeof index !== 'number' || this.scrollToAnchorIndex === index) {
  267. return;
  268. }
  269. this.scrollToAnchorIndex = index;
  270. var anchor = this.children.find(function (item) {
  271. return item.data.index === _this.data.indexList[index];
  272. });
  273. if (anchor) {
  274. anchor.scrollIntoView(this.scrollTop);
  275. this.$emit('select', anchor.data.index);
  276. }
  277. },
  278. },
  279. });