feat: pi-marquee跑马灯组件

components/pi-marquee-item.vue/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <view class="marquee-item">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+const TAG = 'MarqueeItem'
+export default {
+  name: TAG,
+  data() {
+    return {
+      direction: ''
+    }
+  },
+  mounted() {
+    this.$parent.children.push(this)
+    this.direction = this.$parent.direction
+  },
+  beforeDestroy() {
+    let targetIdx = -1
+    this.$parent.children.some((i, idx) => {
+      if (i._uid === this._uid) {
+          targetIdx = idx
+          return true
+      }
+      return false
+    })
+    if (targetIdx !== -1) {
+      this.$parent.children.splice(targetIdx, 1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.marquee-item {
+    position: relative;
+    display: inline-block;
+}
+
+.marquee-item.vertical {
+    width: 100%;
+    height: auto;
+}
+</style>

components/pi-marquee/index.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="marquee-container" :class="{vertical: direction === 'vertical'}" @mouseenter="handlePause" @mouseleave="handleStart">
+    <div class="inner" :style="animateTime">
+        <slot></slot>
+    </div>
+    <div v-if="showCopy" class="inner" :style="animateTime">
+        <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getConfig } from '../../config'
+
+const TAG = "Marquee"
+const { marquee } = getConfig()
+export default {
+  name: TAG,
+  props: {
+    // 控制方向
+    direction: {
+        // vertical or horizontal
+        type: String,
+        default: marquee.direction
+    },
+    // 动画移动速度:每毫秒移动多少像素
+    speed: {
+        type: Number,
+        // 0.2s
+        default: marquee.speed
+    },
+    // 是否支持鼠标移上去暂停滚动
+    hoverPause: {
+      type: Boolean,
+      // true
+      default: marquee.hoverPause
+    }
+  },
+  data() {
+    return {
+      children: [],
+      animateTime: '',
+      showCopy: false
+    }
+  },
+  watch: {
+    direction() {
+      this.children.forEach(i => i.direction = this.direction)
+      this.updateTime()
+    },
+    duration: {
+      immediate: true,
+      handler() {
+          this.updateTime()
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.updateTime)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateTime)
+  },
+  methods: {
+    handlePause() {
+      if (!this.hoverPause) {
+        return
+      }
+      this.animateTime = 'animation: none'
+    },
+    handleStart() {
+      if (!this.hoverPause) {
+        return
+      }
+      this.updateTime()
+    },
+    updateTime() {
+      this.$nextTick(() => {
+        const containerWidth = this.$el.clientWidth
+        const containerHeight = this.$el.clientHeight
+        const inner = this.$el.children[0]
+        if (!inner) {
+          // 没有marquee-item 则直接停止动画 隐藏拷贝
+          this.handlePause()
+          this.showCopy = false
+          return
+        }
+        if (this.direction !== 'vertical') {
+          if (inner.offsetWidth <= containerWidth) {
+            this.handlePause()
+            this.showCopy = false
+          } else {
+            const time = inner.offsetWidth / this.speed / 1000
+            this.animateTime = `animation-duration: ${time}s`
+            this.showCopy = true
+          }
+        } else {
+          if (inner.offsetHeight <= containerHeight) {
+            this.animateTime = 'animation: none'
+            this.showCopy = false
+          } else {
+            const time = inner.offsetHeight / this.speed / 1000
+            this.animateTime = `animation-duration: ${time}s`
+            this.showCopy = true
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.marquee-container {
+    width: 100%;
+    white-space: nowrap;
+    overflow: auto hidden;
+}
+
+.marquee-container > .inner {
+    display: inline-block;
+    height: 100%;
+    white-space: nowrap;
+    animation: roll 0s linear infinite;
+}
+
+
+.marquee-container.vertical {
+    height: 100%;
+    white-space: normal;
+    overflow: hidden auto;
+}
+
+
+.marquee-container.vertical > .inner {
+    height: auto;
+    width: 100%;
+    white-space: normal;
+    animation: roll-vertical 0s linear infinite;
+}
+
+@keyframes roll {
+    0% {
+        transform: translateX(0)
+    }
+    100% {
+        transform: translateX(-100%)
+    }
+}
+
+@keyframes roll-vertical {
+    0% {
+        transform: translateY(0)
+    }
+    100% {
+        transform: translateY(-100%)
+    }
+}
+</style>

config/marquee.js

@@ -0,0 +1,5 @@
+export default {
+  direction: 'horizontal',  // 滚动方向
+  speed: 0.2,  // 移动速度 即每毫秒移动多少像素
+  hoverPause: true
+}