uview-plus 3.4.69 → 3.4.71

package/changelog.md

@@ -1,3 +1,13 @@
+## 3.4.71（2025-08-05）
+feat: 新增virtual-list虚拟列表组件
+
+feat: 新增pull-refresh下拉刷新结合虚拟列表使用
+
+## 3.4.70（2025-08-05）
+fix: 修复qrcode组件长按事件传入错误cid导致的报错
+
+fix: 修复index-list组件key为undefined导致的索引报错消失
+
 ## 3.4.69（2025-08-04）
 feat: pull-refresh下拉刷新新增上拉加载特性
 

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

@@ -87,7 +87,7 @@
 					width: addUnit(indicatorHeight)
 				}"
 			>
-				<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex].key || uIndexList[activeIndex] }}</text>
+				<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex]?.key || uIndexList[activeIndex] }}</text>
 			</view>
 		</u-transition>
 	</view>

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-qrcode/u-qrcode.vue

@@ -296,7 +296,7 @@ export default {
                 // #endif
 
                 // #ifndef MP-TOUTIAO || H5 || APP-PLUS
-                const canvas = await this.getNode(this.cId,true);
+                const canvas = await this.getNode(this.cid,true);
                 uni.canvasToTempFilePath(
                     {
                         canvas,

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,186 @@
+<template>
+  <view class="u-virtual-list" :style="{ height: addUnit(height) }">
+    <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
+      }
+      return Math.ceil(this.containerHeight / this.itemHeight)
+    },
+    // 可视项数量
+    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
+    }
+  },
+  watch: {
+    listData: {
+      handler() {
+        this.updateVisibleItems()
+      },
+      immediate: true
+    },
+    scrollTop: {
+      handler(newVal) {
+        this.updateVisibleItems()
+      }
+    }
+  },
+  mounted() {
+    this.measureContainerHeight()
+  },
+  methods: {
+    addUnit,
+    
+    // 测量容器高度
+    measureContainerHeight() {
+      const height = this.height
+      if (typeof height === 'number') {
+        this.containerHeight = height
+        return
+      }
+      
+      if (typeof height === 'string') {
+        if (height.includes('px')) {
+          this.containerHeight = parseInt(height)
+        } else if (height.includes('%')) {
+          // 对于百分比高度，使用默认值或根据父容器计算
+          this.containerHeight = 500
+        } else {
+          const num = parseInt(height)
+          this.containerHeight = isNaN(num) ? 500 : num
+        }
+      } else {
+        this.containerHeight = 500
+      }
+    },
+    
+    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('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>

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。",
-  "version": "3.4.69",
+  "version": "3.4.71",
   "description": "零云®uview-plus已兼容vue3，全面的组件和便捷的工具会让您信手拈来，如鱼得水。",
   "keywords": [
     "uview",