wedux-ui 0.2.0 → 0.2.2

package/README.md

@@ -18,7 +18,9 @@ npm install wedux-ui
 
 安装后在**微信开发者工具**中点击 **工具 → 构建 npm**，等待构建完成。
 
-在项目全局样式文件 `app.wxss` 中引入：
+> **注意**：本组件库使用 SCSS 编写，**微信开发者工具不会自动编译 SCSS**，需在 `project.config.json` 中添加 `"useCompilerPlugins": ["sass"]`。
+
+在项目全局样式文件 `app.scss` 中引入：
 
 ```scss
 @import 'wedux-ui/src/styles/iconfont.scss';

package/miniprogram_dist/components/marquee/marquee.js

@@ -0,0 +1,96 @@
+Component({
+  properties: {
+    text: {
+      type: String,
+      value: '',
+    },
+    speed: {
+      type: Number,
+      value: 48,
+    },
+    autoFill: {
+      type: Boolean,
+      value: false,
+    },
+    pauseOnTap: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    _items: [0],
+    _duration: 2,
+    _play: 'paused',
+    _containerStyle: '',
+  },
+
+  observers: {
+    'text, speed, autoFill': function () {
+      if (!this._ready) return;
+      if (!this.data.text) return;
+      wx.nextTick(() => {
+        this._measure();
+      });
+    },
+    '_duration, _play': function () {
+      this._applyStyle();
+    },
+  },
+
+  lifetimes: {
+    ready() {
+      this._ready = true;
+      if (this.data.text) {
+        this._measure();
+      }
+    },
+  },
+
+  methods: {
+    _measure() {
+      const query = this.createSelectorQuery();
+      query.select('.w-marquee').boundingClientRect();
+      query.select('.w-marquee__group').boundingClientRect();
+      query.exec((res) => {
+        if (!res[0] || !res[1]) return;
+        const containerWidth = res[0].width;
+        const groupWidth = res[1].width;
+        if (groupWidth <= 0) return;
+
+        if (this.data.autoFill && containerWidth > 0) {
+          const repeatCount = Math.ceil(containerWidth / groupWidth) + 1;
+          this.setData({ _items: Array.from({ length: repeatCount }, (_, i) => i) });
+          wx.nextTick(() => {
+            const q2 = this.createSelectorQuery();
+            q2.select('.w-marquee__group').boundingClientRect();
+            q2.exec((res2) => {
+              if (!res2[0] || res2[0].width <= 0) return;
+              this._setDuration(res2[0].width);
+            });
+          });
+        } else {
+          this._setDuration(groupWidth);
+        }
+      });
+    },
+
+    _setDuration(groupWidth) {
+      const duration = groupWidth / this.data.speed;
+      this.setData({ _duration: duration, _play: 'running' });
+    },
+
+    _applyStyle() {
+      const { _duration, _play } = this.data;
+      this.setData({
+        _containerStyle: `--w-marquee-duration: ${_duration}s; --w-marquee-play: ${_play}`,
+      });
+    },
+
+    onTap() {
+      if (!this.data.pauseOnTap) return;
+      const play = this.data._play === 'running' ? 'paused' : 'running';
+      this.setData({ _play: play });
+    },
+  },
+});

package/miniprogram_dist/components/marquee/marquee.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/miniprogram_dist/components/marquee/marquee.scss

@@ -0,0 +1,34 @@
+.w-marquee {
+  overflow: hidden;
+  display: flex;
+
+  &--hidden {
+    display: none;
+  }
+
+  &__group {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    animation: w-marquee-scroll var(--w-marquee-duration, 2s) linear infinite;
+    animation-play-state: var(--w-marquee-play, running);
+  }
+
+  &__item {
+    flex-shrink: 0;
+    white-space: nowrap;
+    font-size: var(--w-marquee-font-size);
+    color: var(--w-marquee-color);
+    padding-right: var(--w-marquee-gap);
+  }
+}
+
+@keyframes w-marquee-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}

package/miniprogram_dist/components/marquee/marquee.wxml

@@ -0,0 +1,16 @@
+<view
+  class="w-marquee {{!text ? 'w-marquee--hidden' : ''}}"
+  style="{{_containerStyle}}"
+  bindtap="onTap"
+>
+  <view class="w-marquee__group">
+    <block wx:for="{{_items}}" wx:key="*this">
+      <text class="w-marquee__item">{{text}}</text>
+    </block>
+  </view>
+  <view class="w-marquee__group">
+    <block wx:for="{{_items}}" wx:key="*this">
+      <text class="w-marquee__item">{{text}}</text>
+    </block>
+  </view>
+</view>

package/miniprogram_dist/styles/tokens.scss

@@ -289,4 +289,9 @@ page {
   /* Avatar */
   --w-avatar-radius: var(--radius-sm);
   --w-avatar-bg: var(--color-avatar-bg);
+
+  /* Marquee */
+  --w-marquee-gap: 32rpx;
+  --w-marquee-font-size: var(--font-size-md);
+  --w-marquee-color: var(--color-text-primary);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wedux-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "微信小程序组件库，支持主题切换",
   "miniprogram": "miniprogram_dist",
   "files": [
@@ -12,7 +12,16 @@
     "component",
     "ui"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BitterBar/wxma-ui.git"
+  },
+  "author": "L",
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/BitterBar/wxma-ui/issues"
+  },
+  "homepage": "https://github.com/BitterBar/wxma-ui#readme",
   "devDependencies": {
     "prettier": "^3.8.1"
   },