From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 20 Oct 2023 15:21:35 +0800
Subject: [PATCH] fix:立行立改Uniapp小程序新建项目
---
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.8.0