uview-plus 3.4.70 → 3.4.72

package/changelog.md

@@ -1,3 +1,13 @@
+## 3.4.72（2025-08-05）
+improvment: 优化virtual-list虚拟列表样式
+
+feat: 新增virtual-list虚拟列表演示
+
+## 3.4.71（2025-08-05）
+feat: 新增virtual-list虚拟列表组件
+
+feat: 新增pull-refresh下拉刷新结合虚拟列表使用
+
 ## 3.4.70（2025-08-05）
 fix: 修复qrcode组件长按事件传入错误cid导致的报错
 

package/components/u-pull-refresh/u-pull-refresh.vue

@@ -207,6 +207,10 @@ export default {
         } else {
           this.refreshStatus = 'pull'
         }
+
+        // 阻止默认滚动行为，防止触发页面级滚动
+        e.preventDefault()
+        e.stopPropagation()
       }
     },
     

package/components/u-refresh-virtual-list/u-refresh-virtual-list.vue

@@ -0,0 +1,85 @@
+<template>
+  <u-pull-refresh
+    :refreshing="refreshing"
+    :threshold="50"
+    @refresh="handleRefresh"
+  >
+    <u-virtual-list
+      ref="virtualList"
+      :list-data="listData"
+      :item-height="itemHeight"
+      :height="height"
+      :buffer="buffer"
+      :key-field="keyField"
+      :scroll-top="scrollTop"
+      @scroll="handleScroll"
+    >
+      <template #default="{ item, index }">
+        <slot :item="item" :index="index"></slot>
+      </template>
+    </u-virtual-list>
+  </u-pull-refresh>
+</template>
+
+<script>
+
+export default {
+  name: 'u-refresh-virtual-list',
+  props: {
+    // 数据源
+    listData: {
+      type: Array,
+      default: () => []
+    },
+    // 每项高度（固定高度模式）
+    itemHeight: {
+      type: Number,
+      default: 50
+    },
+    // 容器高度
+    height: {
+      type: [String, Number],
+      default: '100%'
+    },
+    // 缓冲区项数
+    buffer: {
+      type: Number,
+      default: 4
+    },
+    // 索引键名
+    keyField: {
+      type: String,
+      default: 'id'
+    }
+  },
+  data() {
+    return {
+      refreshing: false,
+      scrollTop: 0
+    }
+  },
+  methods: {
+    handleRefresh() {
+      this.refreshing = true
+      this.$emit('refresh')
+    },
+    
+    handleScroll(scrollTop) {
+      this.scrollTop = scrollTop
+      this.$emit('scroll', scrollTop)
+    },
+    
+    finishRefresh() {
+      this.refreshing = false
+    },
+    
+    scrollTo(top) {
+      this.scrollTop = top
+    },
+    
+    scrollToTop() {
+      this.scrollTo(0)
+    }
+  }
+}
+</script>

package/components/u-virtual-list/u-virtual-list.vue

@@ -0,0 +1,253 @@
+<template>
+  <view class="u-virtual-list" :style="{ height: addUnit(height) }" ref="container">
+    <scroll-view
+      class="virtual-scroll-container"
+      :scroll-y="true"
+      :scroll-top="scrollTop"
+      :style="{ height: '100%' }"
+      @scroll="handleScroll"
+    >
+    <!-- @touchmove.stop.prevent="handleTouchMove" -->
+      <view class="scroll-content">
+        <!-- 顶部占位 -->
+        <view :style="{ height: topPlaceholderHeight + 'px' }"></view>
+        
+        <!-- 可见项 -->
+        <view 
+          v-for="item in visibleItems" 
+          :key="getItemKey(item)"
+          class="list-item"
+          :style="{ height: itemHeight + 'px' }"
+        >
+          <slot :item="item" :index="item._virtualIndex"></slot>
+        </view>
+        
+        <!-- 底部占位 -->
+        <view :style="{ height: bottomPlaceholderHeight + 'px' }"></view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { addUnit } from '../../libs/function/index.js'
+
+export default {
+  name: 'u-virtual-list',
+  props: {
+    // 数据源
+    listData: {
+      type: Array,
+      default: () => []
+    },
+    // 每项高度（固定高度模式）
+    itemHeight: {
+      type: Number,
+      default: 50
+    },
+    // 容器高度
+    height: {
+      type: [String, Number],
+      default: '100%'
+    },
+    // 缓冲区项数
+    buffer: {
+      type: Number,
+      default: 4
+    },
+    // 索引键名
+    keyField: {
+      type: String,
+      default: 'id'
+    },
+    // 当前滚动位置
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      // 起始索引
+      startIndex: 0,
+      // 容器实际高度
+      containerHeight: 0
+    }
+  },
+  computed: {
+    // 可视区域显示的项数（根据容器实际高度自动计算）
+    remain() {
+      if (this.containerHeight <= 0) {
+        // 默认值，防止除以0
+        return Math.ceil(500 / this.itemHeight) || 10
+      }
+      const calculated = Math.ceil(this.containerHeight / this.itemHeight)
+      // 确保至少显示一些项
+      return Math.max(1, calculated)
+    },
+    // 可视项数量
+    visibleCount() {
+      return this.remain + this.buffer
+    },
+    // 可视项
+    visibleItems() {
+      const start = Math.max(0, this.startIndex - Math.floor(this.buffer / 2))
+      const end = Math.min(this.listData.length, start + this.visibleCount)
+      
+      return this.listData.slice(start, end).map((item, index) => {
+        return {
+          ...item,
+          _virtualIndex: start + index
+        }
+      })
+    },
+    // 顶部占位高度
+    topPlaceholderHeight() {
+      const start = Math.max(0, this.startIndex - Math.floor(this.buffer / 2))
+      return start * this.itemHeight
+    },
+    // 底部占位高度
+    bottomPlaceholderHeight() {
+      const start = Math.max(0, this.startIndex - Math.floor(this.buffer / 2))
+      const end = Math.min(this.listData.length, start + this.visibleCount)
+      return (this.listData.length - end) * this.itemHeight
+    }
+  },
+  emits: ['update:scrollTop', 'scroll'],
+  watch: {
+    listData: {
+      handler() {
+        this.updateVisibleItems()
+      },
+      immediate: true
+    },
+    scrollTop: {
+      handler(newVal) {
+        this.updateVisibleItems()
+      }
+    }
+  },
+  mounted() {
+    this.measureContainerHeight()
+  },
+  methods: {
+    addUnit,
+    
+    // 测量容器高度
+    measureContainerHeight() {
+      // 使用 uni.createSelectorQuery 获取实际高度
+      this.$nextTick(() => {
+        // #ifdef H5
+        if (this.$refs.container) {
+          const element = this.$refs.container.$el || this.$refs.container
+          this.containerHeight = element.offsetHeight || 500
+        }
+        // #endif
+        
+        // #ifndef H5
+        const query = uni.createSelectorQuery().in(this)
+        query.select('.u-virtual-list').boundingClientRect(rect => {
+          if (rect) {
+            this.containerHeight = rect.height || 500
+          } else {
+            // 如果无法获取实际高度，使用默认计算
+            this.containerHeight = this.calculateDefaultHeight()
+          }
+        }).exec()
+        // #endif
+      })
+    },
+    
+    // 计算默认高度
+    calculateDefaultHeight() {
+      const height = this.height
+      if (typeof height === 'number') {
+        return height
+      }
+      
+      if (typeof height === 'string') {
+        if (height.includes('px')) {
+          return parseInt(height) || 500
+        } else if (height.includes('vh')) {
+          // 处理视口高度单位
+          const vh = parseInt(height)
+          return isNaN(vh) ? 500 : (vh / 100) * this.getViewportHeight()
+        } else if (height.includes('%')) {
+          // 百分比高度，使用默认值
+          return 500
+        } else {
+          const num = parseInt(height)
+          return isNaN(num) ? 500 : num
+        }
+      }
+      
+      return 500
+    },
+    
+    // 获取视口高度
+    getViewportHeight() {
+      // #ifdef H5
+      return window.innerHeight
+      // #endif
+      
+      // #ifndef H5
+      try {
+        const res = uni.getSystemInfoSync()
+        return res.windowHeight
+      } catch (e) {
+        return 600 // 默认值
+      }
+      // #endif
+    },
+    
+    getItemKey(item) {
+      return item[this.keyField] !== undefined ? item[this.keyField] : item._virtualIndex
+    },
+    
+    // 更新可视项
+    updateVisibleItems() {
+      const index = Math.floor(this.scrollTop / this.itemHeight)
+      this.startIndex = Math.max(0, index)
+    },
+    
+    // 处理滚动
+    handleScroll(e) {
+      const scrollTop = e.detail.scrollTop
+      this.$emit('update:scrollTop', scrollTop)
+      this.$emit('scroll', scrollTop)
+    },
+    
+    // 处理触摸移动，阻止事件冒泡
+    handleTouchMove(e) {
+      // 阻止触摸移动事件冒泡到父级，防止触发页面滚动
+      e.stopPropagation()
+    },
+    
+    // 获取可见项范围
+    getVisibleRange() {
+      const start = Math.max(0, this.startIndex - Math.floor(this.buffer / 2))
+      const end = Math.min(this.listData.length, start + this.visibleCount)
+      return { start, end }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.u-virtual-list {
+  position: relative;
+  overflow: hidden;
+}
+
+.virtual-scroll-container {
+  height: 100%;
+}
+
+.scroll-content {
+  position: relative;
+}
+
+.list-item {
+  will-change: transform;
+}
+</style>

package/package.json

@@ -2,15 +2,13 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。",
-  "version": "3.4.70",
-  "description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水。",
+  "version": "3.4.72",
+  "description": "零云®uview-plus已兼容vue3，100+全面的组件和便捷的工具会让您信手拈来，如鱼得水。",
   "keywords": [
     "uview",
     "uview-plus",
     "ui",
-    "ui",
-    "uni-app",
-    "uni-app",
+    "echarts",
     "ui",
     "可视化设计"
 ],