u-index-anchor.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <header>
  4. <!-- #endif -->
  5. <view
  6. class="u-index-anchor u-border-bottom"
  7. :ref="`u-index-anchor-${text}`"
  8. :style="{
  9. height: $u.addUnit(height),
  10. backgroundColor: bgColor
  11. }"
  12. >
  13. <text
  14. class="u-index-anchor__text"
  15. :style="{
  16. fontSize: $u.addUnit(size),
  17. color: color
  18. }"
  19. >{{ text }}</text>
  20. </view>
  21. <!-- #ifdef APP-NVUE -->
  22. </header>
  23. <!-- #endif -->
  24. </template>
  25. <script>
  26. import props from './props.js';
  27. // #ifdef APP-NVUE
  28. const dom = uni.requireNativePlugin('dom')
  29. // #endif
  30. /**
  31. * IndexAnchor 列表锚点
  32. * @description
  33. * @tutorial https://uviewui.com/components/indexList.html
  34. * @property {String | Number} text 列表锚点文本内容
  35. * @property {String} color 列表锚点文字颜色 ( 默认 '#606266' )
  36. * @property {String | Number} size 列表锚点文字大小,单位默认px ( 默认 14 )
  37. * @property {String} bgColor 列表锚点背景颜色 ( 默认 '#dedede' )
  38. * @property {String | Number} height 列表锚点高度,单位默认px ( 默认 32 )
  39. * @example <u-index-anchor :text="indexList[index]"></u-index-anchor>
  40. */
  41. export default {
  42. name: 'u-index-anchor',
  43. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  44. data() {
  45. return {
  46. }
  47. },
  48. mounted() {
  49. this.init()
  50. },
  51. methods: {
  52. init() {
  53. // 此处会活动父组件实例,并赋值给实例的parent属性
  54. const indexList = uni.$u.$parent.call(this, 'u-index-list')
  55. if (!indexList) {
  56. return uni.$u.error('u-index-anchor必须要搭配u-index-list组件使用')
  57. }
  58. // 将当前实例放入到u-index-list中
  59. indexList.anchors.push(this)
  60. const indexListItem = uni.$u.$parent.call(this, 'u-index-item')
  61. // #ifndef APP-NVUE
  62. // 只有在非nvue下,u-index-anchor才是嵌套在u-index-item中的
  63. if (!indexListItem) {
  64. return uni.$u.error('u-index-anchor必须要搭配u-index-item组件使用')
  65. }
  66. // 设置u-index-item的id为anchor的text标识符,因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
  67. indexListItem.id = this.text.charCodeAt(0)
  68. // #endif
  69. }
  70. },
  71. }
  72. </script>
  73. <style lang="scss" scoped>
  74. @import "../../libs/css/components.scss";
  75. .u-index-anchor {
  76. position: sticky;
  77. top: 0;
  78. @include flex;
  79. align-items: center;
  80. padding-left: 15px;
  81. z-index: 1;
  82. &__text {
  83. @include flex;
  84. align-items: center;
  85. }
  86. }
  87. </style>