From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 06 Nov 2023 08:48:39 +0800
Subject: [PATCH] fix:小程序订阅消息
---
uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue | 330 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 330 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue b/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
new file mode 100644
index 0000000..20f43c3
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue
@@ -0,0 +1,330 @@
+<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 ���������������link-������������������closable-������������������������
+ * @property {String} color ������������������������������������������������ (������ '#f9ae3d' )
+ * @property {String} bgColor ������������ (������ ''#fdf6ec' )
+ * @property {String | Number} fontSize ���������������������px (������ 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������������������������������������������������������������������������������������������������������
+ // ���������������������������������������������������nvue���animation���������������������������������������������������������
+ 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���row������������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������������������
+ // ������������text���������������������������������������������������������������������������������������������������������text���������������������
+ 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
+ // ���APP���(���nvue)���������������webview������������������������(������������������������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���row������������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`
+ // ������������������������������������������APP���������������������������
+ 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
+ // ������������promise
+ 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.8.0