u-list.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <list
  4. class="u-list"
  5. :enableBackToTop="enableBackToTop"
  6. :loadmoreoffset="lowerThreshold"
  7. :showScrollbar="showScrollbar"
  8. :style="[listStyle]"
  9. :offset-accuracy="Number(offsetAccuracy)"
  10. @scroll="onScroll"
  11. @loadmore="scrolltolower"
  12. >
  13. <slot />
  14. </list>
  15. <!-- #endif -->
  16. <!-- #ifndef APP-NVUE -->
  17. <scroll-view
  18. class="u-list"
  19. :scroll-into-view="scrollIntoView"
  20. :style="[listStyle]"
  21. scroll-y
  22. :scroll-top="Number(scrollTop)"
  23. :lower-threshold="Number(lowerThreshold)"
  24. :upper-threshold="Number(upperThreshold)"
  25. :show-scrollbar="showScrollbar"
  26. :enable-back-to-top="enableBackToTop"
  27. :scroll-with-animation="scrollWithAnimation"
  28. @scroll="onScroll"
  29. @scrolltolower="scrolltolower"
  30. @scrolltoupper="scrolltoupper"
  31. >
  32. <view>
  33. <slot />
  34. </view>
  35. </scroll-view>
  36. <!-- #endif -->
  37. </template>
  38. <script>
  39. import props from './props.js';
  40. // #ifdef APP-NVUE
  41. const dom = uni.requireNativePlugin('dom')
  42. // #endif
  43. /**
  44. * List 列表
  45. * @description 该组件为高性能列表组件
  46. * @tutorial https://www.uviewui.com/components/list.html
  47. * @property {Boolean} showScrollbar 控制是否出现滚动条,仅nvue有效 (默认 false )
  48. * @property {String | Number} lowerThreshold 距底部多少时触发scrolltolower事件 (默认 50 )
  49. * @property {String | Number} upperThreshold 距顶部多少时触发scrolltoupper事件,非nvue有效 (默认 0 )
  50. * @property {String | Number} scrollTop 设置竖向滚动条位置(默认 0 )
  51. * @property {String | Number} offsetAccuracy 控制 onscroll 事件触发的频率,仅nvue有效(默认 10 )
  52. * @property {Boolean} enableFlex 启用 flexbox 布局。开启后,当前节点声明了display: flex就会成为flex container,并作用于其孩子节点,仅微信小程序有效(默认 false )
  53. * @property {Boolean} pagingEnabled 是否按分页模式显示List,(默认 false )
  54. * @property {Boolean} scrollable 是否允许List滚动(默认 true )
  55. * @property {String} scrollIntoView 值应为某子元素id(id不能以数字开头)
  56. * @property {Boolean} scrollWithAnimation 在设置滚动条位置时使用动画过渡 (默认 false )
  57. * @property {Boolean} enableBackToTop iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只对微信小程序有效 (默认 false )
  58. * @property {String | Number} height 列表的高度 (默认 0 )
  59. * @property {String | Number} width 列表宽度 (默认 0 )
  60. * @property {String | Number} preLoadScreen 列表前后预渲染的屏数,1代表一个屏幕的高度,1.5代表1个半屏幕高度 (默认 1 )
  61. * @property {Object} customStyle 定义需要用到的外部样式
  62. *
  63. * @example <u-list @scrolltolower="scrolltolower"></u-list>
  64. */
  65. export default {
  66. name: 'u-list',
  67. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  68. watch: {
  69. scrollIntoView(n) {
  70. this.scrollIntoViewById(n)
  71. }
  72. },
  73. data() {
  74. return {
  75. // 记录内部滚动的距离
  76. innerScrollTop: 0,
  77. // vue下,scroll-view在上拉加载时的偏移值
  78. offset: 0,
  79. sys: uni.$u.sys()
  80. }
  81. },
  82. computed: {
  83. listStyle() {
  84. const style = {},
  85. addUnit = uni.$u.addUnit
  86. if (this.width != 0) style.width = addUnit(this.width)
  87. if (this.height != 0) style.height = addUnit(this.height)
  88. // 如果没有定义列表高度,则默认使用屏幕高度
  89. if (!style.height) style.height = addUnit(this.sys.windowHeight, 'px')
  90. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  91. }
  92. },
  93. provide() {
  94. return {
  95. uList: this
  96. }
  97. },
  98. created() {
  99. this.refs = []
  100. this.children = []
  101. this.anchors = []
  102. },
  103. mounted() {},
  104. methods: {
  105. updateOffsetFromChild(top) {
  106. this.offset = top
  107. },
  108. onScroll(e) {
  109. let scrollTop = 0
  110. // #ifdef APP-NVUE
  111. scrollTop = e.contentOffset.y
  112. // #endif
  113. // #ifndef APP-NVUE
  114. scrollTop = e.detail.scrollTop
  115. // #endif
  116. this.innerScrollTop = scrollTop
  117. this.$emit('scroll', Math.abs(scrollTop))
  118. },
  119. scrollIntoViewById(id) {
  120. // #ifdef APP-NVUE
  121. // 根据id参数,找到所有u-list-item中匹配的节点,再通过dom模块滚动到对应的位置
  122. const item = this.refs.find(item => item.$refs[id] ? true : false)
  123. dom.scrollToElement(item.$refs[id], {
  124. // 是否需要滚动动画
  125. animated: this.scrollWithAnimation
  126. })
  127. // #endif
  128. },
  129. // 滚动到底部触发事件
  130. scrolltolower(e) {
  131. uni.$u.sleep(30).then(() => {
  132. this.$emit('scrolltolower')
  133. })
  134. },
  135. // #ifndef APP-NVUE
  136. // 滚动到底部时触发,非nvue有效
  137. scrolltoupper(e) {
  138. uni.$u.sleep(30).then(() => {
  139. this.$emit('scrolltoupper')
  140. // 这一句很重要,能绝对保证在性功能障碍的webview,滚动条到顶时,取消偏移值,让页面置顶
  141. this.offset = 0
  142. })
  143. }
  144. // #endif
  145. },
  146. }
  147. </script>
  148. <style lang="scss" scoped>
  149. @import "../../libs/css/components.scss";
  150. .u-list {
  151. @include flex(column);
  152. }
  153. </style>