index.js 7.9 KB

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