feat: 完成至扫码

曹睿

2025-04-22 2fa9c764993b4a7ad51754d0e8587990f96f1529

 src/components/z-paging-swiper-item/z-paging-swiper-item.vue

@@ -6,10 +6,21 @@
<!-- 滑动切换选项卡swiper-item，此组件支持easycom规范，可以在项目中直接引用 -->
<template>
   <view class="zp-swiper-item-container">
      <z-paging ref="paging" :fixed="false" 
         :auto="false" :useVirtualList="useVirtualList" :useInnerList="useInnerList" :cellKeyName="cellKeyName" :innerListStyle="innerListStyle" 
         :preloadPage="preloadPage" :cellHeightMode="cellHeightMode" :virtualScrollFps="virtualScrollFps" :virtualListCol="virtualListCol"
         @query="_queryList" @listChange="_updateList">
    <z-paging
      ref="paging"
      :fixed="false"
      :auto="false"
      :useVirtualList="useVirtualList"
      :useInnerList="useInnerList"
      :cellKeyName="cellKeyName"
      :innerListStyle="innerListStyle"
      :preloadPage="preloadPage"
      :cellHeightMode="cellHeightMode"
      :virtualScrollFps="virtualScrollFps"
      :virtualListCol="virtualListCol"
      @query="_queryList"
      @listChange="_updateList"
    >
         <slot />
         <template #header>
            <slot name="header"/>
@@ -25,7 +36,7 @@
</template>

<script>
   import zPaging from '../z-paging/z-paging'
import zPaging from "../z-paging/z-paging";
   /**
    * z-paging-swiper-item 组件
    * @description swiper+list极简写法中使用到，实际上就是对普通的swiper+list中swiper-item的包装封装，用以简化写法，但个性化配置局限较多
@@ -46,68 +57,68 @@
   export default {
      name: "z-paging-swiper-item",
      components: { zPaging },
      data() {
         return {
            firstLoaded: false
         }
      },
      props: {
         // 当前组件的index，也就是当前组件是swiper中的第几个
         tabIndex: {
            type: Number,
            default: function() {
               return 0
            }
        return 0;
      },
         },
         // 当前swiper切换到第几个index
         currentIndex: {
            type: Number,
            default: function() {
               return 0
            }
        return 0;
      },
         },
         // 是否使用虚拟列表，默认为否
         useVirtualList: {
            type: Boolean,
            default: false
      default: false,
         },
         // 是否在z-paging内部循环渲染列表(内置列表)，默认为否。若use-virtual-list为true，则此项恒为true
         useInnerList: {
            type: Boolean,
            default: false
      default: false,
         },
         // 内置列表cell的key名称，仅nvue有效，在nvue中开启use-inner-list时必须填此项
         cellKeyName: {
            type: String,
            default: ''
      default: "",
         },
         // innerList样式
         innerListStyle: {
            type: Object,
            default: function() {
               return {};
            }
      },
         },
         // 预加载的列表可视范围(列表高度)页数，默认为12，即预加载当前页及上下各12页的cell。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题
         preloadPage: {
            type: [Number, String],
            default: 12
      default: 12,
         },
         // 虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。可选值【dynamic】，即代表高度是动态非固定的，【dynamic】性能低于【fixed】。
         cellHeightMode: {
            type: String,
            default: 'fixed'
      default: "fixed",
         },
         // 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2
         virtualListCol: {
            type: [Number, String],
            default: 1
      default: 1,
         },
         // 虚拟列表scroll取样帧率，默认为60，过高可能出现卡顿等问题
         virtualScrollFps: {
            type: [Number, String],
            default: 60
      default: 60,
         },
  },
  data() {
    return {
      firstLoaded: false,
    };
      },
      watch: {
         currentIndex: {
@@ -123,12 +134,12 @@
                        setTimeout(() => {
                           this.$refs.paging.reload().catch(() => {});
                        }, delay);
                     })
            });
                  }
               }
            },
            immediate: true
         }
      immediate: true,
    },
      },
      methods: {
         reload(data) {
@@ -139,13 +150,13 @@
            return this.$refs.paging.complete(data);
         },
         _queryList(pageNo, pageSize, from) {
            this.$emit('query', pageNo, pageSize, from);
      this.$emit("query", pageNo, pageSize, from);
         },
         _updateList(list) {
            this.$emit('updateList', list);
         }
      }
   }
      this.$emit("updateList", list);
    },
  },
};
</script>

<style scoped>