fix: 跑马灯兼容微信小程序

components/pi-marquee/index.vue

@@ -8,20 +8,35 @@
     @touchmove.stop.prevent
     @mousewheel.stop.prevent
   >
-    <view class="inner-wrap" :class="direction" :style="animate">
+    <view class="inner-wrap" :class="direction" :style="[animate]">
       <view id="firstInner" class="inner">
-        <slot />
+        <view
+          v-for="(item, idx) in items"
+          :key="idx"
+          class="marquee-item"
+          :style="[itemStyle]"
+          :class="{ vertical: isVertical }"
+        >
+          <slot name="item" :item="item" />
+        </view>
       </view>
       <view v-if="showCopy" class="inner">
-        <slot />
+        <view
+          v-for="(item, idx) in items"
+          :key="idx"
+          class="marquee-item"
+          :style="[itemStyle]"
+          :class="{ vertical: isVertical }"
+        >
+          <slot name="item" :item="item" />
+        </view>
       </view>
     </view>
   </view>
 </template>
 
 <script>
 import { getConfig } from '../../config'
-
 // const TAG = 'PiMarquee'
 const { marquee } = getConfig()
 export default {
@@ -60,11 +75,16 @@ export default {
       type: Boolean,
       // true
       default: marquee.hoverPause
+    },
+    // 轮播数据
+    items: {
+      type: Array,
+      // `[]`
+      default: () => marquee.items
     }
   },
   data() {
     return {
-      children: [],
       animate: {},
       showCopy: false
     }
@@ -206,6 +226,7 @@ export default {
 
 .marquee-container.vertical > .inner-wrap {
   white-space: normal;
+  width: 100%;
 }
 
 @keyframes roll-lr {
@@ -243,4 +264,15 @@ export default {
     transform: translateY(0%);
   }
 }
+
+.marquee-item {
+  position: relative;
+  display: inline-block;
+  font-size: 28rpx;
+}
+
+.marquee-item.vertical {
+  width: 100%;
+  height: auto;
+}
 </style>

components/pi-pagination/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <view class="page-wrap">
+    <view v-for="i in prev" :key="i" class="page-item">{{ i }}</view>
+    <template v-if="showEllipsis">
+      <view>...</view>
+      <view v-for="j in next" :key="`${limit + j}}`" class="page-item">{{ limit + j }}</view>
+    </template>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'PiPagination',
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    limit: {
+      type: Number,
+      default: 3
+    },
+    page: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    prev() {
+      return this.showEllipsis ? this.limit - 1 : this.total
+    },
+    next() {
+      return this.showEllipsis ? this.total - this.limit : 0
+    },
+    showEllipsis() {
+      return this.limit > 1 && this.limit < this.total
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

config/marquee.js

@@ -3,5 +3,6 @@ export default {
   speed: 100, // 移动速度 即每毫秒移动多少像素
   hoverPause: true,
   customStyle: {},
-  customClass: ''
+  customClass: '',
+  items: []
 }