pco/app/uview-ui/components/u-column-notice/u-column-notice.vue

<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>
    <swiper
        :disable-touch="disableTouch"
        :vertical="step ? false : true"
        circular
        :interval="duration"
        :autoplay="true"
        class="u-notice__swiper"
        @change="noticeChange"
    >
      <swiper-item
          v-for="(item, index) in text"
          :key="index"
          class="u-notice__swiper__item"
      >
        <text
            class="u-notice__swiper__item__text u-line-1"
            :style="[textStyle]"
        >{{ item }}
        </text>
      </swiper-item>
    </swiper>
    <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'"
          name="close"
          :size="16"
          :color="color"
          @click="close"
      ></u-icon>
    </view>
  </view>
</template>

<script>
import props from './props.js';

/**
 * ColumnNotice 滚动通知中的垂直滚动 内部组件
 * @description 该组件用于滚动通告场景，是其中的垂直滚动方式
 * @tutorial https://www.uviewui.com/components/noticeBar.html
 * @property {Array}      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 ）
 * @property {Boolean}      step      direction = row时，是否使用步进形式滚动 （ 默认 false ）
 * @property {String | Number}  duration    滚动一个周期的时间长，单位ms （ 默认 1500 ）
 * @property {Boolean}      disableTouch  是否禁止用手滑动切换   目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 （ 默认 true ）
 * @example
 */
export default {
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  watch: {
    text: {
      immediate: true,
      handler(newValue, oldValue) {
        if (!uni.$u.test.array(newValue)) {
          uni.$u.error('noticebar组件direction为column时，要求text参数为数组形式')
        }
      }
    }
  },
  computed: {
    // 文字内容的样式
    textStyle() {
      let style = {}
      style.color = this.color
      style.fontSize = uni.$u.addUnit(this.fontSize)
      return style
    },
    // 垂直或者水平滚动
    vertical() {
      if (this.mode == 'horizontal') return false
      else return true
    },
  },
  data() {
    return {
      index: 0
    }
  },
  methods: {
    noticeChange(e) {
      this.index = e.detail.current
    },
    // 点击通告栏
    clickHandler() {
      this.$emit('click', this.index)
    },
    // 点击关闭按钮
    close() {
      this.$emit('close')
    }
  }
};
</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;
  }

  &__swiper {
    height: 16px;
    @include flex;
    align-items: center;
    flex: 1;

    &__item {
      @include flex;
      align-items: center;
      overflow: hidden;

      &__text {
        font-size: 14px;
        color: $u-warning;
      }
    }
  }
}
</style>