From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 110 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue b/uni_modules/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue
new file mode 100644
index 0000000..8923e13
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue
@@ -0,0 +1,110 @@
+<template>
+ <view class="u-swiper-indicator">
+ <view
+ class="u-swiper-indicator__wrapper"
+ v-if="indicatorMode === 'line'"
+ :class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
+ :style="{
+ width: $u.addUnit(lineWidth * length),
+ backgroundColor: indicatorInactiveColor
+ }"
+ >
+ <view
+ class="u-swiper-indicator__wrapper--line__bar"
+ :style="[lineStyle]"
+ ></view>
+ </view>
+ <view
+ class="u-swiper-indicator__wrapper"
+ v-if="indicatorMode === 'dot'"
+ >
+ <view
+ class="u-swiper-indicator__wrapper__dot"
+ v-for="(item, index) in length"
+ :key="index"
+ :class="[index === current && 'u-swiper-indicator__wrapper__dot--active']"
+ :style="[dotStyle(index)]"
+ >
+
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ /**
+ * SwiperIndicator 杞挱鍥炬寚绀哄櫒
+ * @description 璇ョ粍浠朵竴鑸敤浜庡鑸疆鎾紝骞垮憡灞曠ず绛夊満鏅�,鍙紑绠卞嵆鐢紝
+ * @tutorial https://www.uviewui.com/components/swiper.html
+ * @property {String | Number} length 杞挱鐨勯暱搴︼紙榛樿 0 锛�
+ * @property {String | Number} current 褰撳墠澶勪簬娲诲姩鐘舵�佺殑杞挱鐨勭储寮曪紙榛樿 0 锛�
+ * @property {String} indicatorActiveColor 鎸囩ず鍣ㄩ潪婵�娲婚鑹�
+ * @property {String} indicatorInactiveColor 鎸囩ず鍣ㄧ殑婵�娲婚鑹�
+ * @property {String} indicatorMode 鎸囩ず鍣ㄦā寮忥紙榛樿 'line' 锛�
+ * @example <u-swiper :list="list4" indicator keyName="url" :autoplay="false"></u-swiper>
+ */
+ export default {
+ name: 'u-swiper-indicator',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+ lineWidth: 22
+ }
+ },
+ computed: {
+ // 鎸囩ず鍣ㄤ负绾垮瀷鐨勬牱寮�
+ lineStyle() {
+ let style = {}
+ style.width = uni.$u.addUnit(this.lineWidth)
+ style.transform = `translateX(${ uni.$u.addUnit(this.current * this.lineWidth) })`
+ style.backgroundColor = this.indicatorActiveColor
+ return style
+ },
+ // 鎸囩ず鍣ㄤ负鐐瑰瀷鐨勬牱寮�
+ dotStyle() {
+ return index => {
+ let style = {}
+ style.backgroundColor = index === this.current ? this.indicatorActiveColor : this.indicatorInactiveColor
+ return style
+ }
+ }
+ },
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ .u-swiper-indicator {
+
+ &__wrapper {
+ @include flex;
+
+ &--line {
+ border-radius: 100px;
+ height: 4px;
+
+ &__bar {
+ width: 22px;
+ height: 4px;
+ border-radius: 100px;
+ background-color: #FFFFFF;
+ transition: transform 0.3s;
+ }
+ }
+
+ &__dot {
+ width: 5px;
+ height: 5px;
+ border-radius: 100px;
+ margin: 0 4px;
+
+ &--active {
+ width: 12px;
+ }
+ }
+
+ }
+ }
+</style>
--
Gitblit v1.9.3