bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-list/u-list.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,157 @@
<template>
   <!-- #ifdef APP-NVUE -->
   <list
      class="u-list"
      :enableBackToTop="enableBackToTop"
      :loadmoreoffset="lowerThreshold"
      :showScrollbar="showScrollbar"
      :style="[listStyle]"
      :offset-accuracy="Number(offsetAccuracy)"
      @scroll="onScroll"
      @loadmore="scrolltolower"
   >
      <slot />
   </list>
   <!-- #endif -->
   <!-- #ifndef APP-NVUE -->
   <scroll-view
      class="u-list"
      :scroll-into-view="scrollIntoView"
      :style="[listStyle]"
      scroll-y
      :scroll-top="Number(scrollTop)"
      :lower-threshold="Number(lowerThreshold)"
      :upper-threshold="Number(upperThreshold)"
      :show-scrollbar="showScrollbar"
      :enable-back-to-top="enableBackToTop"
      :scroll-with-animation="scrollWithAnimation"
      @scroll="onScroll"
      @scrolltolower="scrolltolower"
      @scrolltoupper="scrolltoupper"
   >
      <view>
         <slot />
      </view>
   </scroll-view>
   <!-- #endif -->
</template>

<script>
   import props from './props.js';
   // #ifdef APP-NVUE
   const dom = uni.requireNativePlugin('dom')
   // #endif
   /**
    * List åˆ—表
    * @description è¯¥ç»„件为高性能列表组件
    * @tutorial https://www.uviewui.com/components/list.html
    * @property {Boolean}         showScrollbar      æŽ§åˆ¶æ˜¯å¦å‡ºçŽ°æ»šåŠ¨æ¡ï¼Œä»…nvue有效 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String ï½œ Number}   lowerThreshold      è·åº•éƒ¨å¤šå°‘时触发scrolltolower事件 ï¼ˆé»˜è®¤ 50 ï¼‰
    * @property {String ï½œ Number}   upperThreshold      è·é¡¶éƒ¨å¤šå°‘时触发scrolltoupper事件，非nvue有效 ï¼ˆé»˜è®¤ 0 ï¼‰
    * @property {String ï½œ Number}   scrollTop         è®¾ç½®ç«–向滚动条位置（默认 0 ï¼‰
    * @property {String ï½œ Number}   offsetAccuracy      æŽ§åˆ¶ onscroll äº‹ä»¶è§¦å‘的频率，仅nvue有效（默认 10 ï¼‰
    * @property {Boolean}         enableFlex         å¯ç”¨ flexbox å¸ƒå±€ã€‚开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点，仅微信小程序有效（默认 false ï¼‰
    * @property {Boolean}         pagingEnabled      æ˜¯å¦æŒ‰åˆ†é¡µæ¨¡å¼æ˜¾ç¤ºList，（默认 false ï¼‰
    * @property {Boolean}         scrollable         æ˜¯å¦å…è®¸List滚动（默认 true ï¼‰
    * @property {String}         scrollIntoView      å€¼åº”为某子元素id（id不能以数字开头）
    * @property {Boolean}         scrollWithAnimation   åœ¨è®¾ç½®æ»šåŠ¨æ¡ä½ç½®æ—¶ä½¿ç”¨åŠ¨ç”»è¿‡æ¸¡ ï¼ˆé»˜è®¤ false ï¼‰
    * @property {Boolean}         enableBackToTop      iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效 ï¼ˆé»˜è®¤ false ï¼‰
    * @property {String ï½œ Number}   height            åˆ—表的高度 ï¼ˆé»˜è®¤ 0 ï¼‰
    * @property {String ï½œ Number}   width            åˆ—表宽度 ï¼ˆé»˜è®¤ 0 ï¼‰
    * @property {String ï½œ Number}   preLoadScreen      åˆ—表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度  ï¼ˆé»˜è®¤ 1 ï¼‰
    * @property {Object}         customStyle         å®šä¹‰éœ€è¦ç”¨åˆ°çš„外部样式
    *
    * @example <u-list @scrolltolower="scrolltolower"></u-list>
    */
   export default {
      name: 'u-list',
      mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
      watch: {
         scrollIntoView(n) {
            this.scrollIntoViewById(n)
         }
      },
      data() {
         return {
            // è®°å½•å†…部滚动的距离
            innerScrollTop: 0,
            // vue下，scroll-view在上拉加载时的偏移值
            offset: 0,
            sys: uni.$u.sys()
         }
      },
      computed: {
         listStyle() {
            const style = {},
               addUnit = uni.$u.addUnit
            if (this.width != 0) style.width = addUnit(this.width)
            if (this.height != 0) style.height = addUnit(this.height)
            // å¦‚果没有定义列表高度，则默认使用屏幕高度
            if (!style.height) style.height = addUnit(this.sys.windowHeight, 'px')
            return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
         }
      },
      provide() {
         return {
            uList: this
         }
      },
      created() {
         this.refs = []
         this.children = []
         this.anchors = []
      },
      mounted() {},
      methods: {
         updateOffsetFromChild(top) {
            this.offset = top
         },
         onScroll(e) {
            let scrollTop = 0
            // #ifdef APP-NVUE
            scrollTop = e.contentOffset.y
            // #endif
            // #ifndef APP-NVUE
            scrollTop = e.detail.scrollTop
            // #endif
            this.innerScrollTop = scrollTop
            this.$emit('scroll', Math.abs(scrollTop))
         },
         scrollIntoViewById(id) {
            // #ifdef APP-NVUE
            // æ ¹æ®id参数，找到所有u-list-item中匹配的节点，再通过dom模块滚动到对应的位置
            const item = this.refs.find(item => item.$refs[id] ? true : false)
            dom.scrollToElement(item.$refs[id], {
               // æ˜¯å¦éœ€è¦æ»šåŠ¨åŠ¨ç”»
               animated: this.scrollWithAnimation
            })
            // #endif
         },
         // æ»šåŠ¨åˆ°åº•éƒ¨è§¦å‘事件
         scrolltolower(e) {
            uni.$u.sleep(30).then(() => {
               this.$emit('scrolltolower')
            })
         },
         // #ifndef APP-NVUE
         // æ»šåŠ¨åˆ°åº•éƒ¨æ—¶è§¦å‘，非nvue有效
         scrolltoupper(e) {
            uni.$u.sleep(30).then(() => {
               this.$emit('scrolltoupper')
               // è¿™ä¸€å¥å¾ˆé‡è¦ï¼Œèƒ½ç»å¯¹ä¿è¯åœ¨æ€§åŠŸèƒ½éšœç¢çš„webview，滚动条到顶时，取消偏移值，让页面置顶
               this.offset = 0
            })
         }
         // #endif
      },
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-list {
      @include flex(column);

   }
</style>