u-index-item.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <cell ref="u-index-item">
  4. <!-- #endif -->
  5. <view
  6. class="u-index-item"
  7. :id="`u-index-item-${id}`"
  8. :class="[`u-index-item-${id}`]"
  9. >
  10. <slot />
  11. </view>
  12. <!-- #ifdef APP-NVUE -->
  13. </cell>
  14. <!-- #endif -->
  15. </template>
  16. <script>
  17. import props from './props.js';
  18. // #ifdef APP-NVUE
  19. // 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
  20. const dom = uni.requireNativePlugin('dom')
  21. // #endif
  22. /**
  23. * IndexItem
  24. * @description
  25. * @tutorial https://uviewui.com/components/indexList.html
  26. * @property {String}
  27. * @event {Function}
  28. * @example
  29. */
  30. export default {
  31. name: 'u-index-item',
  32. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  33. data() {
  34. return {
  35. // 本组件到滚动条顶部的距离
  36. top: 0,
  37. height: 0,
  38. id: ''
  39. }
  40. },
  41. created() {
  42. // 子组件u-index-anchor的实例
  43. this.anchor = {}
  44. },
  45. mounted() {
  46. this.init()
  47. },
  48. methods: {
  49. init() {
  50. // 此处会活动父组件实例,并赋值给实例的parent属性
  51. this.getParentData('u-index-list')
  52. if (!this.parent) {
  53. return uni.$u.error('u-index-item必须要搭配u-index-list组件使用')
  54. }
  55. uni.$u.sleep().then(() =>{
  56. this.getIndexItemRect().then(size => {
  57. // 由于对象的引用特性,此处会同时生效到父组件的children数组的本实例的top属性中,供父组件判断读取
  58. this.top = Math.ceil(size.top)
  59. this.height = Math.ceil(size.height)
  60. })
  61. })
  62. },
  63. getIndexItemRect() {
  64. return new Promise(resolve => {
  65. // #ifndef APP-NVUE
  66. this.$uGetRect('.u-index-item').then(size => {
  67. resolve(size)
  68. })
  69. // #endif
  70. // #ifdef APP-NVUE
  71. const ref = this.$refs['u-index-item']
  72. dom.getComponentRect(ref, res => {
  73. resolve(res.size)
  74. })
  75. // #endif
  76. })
  77. }
  78. },
  79. }
  80. </script>
  81. <style lang="scss" scoped>
  82. @import "../../libs/css/components.scss";
  83. </style>