u-index-list.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <!-- 支付宝小程序使用$u.getRect()获取组件的根元素尺寸,所以在外面套一个"壳" -->
  3. <view>
  4. <view class="u-index-bar">
  5. <slot />
  6. <view v-if="showSidebar" class="u-index-bar__sidebar" @touchstart.stop.prevent="onTouchMove" @touchmove.stop.prevent="onTouchMove"
  7. @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
  8. <view v-for="(item, index) in indexList" :key="index" class="u-index-bar__index" :style="{zIndex: zIndex + 1, color: activeAnchorIndex === index ? activeColor : ''}"
  9. :data-index="index">
  10. {{ item }}
  11. </view>
  12. </view>
  13. <view class="u-indexed-list-alert" v-if="touchmove && indexList[touchmoveIndex]" :style="{
  14. zIndex: alertZIndex
  15. }">
  16. <text>{{indexList[touchmoveIndex]}}</text>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. var indexList = function() {
  23. var indexList = [];
  24. var charCodeOfA = 'A'.charCodeAt(0);
  25. for (var i = 0; i < 26; i++) {
  26. indexList.push(String.fromCharCode(charCodeOfA + i));
  27. }
  28. return indexList;
  29. };
  30. /**
  31. * indexList 索引列表
  32. * @description 通过折叠面板收纳内容区域,搭配<u-index-anchor>使用
  33. * @tutorial https://www.uviewui.com/components/indexList.html#indexanchor-props
  34. * @property {Number String} scroll-top 当前滚动高度,自定义组件无法获得滚动条事件,所以依赖接入方传入
  35. * @property {Array} index-list 索引字符列表,数组(默认A-Z)
  36. * @property {Number String} z-index 锚点吸顶时的层级(默认965)
  37. * @property {Boolean} sticky 是否开启锚点自动吸顶(默认true)
  38. * @property {Number String} offset-top 锚点自动吸顶时与顶部的距离(默认0)
  39. * @property {String} highlight-color 锚点和右边索引字符高亮颜色(默认#2979ff)
  40. * @event {Function} select 选中右边索引字符时触发
  41. * @example <u-index-list :scrollTop="scrollTop"></u-index-list>
  42. */
  43. export default {
  44. name: "u-index-list",
  45. props: {
  46. sticky: {
  47. type: Boolean,
  48. default: true
  49. },
  50. zIndex: {
  51. type: [Number, String],
  52. default: ''
  53. },
  54. scrollTop: {
  55. type: [Number, String],
  56. default: 0,
  57. },
  58. offsetTop: {
  59. type: [Number, String],
  60. default: 0
  61. },
  62. indexList: {
  63. type: Array,
  64. default () {
  65. return indexList()
  66. }
  67. },
  68. activeColor: {
  69. type: String,
  70. default: '#2979ff'
  71. }
  72. },
  73. created() {
  74. // #ifdef H5
  75. this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 44;
  76. // #endif
  77. // #ifndef H5
  78. this.stickyOffsetTop = this.offsetTop ? uni.upx2px(this.offsetTop) : 0;
  79. // #endif
  80. // 只能在created生命周期定义children,如果在data定义,会因为循环引用而报错
  81. this.children = [];
  82. },
  83. data() {
  84. return {
  85. activeAnchorIndex: 0,
  86. showSidebar: true,
  87. // children: [],
  88. touchmove: false,
  89. touchmoveIndex: 0,
  90. }
  91. },
  92. watch: {
  93. scrollTop() {
  94. this.updateData()
  95. }
  96. },
  97. computed: {
  98. // 弹出toast的z-index值
  99. alertZIndex() {
  100. return this.$u.zIndex.toast;
  101. }
  102. },
  103. methods: {
  104. updateData() {
  105. this.timer && clearTimeout(this.timer);
  106. this.timer = setTimeout(() => {
  107. this.showSidebar = !!this.children.length;
  108. this.setRect().then(() => {
  109. this.onScroll();
  110. });
  111. }, 0);
  112. },
  113. setRect() {
  114. return Promise.all([
  115. this.setAnchorsRect(),
  116. this.setListRect(),
  117. this.setSiderbarRect()
  118. ]);
  119. },
  120. setAnchorsRect() {
  121. return Promise.all(this.children.map((anchor, index) => anchor
  122. .$uGetRect('.u-index-anchor-wrapper')
  123. .then((rect) => {
  124. Object.assign(anchor, {
  125. height: rect.height,
  126. top: rect.top
  127. });
  128. })));
  129. },
  130. setListRect() {
  131. return this.$uGetRect('.u-index-bar').then((rect) => {
  132. Object.assign(this, {
  133. height: rect.height,
  134. top: rect.top + this.scrollTop
  135. });
  136. });
  137. },
  138. setSiderbarRect() {
  139. return this.$uGetRect('.u-index-bar__sidebar').then(rect => {
  140. this.sidebar = {
  141. height: rect.height,
  142. top: rect.top
  143. };
  144. });
  145. },
  146. getActiveAnchorIndex() {
  147. const {
  148. children
  149. } = this;
  150. const {
  151. sticky
  152. } = this;
  153. for (let i = this.children.length - 1; i >= 0; i--) {
  154. const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
  155. const reachTop = sticky ? preAnchorHeight : 0;
  156. if (reachTop >= children[i].top) {
  157. return i;
  158. }
  159. }
  160. return -1;
  161. },
  162. onScroll() {
  163. const {
  164. children = []
  165. } = this;
  166. if (!children.length) {
  167. return;
  168. }
  169. const {
  170. sticky,
  171. stickyOffsetTop,
  172. zIndex,
  173. scrollTop,
  174. activeColor
  175. } = this;
  176. const active = this.getActiveAnchorIndex();
  177. this.activeAnchorIndex = active;
  178. if (sticky) {
  179. let isActiveAnchorSticky = false;
  180. if (active !== -1) {
  181. isActiveAnchorSticky =
  182. children[active].top <= 0;
  183. }
  184. children.forEach((item, index) => {
  185. if (index === active) {
  186. let wrapperStyle = '';
  187. let anchorStyle = {
  188. color: `${activeColor}`
  189. };
  190. if (isActiveAnchorSticky) {
  191. wrapperStyle = {
  192. height: `${children[index].height}px`
  193. };
  194. anchorStyle = {
  195. position: 'fixed',
  196. top: `${stickyOffsetTop}px`,
  197. zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
  198. color: `${activeColor}`
  199. };
  200. }
  201. item.active = active;
  202. item.wrapperStyle = wrapperStyle;
  203. item.anchorStyle = anchorStyle;
  204. } else if (index === active - 1) {
  205. const currentAnchor = children[index];
  206. const currentOffsetTop = currentAnchor.top;
  207. const targetOffsetTop = index === children.length - 1 ?
  208. this.top :
  209. children[index + 1].top;
  210. const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
  211. const translateY = parentOffsetHeight - currentAnchor.height;
  212. const anchorStyle = {
  213. position: 'relative',
  214. transform: `translate3d(0, ${translateY}px, 0)`,
  215. zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
  216. color: `${activeColor}`
  217. };
  218. item.active = active;
  219. item.anchorStyle = anchorStyle;
  220. } else {
  221. item.active = false;
  222. item.anchorStyle = '';
  223. item.wrapperStyle = '';
  224. }
  225. });
  226. }
  227. },
  228. onTouchMove(event) {
  229. this.touchmove = true;
  230. const sidebarLength = this.children.length;
  231. const touch = event.touches[0];
  232. const itemHeight = this.sidebar.height / sidebarLength;
  233. let clientY = 0;
  234. clientY = touch.clientY;
  235. let index = Math.floor((clientY - this.sidebar.top) / itemHeight);
  236. if (index < 0) {
  237. index = 0;
  238. } else if (index > sidebarLength - 1) {
  239. index = sidebarLength - 1;
  240. }
  241. this.touchmoveIndex = index;
  242. this.scrollToAnchor(index);
  243. },
  244. onTouchStop() {
  245. this.touchmove = false;
  246. this.scrollToAnchorIndex = null;
  247. },
  248. scrollToAnchor(index) {
  249. if (this.scrollToAnchorIndex === index) {
  250. return;
  251. }
  252. this.scrollToAnchorIndex = index;
  253. const anchor = this.children.find((item) => item.index === this.indexList[index]);
  254. if (anchor) {
  255. this.$emit('select', anchor.index);
  256. uni.pageScrollTo({
  257. duration: 0,
  258. scrollTop: anchor.top + this.scrollTop
  259. });
  260. }
  261. }
  262. }
  263. };
  264. </script>
  265. <style lang="scss" scoped>
  266. @import "../../libs/css/style.components.scss";
  267. .u-index-bar {
  268. position: relative
  269. }
  270. .u-index-bar__sidebar {
  271. position: fixed;
  272. top: 50%;
  273. right: 0;
  274. @include vue-flex;
  275. flex-direction: column;
  276. text-align: center;
  277. transform: translateY(-50%);
  278. user-select: none;
  279. z-index: 99;
  280. }
  281. .u-index-bar__index {
  282. font-weight: 500;
  283. padding: 8rpx 18rpx;
  284. font-size: 22rpx;
  285. line-height: 1
  286. }
  287. .u-indexed-list-alert {
  288. position: fixed;
  289. width: 120rpx;
  290. height: 120rpx;
  291. right: 90rpx;
  292. top: 50%;
  293. margin-top: -60rpx;
  294. border-radius: 24rpx;
  295. font-size: 50rpx;
  296. color: #fff;
  297. background-color: rgba(0, 0, 0, 0.65);
  298. @include vue-flex;
  299. justify-content: center;
  300. align-items: center;
  301. padding: 0;
  302. z-index: 9999999;
  303. }
  304. .u-indexed-list-alert text {
  305. line-height: 50rpx;
  306. }
  307. </style>