定位优化

quanyawei

2024-01-11 da25434b85fc5b4321c429bf95e719d00ec395bb

 uni_modules/uview-ui/components/u-row-notice/u-row-notice.vue

New file
@@ -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>