From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目

---
 uview-ui/components/u-notice-bar/u-notice-bar.vue |  272 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 272 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-notice-bar/u-notice-bar.vue b/uview-ui/components/u-notice-bar/u-notice-bar.vue
new file mode 100644
index 0000000..41a6cc4
--- /dev/null
+++ b/uview-ui/components/u-notice-bar/u-notice-bar.vue
@@ -0,0 +1,272 @@
+<template>
+	<view class="u-notice-bar-wrap" v-if="isShow" :style="{
+		borderRadius: borderRadius + 'rpx',
+	}">
+		<block v-if="mode == 'horizontal' && isCircular">
+			<u-row-notice
+				:type="type"
+				:color="color"
+				:bgColor="bgColor"
+				:list="list"
+				:volumeIcon="volumeIcon"
+				:moreIcon="moreIcon"
+				:volumeSize="volumeSize"
+				:closeIcon="closeIcon"
+				:mode="mode"
+				:fontSize="fontSize"
+				:speed="speed"
+				:playState="playState"
+				:padding="padding"
+				@getMore="getMore"
+				@close="close"
+				@click="click"
+			></u-row-notice>
+		</block>
+		<block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)">
+			<u-column-notice
+				:type="type"
+				:color="color"
+				:bgColor="bgColor"
+				:list="list"
+				:volumeIcon="volumeIcon"
+				:moreIcon="moreIcon"
+				:closeIcon="closeIcon"
+				:mode="mode"
+				:volumeSize="volumeSize"
+				:disable-touch="disableTouch"
+				:fontSize="fontSize"
+				:duration="duration"
+				:playState="playState"
+				:padding="padding"
+				@getMore="getMore"
+				@close="close"
+				@click="click"
+				@end="end"
+			></u-column-notice>
+		</block>
+	</view>
+</template>
+<script>
+/**
+ * noticeBar 婊氬姩閫氱煡
+ * @description 璇ョ粍浠剁敤浜庢粴鍔ㄩ�氬憡鍦烘櫙锛屾湁澶氱妯″紡鍙緵閫夋嫨
+ * @tutorial https://www.uviewui.com/components/noticeBar.html
+ * @property {Array} list 婊氬姩鍐呭锛屾暟缁勫舰寮忥紝瑙佷笂鏂硅鏄�
+ * @property {String} type 鏄剧ず鐨勪富棰橈紙榛樿warning锛�
+ * @property {Boolean} volume-icon 鏄惁鏄剧ず灏忓枃鍙浘鏍囷紙榛樿true锛�
+ * @property {Boolean} more-icon 鏄惁鏄剧ず鍙宠竟鐨勫悜鍙崇澶达紙榛樿false锛�
+ * @property {Boolean} close-icon 鏄惁鏄剧ず鍏抽棴鍥炬爣锛堥粯璁alse锛�
+ * @property {Boolean} autoplay 鏄惁鑷姩鎾斁锛堥粯璁rue锛�
+ * @property {String} color 鏂囧瓧棰滆壊
+ * @property {String Number} bg-color 鑳屾櫙棰滆壊
+ * @property {String} mode 婊氬姩妯″紡锛堥粯璁orizontal锛�
+ * @property {Boolean} show 鏄惁鏄剧ず锛堥粯璁rue锛�
+ * @property {String Number} font-size 瀛椾綋澶у皬锛屽崟浣峳px锛堥粯璁�28锛�
+ * @property {String Number} volume-size 宸﹁竟鍠囧彮鐨勫ぇ灏忥紙榛樿34锛�
+ * @property {String Number} duration 婊氬姩鍛ㄦ湡鏃堕暱锛屽彧瀵规杩涙ā寮忔湁鏁堬紝妯悜琛旀帴妯″紡鏃犳晥锛屽崟浣峬s锛堥粯璁�2000锛�
+ * @property {String Number} speed 姘村钩婊氬姩鏃剁殑婊氬姩閫熷害锛屽嵆姣忕绉诲姩澶氬皯璺濈锛屽彧瀵规按骞宠鎺ユ柟寮忔湁鏁堬紝鍗曚綅rpx锛堥粯璁�160锛�
+ * @property {String Number} font-size 瀛椾綋澶у皬锛屽崟浣峳px锛堥粯璁�28锛�
+ * @property {Boolean} is-circular mode涓篽orizontal鏃讹紝鎸囨槑鏄惁姘村钩琛旀帴婊氬姩锛堥粯璁rue锛�
+ * @property {String} play-state 鎾斁鐘舵�侊紝play - 鎾斁锛宲aused - 鏆傚仠锛堥粯璁lay锛�
+ * @property {String Nubmer} border-radius 閫氱煡鏍忓渾瑙掞紙榛樿涓�0锛�
+ * @property {String Nubmer} padding 鍐呰竟璺濓紝瀛楃涓诧紝涓庢櫘閫氱殑鍐呰竟璺漜ss鍐欐硶涓�鐩达紙榛樿"18rpx 24rpx"锛�
+ * @property {Boolean} no-list-hidden 鍒楄〃涓虹┖鏃讹紝鏄惁鏄剧ず缁勪欢锛堥粯璁alse锛�
+ * @property {Boolean} disable-touch 鏄惁绂佹閫氳繃鎵嬪姩婊戝姩鍒囨崲閫氱煡锛屽彧鏈塵ode = vertical锛屾垨鑰卪ode = horizontal涓攊s-circular = false鏃舵湁鏁堬紙榛樿true锛�
+ * @event {Function} click 鐐瑰嚮閫氬憡鏂囧瓧瑙﹀彂锛屽彧鏈塵ode = vertical锛屾垨鑰卪ode = horizontal涓攊s-circular = false鏃舵湁鏁�
+ * @event {Function} close 鐐瑰嚮鍙充晶鍏抽棴鍥炬爣瑙﹀彂
+ * @event {Function} getMore 鐐瑰嚮鍙充晶鍚戝彸鍥炬爣瑙﹀彂
+ * @event {Function} end 鍒楄〃鐨勬秷鎭瘡娆¤鎾斁涓�涓懆鏈熸椂瑙﹀彂锛屽彧鏈塵ode = vertical锛屾垨鑰卪ode = horizontal涓攊s-circular = false鏃舵湁鏁�
+ * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
+ */
+export default {
+	name: "u-notice-bar",
+	props: {
+		// 鏄剧ず鐨勫唴瀹癸紝鏁扮粍
+		list: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		// 鏄剧ず鐨勪富棰橈紝success|error|primary|info|warning
+		type: {
+			type: String,
+			default: 'warning'
+		},
+		// 鏄惁鏄剧ず宸︿晶鐨勯煶閲忓浘鏍�
+		volumeIcon: {
+			type: Boolean,
+			default: true
+		},
+		// 闊抽噺鍠囧彮鐨勫ぇ灏�
+		volumeSize: {
+			type: [Number, String],
+			default: 34
+		},
+		// 鏄惁鏄剧ず鍙充晶鐨勫彸绠ご鍥炬爣
+		moreIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 鏄惁鏄剧ず鍙充晶鐨勫叧闂浘鏍�
+		closeIcon: {
+			type: Boolean,
+			default: false
+		},
+		// 鏄惁鑷姩鎾斁
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 鏂囧瓧棰滆壊锛屽悇鍥炬爣涔熶細浣跨敤鏂囧瓧棰滆壊
+		color: {
+			type: String,
+			default: ''
+		},
+		// 鑳屾櫙棰滆壊
+		bgColor: {
+			type: String,
+			default: ''
+		},
+		// 婊氬姩鏂瑰悜锛宧orizontal-姘村钩婊氬姩锛寁ertical-鍨傜洿婊氬姩
+		mode: {
+			type: String,
+			default: 'horizontal'
+		},
+		// 鏄惁鏄剧ず
+		show: {
+			type: Boolean,
+			default: true
+		},
+		// 瀛椾綋澶у皬锛屽崟浣峳px
+		fontSize: {
+			type: [Number, String],
+			default: 28
+		},
+		// 婊氬姩涓�涓懆鏈熺殑鏃堕棿闀匡紝鍗曚綅ms
+		duration: {
+			type: [Number, String],
+			default: 2000
+		},
+		// 姘村钩婊氬姩鏃剁殑婊氬姩閫熷害锛屽嵆姣忕婊氬姩澶氬皯rpx锛岃繖鏈夊埄浜庢帶鍒舵枃瀛楁棤璁哄灏戞椂锛岄兘鑳芥湁涓�涓亽瀹氱殑閫熷害
+		speed: {
+			type: [Number, String],
+			default: 160
+		},
+		// 姘村钩婊氬姩鏃讹紝鏄惁閲囩敤琛旀帴褰㈠紡婊氬姩
+		// 姘村钩琛旀帴妯″紡锛岄噰鐢ㄧ殑鏄痵wiper缁勪欢锛屾按骞虫粴鍔�
+		isCircular: {
+			type: Boolean,
+			default: true
+		},
+		// 鎾斁鐘舵�侊紝play-鎾斁锛宲aused-鏆傚仠
+		playState: {
+			type: String,
+			default: 'play'
+		},
+		// 鏄惁绂佹鐢ㄦ墜婊戝姩鍒囨崲
+		// 鐩墠HX2.6.11锛屽彧鏀寔App 2.5.5+銆丠5 2.5.5+銆佹敮浠樺疂灏忕▼搴忋�佸瓧鑺傝烦鍔ㄥ皬绋嬪簭
+		disableTouch: {
+			type: Boolean,
+			default: true
+		},
+		// 婊氬姩閫氱煡璁剧疆鍦嗚
+		borderRadius: {
+			type: [Number, String],
+			default: 0
+		},
+		// 閫氱煡鐨勮竟璺�
+		padding: {
+			type: [Number, String],
+			default: '18rpx 24rpx'
+		},
+		// list鍒楄〃涓虹┖鏃讹紝鏄惁鏄剧ず缁勪欢
+		noListHidden: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		// 濡傛灉璁剧疆show涓篺alse锛屾垨鑰呰缃簡noListHidden涓簍rue锛屼笖list闀垮害鍙堜负闆剁殑璇濓紝闅愯棌缁勪欢
+		isShow() {
+			if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
+			else return true;
+		}
+	},
+	methods: {
+		// 鐐瑰嚮閫氬憡鏍�
+		click(index) {
+			this.$emit('click', index);
+		},
+		// 鐐瑰嚮鍏抽棴鎸夐挳
+		close() {
+			this.$emit('close');
+		},
+		// 鐐瑰嚮鏇村绠ご鎸夐挳
+		getMore() {
+			this.$emit('getMore');
+		},
+		// 婊氬姩涓�涓懆鏈熺粨鏉燂紝鍙鍨傜洿锛屾垨鑰呮按骞虫杩涘舰寮忔湁鏁�
+		end() {
+			this.$emit('end');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+
+.u-notice-bar-wrap {
+	overflow: hidden;
+}
+
+.u-notice-bar {
+	padding: 18rpx 24rpx;
+	overflow: hidden;
+}
+
+.u-direction-row {
+	@include vue-flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.u-left-icon {
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-notice-box {
+	flex: 1;
+	@include vue-flex;
+	overflow: hidden;
+	margin-left: 12rpx;
+}
+
+.u-right-icon {
+	margin-left: 12rpx;
+	@include vue-flex;
+	align-items: center;
+}
+
+.u-notice-content {
+	line-height: 1;
+	white-space: nowrap;
+	font-size: 26rpx;
+	animation: u-loop-animation 10s linear infinite both;
+	text-align: right;
+	// 杩欎竴鍙ュ緢閲嶈锛屼负浜嗚兘璁╂粴鍔ㄥ乏鍙宠繛鎺ヨ捣鏉�
+	padding-left: 100%;
+}
+
+@keyframes u-loop-animation {
+	0% {
+		transform: translate3d(0, 0, 0);
+	}
+
+	100% {
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+</style>

--
Gitblit v1.9.3