学员端小程序
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.

440 lines
13 KiB

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