支付寶小程序引導(dǎo)組件 通告欄·Notice

當(dāng)應(yīng)用有重要公告或者由于用戶的刷新操作產(chǎn)生提示反饋時(shí)可以使用通告欄系統(tǒng)。通告欄不會(huì)對(duì)用戶瀏覽當(dāng)前頁面內(nèi)容產(chǎn)生影響，但又能明顯的引起用戶的注意。公告內(nèi)容不超過一行。

說明：

• 僅用于 UI 展示沒有對(duì)應(yīng)的業(yè)務(wù)邏輯功能；
• notice 為瀑布流布局不會(huì)定位到頁面頭部，用戶可以根據(jù)需求將它放在相應(yīng)位置。

掃碼體驗(yàn)

示例代碼

{
  "defaultTitle": "Notice",
  "usingComponents": {
    "notice": "mini-ali-ui/es/notice/index"
  }
}

<notice
  marqueeProps="{{marqueeProps}}"
  enableMarquee="{{true}}"
  show="{{true}}"
  type="error"
  mode="link"
  onClick="actionClick"
  actionLeft="文字按鈕"
  onClickLeft="linkActionClick">
  無限循環(huán)滾動(dòng)的通告欄展示情況。文字不夠繼續(xù)添加文字湊數(shù)。
</notice>
<notice
  show="{{true}}"
  type="active"
  onClick="actionClick"
  capsule="{{true}}"
  capsuleItem="{{['https://img.alicdn.com/tfs/TB1yTvnfQY2gK0jSZFgXXc5OFXa-145-145.png','https://img.alicdn.com/tfs/TB1egTmfNz1gK0jSZSgXXavwpXa-145-145.png','https://img.alicdn.com/tfs/TB1l36mfQP2gK0jSZPxXXacQpXa-145-145.png','https://img.alicdn.com/tfs/TB1uCUdfND1gK0jSZFyXXciOVXa-151-164.png']}}">4 個(gè)優(yōu)惠信息推薦
</notice>

Page({
  data:{
    marqueeProps: {
      loop: true,
      leading: 1000,
      trailing: 800,
      fps: 40,
    },
  },
  linkActionClick() {
    my.showToast({
      content: '左側(cè)操作區(qū)被點(diǎn)擊了',
      duration: 1000,
    });
  },
  actionClick() {
    my.showToast({
      content: '你點(diǎn)擊了右側(cè)操作區(qū)',
      duration: 1000,
    });
  },
})

屬性

Bug & Tip

• 如果 action 沒有任何值，那么 actionLeft 將不會(huì)顯示；
• onClick、onClickLeft 相對(duì)應(yīng)于 action 和 actionLeft；
• 當(dāng) mode 的值為 link，顯示為一個(gè)箭頭 icon 時(shí)，整條通告欄是可點(diǎn)擊的；
• 當(dāng) action 有值時(shí)，將會(huì)代替 mode 中的 closable 和 link，只會(huì)顯示文字；
• capsuleItem 在膠囊通告欄中只會(huì)顯示 3 個(gè)，超過部分僅統(tǒng)計(jì)個(gè)數(shù)，但不會(huì)顯示 logo；
• 當(dāng) type 的值為 transparent 時(shí)，展示的是帶有透明度，內(nèi)容色為白色的通告欄。