NoticeBar 通告栏

在导航栏下方，一般用作系统提醒、活动提醒等通知。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "NoticeBar",
    "usingComponents": {
        "wux-notice-bar": "../../dist/notice-bar/index"
    }
}

示例

<view class="page">
    <view class="page__hd">
        <view class="page__title">NoticeBar</view>
        <view class="page__desc">通告栏</view>
    </view>
    <view class="page__bd">
        <view class="sub-title">Default</view>
        <wux-notice-bar content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
        <view class="sub-title">Loop = true</view>
        <wux-notice-bar loop>
            微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp
        </wux-notice-bar>
        <view class="sub-title">Speed = 100</view>
        <wux-notice-bar loop speed="100" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
        <view class="sub-title">Leading = 3000</view>
        <wux-notice-bar loop leading="3000" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
        <view class="sub-title">Trailing = 1500</view>
        <wux-notice-bar loop trailing="1500" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
        <view class="sub-title">No Icon</view>
        <wux-notice-bar icon="" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
        <view class="sub-title">Mode = closable</view>
        <wux-notice-bar mode="closable" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
        <view class="sub-title">Mode = link</view>
        <wux-notice-bar mode="link" action="" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" bind:click="onClick">
            <text slot="footer" style="color: #a1a1a1; margin-left: 10px;">去看看</text>
        </wux-notice-bar>
        <view class="sub-title">Custom Style</view>
        <wux-notice-bar wux-class="notice-bar" icon="https://wux.cdn.cloverstd.com/logo.png" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
    </view>
</view>

Page({
    onClick() {
        wx.showModal({
            title: 'Thank you for your support!',
            showCancel: !1,
        })
    },
})

视频演示

NoticeBar

API

NoticeBar props

NoticeBar slot

NoticeBar externalClasses