u-index-list.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. <template>
  2. <view class="u-index-list">
  3. <!-- #ifdef APP-NVUE -->
  4. <list
  5. :scrollTop="scrollTop"
  6. enable-back-to-top
  7. :offset-accuracy="1"
  8. :style="{
  9. maxHeight: $u.addUnit(scrollViewHeight)
  10. }"
  11. @scroll="scrollHandler"
  12. ref="uList"
  13. >
  14. <cell
  15. v-if="$slots.header"
  16. ref="header"
  17. >
  18. <slot name="header" />
  19. </cell>
  20. <slot />
  21. <cell v-if="$slots.footer">
  22. <slot name="footer" />
  23. </cell>
  24. </list>
  25. <!-- #endif -->
  26. <!-- #ifndef APP-NVUE -->
  27. <scroll-view
  28. :scrollTop="scrollTop"
  29. :scrollIntoView="scrollIntoView"
  30. :offset-accuracy="1"
  31. :style="{
  32. maxHeight: $u.addUnit(scrollViewHeight)
  33. }"
  34. scroll-y
  35. @scroll="scrollHandler"
  36. ref="uList"
  37. >
  38. <view v-if="$slots.header">
  39. <slot name="header" />
  40. </view>
  41. <slot />
  42. <view v-if="$slots.footer">
  43. <slot name="footer" />
  44. </view>
  45. </scroll-view>
  46. <!-- #endif -->
  47. <view
  48. class="u-index-list__letter"
  49. ref="u-index-list__letter"
  50. :style="{ top: $u.addUnit(letterInfo.top || 100) }"
  51. @touchstart="touchStart"
  52. @touchmove.stop.prevent="touchMove"
  53. @touchend.stop.prevent="touchEnd"
  54. @touchcancel.stop.prevent="touchEnd"
  55. >
  56. <view
  57. class="u-index-list__letter__item"
  58. v-for="(item, index) in uIndexList"
  59. :key="index"
  60. :style="{
  61. backgroundColor: activeIndex === index ? activeColor : 'transparent'
  62. }"
  63. >
  64. <text
  65. class="u-index-list__letter__item__index"
  66. :style="{color: activeIndex === index ? '#fff' : inactiveColor}"
  67. >{{ item }}</text>
  68. </view>
  69. </view>
  70. <u-transition
  71. mode="fade"
  72. :show="touching"
  73. :customStyle="{
  74. position: 'fixed',
  75. right: '50px',
  76. top: $u.addUnit(indicatorTop),
  77. zIndex: 2
  78. }"
  79. >
  80. <view
  81. class="u-index-list__indicator"
  82. :class="['u-index-list__indicator--show']"
  83. :style="{
  84. height: $u.addUnit(indicatorHeight),
  85. width: $u.addUnit(indicatorHeight)
  86. }"
  87. >
  88. <text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
  89. </view>
  90. </u-transition>
  91. </view>
  92. </template>
  93. <script>
  94. const indexList = () => {
  95. const indexList = [];
  96. const charCodeOfA = 'A'.charCodeAt(0);
  97. for (let i = 0; i < 26; i++) {
  98. indexList.push(String.fromCharCode(charCodeOfA + i));
  99. }
  100. return indexList;
  101. }
  102. import props from './props.js';
  103. import mpMixin from '../../libs/mixin/mpMixin.js';
  104. import mixin from '../../libs/mixin/mixin.js';
  105. // #ifdef APP-NVUE
  106. // 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
  107. const dom = uni.requireNativePlugin('dom')
  108. // #endif
  109. /**
  110. * IndexList 索引列表
  111. * @description 通过折叠面板收纳内容区域
  112. * @tutorial https://uiadmin.net/uview-plus/components/indexList.html
  113. * @property {String} inactiveColor 右边锚点非激活的颜色 ( 默认 '#606266' )
  114. * @property {String} activeColor 右边锚点激活的颜色 ( 默认 '#5677fc' )
  115. * @property {Array} indexList 索引字符列表,数组形式
  116. * @property {Boolean} sticky 是否开启锚点自动吸顶 ( 默认 true )
  117. * @property {String | Number} customNavHeight 自定义导航栏的高度 ( 默认 0 )
  118. * */
  119. export default {
  120. name: 'u-index-list',
  121. mixins: [mpMixin, mixin, props],
  122. // #ifdef MP-WEIXIN
  123. // 将自定义节点设置成虚拟的,更加接近Vue组件的表现,能更好的使用flex属性
  124. options: {
  125. virtualHost: true
  126. },
  127. // #endif
  128. data() {
  129. return {
  130. // 当前正在被选中的字母索引
  131. activeIndex: -1,
  132. touchmoveIndex: 1,
  133. // 索引字母的信息
  134. letterInfo: {
  135. height: 0,
  136. itemHeight: 0,
  137. top: 0
  138. },
  139. // 设置字母指示器的高度,后面为了让指示器跟随字母,并将尖角部分指向字母的中部,需要依赖此值
  140. indicatorHeight: 50,
  141. // 字母放大指示器的top值,为了让其指向当前激活的字母
  142. // indicatorTop: 0
  143. // 当前是否正在被触摸状态
  144. touching: false,
  145. // 滚动条顶部top值
  146. scrollTop: 0,
  147. // scroll-view的高度
  148. scrollViewHeight: 0,
  149. // 系统信息
  150. sys: uni.$u.sys(),
  151. scrolling: false,
  152. scrollIntoView: '',
  153. }
  154. },
  155. computed: {
  156. // 如果有传入外部的indexList锚点数组则使用,否则使用内部生成A-Z字母
  157. uIndexList() {
  158. return this.indexList.length ? this.indexList : indexList()
  159. },
  160. // 字母放大指示器的top值,为了让其指向当前激活的字母
  161. indicatorTop() {
  162. const {
  163. top,
  164. itemHeight
  165. } = this.letterInfo
  166. return Math.floor(top + itemHeight * this.activeIndex + itemHeight / 2 - this.indicatorHeight / 2)
  167. }
  168. },
  169. watch: {
  170. // 监听字母索引的变化,重新设置尺寸
  171. uIndexList: {
  172. immediate: true,
  173. handler() {
  174. uni.$u.sleep().then(() => {
  175. this.setIndexListLetterInfo()
  176. })
  177. }
  178. }
  179. },
  180. created() {
  181. this.children = []
  182. this.anchors = []
  183. this.init()
  184. },
  185. mounted() {
  186. this.setIndexListLetterInfo()
  187. },
  188. methods: {
  189. init() {
  190. // 设置列表的高度为整个屏幕的高度
  191. //减去this.customNavHeight,并将this.scrollViewHeight设置为maxHeight
  192. //解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时,还能滚动
  193. this.scrollViewHeight = this.sys.windowHeight - this.customNavHeight
  194. },
  195. // 索引列表被触摸
  196. touchStart(e) {
  197. // 获取触摸点信息
  198. const touchStart = e.changedTouches[0]
  199. if (!touchStart) return
  200. this.touching = true
  201. const {
  202. pageY
  203. } = touchStart
  204. // 根据当前触摸点的坐标,获取当前触摸的为第几个字母
  205. const currentIndex = this.getIndexListLetter(pageY)
  206. this.setValueForTouch(currentIndex)
  207. },
  208. // 索引字母列表被触摸滑动中
  209. touchMove(e) {
  210. // 获取触摸点信息
  211. let touchMove = e.changedTouches[0]
  212. if (!touchMove) return;
  213. // 滑动结束后迅速开始第二次滑动时候 touching 为 false 造成不显示 indicator 问题
  214. if (!this.touching) {
  215. this.touching = true
  216. }
  217. const {
  218. pageY
  219. } = touchMove
  220. const currentIndex = this.getIndexListLetter(pageY)
  221. this.setValueForTouch(currentIndex)
  222. },
  223. // 触摸结束
  224. touchEnd(e) {
  225. // 延时一定时间后再隐藏指示器,为了让用户看的更直观,同时也是为了消除快速切换u-transition的show带来的影响
  226. uni.$u.sleep(300).then(() => {
  227. this.touching = false
  228. })
  229. },
  230. // 获取索引列表的尺寸以及单个字符的尺寸信息
  231. getIndexListLetterRect() {
  232. return new Promise(resolve => {
  233. // 延时一定时间,以获取dom尺寸
  234. // #ifndef APP-NVUE
  235. this.$uGetRect('.u-index-list__letter').then(size => {
  236. resolve(size)
  237. })
  238. // #endif
  239. // #ifdef APP-NVUE
  240. const ref = this.$refs['u-index-list__letter']
  241. dom.getComponentRect(ref, res => {
  242. resolve(res.size)
  243. })
  244. // #endif
  245. })
  246. },
  247. // 设置indexList索引的尺寸信息
  248. setIndexListLetterInfo() {
  249. this.getIndexListLetterRect().then(size => {
  250. const {
  251. height
  252. } = size
  253. const sys = uni.$u.sys()
  254. const windowHeight = sys.windowHeight
  255. let customNavHeight = 0
  256. // 消除各端导航栏非原生和原生导致的差异,让索引列表字母对屏幕垂直居中
  257. if (this.customNavHeight == 0) {
  258. // #ifdef H5
  259. customNavHeight = sys.windowTop
  260. // #endif
  261. // #ifndef H5
  262. // 在非H5中,为原生导航栏,其高度不算在windowHeight内,这里设置为负值,后面相加时变成减去其高度的一半
  263. customNavHeight = -(sys.statusBarHeight + 44)
  264. // #endif
  265. } else {
  266. customNavHeight = uni.$u.getPx(this.customNavHeight)
  267. }
  268. this.letterInfo = {
  269. height,
  270. // 为了让字母列表对屏幕绝对居中,让其对导航栏进行修正,也即往上偏移导航栏的一半高度
  271. top: (windowHeight - height) / 2 + customNavHeight / 2,
  272. itemHeight: Math.floor(height / this.uIndexList.length)
  273. }
  274. })
  275. },
  276. // 获取当前被触摸的索引字母
  277. getIndexListLetter(pageY) {
  278. const {
  279. top,
  280. height,
  281. itemHeight
  282. } = this.letterInfo
  283. // 对H5的pageY进行修正,这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
  284. // #ifdef H5
  285. pageY += uni.$u.sys().windowTop
  286. // #endif
  287. // 对第一和最后一个字母做边界处理,因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
  288. if (pageY < top) {
  289. return 0
  290. } else if (pageY >= top + height) {
  291. // 如果超出了,取最后一个字母
  292. return this.uIndexList.length - 1
  293. } else {
  294. // 将触摸点的Y轴偏移值,减去索引字母的top值,除以每个字母的高度,即可得到当前触摸点落在哪个字母上
  295. return Math.floor((pageY - top) / itemHeight);
  296. }
  297. },
  298. // 设置各项由触摸而导致变化的值
  299. setValueForTouch(currentIndex) {
  300. // 如果偏移量太小,前后得出的会是同一个索引字母,为了防抖,进行返回
  301. if (currentIndex === this.activeIndex) return
  302. this.activeIndex = currentIndex
  303. // #ifndef APP-NVUE || MP-WEIXIN
  304. // 在非nvue中,由于anchor和item都在u-index-item中,所以需要对index-item进行偏移
  305. this.scrollIntoView = `u-index-item-${this.uIndexList[currentIndex].charCodeAt(0)}`
  306. // #endif
  307. // #ifdef MP-WEIXIN
  308. // 微信小程序下,scroll-view的scroll-into-view属性无法对slot中的内容的id生效,只能通过设置scrollTop的形式去移动滚动条
  309. this.scrollTop = this.children[currentIndex].top
  310. // #endif
  311. // #ifdef APP-NVUE
  312. // 在nvue中,由于cell和header为同级元素,所以实际是需要对header(anchor)进行偏移
  313. const anchor = `u-index-anchor-${this.uIndexList[currentIndex]}`
  314. dom.scrollToElement(this.anchors[currentIndex].$refs[anchor], {
  315. offset: 0,
  316. animated: false
  317. })
  318. // #endif
  319. },
  320. getHeaderRect() {
  321. // 获取header slot的高度,因为list组件中获取元素的尺寸是没有top值的
  322. return new Promise(resolve => {
  323. dom.getComponentRect(this.$refs.header, res => {
  324. resolve(res.size)
  325. })
  326. })
  327. },
  328. // scroll-view的滚动事件
  329. async scrollHandler(e) {
  330. if (this.touching || this.scrolling) return
  331. // 每过一定时间取样一次,减少资源损耗以及可能带来的卡顿
  332. this.scrolling = true
  333. uni.$u.sleep(10).then(() => {
  334. this.scrolling = false
  335. })
  336. let scrollTop = 0
  337. const len = this.children.length
  338. let children = this.children
  339. const anchors = this.anchors
  340. // #ifdef APP-NVUE
  341. // nvue下获取的滚动条偏移为负数,需要转为正数
  342. scrollTop = Math.abs(e.contentOffset.y)
  343. // 获取header slot的尺寸信息
  344. const header = await this.getHeaderRect()
  345. // item的top值,在nvue下,模拟出的anchor的top,类似非nvue下的index-item的top
  346. let top = header.height
  347. // 由于list组件无法获取cell的top值,这里通过header slot和各个item之间的height,模拟出类似非nvue下的位置信息
  348. children = this.children.map((item, index) => {
  349. const child = {
  350. height: item.height,
  351. top
  352. }
  353. // 进行累加,给下一个item提供计算依据
  354. top += item.height + anchors[index].height
  355. return child
  356. })
  357. // #endif
  358. // #ifndef APP-NVUE
  359. // 非nvue通过detail获取滚动条位移
  360. scrollTop = e.detail.scrollTop
  361. // #endif
  362. for (let i = 0; i < len; i++) {
  363. const item = children[i],
  364. nextItem = children[i + 1]
  365. // 如果滚动条高度小于第一个item的top值,此时无需设置任意字母为高亮
  366. if (scrollTop <= children[0].top || scrollTop >= children[len - 1].top + children[len -
  367. 1].height) {
  368. this.activeIndex = -1
  369. break
  370. } else if (!nextItem) {
  371. // 当不存在下一个item时,意味着历遍到了最后一个
  372. this.activeIndex = len - 1
  373. break
  374. } else if (scrollTop > item.top && scrollTop < nextItem.top) {
  375. this.activeIndex = i
  376. break
  377. }
  378. }
  379. },
  380. },
  381. }
  382. </script>
  383. <style lang="scss" scoped>
  384. @import "../../libs/css/components.scss";
  385. .u-index-list {
  386. &__letter {
  387. position: fixed;
  388. right: 0;
  389. text-align: center;
  390. z-index: 3;
  391. padding: 0 6px;
  392. &__item {
  393. width: 16px;
  394. height: 16px;
  395. border-radius: 100px;
  396. margin: 1px 0;
  397. @include flex;
  398. align-items: center;
  399. justify-content: center;
  400. &--active {
  401. background-color: $u-primary;
  402. }
  403. &__index {
  404. font-size: 12px;
  405. text-align: center;
  406. line-height: 12px;
  407. }
  408. }
  409. }
  410. &__indicator {
  411. width: 50px;
  412. height: 50px;
  413. border-radius: 100px 100px 0 100px;
  414. text-align: center;
  415. color: #ffffff;
  416. background-color: #c9c9c9;
  417. transform: rotate(-45deg);
  418. @include flex;
  419. justify-content: center;
  420. align-items: center;
  421. &__text {
  422. font-size: 28px;
  423. line-height: 28px;
  424. font-weight: bold;
  425. color: #fff;
  426. transform: rotate(45deg);
  427. text-align: center;
  428. }
  429. }
  430. }
  431. </style>