u-list-item.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <cell>
  4. <!-- #endif -->
  5. <view
  6. class="u-list-item"
  7. :ref="`u-list-item-${anchor}`"
  8. :anchor="`u-list-item-${anchor}`"
  9. :class="[`u-list-item-${anchor}`]"
  10. >
  11. <slot />
  12. </view>
  13. <!-- #ifdef APP-NVUE -->
  14. </cell>
  15. <!-- #endif -->
  16. </template>
  17. <script>
  18. import props from './props.js';
  19. import mpMixin from '../../libs/mixin/mpMixin.js';
  20. import mixin from '../../libs/mixin/mixin.js';
  21. // #ifdef APP-NVUE
  22. const dom = uni.requireNativePlugin('dom')
  23. // #endif
  24. /**
  25. * List 列表
  26. * @description 该组件为高性能列表组件
  27. * @tutorial https://ijry.github.io/uview-plus/components/list.html
  28. * @property {String | Number} anchor 用于滚动到指定item
  29. * @example <u-list-ite v-for="(item, index) in indexList" :key="index" ></u-list-item>
  30. */
  31. export default {
  32. name: 'u-list-item',
  33. mixins: [mpMixin, mixin, props],
  34. data() {
  35. return {
  36. // 节点信息
  37. rect: {},
  38. index: 0,
  39. show: true,
  40. sys: uni.$u.sys()
  41. }
  42. },
  43. computed: {
  44. },
  45. inject: ['uList'],
  46. watch: {
  47. // #ifndef APP-NVUE
  48. 'uList.innerScrollTop'(n) {
  49. const preLoadScreen = this.uList.preLoadScreen
  50. const windowHeight = this.sys.windowHeight
  51. if(n <= windowHeight * preLoadScreen) {
  52. this.parent.updateOffsetFromChild(0)
  53. } else if (this.rect.top <= n - windowHeight * preLoadScreen) {
  54. this.parent.updateOffsetFromChild(this.rect.top)
  55. }
  56. }
  57. // #endif
  58. },
  59. created() {
  60. this.parent = {}
  61. },
  62. mounted() {
  63. this.init()
  64. },
  65. methods: {
  66. init() {
  67. // 初始化数据
  68. this.updateParentData()
  69. this.index = this.parent.children.indexOf(this)
  70. this.resize()
  71. },
  72. updateParentData() {
  73. // 此方法在mixin中
  74. this.getParentData('u-list')
  75. },
  76. resize() {
  77. this.queryRect(`u-list-item-${this.anchor}`).then(size => {
  78. const lastChild = this.parent.children[this.index - 1]
  79. this.rect = size
  80. const preLoadScreen = this.uList.preLoadScreen
  81. const windowHeight = this.sys.windowHeight
  82. // #ifndef APP-NVUE
  83. if (lastChild) {
  84. this.rect.top = lastChild.rect.top + lastChild.rect.height
  85. }
  86. if (size.top >= this.uList.innerScrollTop + (1 + preLoadScreen) * windowHeight) this.show =
  87. false
  88. // #endif
  89. })
  90. },
  91. // 查询元素尺寸
  92. queryRect(el) {
  93. return new Promise(resolve => {
  94. // #ifndef APP-NVUE
  95. this.$uGetRect(`.${el}`).then(size => {
  96. resolve(size)
  97. })
  98. // #endif
  99. // #ifdef APP-NVUE
  100. const ref = this.$refs[el]
  101. dom.getComponentRect(ref, res => {
  102. resolve(res.size)
  103. })
  104. // #endif
  105. })
  106. }
  107. }
  108. }
  109. </script>
  110. <style lang="scss" scoped>
  111. @import "../../libs/css/components.scss";
  112. .u-list-item {}
  113. </style>