This topic describes the notice bar.
Property | Description | Type | Default value |
---|---|---|---|
Mode | Type of the notice, which can be: link or closable . |
String | ‘’ |
action | The notice shows text. | String | ‘’ |
actionCls | The notice shows the custom class of text. | String | ‘’ |
show | Whether to display the notice bar. | Boolean | true |
onClick | Callback when you tap the button. | () => void | - |
enableMarquee | Whether to enable the animation. | Boolean | false |
marqueeProps | marquee parameters, where loop indicates whether to loop, leading indicates a pause before the animation starts, trailing indicates an interval at animations when loop is true, and fps indicates the animation frame rate. |
Object<loop, leading, trailing, fps> | {loop: false, leading: 500, trailing: 800, fps: 40 } |
Sample code
{
"defaultTitle": "AntUI component library of the Mini Program",
"usingComponents": {
"notice": "mini-antui/es/notice/index"
}
}
<view class="demo-title">Notice bar</view>
<view class="demo-item">
<notice>Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
<view class="demo-item">
<notice mode="link" onClick="linkClick">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
<view class="demo-item">
<notice mode="closable" onClick="closableClick" show="{{closeShow}}">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
<view class="demo-item">
<notice mode="link" action="Check it out" onClick="linkActionClick">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
<view class="demo-item">
<notice mode="closable" action="Don't remind again" onClick="closableActionClick" show="{{closeActionShow}}">Due to the upgrade of the national citizenship system, please add a bank card.</notice>
</view>
Page({
data:{
closeShow:true,
closeActionShow:true
},
linkClick() {
my.showToast({
content: 'You have tapped the icon Link NoticeBar',
duration: 3000
});
},
closableClick() {
this.setData({
closeShow:false
})
my.showToast({
content: ''You have tapped the icon close NoticeBar',
duration: 3000
});
},
linkActionClick() {
my.showToast({
content: 'You have tapped the text Link NoticeBar',
duration: 3000
});
},
closableActionClick() {
this.setData({
closeActionShow:false
})
my.showToast({
content: 'You have tapped the text close NoticeBar',
duration: 3000
});
}
})