后浪云百度小程序教程：notice-bar 跑马灯

2022-7-9

notice-bar 跑马灯
- 属性说明
- 示例
  - 代码示例

notice-bar 跑马灯

解释：跑马灯组件，可配置跑马灯内容，跑马灯样式，跑马灯滚动状态以及滚动配置。适用于提示引导，并可放置在页面的任何位置。

属性说明

属性名	类型	必填	默认值	说明
text	String	否		跑马灯文本
icon	Boolean	否	true	是否展示跑马灯尾部 icon 图标
iconName	String	否	delete	展示的 icon 图标名称
iconColor	String	否	#fa6400	展示的 icon 图标颜色
scroll	Boolean	否	true	跑马灯是否滚动
delay	Number	否	1	跑马灯滚动延时时间
speed	Number	否	50	跑马灯每秒滚动速度
notice-bar-class	String	否		提供跑马灯的扩展样式类，供开发者自定义组件样式，可通过此 class 改变跑马灯外层样式
text-class	String	否		提供跑马灯的扩展样式类，供开发者自定义组件样式，可通过此 class 改变跑马灯文本样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="content">
  
  
   <view class="card-panel">
  
  
   <view class="mode-title">
  
  
   <view class="mode-title-line-left"></view>
  
  
   <view class="mode-title-text">默认样式</view>
  
  
   <view class="mode-title-line-right"></view>
  
  
   </view>
  
  
   <view class="comp-wrap">
  
  
   <smt-notice-bar bg-color="#fef5ef" text="{{noticeBarText}}"></smt-notice-bar>
  
  
   </view>
  
  
   </view>
  
  
   <view class="card-panel">
  
  
   <view class="mode-title">
  
  
   <view class="mode-title-line-left"></view>
  
  
   <view class="mode-title-text">可配样式</view>
  
  
   <view class="mode-title-line-right"></view>
  
  
   </view>
  
  
   <view class="comp-wrap">
  
  
   <smt-notice-bar
  
  
   text="{{noticeBarText2}}"
  
  
   icon-color="#fff"
  
  
   notice-bar-class="comp-notice-bar"
  
  
   text-class="comp-notice-bar-text"
  
  
   >
  
  
   </smt-notice-bar>
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
  </view>

作者：后浪云

链接：https://www.idc.net/help/185975/

文章版权归作者所有，未经允许请勿转载。

THE END