W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗(yàn)值獎勵
解釋: 跑馬燈組件,可配置跑馬燈內(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改變跑馬燈文本樣式 |
<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"
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: