uniapp-dyckui 4.1.3 → 4.1.4

package/src/components/MyComs/PullRefresh/index.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, ref, watch, withDefaults } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
 // Props
 interface Props {
@@ -597,3 +597,4 @@ onUnmounted(() => {
   color: white;
 }
 </style>
+

package/src/components/MyComs/Swiper/index.vue

@@ -1,245 +1,246 @@
-<template>
-  <view class="sw-swiper">
-    <view
-      class="swiper-wrapper"
-      :style="{
-        transform: `translateX(-${currentIndex * 100}%)`,
-        transition: `transform ${duration}ms ease`,
-      }"
-    >
-      <view
-        v-for="(item, index) in items"
-        :key="index"
-        class="swiper-item"
-      >
-        <slot :item="item" :index="index" />
-      </view>
-    </view>
-
-    <!-- 指示器 -->
-    <view v-if="showIndicators" class="swiper-indicators">
-      <view
-        v-for="(item, index) in items"
-        :key="index"
-        class="indicator-item"
-        :class="{ active: index === currentIndex }"
-        @click="currentIndex = index"
-      />
-    </view>
-
-    <!-- 左右箭头 -->
-    <view
-      v-if="showArrows"
-      class="swiper-arrow swiper-arrow-left"
-      @click="prev"
-    />
-    <view
-      v-if="showArrows"
-      class="swiper-arrow swiper-arrow-right"
-      @click="next"
-    />
-  </view>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch, withDefaults } from 'vue'
-
-interface Props {
-  items: any[]
-  initialIndex?: number
-  autoPlay?: boolean
-  interval?: number
-  duration?: number
-  showIndicators?: boolean
-  showArrows?: boolean
-  loop?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  initialIndex: 0,
-  autoPlay: true,
-  interval: 3000,
-  duration: 300,
-  showIndicators: true,
-  showArrows: false,
-  loop: true,
-})
-
-const emit = defineEmits<{
-  (e: 'change', index: number): void
-  (e: 'prev', index: number): void
-  (e: 'next', index: number): void
-}>()
-
-const currentIndex = ref(props.initialIndex)
-let timer: any = null
-
-// 自动播放
-function startAutoPlay() {
-  if (props.autoPlay && props.items.length > 1) {
-    timer = setInterval(() => {
-      next()
-    }, props.interval)
-  }
-}
-
-function stopAutoPlay() {
-  if (timer) {
-    clearInterval(timer)
-    timer = null
-  }
-}
-
-// 上一张
-function prev() {
-  if (props.loop) {
-    currentIndex.value = currentIndex.value === 0 ? props.items.length - 1 : currentIndex.value - 1
-  }
-  else if (currentIndex.value > 0) {
-    currentIndex.value--
-  }
-  emit('prev', currentIndex.value)
-  emit('change', currentIndex.value)
-}
-
-// 下一张
-function next() {
-  if (props.loop) {
-    currentIndex.value = currentIndex.value === props.items.length - 1 ? 0 : currentIndex.value + 1
-  }
-  else if (currentIndex.value < props.items.length - 1) {
-    currentIndex.value++
-  }
-  emit('next', currentIndex.value)
-  emit('change', currentIndex.value)
-}
-
-// 监听items变化
-watch(() => props.items, (newItems) => {
-  if (newItems.length < currentIndex.value + 1) {
-    currentIndex.value = Math.min(currentIndex.value, newItems.length - 1)
-  }
-  stopAutoPlay()
-  startAutoPlay()
-}, { deep: true })
-
-// 监听自动播放设置
-watch(() => props.autoPlay, (autoPlay) => {
-  if (autoPlay) {
-    startAutoPlay()
-  }
-  else {
-    stopAutoPlay()
-  }
-})
-
-onMounted(() => {
-  startAutoPlay()
-})
-
-onUnmounted(() => {
-  stopAutoPlay()
-})
-
-// 暴露方法
-defineExpose({
-  prev,
-  next,
-  currentIndex,
-})
-</script>
-
-<style lang="less" scoped>
-// 轮播图组件样式
-.sw-swiper {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-
-  .swiper-wrapper {
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }
-
-  .swiper-item {
-    flex-shrink: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  // 指示器
-  .swiper-indicators {
-    position: absolute;
-    bottom: 32rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    gap: 16rpx;
-
-    .indicator-item {
-      width: 16rpx;
-      height: 16rpx;
-      border-radius: 50%;
-      background-color: rgba(255, 255, 255, 0.5);
-      cursor: pointer;
-      transition: all 0.3s ease;
-
-      &.active {
-        width: 16rpx;
-        height: 16rpx;
-        background-color: #fff;
-      }
-    }
-  }
-
-  // 箭头
-  .swiper-arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 76rpx;
-    height: 76rpx;
-    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.85);
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 10;
-    transition: all 0.3s ease;
-    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 1);
-      transform: translateY(-50%) scale(1.1);
-    }
-
-    &:before {
-      content: '';
-      width: 24rpx;
-      height: 24rpx;
-      border-top: 4rpx solid #333;
-      border-left: 4rpx solid #333;
-      display: inline-block;
-    }
-
-    &.swiper-arrow-left {
-      left: 30rpx;
-
-      &:before {
-        transform: rotate(-45deg);
-      }
-    }
-
-    &.swiper-arrow-right {
-      right: 30rpx;
-
-      &:before {
-        transform: rotate(135deg);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <view class="sw-swiper">
+    <view
+      class="swiper-wrapper"
+      :style="{
+        transform: `translateX(-${currentIndex * 100}%)`,
+        transition: `transform ${duration}ms ease`,
+      }"
+    >
+      <view
+        v-for="(item, index) in items"
+        :key="index"
+        class="swiper-item"
+      >
+        <slot :item="item" :index="index" />
+      </view>
+    </view>
+
+    <!-- 指示器 -->
+    <view v-if="showIndicators" class="swiper-indicators">
+      <view
+        v-for="(item, index) in items"
+        :key="index"
+        class="indicator-item"
+        :class="{ active: index === currentIndex }"
+        @click="currentIndex = index"
+      />
+    </view>
+
+    <!-- 左右箭头 -->
+    <view
+      v-if="showArrows"
+      class="swiper-arrow swiper-arrow-left"
+      @click="prev"
+    />
+    <view
+      v-if="showArrows"
+      class="swiper-arrow swiper-arrow-right"
+      @click="next"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+interface Props {
+  items: any[]
+  initialIndex?: number
+  autoPlay?: boolean
+  interval?: number
+  duration?: number
+  showIndicators?: boolean
+  showArrows?: boolean
+  loop?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialIndex: 0,
+  autoPlay: true,
+  interval: 3000,
+  duration: 300,
+  showIndicators: true,
+  showArrows: false,
+  loop: true,
+})
+
+const emit = defineEmits<{
+  (e: 'change', index: number): void
+  (e: 'prev', index: number): void
+  (e: 'next', index: number): void
+}>()
+
+const currentIndex = ref(props.initialIndex)
+let timer: any = null
+
+// 自动播放
+function startAutoPlay() {
+  if (props.autoPlay && props.items.length > 1) {
+    timer = setInterval(() => {
+      next()
+    }, props.interval)
+  }
+}
+
+function stopAutoPlay() {
+  if (timer) {
+    clearInterval(timer)
+    timer = null
+  }
+}
+
+// 上一张
+function prev() {
+  if (props.loop) {
+    currentIndex.value = currentIndex.value === 0 ? props.items.length - 1 : currentIndex.value - 1
+  }
+  else if (currentIndex.value > 0) {
+    currentIndex.value--
+  }
+  emit('prev', currentIndex.value)
+  emit('change', currentIndex.value)
+}
+
+// 下一张
+function next() {
+  if (props.loop) {
+    currentIndex.value = currentIndex.value === props.items.length - 1 ? 0 : currentIndex.value + 1
+  }
+  else if (currentIndex.value < props.items.length - 1) {
+    currentIndex.value++
+  }
+  emit('next', currentIndex.value)
+  emit('change', currentIndex.value)
+}
+
+// 监听items变化
+watch(() => props.items, (newItems) => {
+  if (newItems.length < currentIndex.value + 1) {
+    currentIndex.value = Math.min(currentIndex.value, newItems.length - 1)
+  }
+  stopAutoPlay()
+  startAutoPlay()
+}, { deep: true })
+
+// 监听自动播放设置
+watch(() => props.autoPlay, (autoPlay) => {
+  if (autoPlay) {
+    startAutoPlay()
+  }
+  else {
+    stopAutoPlay()
+  }
+})
+
+onMounted(() => {
+  startAutoPlay()
+})
+
+onUnmounted(() => {
+  stopAutoPlay()
+})
+
+// 暴露方法
+defineExpose({
+  prev,
+  next,
+  currentIndex,
+})
+</script>
+
+<style lang="less" scoped>
+// 轮播图组件样式
+.sw-swiper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  .swiper-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .swiper-item {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  // 指示器
+  .swiper-indicators {
+    position: absolute;
+    bottom: 32rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 16rpx;
+
+    .indicator-item {
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.5);
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &.active {
+        width: 16rpx;
+        height: 16rpx;
+        background-color: #fff;
+      }
+    }
+  }
+
+  // 箭头
+  .swiper-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 76rpx;
+    height: 76rpx;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.85);
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.3s ease;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 1);
+      transform: translateY(-50%) scale(1.1);
+    }
+
+    &:before {
+      content: '';
+      width: 24rpx;
+      height: 24rpx;
+      border-top: 4rpx solid #333;
+      border-left: 4rpx solid #333;
+      display: inline-block;
+    }
+
+    &.swiper-arrow-left {
+      left: 30rpx;
+
+      &:before {
+        transform: rotate(-45deg);
+      }
+    }
+
+    &.swiper-arrow-right {
+      right: 30rpx;
+
+      &:before {
+        transform: rotate(135deg);
+      }
+    }
+  }
+}
+</style>
+