You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

u-index-list.vue 8.1 KiB

2 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  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定义,会因为在子组件中通过provide/inject
  81. // 进行push时而导致的莫名其妙的错误
  82. this.children = [];
  83. },
  84. provide() {
  85. return {
  86. UIndexList: this
  87. }
  88. },
  89. data() {
  90. return {
  91. activeAnchorIndex: 0,
  92. showSidebar: true,
  93. // children: [],
  94. touchmove: false,
  95. touchmoveIndex: 0,
  96. }
  97. },
  98. watch: {
  99. scrollTop() {
  100. this.updateData()
  101. }
  102. },
  103. computed: {
  104. // 弹出toast的z-index值
  105. alertZIndex() {
  106. return this.$u.zIndex.toast;
  107. }
  108. },
  109. methods: {
  110. updateData() {
  111. this.timer && clearTimeout(this.timer);
  112. this.timer = setTimeout(() => {
  113. this.showSidebar = !!this.children.length;
  114. this.setRect().then(() => {
  115. this.onScroll();
  116. });
  117. }, 0);
  118. },
  119. setRect() {
  120. return Promise.all([
  121. this.setAnchorsRect(),
  122. this.setListRect(),
  123. this.setSiderbarRect()
  124. ]);
  125. },
  126. setAnchorsRect() {
  127. return Promise.all(this.children.map((anchor, index) => anchor
  128. .$uGetRect('.u-index-anchor-wrapper')
  129. .then((rect) => {
  130. Object.assign(anchor, {
  131. height: rect.height,
  132. top: rect.top
  133. });
  134. })));
  135. },
  136. setListRect() {
  137. return this.$uGetRect('.u-index-bar').then((rect) => {
  138. Object.assign(this, {
  139. height: rect.height,
  140. top: rect.top + this.scrollTop
  141. });
  142. });
  143. },
  144. setSiderbarRect() {
  145. return this.$uGetRect('.u-index-bar__sidebar').then(rect => {
  146. this.sidebar = {
  147. height: rect.height,
  148. top: rect.top
  149. };
  150. });
  151. },
  152. getActiveAnchorIndex() {
  153. const {
  154. children
  155. } = this;
  156. const {
  157. sticky
  158. } = this;
  159. for (let i = this.children.length - 1; i >= 0; i--) {
  160. const preAnchorHeight = i > 0 ? children[i - 1].height : 0;
  161. const reachTop = sticky ? preAnchorHeight : 0;
  162. if (reachTop >= children[i].top) {
  163. return i;
  164. }
  165. }
  166. return -1;
  167. },
  168. onScroll() {
  169. const {
  170. children = []
  171. } = this;
  172. if (!children.length) {
  173. return;
  174. }
  175. const {
  176. sticky,
  177. stickyOffsetTop,
  178. zIndex,
  179. scrollTop,
  180. activeColor
  181. } = this;
  182. const active = this.getActiveAnchorIndex();
  183. this.activeAnchorIndex = active;
  184. if (sticky) {
  185. let isActiveAnchorSticky = false;
  186. if (active !== -1) {
  187. isActiveAnchorSticky =
  188. children[active].top <= 0;
  189. }
  190. children.forEach((item, index) => {
  191. if (index === active) {
  192. let wrapperStyle = '';
  193. let anchorStyle = {
  194. color: `${activeColor}`
  195. };
  196. if (isActiveAnchorSticky) {
  197. wrapperStyle = {
  198. height: `${children[index].height}px`
  199. };
  200. anchorStyle = {
  201. position: 'fixed',
  202. top: `${stickyOffsetTop}px`,
  203. zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
  204. color: `${activeColor}`
  205. };
  206. }
  207. item.active = active;
  208. item.wrapperStyle = wrapperStyle;
  209. item.anchorStyle = anchorStyle;
  210. } else if (index === active - 1) {
  211. const currentAnchor = children[index];
  212. const currentOffsetTop = currentAnchor.top;
  213. const targetOffsetTop = index === children.length - 1 ?
  214. this.top :
  215. children[index + 1].top;
  216. const parentOffsetHeight = targetOffsetTop - currentOffsetTop;
  217. const translateY = parentOffsetHeight - currentAnchor.height;
  218. const anchorStyle = {
  219. position: 'relative',
  220. transform: `translate3d(0, ${translateY}px, 0)`,
  221. zIndex: `${zIndex ? zIndex : this.$u.zIndex.indexListSticky}`,
  222. color: `${activeColor}`
  223. };
  224. item.active = active;
  225. item.anchorStyle = anchorStyle;
  226. } else {
  227. item.active = false;
  228. item.anchorStyle = '';
  229. item.wrapperStyle = '';
  230. }
  231. });
  232. }
  233. },
  234. onTouchMove(event) {
  235. this.touchmove = true;
  236. const sidebarLength = this.children.length;
  237. const touch = event.touches[0];
  238. const itemHeight = this.sidebar.height / sidebarLength;
  239. let clientY = 0;
  240. clientY = touch.clientY;
  241. let index = Math.floor((clientY - this.sidebar.top) / itemHeight);
  242. if (index < 0) {
  243. index = 0;
  244. } else if (index > sidebarLength - 1) {
  245. index = sidebarLength - 1;
  246. }
  247. this.touchmoveIndex = index;
  248. this.scrollToAnchor(index);
  249. },
  250. onTouchStop() {
  251. this.touchmove = false;
  252. this.scrollToAnchorIndex = null;
  253. },
  254. scrollToAnchor(index) {
  255. if (this.scrollToAnchorIndex === index) {
  256. return;
  257. }
  258. this.scrollToAnchorIndex = index;
  259. const anchor = this.children.find((item) => item.index === this.indexList[index]);
  260. if (anchor) {
  261. this.$emit('select', anchor.index);
  262. uni.pageScrollTo({
  263. duration: 0,
  264. scrollTop: anchor.top + this.scrollTop
  265. });
  266. }
  267. }
  268. }
  269. };
  270. </script>
  271. <style lang="scss" scoped>
  272. @import "../../libs/css/style.components.scss";
  273. .u-index-bar {
  274. position: relative
  275. }
  276. .u-index-bar__sidebar {
  277. position: fixed;
  278. top: 50%;
  279. right: 0;
  280. display: flex;
  281. flex-direction: column;
  282. text-align: center;
  283. transform: translateY(-50%);
  284. user-select: none;
  285. z-index: 99;
  286. }
  287. .u-index-bar__index {
  288. font-weight: 500;
  289. padding: 8rpx 18rpx;
  290. font-size: 22rpx;
  291. line-height: 1
  292. }
  293. .u-indexed-list-alert {
  294. position: fixed;
  295. width: 120rpx;
  296. height: 120rpx;
  297. right: 90rpx;
  298. top: 50%;
  299. margin-top: -60rpx;
  300. border-radius: 24rpx;
  301. font-size: 50rpx;
  302. color: #fff;
  303. background-color: rgba(0, 0, 0, 0.65);
  304. display: flex;
  305. justify-content: center;
  306. align-items: center;
  307. padding: 0;
  308. z-index: 9999999;
  309. }
  310. .u-indexed-list-alert text {
  311. line-height: 50rpx;
  312. }
  313. </style>