百度智能小程序 跑馬燈

2020-09-03 16:21 更新

notice-bar 跑馬燈

解釋: 跑馬燈組件,可配置跑馬燈內(nèi)容,跑馬燈樣式,跑馬燈滾動狀態(tài)以及滾動配置。適用于提示引導(dǎo),并可放置在頁面的任何位置。

屬性說明

屬性名 類型 必填 默認(rèn)值 說明

text

String

跑馬燈文本

icon

Boolean

true

是否展示跑馬燈尾部icon圖標(biāo)

iconName

String

delete

展示的icon圖標(biāo)名稱

iconColor

String

#fa6400

展示的icon圖標(biāo)顏色

scroll

Boolean

true

跑馬燈是否滾動

delay

Number

1

跑馬燈滾動延時時間

speed

Number

50

跑馬燈每秒滾動速度

notice-bar-class

String

提供跑馬燈的擴(kuò)展樣式類,供開發(fā)者自定義組件樣式,可通過此class改變跑馬燈外層樣式

text-class

String

提供跑馬燈的擴(kuò)展樣式類,供開發(fā)者自定義組件樣式,可通過此class改變跑馬燈文本樣式

示例 

在開發(fā)者工具中打開


代碼示例

<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">默認(rèn)樣式</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>
Page({
    data: {
        noticeBarText: '跑馬燈內(nèi)容跑馬燈內(nèi)容跑馬燈內(nèi)容跑馬燈內(nèi)跑馬燈內(nèi)容跑馬燈內(nèi)容跑馬燈內(nèi)容跑馬燈內(nèi)',
        noticeBarText2: '跑馬燈內(nèi)容跑馬燈內(nèi)容跑馬燈內(nèi)容'
    }
});
.wrap {
    height: 100vh;
    background-color: #f5f5f5;
}

.content {
    padding-top: .2rem;
}

.smt-card-area {
    margin-top: 25.36rpx;
    background-color: #fff;
}

.card-panel {
    margin-top: 72.46rpx;
}

.card-panel:first-child {
    margin-top: 0;
}

.card-area {
    display: flex;
    margin: 90.58rpx 0 0;
    padding: 28.382rpx 30.797rpx;
    border: none;
    border-radius: 0;
    transition: background-color 200ms linear;
    align-items: center;
    justify-content: space-between;
}

.comp-wrap {
    margin-top: 25.362rpx;
}

.comp-last-content {
    padding-bottom: 0;
}

.comp-info-wrap {
    margin-bottom: 36.232rpx;
}

.comp-info-wrap:last-child {
    margin-bottom: 0;
}

.comp-title {
    margin-top: 10.87rpx;
    color: #999;
}

.comp-notice-bar {
    background-color: #679cfc !important;
}

.comp-notice-bar-text {
    color: #fff;
}
{
    "navigationBarTitleText": "跑馬燈",
    "navigationStyle": "default",
    "usingComponents": {
        "smt-notice-bar": "@smt-ui/component/src/notice-bar"
    }
}


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號