E_WeChat/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.wxml

<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />

<view
  wx:if="{{visible}}"
  style="{{_._style([style, customStyle])}}"
  class="{{classPrefix}} {{classPrefix}}--{{theme}} {{prefix}}-class"
>
  <!-- prefixIcon -->
  <view class="{{classPrefix}}__prefix-icon" bind:tap="clickPrefixIcon">
    <slot name="prefix-icon" />
    <template
      wx:if="{{_prefixIcon}}"
      is="icon"
      data="{{tClass: prefix + '-class-prefix-icon', ..._prefixIcon }}"
    ></template>
  </view>

  <!-- content -->
  <view class="{{classPrefix}}__content-wrap" bind:tap="clickContent">
    <!-- 垂直滚动通知：基于swiper实现，适用信息量短的多条公告消息，超出省略 -->
    <view wx:if="{{ direction === 'vertical' && _.isArray(content) }}">
      <swiper
        autoplay="true"
        vertical="true"
        circular="true"
        interval="2000"
        display-multiple-items="1"
        class="{{classPrefix}}__content--vertical"
      >
        <block wx:for="{{content}}" wx:key="index">
          <swiper-item>
            <view class="{{classPrefix}}__content--vertical-item"> {{item}} </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view
      wx:else
      class="{{classPrefix}}__content {{prefix}}-class-content {{ !marquee ? classPrefix + '__content-wrapable' : ''}}"
      animation="{{ animationData }}"
    >
      <block wx:if="{{content}}"> {{content}} </block>
      <slot name="content" />
    </view>
  </view>

  <!-- extra -->
  <view class="{{classPrefix}}__extra {{prefix}}-class-extra" bind:tap="clickExtra">
    <block wx:if="{{ extra }}"> {{extra}} </block>
    <slot name="extra" />
  </view>

  <!-- suffixIcon -->
  <view class="{{classPrefix}}__suffix-icon" bind:tap="clickSuffixIcon">
    <slot name="suffix-icon" />
    <template
      wx:if="{{_suffixIcon}}"
      is="icon"
      data="{{tClass: prefix + '-class-suffix-icon', ..._suffixIcon }}"
    ></template>
  </view>
</view>