本文介绍通告栏(Notice)。
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
mode | String | 提示可选类型:link 、closable 。 |
“” |
action | String | 提示显示文本。 | “” |
actionCls | String | 提示显示文本的自定义 class。 | “” |
show | Boolean | 是否显示通告栏。 | true |
onClick | () => void | 点击按钮回调。 | – |
enableMarquee | Boolean | 是否开启动画。 | false |
marqueeProps | Object<loop, leading, trailing, fps> | marquee 参数,其中 loop 表示是否循环,leading 表示动画开启前停顿,trailing 表示 loop 为 true 时,动画间停顿,fps 表示动画帧率。 |
{loop: false, leading: 500, trailing: 800, fps: 40 } |
代码示例
{
"defaultTitle": "小程序 AntUI 组件库",
"usingComponents": {
"notice": "mini-antui/es/notice/index"
}
}
<view class="demo-title">NoticeBar 通告栏</view>
<view class="demo-item">
<notice>因全国公民身份系统升级,请添加银行卡。</notice>
</view>
<view class="demo-item">
<notice mode="link" onClick="linkClick">因全国公民身份系统升级,请添加银行卡。</notice>
</view>
<view class="demo-item">
<notice mode="closable" onClick="closableClick" show="{{closeShow}}">因全国公民身份系统升级,请添加银行。卡</notice>
</view>
<view class="demo-item">
<notice mode="link" action="去看看" onClick="linkActionClick">因全国公民身份系统升级,请添加银行卡。</notice>
</view>
<view class="demo-item">
<notice mode="closable" action="不再提示" onClick="closableActionClick" show="{{closeActionShow}}">因全国公民身份系统升级,请添加银行卡。</notice>
</view>
Page({
data:{
closeShow:true,
closeActionShow:true
},
linkClick() {
my.showToast({
content: '你点击了图标Link NoticeBar',
duration: 3000
});
},
closableClick() {
this.setData({
closeShow:false
})
my.showToast({
content: '你点击了图标 close NoticeBar',
duration: 3000
});
},
linkActionClick() {
my.showToast({
content: '你点击了文本 Link NoticeBar',
duration: 3000
});
},
closableActionClick() {
this.setData({
closeActionShow:false
})
my.showToast({
content: '你点击了文本 close NoticeBar',
duration: 3000
});
}
})