wedux-ui 0.5.0 → 0.6.1

package/miniprogram_dist/components/carousel/carousel.js

@@ -94,7 +94,8 @@ Component({
       this._slideSize = 0;
       this._autoplayTimer = null;
       this._loopResetTimer = null;
-      this._boundaryItemIndex = -1;
+      this._boundaryItemIndices = [];
+      this._boundaryPrepared = false;
 
       wx.nextTick(() => {
         this._measure();
@@ -119,7 +120,8 @@ Component({
     _onChildrenChange() {
       const items = this._getItems();
       const total = items.length;
-      this._internalIndex = Math.min(this._internalIndex || 0, Math.max(0, total - 1));
+      const maxIndex = Math.max(0, this._getPageCount(total) - 1);
+      this._internalIndex = Math.min(this._internalIndex || 0, maxIndex);
       this._rebuildDots();
       if (this._slideSize > 0) {
         this._updateChildSizes();
@@ -127,6 +129,14 @@ Component({
       }
     },
 
+    _getPageCount(total) {
+      const spv = Math.floor(this.data.slidesPerView);
+      if (this.data.effect === 'slide' && spv > 1) {
+        return Math.max(1, total - spv + 1);
+      }
+      return total;
+    },
+
     /* ── Measure ── */
     _measure() {
       const query = this.createSelectorQuery();
@@ -189,27 +199,22 @@ Component({
         this._updateChildSizes();
       }
 
+      const pageCount = this._getPageCount(total);
       let newIndex = index;
 
       if (this.data.loop) {
-        newIndex = ((index % total) + total) % total;
+        newIndex = ((index % pageCount) + pageCount) % pageCount;
       } else {
-        newIndex = Math.max(0, Math.min(index, total - 1));
+        newIndex = Math.max(0, Math.min(index, pageCount - 1));
       }
 
       const prev = this._internalIndex;
       this._internalIndex = newIndex;
 
       // slide + loop 边界过渡：无缝动画而非瞬移
-      if (
-        this.data.loop &&
-        this.data.effect === 'slide' &&
-        animate &&
-        total > 1 &&
-        this.data.slidesPerView <= 1
-      ) {
-        const isForwardLoop = prev === total - 1 && newIndex === 0;
-        const isBackwardLoop = prev === 0 && newIndex === total - 1;
+      if (this.data.loop && this.data.effect === 'slide' && animate && pageCount > 1) {
+        const isForwardLoop = prev === pageCount - 1 && newIndex === 0;
+        const isBackwardLoop = prev === 0 && newIndex === pageCount - 1;
 
         if (isForwardLoop || isBackwardLoop) {
           this._slideLoopTransition(prev, newIndex, isForwardLoop);
@@ -221,9 +226,9 @@ Component({
         }
       }
 
-      // 非边界过渡，清理拖拽时预置的 boundary item
-      if (this._boundaryItemIndex >= 0) {
-        this._boundaryItemIndex = -1;
+      // 非边界过渡，清理拖拽时预置的 boundary items
+      if (this._boundaryItemIndices && this._boundaryItemIndices.length > 0) {
+        this._boundaryItemIndices = [];
         if (animate) {
           this._loopResetTimer = setTimeout(() => {
             this._loopResetTimer = null;
@@ -312,78 +317,111 @@ Component({
       const items = this._getItems();
       const total = items.length;
       const { direction, spaceBetween, duration } = this.data;
+      const spv = Math.max(1, Math.floor(this.data.slidesPerView));
       const step = this._slideSize + spaceBetween;
       const isH = direction === 'horizontal';
       const axis = isH ? 'X' : 'Y';
       const sizeStyle = this._getItemSizeStyle();
+      // 需要克隆的边界 item 数：满足视窗填充，同时避免与当前可见区域重叠
+      const cloneCount = Math.max(1, Math.min(spv, total - spv));
+
+      this._boundaryItemIndices = [];
+
+      // 边界 item 的克隆定位（子组件 setData）与 track 过渡启动（父组件 setData）
+      // 必须在同一渲染帧落地，否则 track 动画先跑、item 还没就位，
+      // 视窗扫过空白区域会表现为"某一页慢慢加载出来"的闪烁。
+      // 用 groupSetData 强制跨组件渲染同步。
+      this.groupSetData(() => {
+        if (isForward) {
+          // 最后页→第一页：把 items[0..cloneCount-1] 移到最后一张后面
+          for (let i = 0; i < cloneCount; i++) {
+            items[i]._setState(
+              'active',
+              `${sizeStyle} transform: translate${axis}(${total * step}px);`,
+            );
+            this._boundaryItemIndices.push(i);
+          }
+          // track 向前滑动 cloneCount 格
+          const offset = (fromIndex + cloneCount) * step;
+          const transform = isH ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+          this.setData({
+            _trackStyle: `transform: ${transform}; transition: transform ${duration}ms ease;`,
+          });
+        } else {
+          // 第一页→最后页：把 items[total-cloneCount..total-1] 移到第一张前面
+          for (let i = 0; i < cloneCount; i++) {
+            const idx = total - cloneCount + i;
+            items[idx]._setState(
+              'active',
+              `${sizeStyle} transform: translate${axis}(${-total * step}px);`,
+            );
+            this._boundaryItemIndices.push(idx);
+          }
+          // track 向后滑动 cloneCount 格
+          const offset = -cloneCount * step;
+          const transform = isH ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
+          this.setData({
+            _trackStyle: `transform: ${transform}; transition: transform ${duration}ms ease;`,
+          });
+        }
+      });
 
-      this._boundaryItemIndex = -1;
-
-      if (isForward) {
-        // 最后→第一：把 item[0] 移到最后一张后面
-        items[toIndex]._setState(
-          'active',
-          `${sizeStyle} transform: translate${axis}(${total * step}px);`,
-        );
-        // track 向前滑动一格到 item[0] 的临时位置
-        const offset = total * step;
-        const transform = isH ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
-        this.setData({
-          _trackStyle: `transform: ${transform}; transition: transform ${duration}ms ease;`,
-        });
-      } else {
-        // 第一→最后：把 item[last] 移到第一张前面
-        items[toIndex]._setState(
-          'active',
-          `${sizeStyle} transform: translate${axis}(${-total * step}px);`,
-        );
-        // track 向后滑动一格
-        const offset = -step;
-        const transform = isH ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
-        this.setData({
-          _trackStyle: `transform: ${transform}; transition: transform ${duration}ms ease;`,
-        });
-      }
-
-      // 动画结束后复位所有 item 和 track
+      // 动画结束后复位所有 item 和 track —— 同样需要跨组件同步，
+      // 否则会出现"item 已复位但 track 还停在 cloneCount 偏移"或反之的一帧错位
       this._loopResetTimer = setTimeout(() => {
         this._loopResetTimer = null;
-        this._updateChildSizes();
-        this._applyEffect(false);
+        this.groupSetData(() => {
+          this._updateChildSizes();
+          this._applyEffect(false);
+        });
       }, duration + 20);
     },
 
     /**
-     * 拖拽前预置边界 item，使跟手拖动时能看到下一张
+     * 按滑动方向预置边界 item，使跟手拖动时能看到下一张
+     * @param {'forward'|'backward'} swipeDir
+     *   forward: 向后（下一页，手指左移），backward: 向前（上一页，手指右移）
      */
-    _prepareBoundarySlide() {
+    _prepareBoundarySlide(swipeDir) {
       const items = this._getItems();
       const total = items.length;
-      if (total <= 1) return;
+      const spv = Math.max(1, Math.floor(this.data.slidesPerView));
+      const pageCount = this._getPageCount(total);
+      if (pageCount <= 1) return;
 
       const cur = this._internalIndex;
+      // 只在边界处且方向匹配时才需要预置，否则 item 都在自然位置，直接可见
+      if (swipeDir === 'backward' && cur !== 0) return;
+      if (swipeDir === 'forward' && cur !== pageCount - 1) return;
+
       const { direction, spaceBetween } = this.data;
       const step = this._slideSize + spaceBetween;
       const isH = direction === 'horizontal';
       const axis = isH ? 'X' : 'Y';
       const sizeStyle = this._getItemSizeStyle();
-
-      this._boundaryItemIndex = -1;
-
-      if (cur === 0) {
-        // 可能向前滑（回到最后）→ 把最后一张移到第一张前面
-        items[total - 1]._setState(
-          'active',
-          `${sizeStyle} transform: translate${axis}(${-total * step}px);`,
-        );
-        this._boundaryItemIndex = total - 1;
-      } else if (cur === total - 1) {
-        // 可能向后滑（到第一张）→ 把第一张移到最后一张后面
-        items[0]._setState(
-          'active',
-          `${sizeStyle} transform: translate${axis}(${total * step}px);`,
-        );
-        this._boundaryItemIndex = 0;
+      const cloneCount = Math.max(1, Math.min(spv, total - spv));
+
+      this._boundaryItemIndices = [];
+
+      if (swipeDir === 'backward') {
+        // 手指右移（回到最后页）→ 把末尾 cloneCount 张移到第一张前面
+        for (let i = 0; i < cloneCount; i++) {
+          const idx = total - cloneCount + i;
+          items[idx]._setState(
+            'active',
+            `${sizeStyle} transform: translate${axis}(${-total * step}px);`,
+          );
+          this._boundaryItemIndices.push(idx);
+        }
+      } else {
+        // 手指左移（到第一页）→ 把开头 cloneCount 张移到最后一张后面
+        for (let i = 0; i < cloneCount; i++) {
+          items[i]._setState(
+            'active',
+            `${sizeStyle} transform: translate${axis}(${total * step}px);`,
+          );
+          this._boundaryItemIndices.push(i);
+        }
       }
     },
 
@@ -394,23 +432,25 @@ Component({
       if (this._loopResetTimer) {
         clearTimeout(this._loopResetTimer);
         this._loopResetTimer = null;
-        this._updateChildSizes();
-        this._applyEffect(false);
+        // item 复位和 track 复位必须同帧渲染，避免一帧错位
+        this.groupSetData(() => {
+          this._updateChildSizes();
+          this._applyEffect(false);
+        });
       }
 
       this._drag.start(e.touches[0]);
       if (this.data.effect === 'slide') {
         this._startTranslate = this._internalIndex * (this._slideSize + this.data.spaceBetween);
-        // loop 模式下预置边界 item，使跟手拖动无缝
-        if (this.data.loop && this.data.slidesPerView <= 1) {
-          this._prepareBoundarySlide();
-        }
+        // 边界预置推迟到 onTouchMove 首帧检测方向后再执行，
+        // 避免在用户实际滑动方向未知时提前移动可见 item
+        this._boundaryPrepared = false;
       }
     },
 
     onTouchMove(e) {
       if (!this._drag.isActive()) return;
-      const { effect, direction } = this.data;
+      const { effect, direction, loop } = this.data;
       const touch = e.touches[0];
 
       if (effect === 'slide') {
@@ -418,7 +458,22 @@ Component({
         const offset = this._startTranslate - delta;
         const transform =
           direction === 'horizontal' ? `translateX(${-offset}px)` : `translateY(${-offset}px)`;
-        this.setData({ _trackStyle: `transform: ${transform}; transition: none;` });
+        const trackStyle = `transform: ${transform}; transition: none;`;
+
+        // 首帧检测滑动方向：仅在边界处按实际方向预置 item，
+        // 与当前帧 track offset 在同一渲染帧生效，避免提前错误移动可见 item
+        if (loop && !this._boundaryPrepared) {
+          this._boundaryPrepared = true;
+          // delta > 0: 手指右移 = 向前（上一页），delta < 0: 左移 = 向后（下一页）
+          const swipeDir = delta > 0 ? 'backward' : 'forward';
+          this.groupSetData(() => {
+            this._prepareBoundarySlide(swipeDir);
+            this.setData({ _trackStyle: trackStyle });
+          });
+          return;
+        }
+
+        this.setData({ _trackStyle: trackStyle });
       } else {
         const containerSize =
           direction === 'horizontal' ? this._containerWidth : this._containerHeight;

package/miniprogram_dist/components/image/image.js

@@ -0,0 +1,95 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    src: {
+      type: String,
+      value: '',
+    },
+    mode: {
+      type: String,
+      value: 'aspectFill', // scaleToFill | aspectFit | aspectFill | widthFix | heightFix | ...
+    },
+    width: {
+      type: String,
+      value: '',
+    },
+    height: {
+      type: String,
+      value: '',
+    },
+    radius: {
+      type: String,
+      value: '',
+    },
+    round: {
+      type: Boolean,
+      value: false,
+    },
+    showLoading: {
+      type: Boolean,
+      value: true,
+    },
+    showError: {
+      type: Boolean,
+      value: true,
+    },
+    fade: {
+      type: Boolean,
+      value: true,
+    },
+    lazyLoad: {
+      type: Boolean,
+      value: false,
+    },
+    fallbackSrc: {
+      type: String,
+      value: '',
+    },
+    showMenuByLongpress: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    _status: 'loading', // loading | loaded | error
+    _currentSrc: '',
+    _containerStyle: '',
+  },
+
+  observers: {
+    src(src) {
+      this.setData({
+        _currentSrc: src,
+        _status: src ? 'loading' : 'error',
+      });
+    },
+    'width, height, radius'(width, height, radius) {
+      const parts = [];
+      if (width) parts.push(`width: ${width}`);
+      if (height) parts.push(`height: ${height}`);
+      if (radius) parts.push(`border-radius: ${radius}`);
+      this.setData({ _containerStyle: parts.join('; ') });
+    },
+  },
+
+  methods: {
+    handleLoad(e) {
+      this.setData({ _status: 'loaded' });
+      this.triggerEvent('load', e.detail);
+    },
+
+    handleError(e) {
+      const { fallbackSrc, _currentSrc } = this.data;
+      if (fallbackSrc && _currentSrc !== fallbackSrc) {
+        this.setData({ _currentSrc: fallbackSrc });
+      } else {
+        this.setData({ _status: 'error' });
+      }
+      this.triggerEvent('error', e.detail);
+    },
+  },
+});

package/miniprogram_dist/components/image/image.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/image/image.scss

@@ -0,0 +1,104 @@
+@import '../../styles/iconfont.scss';
+
+.w-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: var(--w-image-radius, 0);
+  background-color: var(--w-image-bg, var(--color-bg-base));
+}
+
+.w-image--round {
+  border-radius: var(--radius-full);
+}
+
+/* Image */
+.w-image__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.w-image--fade-in .w-image__img {
+  animation: w-image-fade-in var(--w-image-fade-duration, 300ms) ease-out;
+}
+
+@keyframes w-image-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Placeholder (loading & error) */
+.w-image__placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Slot controls: hide default when slot has content */
+.w-image__loading-slot:empty {
+  display: none;
+}
+
+.w-image__loading-slot:empty + .w-image__loading-default {
+  display: flex;
+}
+
+.w-image__loading-slot:not(:empty) + .w-image__loading-default {
+  display: none;
+}
+
+.w-image__error-slot:empty {
+  display: none;
+}
+
+.w-image__error-slot:empty + .w-image__error-default {
+  display: flex;
+}
+
+.w-image__error-slot:not(:empty) + .w-image__error-default {
+  display: none;
+}
+
+/* Loading default: spinning animation */
+.w-image__loading-default {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.w-image__loading-icon {
+  width: var(--w-image-loading-icon-size, 48rpx);
+  height: var(--w-image-loading-icon-size, 48rpx);
+  border: 4rpx solid var(--color-separator);
+  border-top-color: var(--color-text-secondary);
+  border-radius: 50%;
+  animation: w-image-spin 0.8s linear infinite;
+}
+
+@keyframes w-image-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error default */
+.w-image__error-default {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.w-image__error-icon {
+  font-size: var(--w-image-error-icon-size, 48rpx);
+  color: var(--color-text-placeholder);
+}

package/miniprogram_dist/components/image/image.wxml

@@ -0,0 +1,35 @@
+<view
+  class="w-image {{round ? 'w-image--round' : ''}} {{_status === 'loaded' && fade ? 'w-image--fade-in' : ''}}"
+  style="{{_containerStyle}}"
+>
+  <image
+    wx:if="{{_currentSrc && _status !== 'error'}}"
+    class="w-image__img"
+    src="{{_currentSrc}}"
+    mode="{{mode}}"
+    lazy-load="{{lazyLoad}}"
+    show-menu-by-longpress="{{showMenuByLongpress}}"
+    bindload="handleLoad"
+    binderror="handleError"
+  ></image>
+
+  <!-- Loading -->
+  <view wx:if="{{_status === 'loading' && showLoading}}" class="w-image__placeholder">
+    <view class="w-image__loading-slot">
+      <slot name="loading"></slot>
+    </view>
+    <view class="w-image__loading-default">
+      <view class="w-image__loading-icon"></view>
+    </view>
+  </view>
+
+  <!-- Error -->
+  <view wx:if="{{_status === 'error' && showError}}" class="w-image__placeholder">
+    <view class="w-image__error-slot">
+      <slot name="error"></slot>
+    </view>
+    <view class="w-image__error-default">
+      <view class="w-image__error-icon iconfont icon-broken-image"></view>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/styles/iconfont.scss

@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'iconfont'; /* Project id 5134551 */
   src:
-    url('data:application/x-font-woff;charset=utf-8;base64,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')
+    url('data:application/x-font-woff;charset=utf-8;base64,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')
       format('woff'),
-    url('//at.alicdn.com/t/c/font_5134551_zr54w3qnk2m.ttf?t=1775402273099') format('truetype');
+    url('//at.alicdn.com/t/c/font_5134551_7oyrdzd7ntn.ttf?t=1775471224272') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-broken-image:before {
+  content: '\e600';
+}
+
 .icon-empty:before {
   content: '\e6a6';
 }

package/miniprogram_dist/styles/tokens.scss

@@ -305,6 +305,13 @@ page {
   --w-price-color: var(--color-brand);
   --w-price-original-color: var(--color-text-secondary);
 
+  /* Image */
+  --w-image-radius: 0;
+  --w-image-bg: var(--color-bg-base);
+  --w-image-fade-duration: 300ms;
+  --w-image-loading-icon-size: 48rpx;
+  --w-image-error-icon-size: 48rpx;
+
   /* Carousel */
   --w-carousel-dot-color: rgba(255, 255, 255, 0.5);
   --w-carousel-dot-color-active: #ffffff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wedux-ui",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "微信小程序组件库，支持主题切换",
   "miniprogram": "miniprogram_dist",
   "files": [