From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue | 330 -------------------------------------------------------
1 files changed, 0 insertions(+), 330 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue b/minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
index 20f43c3..e69de29 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
@@ -1,330 +0,0 @@
-<template>
- <view
- class="u-notice"
- @tap="clickHandler"
- >
- <slot name="icon">
- <view
- class="u-notice__left-icon"
- v-if="icon"
- >
- <u-icon
- :name="icon"
- :color="color"
- size="19"
- ></u-icon>
- </view>
- </slot>
- <view
- class="u-notice__content"
- ref="u-notice__content"
- >
- <view
- ref="u-notice__content__text"
- class="u-notice__content__text"
- :style="[animationStyle]"
- >
- <text
- v-for="(item, index) in innerText"
- :key="index"
- :style="[textStyle]"
- >{{item}}</text>
- </view>
- </view>
- <view
- class="u-notice__right-icon"
- v-if="['link', 'closable'].includes(mode)"
- >
- <u-icon
- v-if="mode === 'link'"
- name="arrow-right"
- :size="17"
- :color="color"
- ></u-icon>
- <u-icon
- v-if="mode === 'closable'"
- @click="close"
- name="close"
- :size="16"
- :color="color"
- ></u-icon>
- </view>
- </view>
-</template>
-<script>
- import props from './props.js';
- // #ifdef APP-NVUE
- const animation = uni.requireNativePlugin('animation')
- const dom = uni.requireNativePlugin('dom')
- // #endif
- /**
- * RowNotice 婊氬姩閫氱煡涓殑姘村钩婊氬姩妯″紡
- * @description 姘村钩婊氬姩
- * @tutorial https://www.uviewui.com/components/noticeBar.html
- * @property {String | Number} text 鏄剧ず鐨勫唴瀹癸紝瀛楃涓�
- * @property {String} icon 鏄惁鏄剧ず宸︿晶鐨勯煶閲忓浘鏍� (榛樿 'volume' )
- * @property {String} mode 閫氬憡妯″紡锛宭ink-鏄剧ず鍙崇澶达紝closable-鏄剧ず鍙充晶鍏抽棴鍥炬爣
- * @property {String} color 鏂囧瓧棰滆壊锛屽悇鍥炬爣涔熶細浣跨敤鏂囧瓧棰滆壊 (榛樿 '#f9ae3d' )
- * @property {String} bgColor 鑳屾櫙棰滆壊 (榛樿 ''#fdf6ec' )
- * @property {String | Number} fontSize 瀛椾綋澶у皬锛屽崟浣峱x (榛樿 14 )
- * @property {String | Number} speed 姘村钩婊氬姩鏃剁殑婊氬姩閫熷害锛屽嵆姣忕婊氬姩澶氬皯px(rpx)锛岃繖鏈夊埄浜庢帶鍒舵枃瀛楁棤璁哄灏戞椂锛岄兘鑳芥湁涓�涓亽瀹氱殑閫熷害 (榛樿 80 )
- *
- * @event {Function} click 鐐瑰嚮閫氬憡鏂囧瓧瑙﹀彂
- * @event {Function} close 鐐瑰嚮鍙充晶鍏抽棴鍥炬爣瑙﹀彂
- * @example
- */
- export default {
- name: 'u-row-notice',
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- data() {
- return {
- animationDuration: '0', // 鍔ㄧ敾鎵ц鏃堕棿
- animationPlayState: 'paused', // 鍔ㄧ敾鐨勫紑濮嬪拰缁撴潫鎵ц
- // nvue涓嬶紝鍐呭鍙戠敓鍙樺寲锛屽鑷存粴鍔ㄥ搴︿篃鍙樺寲锛岄渶瑕佹爣蹇椾负鏄惁闇�瑕侀噸鏂拌绠楀搴�
- // 涓嶈兘鍦ㄥ唴瀹瑰彉鍖栨椂鐩存帴閲嶆柊璁$畻锛屽洜涓簄vue鐨刟nimation妯″潡涓婁竴娆$殑婊氬姩涓嶆槸鍒氬ソ缁撴潫锛屼細鏈夊奖鍝�
- nvueInit: true,
- show: true
- };
- },
- watch: {
- text: {
- immediate: true,
- handler(newValue, oldValue) {
- // #ifdef APP-NVUE
- this.nvueInit = true
- // #endif
- // #ifndef APP-NVUE
- this.vue()
- // #endif
-
- if(!uni.$u.test.string(newValue)) {
- uni.$u.error('noticebar缁勪欢direction涓簉ow鏃讹紝瑕佹眰text鍙傛暟涓哄瓧绗︿覆褰㈠紡')
- }
- }
- },
- fontSize() {
- // #ifdef APP-NVUE
- this.nvueInit = true
- // #endif
- // #ifndef APP-NVUE
- this.vue()
- // #endif
- },
- speed() {
- // #ifdef APP-NVUE
- this.nvueInit = true
- // #endif
- // #ifndef APP-NVUE
- this.vue()
- // #endif
- }
- },
- computed: {
- // 鏂囧瓧鍐呭鐨勬牱寮�
- textStyle() {
- let style = {}
- style.color = this.color
- style.fontSize = uni.$u.addUnit(this.fontSize)
- return style
- },
- animationStyle() {
- let style = {}
- style.animationDuration = this.animationDuration
- style.animationPlayState = this.animationPlayState
- return style
- },
- // 鍐呴儴瀵圭敤鎴蜂紶鍏ョ殑鏁版嵁杩涗竴姝ュ垎鍓诧紝鏀惧埌澶氫釜text鏍囩寰幆锛屽惁鍒欏鏋滅敤鎴蜂紶鍏ョ殑瀛楃涓插緢闀匡紙100涓瓧绗︿互涓婏級
- // 鏀惧湪涓�涓猼ext鏍囩涓繘琛屾粴鍔紝鍦ㄤ綆绔畨鍗撴満涓婏紝鍔ㄧ敾鍙兘浼氬嚭鐜版姈鍔ㄧ幇璞★紝闇�瑕佸垎鍓插埌澶氫釜text涓彲瑙e喅姝ら棶棰�
- innerText() {
- let result = [],
- // 姣忕粍text鏍囩鐨勫瓧绗﹂暱搴�
- len = 20
- const textArr = this.text.split('')
- for (let i = 0; i < textArr.length; i += len) {
- // 瀵规媶鍒嗙殑鍚庣殑text杩涜slice鍒嗗壊锛屽緱鍒扮殑涓烘暟缁勫啀杩涜join鎷兼帴涓哄瓧绗︿覆
- result.push(textArr.slice(i, i + len).join(''))
- }
- return result
- }
- },
- mounted() {
- // #ifdef APP-PLUS
- // 鍦ˋPP涓�(鍚玭vue)锛岀洃鍚綋鍓峸ebview鏄惁澶勪簬闅愯棌鐘舵��(杩涘叆涓嬩竴椤垫椂鍗充负hide鐘舵��)
- // 濡傛灉webivew闅愯棌浜嗭紝涓轰簡鑺傜渷鎬ц兘鐨勬崯鑰楋紝搴斿仠姝㈠姩鐢荤殑鎵ц锛屽悓鏃朵篃鏄负浜嗕繚鎸佽繘鍏ヤ笅涓�椤佃繑鍥炲悗锛屾粴鍔ㄤ綅缃繚鎸佷笉鍙�
- var pages = getCurrentPages()
- var page = pages[pages.length - 1]
- var currentWebview = page.$getAppWebview()
- currentWebview.addEventListener('hide', () => {
- this.webviewHide = true
- })
- currentWebview.addEventListener('show', () => {
- this.webviewHide = false
- })
- // #endif
-
- this.init()
- },
- methods: {
- init() {
- // #ifdef APP-NVUE
- this.nvue()
- // #endif
-
- // #ifndef APP-NVUE
- this.vue()
- // #endif
-
- if(!uni.$u.test.string(this.text)) {
- uni.$u.error('noticebar缁勪欢direction涓簉ow鏃讹紝瑕佹眰text鍙傛暟涓哄瓧绗︿覆褰㈠紡')
- }
- },
- // vue鐗堝鐞�
- async vue() {
- // #ifndef APP-NVUE
- let boxWidth = 0,
- textWidth = 0
- // 杩涜涓�瀹氱殑寤舵椂
- await uni.$u.sleep()
- // 鏌ヨ鐩掑瓙鍜屾枃瀛楃殑瀹藉害
- textWidth = (await this.$uGetRect('.u-notice__content__text')).width
- boxWidth = (await this.$uGetRect('.u-notice__content')).width
- // 鏍规嵁t=s/v(鏃堕棿=璺▼/閫熷害)锛岃繖閲屼负浣曚笉闇�瑕佸姞涓�#u-notice-box鐨勫搴︼紝鍥犱负涓缃簡.u-notice-content鏍峰紡涓缃簡padding-left: 100%
- // 鎭板阀璁$畻鍑烘潵鐨勭粨鏋滀腑宸茬粡鍖呭惈浜�#u-notice-box鐨勫搴�
- this.animationDuration = `${textWidth / uni.$u.getPx(this.speed)}s`
- // 杩欓噷蹇呴』杩欐牱寮�濮嬪姩鐢伙紝鍚﹀垯鍦ˋPP涓婂姩鐢婚�熷害涓嶄細鏀瑰彉
- this.animationPlayState = 'paused'
- setTimeout(() => {
- this.animationPlayState = 'running'
- }, 10)
- // #endif
- },
- // nvue鐗堝鐞�
- async nvue() {
- // #ifdef APP-NVUE
- this.nvueInit = false
- let boxWidth = 0,
- textWidth = 0
- // 杩涜涓�瀹氱殑寤舵椂
- await uni.$u.sleep()
- // 鏌ヨ鐩掑瓙鍜屾枃瀛楃殑瀹藉害
- textWidth = (await this.getNvueRect('u-notice__content__text')).width
- boxWidth = (await this.getNvueRect('u-notice__content')).width
- // 灏嗘枃瀛楃Щ鍔ㄥ埌鐩掑瓙鐨勫彸杈规部锛屼箣鎵�浠ラ渶瑕佽繖涔堝仛锛屾槸鍥犱负nvue涓嶆敮鎸�100%鍗曚綅锛屽惁鍒欏彲浠ラ�氳繃css璁剧疆
- animation.transition(this.$refs['u-notice__content__text'], {
- styles: {
- transform: `translateX(${boxWidth}px)`
- },
- }, () => {
- // 濡傛灉闈炵姝㈠姩鐢伙紝鍒欏紑濮嬫粴鍔�
- !this.stopAnimation && this.loopAnimation(textWidth, boxWidth)
- });
- // #endif
- },
- loopAnimation(textWidth, boxWidth) {
- // #ifdef APP-NVUE
- animation.transition(this.$refs['u-notice__content__text'], {
- styles: {
- // 鐩爣绉诲姩缁堢偣涓�-textWidth锛屼篃鍗冲綋鏂囧瓧鐨勬渶鍙宠竟璐村埌鐩掑瓙鐨勫乏杈规鐨勪綅缃�
- transform: `translateX(-${textWidth}px)`
- },
- // 婊氬姩鏃堕棿鐨勮绠椾负锛屾椂闂� = 璺▼(boxWidth + textWidth) / 閫熷害锛屾渶鍚庤浆涓烘绉�
- duration: (boxWidth + textWidth) / uni.$u.getPx(this.speed) * 1000,
- delay: 10
- }, () => {
- animation.transition(this.$refs['u-notice__content__text'], {
- styles: {
- // 閲嶆柊灏嗘枃瀛楃Щ鍔ㄥ埌鐩掑瓙鐨勫彸杈规部
- transform: `translateX(${this.stopAnimation ? 0 : boxWidth}px)`
- },
- }, () => {
- // 濡傛灉闈炵姝㈠姩鐢伙紝鍒欑户缁笅涓�杞粴鍔�
- if (!this.stopAnimation) {
- // 鍒ゆ柇鏄惁闇�瑕佸垵濮嬪寲璁$畻灏哄
- if (this.nvueInit) {
- this.nvue()
- } else {
- this.loopAnimation(textWidth, boxWidth)
- }
- }
- });
- })
- // #endif
- },
- getNvueRect(el) {
- // #ifdef APP-NVUE
- // 杩斿洖涓�涓猵romise
- return new Promise(resolve => {
- dom.getComponentRect(this.$refs[el], (res) => {
- resolve(res.size)
- })
- })
- // #endif
- },
- // 鐐瑰嚮閫氬憡鏍�
- clickHandler(index) {
- this.$emit('click')
- },
- // 鐐瑰嚮鍙充晶鎸夐挳锛岄渶瑕佸垽鏂偣鍑荤殑鏄叧闂浘鏍囪繕鏄澶村浘鏍�
- close() {
- this.$emit('close')
- }
- },
- // #ifdef APP-NVUE
- beforeDestroy() {
- this.stopAnimation = true
- },
- // #endif
- };
-</script>
-
-<style lang="scss" scoped>
- @import "../../libs/css/components.scss";
-
- .u-notice {
- @include flex;
- align-items: center;
- justify-content: space-between;
-
- &__left-icon {
- align-items: center;
- margin-right: 5px;
- }
-
- &__right-icon {
- margin-left: 5px;
- align-items: center;
- }
-
- &__content {
- text-align: right;
- flex: 1;
- @include flex;
- flex-wrap: nowrap;
- overflow: hidden;
-
- &__text {
- font-size: 14px;
- color: $u-warning;
- /* #ifndef APP-NVUE */
- // 杩欎竴鍙ュ緢閲嶈锛屼负浜嗚兘璁╂粴鍔ㄥ乏鍙宠繛鎺ヨ捣鏉�
- padding-left: 100%;
- word-break: keep-all;
- white-space: nowrap;
- animation: u-loop-animation 10s linear infinite both;
- /* #endif */
- @include flex(row);
- }
- }
-
- }
-
- @keyframes u-loop-animation {
- 0% {
- transform: translate3d(0, 0, 0);
- }
-
- 100% {
- transform: translate3d(-100%, 0, 0);
- }
- }
-</style>
--
Gitblit v1.9.3