ui(uni-notice-bar)

IxsCN · Oct 26, 2021 · af3efbf · af3efbf
1 parent d87b5b9
commit af3efbf
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 83 deletions.
diff --git a/App.vue b/App.vue
@@ -3,6 +3,9 @@
 export default {
 	onLaunch: function() {
 		console.log('App Launch');
+		uni.navigateTo({
+				url: 'pages/vue/notice-bar/notice-bar'
+			})
 	},
 	onShow: function() {
 		console.log('App Show');

diff --git a/pages/vue/notice-bar/notice-bar.vue b/pages/vue/notice-bar/notice-bar.vue
@@ -1,42 +1,25 @@
 <template>
 	<view class="fixforpc-window">
 		<text class="example-info">通告栏组件多用于系统通知，广告通知等场景，可自定义图标，颜色，展现方式等。</text>
-		<uni-section title="基本用法" type="line"></uni-section>
-		<view class="example-body">
-			<uni-notice-bar :single="true" text="[单行] uni-app 1.6发布，开发一次、7端覆盖！" />
-			<uni-notice-bar text="[多行] uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
-		</view>
-		<uni-section title="加图标" type="line"></uni-section>
-		<view class="example-body">
-			<uni-notice-bar :single="true" :show-icon="true" text="uni-app行业峰会频频亮相，开发者反响热烈!" />
-			<uni-notice-bar :show-icon="true" text="8月12日DCloud受邀参加iWEB峰会后，9月19日DCloud CEO 王安在千人小程序峰会——见实大会，做了主题为《App和小程序，鱼与熊掌如何兼得？》的分享。" />
-		</view>
-		<uni-section title="文字滚动" type="line"></uni-section>
-		<view class="example-body">
-			<uni-notice-bar :scrollable="true" :single="true" text="uni-app行业峰会频频亮相，开发者反响热烈!" />
-			<uni-notice-bar :show-icon="true" :scrollable="true" :single="true" text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
-			<uni-notice-bar :scrollable="true" text="8月12日DCloud受邀参加iWEB峰会后，9月19日DCloud CEO 王安在千人小程序峰会——见实大会，做了主题为《App和小程序，鱼与熊掌如何兼得？》的分享。" />
-		</view>
-		<uni-section title="查看更多" type="line"></uni-section>
-		<view class="example-body">
-			<uni-notice-bar :show-get-more="true" :single="true" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！" @getmore="getMore" />
-			<uni-notice-bar :show-get-more="true" :show-icon="true" :single="true" more-text="查看更多" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
-			 @getmore="getMore" />
-		</view>
-		<uni-section title="修改颜色" type="line"></uni-section>
-		<view class="example-body">
-			<uni-notice-bar :single="true" more-text="查看更多" color="red" background-color="#eee" text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
-			<uni-notice-bar :single="true" :show-get-more="true" more-text="查看更多" more-color="blue" color="red" background-color="#eee"
-			 text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" @getmore="getMore" />
-			<uni-notice-bar :show-icon="true" color="blue" text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
-		</view>
-		<uni-section title="关闭按钮" type="line"></uni-section>
-		<view class="example-body">
-			<uni-notice-bar :show-close="true" :single="true" text="HBuilderX 1.0正式发布！uni-app实现里程碑突破！" />
-			<uni-notice-bar :show-close="true" :show-icon="true" more-text="查看更多" text="HBuilderX 1.0正式发布！uni-app实现里程碑突破！" />
-			<uni-notice-bar :show-close="true" :show-icon="true" text="uni-app 1.6发布，开发一次、7端覆盖！" />
-			<uni-notice-bar :show-close="true" :show-icon="true" :single="true" text="uni-app 1.6版正式发布，开发一次，同时发布到iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
-		</view>
+		<uni-section title="基本用法" type="line">
+			<uni-notice-bar :single="true" text="[单行] uni-app 1.6发布，开发一次、7端覆盖！" />
+		</uni-section>
+		<uni-section title="加图标" type="line">
+			<uni-notice-bar :show-icon="true" text="uni-app 1.6发布，开发一次、7端覆盖！" />
+		</uni-section>
+		<uni-section title="文字滚动" type="line">
+			<uni-notice-bar :show-icon="true" :scrollable="true" :single="true" text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
+		</uni-section>
+		<uni-section title="查看更多" type="line">
+			<uni-notice-bar :show-get-more="true" :show-icon="true" :single="true" more-text="查看更多" text="年末大礼：uni-app1.4 新增百度、支付宝小程序。插件市场重磅上线！"
+			 @getmore="getMore" />
+		</uni-section>
+		<uni-section title="修改颜色" type="line">
+			<uni-notice-bar :single="true" more-text="查看更多" color="red" background-color="#eee" text="uni-app 1.6版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
+		</uni-section>
+		<uni-section title="关闭按钮" type="line">
+			<uni-notice-bar :show-close="true" :single="true" text="HBuilderX 1.0正式发布！uni-app实现里程碑突破！" />
+		</uni-section>
 	</view>
 </template>
 

diff --git a/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue b/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue
@@ -1,26 +1,31 @@
 <template>
 	<view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
 		<!-- #ifdef MP-ALIPAY -->
-		<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" @click="close">
+		<view v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point"
+			@click="close">
 			<uni-icons type="closeempty" :color="color" size="12" />
 		</view>
 		<view v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon">
 			<uni-icons type="sound" :color="color" size="14" />
 		</view>
 		<!-- #endif -->
 		<!-- #ifndef MP-ALIPAY -->
-		<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point" type="closeempty" :color="color"
-		 size="12" @click="close" />
-		<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound" :color="color"
-		 size="14" />
+		<uni-icons v-if="showClose === true || showClose === 'true'" class="uni-noticebar-close uni-cursor-point"
+			type="closeempty" :color="color" size="12" @click="close" />
+		<uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound"
+			:color="color" size="14" />
 		<!-- #endif -->
-		<view ref="textBox" class="uni-noticebar__content-wrapper" :class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
-			<view :id="elIdBox" class="uni-noticebar__content" :class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
-				<text :id="elId" ref="animationEle" class="uni-noticebar__content-text" :class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}"
-				 :style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
+		<view ref="textBox" class="uni-noticebar__content-wrapper"
+			:class="{'uni-noticebar__content-wrapper--scrollable':scrollable, 'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)}">
+			<view :id="elIdBox" class="uni-noticebar__content"
+				:class="{'uni-noticebar__content--scrollable':scrollable, 'uni-noticebar__content--single':!scrollable && (single || moreText)}">
+				<text :id="elId" ref="animationEle" class="uni-noticebar__content-text"
+					:class="{'uni-noticebar__content-text--scrollable':scrollable,'uni-noticebar__content-text--single':!scrollable && (single || moreText)}"
+					:style="{color:color, width:wrapWidth+'px', 'animationDuration': animationDuration, '-webkit-animationDuration': animationDuration ,animationPlayState: webviewHide?'paused':animationPlayState,'-webkit-animationPlayState':webviewHide?'paused':animationPlayState, animationDelay: animationDelay, '-webkit-animationDelay':animationDelay}">{{text}}</text>
 			</view>
 		</view>
-		<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point" @click="clickMore">
+		<view v-if="showGetMore === true || showGetMore === 'true'" class="uni-noticebar__more uni-cursor-point"
+			@click="clickMore">
 			<text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
 			<uni-icons type="arrowright" :color="moreColor" size="14" />
 		</view>
@@ -31,31 +36,31 @@
 	// #ifdef APP-NVUE
 	const dom = weex.requireModule('dom');
 	const animation = weex.requireModule('animation');
-	// #endif
-
-	/**
-	 * NoticeBar 自定义导航栏
-	 * @description 通告栏组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=30
-	 * @property {Number} speed 文字滚动的速度，默认100px/秒
-	 * @property {String} text 显示文字
-	 * @property {String} backgroundColor 背景颜色
-	 * @property {String} color 文字颜色
-	 * @property {String} moreColor 查看更多文字的颜色
-	 * @property {String} moreText 设置“查看更多”的文本
-	 * @property {Boolean} single = [true|false] 是否单行
-	 * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
-	 * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
-	 * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
-	 * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
-	 * @event {Function} click 点击 NoticeBar 触发事件
-	 * @event {Function} close 关闭 NoticeBar 触发事件
-	 * @event {Function} getmore 点击”查看更多“时触发事件
-	 */
+	// #endif
+
+	/**
+	 * NoticeBar 自定义导航栏
+	 * @description 通告栏组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=30
+	 * @property {Number} speed 文字滚动的速度，默认100px/秒
+	 * @property {String} text 显示文字
+	 * @property {String} backgroundColor 背景颜色
+	 * @property {String} color 文字颜色
+	 * @property {String} moreColor 查看更多文字的颜色
+	 * @property {String} moreText 设置“查看更多”的文本
+	 * @property {Boolean} single = [true|false] 是否单行
+	 * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
+	 * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
+	 * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
+	 * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
+	 * @event {Function} click 点击 NoticeBar 触发事件
+	 * @event {Function} close 关闭 NoticeBar 触发事件
+	 * @event {Function} getmore 点击”查看更多“时触发事件
+	 */
 
 	export default {
 		name: 'UniNoticeBar',
-		emits:['click','getmore','close'],
+		emits: ['click', 'getmore', 'close'],
 		props: {
 			text: {
 				type: String,
@@ -67,7 +72,7 @@
 			},
 			backgroundColor: {
 				type: String,
-				default: '#fffbe8'
+				default: '#FFF9EA'
 			},
 			speed: {
 				// 默认1s滚动100px
@@ -132,10 +137,10 @@
 			var pages = getCurrentPages();
 			var page = pages[pages.length - 1];
 			var currentWebview = page.$getAppWebview();
-			currentWebview.addEventListener('hide',()=>{
+			currentWebview.addEventListener('hide', () => {
 				this.webviewHide = true
 			})
-			currentWebview.addEventListener('show',()=>{
+			currentWebview.addEventListener('show', () => {
 				this.webviewHide = false
 			})
 			// #endif
@@ -156,9 +161,9 @@
 						boxWidth = 0,
 						textWidth = 0;
 					let textQuery = new Promise((resolve, reject) => {
-						uni.createSelectorQuery()
+						uni.createSelectorQuery()
 							// #ifndef MP-ALIPAY
-							.in(this)
+							.in(this)
 							// #endif
 							.select(`#${this.elId}`)
 							.boundingClientRect()
@@ -168,9 +173,9 @@
 							})
 					})
 					let boxQuery = new Promise((resolve, reject) => {
-						uni.createSelectorQuery()
+						uni.createSelectorQuery()
 							// #ifndef MP-ALIPAY
-							.in(this)
+							.in(this)
 							// #endif
 							.select(`#${this.elIdBox}`)
 							.boundingClientRect()
@@ -267,7 +272,6 @@
 </script>
 
 <style lang="scss" scoped>
-
 	.uni-noticebar {
 		/* #ifndef APP-NVUE */
 		display: flex;
@@ -278,12 +282,12 @@
 		align-items: center;
 		padding: 6px 12px;
 		margin-bottom: 10px;
-	}
-
-	.uni-cursor-point {
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
+	}
+
+	.uni-cursor-point {
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
 	}
 
 	.uni-noticebar-close {
@@ -316,6 +320,7 @@
 		position: relative;
 		height: 18px;
 	}
+
 	/* #endif */
 
 	.uni-noticebar__content--scrollable {
@@ -395,4 +400,4 @@
 			transform: translate3d(-100%, 0, 0);
 		}
 	}
-</style>
+</style>