#

whycq

2023-11-01 3f188253e8ce35fc403dd38c666e6246e589b742

 uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue

New file
@@ -0,0 +1,395 @@
<template>
   <view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
      <uni-icons v-if="showIcon === true || showIcon === 'true'" class="uni-noticebar-icon" type="sound"
         :color="color" size="22" />
      <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 || showGetMore)}"
               :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">
         <text v-if="moreText.length > 0" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
         <uni-icons v-else type="right" :color="moreColor" size="16" />
      </view>
      <view class="uni-noticebar-close uni-cursor-point" v-if="(showClose === true || showClose === 'true') && (showGetMore === false || showGetMore === 'false')">
         <uni-icons
            type="closeempty" :color="color" size="16" @click="close" />
      </view>
   </view>
</template>

<script>
   // #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 点击”查看更多“时触发事件
    */

   export default {
      name: 'UniNoticeBar',
      emits: ['click', 'getmore', 'close'],
      props: {
         text: {
            type: String,
            default: ''
         },
         moreText: {
            type: String,
            default: ''
         },
         backgroundColor: {
            type: String,
            default: '#FFF9EA'
         },
         speed: {
            // 默认1s滚动100px
            type: Number,
            default: 100
         },
         color: {
            type: String,
            default: '#FF9A43'
         },
         moreColor: {
            type: String,
            default: '#FF9A43'
         },
         single: {
            // 是否单行
            type: [Boolean, String],
            default: false
         },
         scrollable: {
            // 是否滚动，添加后控制单行效果取消
            type: [Boolean, String],
            default: false
         },
         showIcon: {
            // 是否显示左侧icon
            type: [Boolean, String],
            default: false
         },
         showGetMore: {
            // 是否显示右侧查看更多
            type: [Boolean, String],
            default: false
         },
         showClose: {
            // 是否显示左侧关闭按钮
            type: [Boolean, String],
            default: false
         }
      },
      data() {
         const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
         const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
         return {
            textWidth: 0,
            boxWidth: 0,
            wrapWidth: '',
            webviewHide: false,
            // #ifdef APP-NVUE
            stopAnimation: false,
            // #endif
            elId: elId,
            elIdBox: elIdBox,
            show: true,
            animationDuration: 'none',
            animationPlayState: 'paused',
            animationDelay: '0s'
         }
      },
      mounted() {
         // #ifdef APP-PLUS
         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.$nextTick(() => {
            this.initSize()
         })
      },
      // #ifdef APP-NVUE
      beforeDestroy() {
         this.stopAnimation = true
      },
      // #endif
      methods: {
         initSize() {
            if (this.scrollable) {
               // #ifndef APP-NVUE
               let query = [],
                  boxWidth = 0,
                  textWidth = 0;
               let textQuery = new Promise((resolve, reject) => {
                  uni.createSelectorQuery()
                     // #ifndef MP-ALIPAY
                     .in(this)
                     // #endif
                     .select(`#${this.elId}`)
                     .boundingClientRect()
                     .exec(ret => {
                        this.textWidth = ret[0].width
                        resolve()
                     })
               })
               let boxQuery = new Promise((resolve, reject) => {
                  uni.createSelectorQuery()
                     // #ifndef MP-ALIPAY
                     .in(this)
                     // #endif
                     .select(`#${this.elIdBox}`)
                     .boundingClientRect()
                     .exec(ret => {
                        this.boxWidth = ret[0].width
                        resolve()
                     })
               })
               query.push(textQuery)
               query.push(boxQuery)
               Promise.all(query).then(() => {
                  this.animationDuration = `${this.textWidth / this.speed}s`
                  this.animationDelay = `-${this.boxWidth / this.speed}s`
                  setTimeout(() => {
                     this.animationPlayState = 'running'
                  }, 1000)
               })
               // #endif
               // #ifdef APP-NVUE
               dom.getComponentRect(this.$refs['animationEle'], (res) => {
                  let winWidth = uni.getSystemInfoSync().windowWidth
                  this.textWidth = res.size.width
                  animation.transition(this.$refs['animationEle'], {
                     styles: {
                        transform: `translateX(-${winWidth}px)`
                     },
                     duration: 0,
                     timingFunction: 'linear',
                     delay: 0
                  }, () => {
                     if (!this.stopAnimation) {
                        animation.transition(this.$refs['animationEle'], {
                           styles: {
                              transform: `translateX(-${this.textWidth}px)`
                           },
                           timingFunction: 'linear',
                           duration: (this.textWidth - winWidth) / this.speed * 1000,
                           delay: 1000
                        }, () => {
                           if (!this.stopAnimation) {
                              this.loopAnimation()
                           }
                        });
                     }
                  });
               })
               // #endif
            }
            // #ifdef APP-NVUE
            if (!this.scrollable && (this.single || this.moreText)) {
               dom.getComponentRect(this.$refs['textBox'], (res) => {
                  this.wrapWidth = res.size.width
               })
            }
            // #endif
         },
         loopAnimation() {
            // #ifdef APP-NVUE
            animation.transition(this.$refs['animationEle'], {
               styles: {
                  transform: `translateX(0px)`
               },
               duration: 0
            }, () => {
               if (!this.stopAnimation) {
                  animation.transition(this.$refs['animationEle'], {
                     styles: {
                        transform: `translateX(-${this.textWidth}px)`
                     },
                     duration: this.textWidth / this.speed * 1000,
                     timingFunction: 'linear',
                     delay: 0
                  }, () => {
                     if (!this.stopAnimation) {
                        this.loopAnimation()
                     }
                  });
               }
            });
            // #endif
         },
         clickMore() {
            this.$emit('getmore')
         },
         close() {
            this.show = false;
            this.$emit('close')
         },
         onClick() {
            this.$emit('click')
         }
      }
   }
</script>

<style lang="scss" scoped>
   .uni-noticebar {
      /* #ifndef APP-NVUE */
      display: flex;
      width: 100%;
      box-sizing: border-box;
      /* #endif */
      flex-direction: row;
      align-items: center;
      padding: 10px 12px;
      margin-bottom: 10px;
   }

   .uni-cursor-point {
      /* #ifdef H5 */
      cursor: pointer;
      /* #endif */
   }

   .uni-noticebar-close {
      margin-left: 8px;
      margin-right: 5px;
   }

   .uni-noticebar-icon {
      margin-right: 5px;
   }

   .uni-noticebar__content-wrapper {
      flex: 1;
      flex-direction: column;
      overflow: hidden;
   }

   .uni-noticebar__content-wrapper--single {
      /* #ifndef APP-NVUE */
      line-height: 18px;
      /* #endif */
   }

   .uni-noticebar__content-wrapper--single,
   .uni-noticebar__content-wrapper--scrollable {
      flex-direction: row;
   }

   /* #ifndef APP-NVUE */
   .uni-noticebar__content-wrapper--scrollable {
      position: relative;
      height: 18px;
   }

   /* #endif */

   .uni-noticebar__content--scrollable {
      /* #ifdef APP-NVUE */
      flex: 0;
      /* #endif */
      /* #ifndef APP-NVUE */
      flex: 1;
      display: block;
      overflow: hidden;
      /* #endif */
   }

   .uni-noticebar__content--single {
      /* #ifndef APP-NVUE */
      display: flex;
      flex: none;
      width: 100%;
      justify-content: center;
      /* #endif */
   }

   .uni-noticebar__content-text {
      font-size: 14px;
      line-height: 18px;
      /* #ifndef APP-NVUE */
      word-break: break-all;
      /* #endif */
   }

   .uni-noticebar__content-text--single {
      /* #ifdef APP-NVUE */
      lines: 1;
      /* #endif */
      /* #ifndef APP-NVUE */
      display: block;
      width: 100%;
      white-space: nowrap;
      /* #endif */
      overflow: hidden;
      text-overflow: ellipsis;
   }

   .uni-noticebar__content-text--scrollable {
      /* #ifdef APP-NVUE */
      lines: 1;
      padding-left: 750rpx;
      /* #endif */
      /* #ifndef APP-NVUE */
      position: absolute;
      display: block;
      height: 18px;
      line-height: 18px;
      white-space: nowrap;
      padding-left: 100%;
      animation: notice 10s 0s linear infinite both;
      animation-play-state: paused;
      /* #endif */
   }

   .uni-noticebar__more {
      /* #ifndef APP-NVUE */
      display: inline-flex;
      /* #endif */
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      padding-left: 5px;
   }

   .uni-noticebar__more-text {
      font-size: 14px;
   }

   @keyframes notice {
      100% {
         transform: translate3d(-100%, 0, 0);
      }
   }
</style>