tencent.jquery.pix.component 1.0.91-beta1 → 1.0.92

package/change.md

@@ -1,5 +1,9 @@
 # 更新日志
 
+### 1.0.91-beta2
+
+- list组件优化滚动事件处理和DOM引用缓存，提升性能
+
 ### 1.0.91-beta1
 
 - 瀑布流组件V2版本的滑动流畅度升级

package/components/list/list.js

@@ -55,13 +55,25 @@ List.prototype.init = function () {
         </div>
       `);
 
-    // 绑定滚动事件（节流处理）
+    // 【优化】缓存 DOM 引用，避免每次滚动都执行 jQuery 查询
+    this.$container = $container;
+    this.$scrollWrapper = $container.find('.virtual-list-scroll');
+    this.$viewport = $container.find('.virtual-list-viewport');
+    // 【优化】缓存容器高度，固定高度容器无需每次重新计算（避免触发 reflow）
+    this._viewportHeight = $container.height();
+
+    // 【优化】绑定滚动事件（真正的 rAF 节流：一帧内只执行一次 updateVisibleItems）
+    this._rafPending = false;
     $container.off().on('scroll', function () {
         self.scrollTop = $(this).scrollTop();
 
-        window.requestAnimationFrame(() => {
-            self.updateVisibleItems();
-        });
+        if (!self._rafPending) {
+            self._rafPending = true;
+            window.requestAnimationFrame(() => {
+                self._rafPending = false;
+                self.updateVisibleItems();
+            });
+        }
 
         if (options.onscroll && options.onscroll.constructor === Function) {
             options.onscroll(this, self.scrollTop);
@@ -78,12 +90,12 @@ List.prototype.init = function () {
 List.prototype.updateVisibleItems = function (force = false) {
     const self = this;
     const options = this.options;
-    const $container = $(options.container);
 
     let startIndex = 0;   // 起始索引
     let endIndex = 0;     // 结束索引
 
-    const viewportHeight = $container.height();
+    // 【优化】使用缓存的容器高度，避免每次滚动触发布局计算
+    const viewportHeight = this._viewportHeight;
     // 计算当前可见项范围（含缓冲区）
     startIndex = Math.max(0, Math.floor(self.scrollTop / options.itemHeight) - options.buffer);
     endIndex = Math.min(
@@ -91,8 +103,8 @@ List.prototype.updateVisibleItems = function (force = false) {
         Math.ceil((self.scrollTop + viewportHeight) / options.itemHeight) + options.buffer
     );
 
-    // 生成当前可见项的 DOM
-    const $viewport = $container.find('.virtual-list-viewport');
+    // 【优化】使用缓存的 $viewport 引用
+    const $viewport = this.$viewport;
 
     /**方案1 */
     const newActiveNodes = new Map();
@@ -128,7 +140,8 @@ List.prototype.updateVisibleItems = function (force = false) {
                 );
                 $viewport.append($node);
             } else {
-                $node = $(this.nodePool.pop())
+                // 【优化】nodePool 中已经是 jQuery 对象，无需再次 $() 包装
+                $node = this.nodePool.pop();
                 $node.css('transform', `translateY(${top}px)`).attr('data-index', i);
                 self.updateRenderUI($node, options.data[i], i);
             }
@@ -142,67 +155,15 @@ List.prototype.updateVisibleItems = function (force = false) {
         this.nodePool.push($node);
     });
     this.activeNodes = newActiveNodes;
-
-    /**方案2 */
-    // const $existingChildren = $viewport.children(); // 获取现有 DOM 元素集合
-    // const usedIndices = new Set(); // 记录当前需要保留的索引
-
-    // // 步骤 1：更新或保留现有元素
-    // if ($existingChildren.length > 0) {
-    //     for (let j = 0; j < $existingChildren.length; j++) {
-    //         const $el = $($existingChildren[j]);
-    //         const oldIndex = parseInt($el.data('data-index'));
-    //         if (oldIndex >= startIndex && oldIndex <= endIndex) {
-    //             // 仍在可视范围内 → 更新位置和内容
-    //             const newTop = oldIndex * options.itemHeight;
-    //             $el.css('top', `${newTop}px`);
-    //             usedIndices.add(oldIndex);
-    //         } else {
-    //             // 移出可视范围 → 从 DOM 中删除
-    //             $el.remove();
-    //         }
-    //     }
-    // }
-
-    // // 步骤 2：补充新增元素
-    // for (let i = startIndex; i <= endIndex; i++) {
-    //     if (!usedIndices.has(i)) {
-    //         // 需要新增的元素
-    //         const top = i * options.itemHeight;
-    //         const $element = $(
-    //             `<div class="virtual-item" 
-    //           style="position: absolute; top: ${top}px; height: ${options.itemHeight}px"
-    //           data-index="${i}">
-    //        ${options.renderItem(options.data[i], i)}
-    //      </div>`
-    //         );
-    //         // 插入到正确位置（按索引顺序）
-    //         let inserted = false;
-    //         for (let j = 0; j < $existingChildren.length; j++) {
-    //             const $el = $($existingChildren[j]);
-    //             const currentIndex = parseInt($el.data('data-index'));
-    //             if (currentIndex > i) {
-    //                 $element.insertBefore($el);
-    //                 inserted = true;
-    //                 break;
-    //             }
-    //         }
-
-    //         if (!inserted) {
-    //             $viewport.append($element);
-    //         }
-    //     }
-    // }
-
 }
 
 // 外部更新数据方法
 List.prototype.updateData = function (newData) {
     const options = this.options;
     options.data = newData;
-    const totalHeight = options.data.length * options.itemHeight
-    // 重新计算高度
-    $(this.options.container).children().height(`${totalHeight}px`);
+    const totalHeight = options.data.length * options.itemHeight;
+    // 【优化】使用缓存的 DOM 引用，避免重新创建 jQuery 对象
+    this.$scrollWrapper.height(`${totalHeight}px`);
     this.updateVisibleItems(true); // 强制更新渲染
 };
 

package/components/swiper/swiper.js

@@ -0,0 +1,706 @@
+import "./swiper.scss";
+import { windowEnv, getEnv } from "../config";
+import { addResizeFunc, nextAnimationFrame, removeResizeFunc } from "../utils/utils";
+
+let $ = null;
+
+/**
+ * Swiper 平滑分页滑动组件
+ * @constructor
+ * @param {object} options 选项
+ * @param {string} options.container 容器元素的jquery选择器
+ * @param {string} [options.direction='horizontal'] 滑动方向，'horizontal' | 'vertical'
+ * @param {number} [options.initialSlide=0] 初始页码索引
+ * @param {number} [options.speed=300] 切换动画时长(ms)
+ * @param {boolean} [options.loop=false] 是否开启循环滑动
+ * @param {boolean} [options.autoplay=false] 是否自动轮播
+ * @param {number} [options.autoplayDelay=3000] 自动轮播间隔(ms)
+ * @param {boolean} [options.pagination=true] 是否显示分页指示器
+ * @param {number} [options.threshold=0.2] 滑动翻页阈值比例（拖动距离/容器尺寸）
+ * @param {boolean} [options.autoResize=true] 是否自动适应容器尺寸变化
+ * @param {function} [options.renderSlide] 自定义slide渲染回调，参数(slideData, index)，返回HTML字符串、DOM元素或jq对象
+ * @param {Array} [options.slides=[]] slide数据数组，支持：数据对象数组(配合renderSlide使用)、HTML字符串数组、jQuery/DOM对象数组
+ * @param {boolean} [options.useContainerChildren=false] 是否使用容器内已有的子元素作为slides（静态HTML模式）
+ * @param {function} [options.onSlideChange] 翻页后回调，参数(currentIndex, prevIndex)
+ * @param {function} [options.onSlideChangeStart] 翻页动画开始时回调，参数(currentIndex, prevIndex)
+ * @param {function} [options.onClick] 点击slide回调，参数($slide, slideData, index)
+ */
+export function Swiper(options = {}) {
+    $ = getEnv().$;
+
+    this.options = Object.assign({
+        direction: 'horizontal',
+        initialSlide: 0,
+        speed: 300,
+        loop: false,
+        autoplay: false,
+        autoplayDelay: 3000,
+        pagination: true,
+        threshold: 0.2,
+        autoResize: true,
+        slides: [],
+        useContainerChildren: false,
+        renderSlide: null,
+        onSlideChange: null,
+        onSlideChangeStart: null,
+        onClick: null,
+    }, options);
+
+    this.index = this.options.initialSlide;
+    this.isAnimating = false;
+    this.autoplayTimer = null;
+    this.$container = null;
+    this.$wrapper = null;
+    this.$pagination = null;
+    this.slideSize = 0; // width(horizontal) or height(vertical)
+    this.totalSlides = 0;
+
+    this.init();
+}
+
+/**
+ * 初始化组件
+ */
+Swiper.prototype.init = function () {
+    this.$container = $(this.options.container);
+    this.$container.css('touch-action', 'none');
+
+    // 静态DOM模式：使用wrap方式在已有子元素上层包裹结构
+    if (this.options.useContainerChildren && this.options.slides.length === 0) {
+        this._initFromContainerChildren();
+    } else {
+        this.totalSlides = this.options.slides.length;
+        this.createHtml();
+    }
+
+    this.updateSize();
+    this.bindEvent();
+
+    if (this.options.autoResize) {
+        addResizeFunc({
+            obj: this,
+            func: this.updateSize,
+        });
+    }
+
+    if (this.options.autoplay && this.totalSlides > 1) {
+        this.startAutoplay();
+    }
+};
+
+/**
+ * 静态DOM模式初始化：通过wrap在已有子元素上层包裹swiper结构
+ * 不使用empty，保留原有DOM节点不被销毁
+ * @private
+ */
+Swiper.prototype._initFromContainerChildren = function () {
+    const dir = this.options.direction;
+
+    // 确保每个子元素都有 swiper-slide 类
+    this.$container.children().each(function (index,dom) {
+        console.log(dom)
+        const $dom = $(dom);
+        if (!$dom.hasClass('swiper-slide')) {
+            $dom.addClass('swiper-slide');
+        }
+    });
+
+    // 统计slide数量
+    this.totalSlides = this.$container.children().length;
+
+    // 用 wrapAll 思路：创建 wrapper 和 container，将子元素整体包裹
+    // 1. 创建 wrapper，把所有子元素移入其中
+    const $wrapper = this.$wrapper = $(`<div class="swiper-wrapper ${dir}"></div>`);
+
+    // 将容器的子元素逐个 append 到 wrapper（append会自动从原位置移走）
+    const childDoms = [];
+    this.$container.children().each(function (index, dom) {
+        childDoms.push(dom);
+    });
+    for (let i = 0; i < childDoms.length; i++) {
+        $wrapper.append($(childDoms[i]));
+    }
+
+    // 2. 创建 swiper-container 包裹 wrapper
+    const $swiperContainer = $('<div class="swiper-container"></div>');
+    $swiperContainer.append($wrapper);
+
+    // 3. 创建分页器
+    if (this.options.pagination && this.totalSlides > 1) {
+        const $pagination = this.$pagination = $(`<div class="swiper-pagination ${dir}"></div>`);
+        for (let i = 0; i < this.totalSlides; i++) {
+            $pagination.append(`<div class="swiper-pagination-bullet ${i === this.index ? 'active' : ''}"></div>`);
+        }
+        $swiperContainer.append($pagination);
+    }
+
+    // 4. 将 swiper-container 放入原容器
+    this.$container.append($swiperContainer);
+
+    // loop模式：在首尾添加克隆占位
+    if (this.options.loop && this.totalSlides > 1) {
+        const $firstClone = $(childDoms[this.totalSlides - 1].outerHTML);
+        $firstClone.attr('data-swiper-clone', 'true');
+        $wrapper.prepend($firstClone);
+
+        const $lastClone = $(childDoms[0].outerHTML);
+        $lastClone.attr('data-swiper-clone', 'true');
+        $wrapper.append($lastClone);
+    }
+};
+
+/**
+ * 创建DOM结构
+ */
+Swiper.prototype.createHtml = function () {
+    const dir = this.options.direction;
+    this.$container.empty();
+
+    // 创建swiper容器
+    const $swiperContainer = $('<div class="swiper-container"></div>');
+
+    // 创建wrapper
+    const $wrapper = this.$wrapper = $(`<div class="swiper-wrapper ${dir}"></div>`);
+
+    const slides = this.options.slides;
+    const len = slides.length;
+
+    // loop模式：首尾各加一个占位
+    if (this.options.loop && len > 1) {
+        $wrapper.append(this._createSlide(slides[len - 1], len - 1, true));
+    }
+
+    for (let i = 0; i < len; i++) {
+        $wrapper.append(this._createSlide(slides[i], i, false));
+    }
+
+    if (this.options.loop && len > 1) {
+        $wrapper.append(this._createSlide(slides[0], 0, true));
+    }
+
+    $swiperContainer.append($wrapper);
+
+    // 创建分页器
+    if (this.options.pagination && len > 1) {
+        const $pagination = this.$pagination = $(`<div class="swiper-pagination ${dir}"></div>`);
+        for (let i = 0; i < len; i++) {
+            $pagination.append(`<div class="swiper-pagination-bullet ${i === this.index ? 'active' : ''}"></div>`);
+        }
+        $swiperContainer.append($pagination);
+    }
+
+    this.$container.append($swiperContainer);
+};
+
+/**
+ * 创建单个slide
+ * 支持三种模式：
+ *   1. renderSlide回调模式：通过函数动态渲染，调用方灵活处理内容
+ *   2. 静态DOM模式：slides数组中传入jQuery对象/DOM元素，直接使用
+ *   3. 数据模式：slides数组中传入字符串或{html}/{url}对象，自动生成DOM
+ * @private
+ * @param {*} data slide数据项（可以是数据对象、HTML字符串、DOM元素、jQuery对象）
+ * @param {number} index 当前slide索引
+ * @param {boolean} isClone 是否为loop模式的克隆占位
+ */
+Swiper.prototype._createSlide = function (data, index, isClone) {
+    let $slide;
+
+    // 模式1: renderSlide回调 —— 调用方通过函数动态渲染内容
+    if (typeof this.options.renderSlide === 'function') {
+        const content = this.options.renderSlide(data, index);
+        $slide = this._wrapAsSlide(content);
+    }
+    // 模式2: data本身是DOM元素或jQuery对象 —— 直接作为slide使用
+    else if (this._isDomOrJq(data)) {
+        if (isClone) {
+            // clone模式需要复制节点
+            const dom = data.dom ? data.dom : (data.nodeType ? data : data[0]);
+            $slide = this._wrapAsSlide(dom.cloneNode(true));
+        } else {
+            $slide = this._wrapAsSlide(data);
+        }
+    }
+    // 模式3: 数据模式 —— 字符串或对象自动生成DOM
+    else if (typeof data === 'string') {
+        // HTML字符串：通过 _wrapAsSlide 处理，如果本身已有 swiper-slide 类则直接使用
+        $slide = this._wrapAsSlide(data);
+    } else {
+        let html = '';
+        if (data && data.html) {
+            html = data.html;
+        } else if (data && data.url) {
+            html = `<div style="width:100%;height:100%;background-image:url(${data.url});background-size:cover;background-position:center;"></div>`;
+        }
+        $slide = $(`<div class="swiper-slide">${html}</div>`);
+    }
+
+    if (isClone) {
+        $slide.attr('data-swiper-clone', 'true');
+    }
+
+    return $slide;
+};
+
+/**
+ * 将内容包装为标准的swiper-slide元素
+ * @private
+ * @param {string|HTMLElement|jQuery} content 内容
+ * @returns {jQuery} 包装后的$slide
+ */
+Swiper.prototype._wrapAsSlide = function (content) {
+    let $slide;
+
+    if (typeof content === 'string') {
+        // HTML字符串
+        $slide = $(content);
+    } else if (content && content.dom) {
+        // jQuery对象（jquery.pix风格，有.dom属性）
+        $slide = content;
+    } else if (content && content.nodeType) {
+        // 原生DOM元素
+        $slide = $(content);
+    } else {
+        $slide = $(content);
+    }
+
+    // 确保有swiper-slide类
+    if (!$slide.hasClass('swiper-slide')) {
+        const $wrap = $('<div class="swiper-slide"></div>');
+        $wrap.append($slide);
+        $slide = $wrap;
+    }
+
+    return $slide;
+};
+
+/**
+ * 判断data是否为DOM元素或jQuery对象
+ * @private
+ */
+Swiper.prototype._isDomOrJq = function (data) {
+    if (!data) return false;
+    // jquery.pix对象有.dom属性
+    if (data.dom) return true;
+    // 原生DOM节点
+    if (data.nodeType) return true;
+    // 标准jQuery对象（有length和jquery属性）
+    if (data.jquery && data.length) return true;
+    return false;
+};
+
+/**
+ * 更新尺寸相关计算
+ */
+Swiper.prototype.updateSize = function () {
+    const isHorizontal = this.options.direction === 'horizontal';
+    this.slideSize = isHorizontal ? this.$container.width() : this.$container.height();
+
+    // 设置每个slide的尺寸
+    this.$wrapper.find('.swiper-slide').each((index, dom) => {
+        const $s = $(dom);
+        if (isHorizontal) {
+            $s.width(this.slideSize);
+        } else {
+            $s.css('height', this.slideSize + 'px');
+        }
+    });
+
+    // 设置wrapper尺寸
+    const totalCount = this.options.loop && this.totalSlides > 1
+        ? this.totalSlides + 2
+        : this.totalSlides;
+
+    if (isHorizontal) {
+        this.$wrapper.width(this.slideSize * totalCount);
+    } else {
+        this.$wrapper.css('height', (this.slideSize * totalCount) + 'px');
+    }
+
+    // 设置初始位置
+    this._setTranslate(this._getTranslateByIndex(this.index), false);
+};
+
+/**
+ * 绑定交互事件
+ */
+Swiper.prototype.bindEvent = function () {
+    const self = this;
+    const $wrapper = this.$wrapper;
+    const isHorizontal = this.options.direction === 'horizontal';
+
+    let startPos = 0;      // 起始位置
+    let currentPos = 0;    // 当前位置(跟随move更新)
+    let originalTranslate = 0;
+    let isDown = false;
+    let startTime = 0;
+
+    const getPos = (e) => {
+        if (e.originalEvent) {
+            return isHorizontal ? e.originalEvent.clientX : e.originalEvent.clientY;
+        }
+        return isHorizontal ? e.clientX : e.clientY;
+    };
+
+    const pStart = (e, capture) => {
+        if (isDown || self.isAnimating) return;
+        if (self.totalSlides <= 1) return;
+
+        if (capture) capture();
+        self.pauseAutoplay();
+
+        startPos = getPos(e);
+        currentPos = startPos;
+        originalTranslate = self.currentTranslate;
+        startTime = Date.now();
+        isDown = true;
+
+        $wrapper.css('transition', 'none');
+    };
+
+    const pMove = (e) => {
+        if (!isDown) return;
+
+        const pos = getPos(e);
+        const diff = pos - currentPos;
+        let newTranslate = self.currentTranslate + diff;
+
+        // 非loop模式边界阻尼
+        if (!self.options.loop) {
+            const minTranslate = -(self.totalSlides - 1) * self.slideSize;
+            if (newTranslate > 0) {
+                newTranslate = newTranslate * 0.3; // 阻尼系数
+            } else if (newTranslate < minTranslate) {
+                newTranslate = minTranslate + (newTranslate - minTranslate) * 0.3;
+            }
+        }
+
+        self.currentTranslate = newTranslate;
+        self._applyTranslate(newTranslate);
+        currentPos = pos;
+    };
+
+    const pEnd = async (e, capture) => {
+        if (!isDown) return;
+        if (capture) capture();
+        isDown = false;
+
+        const totalMove = self.currentTranslate - originalTranslate;
+        const duration = Date.now() - startTime;
+        const velocity = Math.abs(totalMove) / duration; // px/ms
+
+        let newIndex = self.index;
+
+        // 判断是否需要翻页：滑动距离超过阈值 或 滑动速度足够快
+        if (Math.abs(totalMove) > self.slideSize * self.options.threshold || velocity > 0.5) {
+            if (totalMove < 0) {
+                newIndex = self.index + 1;
+            } else {
+                newIndex = self.index - 1;
+            }
+        }
+
+        // 边界处理
+        if (self.options.loop) {
+            // loop模式下先滑动到目标位置，transitionend后再处理循环
+            if (newIndex < 0) {
+                newIndex = self.totalSlides - 1;
+            } else if (newIndex >= self.totalSlides) {
+                newIndex = 0;
+            }
+        } else {
+            newIndex = Math.max(0, Math.min(newIndex, self.totalSlides - 1));
+        }
+
+        await self.slideTo(newIndex);
+
+        if (self.options.autoplay) {
+            self.startAutoplay();
+        }
+    };
+
+    $wrapper.off();
+
+    if (windowEnv === 'h5') {
+        $wrapper
+            .attr('draggable', 'false')
+            .on('pointerdown', function (e) {
+                pStart(e, () => {
+                    this.setPointerCapture(e.originalEvent.pointerId);
+                });
+            })
+            .on('pointermove', function (e) {
+                pMove(e);
+            })
+            .on('pointerup', async function (e) {
+                await pEnd(e, () => {
+                    this.releasePointerCapture(e.originalEvent.pointerId);
+                });
+            });
+    } else {
+        $wrapper
+            .attr('draggable', 'true')
+            .on('dragstart', (e) => {
+                pStart(e);
+            })
+            .on('drag', (e) => {
+                pMove(e);
+            })
+            .on('dragend', async (e) => {
+                await pEnd(e);
+            });
+    }
+
+    // 点击事件
+    let clickStartPos = 0;
+    $wrapper.on('click', function (e) {
+        if (!self.options.onClick) return;
+        // 防止拖动后触发click
+        if (windowEnv === 'h5' && Math.abs(getPos(e) - startPos) > 10) return;
+
+        const slideData = self.options.slides[self.index];
+        const $slide = self._getActiveSlide();
+        self.options.onClick($slide, slideData, self.index);
+    });
+};
+
+/**
+ * 滑动到指定页
+ * @param {number} index 目标页码 [0, totalSlides)
+ * @param {number} [speed] 动画时长(ms)，不传则使用options.speed
+ */
+Swiper.prototype.slideTo = async function (index, speed) {
+    if (index < 0 || index >= this.totalSlides) return;
+
+    const prevIndex = this.index;
+    const animSpeed = speed !== undefined ? speed : this.options.speed;
+
+    if (this.options.onSlideChangeStart && index !== prevIndex) {
+        this.options.onSlideChangeStart(index, prevIndex);
+    }
+
+    this.isAnimating = true;
+
+    // loop模式特殊处理：跨边界时需要先跳到占位位置再平滑
+    if (this.options.loop && this.totalSlides > 1) {
+        // 如果从最后一个向后滑 → 使用末尾占位(clone)再跳
+        if (prevIndex === this.totalSlides - 1 && index === 0) {
+            // 先平滑到末尾占位
+            const cloneTranslate = -(this.totalSlides + 1) * this.slideSize;
+            this._setTranslate(cloneTranslate, true, animSpeed);
+            await this._waitTransitionEnd(animSpeed);
+            // 瞬移到真实位置
+            this._setTranslate(this._getTranslateByIndex(0), false);
+            await nextAnimationFrame();
+        }
+        // 如果从第一个向前滑 → 使用首位占位(clone)再跳
+        else if (prevIndex === 0 && index === this.totalSlides - 1) {
+            const cloneTranslate = 0;
+            this._setTranslate(cloneTranslate, true, animSpeed);
+            await this._waitTransitionEnd(animSpeed);
+            // 瞬移到真实位置
+            this._setTranslate(this._getTranslateByIndex(this.totalSlides - 1), false);
+            await nextAnimationFrame();
+        }
+        // 普通滑动
+        else {
+            const targetTranslate = this._getTranslateByIndex(index);
+            this._setTranslate(targetTranslate, true, animSpeed);
+            await this._waitTransitionEnd(animSpeed);
+        }
+    } else {
+        const targetTranslate = this._getTranslateByIndex(index);
+        this._setTranslate(targetTranslate, true, animSpeed);
+        await this._waitTransitionEnd(animSpeed);
+    }
+
+    this.index = index;
+    this.isAnimating = false;
+
+    // 更新分页器
+    this._updatePagination(index);
+
+    if (this.options.onSlideChange && index !== prevIndex) {
+        this.options.onSlideChange(index, prevIndex);
+    }
+};
+
+/**
+ * 滑动到下一页
+ */
+Swiper.prototype.slideNext = function () {
+    if (this.isAnimating) return;
+    let nextIndex = this.index + 1;
+    if (this.options.loop) {
+        if (nextIndex >= this.totalSlides) nextIndex = 0;
+    } else {
+        if (nextIndex >= this.totalSlides) return;
+    }
+    this.pauseAutoplay();
+    this.slideTo(nextIndex);
+    if (this.options.autoplay) {
+        this.startAutoplay();
+    }
+};
+
+/**
+ * 滑动到上一页
+ */
+Swiper.prototype.slidePrev = function () {
+    if (this.isAnimating) return;
+    let prevIndex = this.index - 1;
+    if (this.options.loop) {
+        if (prevIndex < 0) prevIndex = this.totalSlides - 1;
+    } else {
+        if (prevIndex < 0) return;
+    }
+    this.pauseAutoplay();
+    this.slideTo(prevIndex);
+    if (this.options.autoplay) {
+        this.startAutoplay();
+    }
+};
+
+/**
+ * 获取当前页码
+ * @returns {number}
+ */
+Swiper.prototype.getActiveIndex = function () {
+    return this.index;
+};
+
+/**
+ * 获取slide总数
+ * @returns {number}
+ */
+Swiper.prototype.getSlideCount = function () {
+    return this.totalSlides;
+};
+
+/**
+ * 更新slides数据并重新渲染
+ * @param {Array} slides 新的slides数据数组
+ */
+Swiper.prototype.update = function (slides) {
+    this.pauseAutoplay();
+    this.options.slides = slides;
+    this.totalSlides = slides.length;
+    this.index = Math.min(this.index, this.totalSlides - 1);
+    this.index = Math.max(this.index, 0);
+    this.createHtml();
+    this.updateSize();
+    this.bindEvent();
+    if (this.options.autoplay && this.totalSlides > 1) {
+        this.startAutoplay();
+    }
+};
+
+/**
+ * 开始自动轮播
+ */
+Swiper.prototype.startAutoplay = function () {
+    if (this.autoplayTimer) return;
+    if (this.totalSlides <= 1) return;
+
+    this.autoplayTimer = setInterval(() => {
+        let next = this.index + 1;
+        if (this.options.loop) {
+            if (next >= this.totalSlides) next = 0;
+        } else {
+            if (next >= this.totalSlides) next = 0; // 回到开头
+        }
+        this.slideTo(next);
+    }, this.options.autoplayDelay);
+};
+
+/**
+ * 暂停自动轮播
+ */
+Swiper.prototype.pauseAutoplay = function () {
+    if (!this.autoplayTimer) return;
+    clearInterval(this.autoplayTimer);
+    this.autoplayTimer = null;
+};
+
+/**
+ * 销毁组件，清理事件和DOM
+ */
+Swiper.prototype.destroy = function () {
+    this.pauseAutoplay();
+    this.$wrapper.off();
+    this.$container.empty();
+    removeResizeFunc({
+        obj: this,
+        func: this.updateSize,
+    });
+};
+
+// ========== 内部方法 ==========
+
+/**
+ * 根据index计算translate值
+ * @private
+ */
+Swiper.prototype._getTranslateByIndex = function (index) {
+    const offset = this.options.loop && this.totalSlides > 1 ? 1 : 0;
+    return -(index + offset) * this.slideSize;
+};
+
+/**
+ * 设置translate并可选地开启transition
+ * @private
+ */
+Swiper.prototype._setTranslate = function (value, animate, speed) {
+    this.currentTranslate = value;
+    if (animate) {
+        const duration = speed || this.options.speed;
+        this.$wrapper.css('transition', `transform ${duration}ms ease-out`);
+    } else {
+        this.$wrapper.css('transition', 'none');
+    }
+    this._applyTranslate(value);
+};
+
+/**
+ * 应用translate到DOM
+ * @private
+ */
+Swiper.prototype._applyTranslate = function (value) {
+    const isHorizontal = this.options.direction === 'horizontal';
+    if (isHorizontal) {
+        this.$wrapper.css('transform', `translateX(${value}px)`);
+    } else {
+        this.$wrapper.css('transform', `translateY(${value}px)`);
+    }
+};
+
+/**
+ * 等待transition结束
+ * @private
+ */
+Swiper.prototype._waitTransitionEnd = function (speed) {
+    return new Promise(resolve => {
+        const duration = speed || this.options.speed;
+        // 使用setTimeout兜底，避免transitionend事件不触发的情况
+        setTimeout(resolve, duration + 50);
+    });
+};
+
+/**
+ * 更新分页器状态
+ * @private
+ */
+Swiper.prototype._updatePagination = function (index) {
+    if (!this.$pagination) return;
+    this.$pagination.children().removeClass('active');
+    this.$pagination.children().eq(index).addClass('active');
+};
+
+/**
+ * 获取当前活跃的slide元素
+ * @private
+ */
+Swiper.prototype._getActiveSlide = function () {
+    const offset = this.options.loop && this.totalSlides > 1 ? 1 : 0;
+    return this.$wrapper.children().eq(this.index + offset);
+};

package/components/swiper/swiper.scss

@@ -0,0 +1,72 @@
+.swiper-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-wrapper {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s ease-out;
+}
+
+.swiper-wrapper.vertical {
+  flex-direction: column;
+}
+
+.swiper-wrapper.horizontal {
+  flex-direction: row;
+}
+
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.swiper-pagination {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.swiper-pagination.horizontal {
+  bottom: 0.2rem;
+  left: 0;
+  width: 100%;
+  flex-direction: row;
+}
+
+.swiper-pagination.vertical {
+  right: 0.2rem;
+  top: 0;
+  height: 100%;
+  flex-direction: column;
+}
+
+.swiper-pagination-bullet {
+  width: 0.16rem;
+  height: 0.16rem;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.2);
+  transition: background 0.3s, transform 0.3s;
+}
+
+.swiper-pagination.horizontal .swiper-pagination-bullet {
+  margin: 0 0.08rem;
+}
+
+.swiper-pagination.vertical .swiper-pagination-bullet {
+  margin: 0.08rem 0;
+}
+
+.swiper-pagination-bullet.active {
+  background: rgba(0, 0, 0, 0.8);
+  transform: scale(1.3);
+}

package/index.js

@@ -1,6 +1,7 @@
 export { VideoPlayer } from './components/video/videoplayer';
 export { tips, showTips } from './components/tips/tipv2';
 export { Banner } from './components/banner/banner';
+export { Swiper } from './components/swiper/swiper';
 export { List } from './components/list/list';
 export { Waterfall } from './components/waterfall/waterfall';
 export { Waterfallv2 } from './components/waterfallv2/waterfallv2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tencent.jquery.pix.component",
-  "version": "1.0.91-beta1",
+  "version": "1.0.92",
   "description": "",
   "main": "index.js",
   "files": [