@wines/notice-bar v1.5.1

@wines/notice-bar

NoticeBar 通告栏

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

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "NoticeBar",
  "usingComponents": {
    "wux-notice-bar": "@wines/notice-bar"
  }
}

示例

<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="http://cdn.skyvow.cn/logo.png" content="微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp" />
		<view class="sub-title">Async & slot</view>
		<wux-notice-bar id="wux-notice-bar">{{ content }}</wux-notice-bar>
	</view>
</view>

import './index.less';
import { PageData, PageCustom } from '@wines/core';
import { $wuxNoticeBar } from '@wines/notice-bar';

Page<PageData, PageCustom>({
  data: {
    content: '微信小程序自定义组件 https://github.com/wux-weapp/wux-weapp',
  },
  onLoad() {
    setTimeout(() => {
      this.setData({
        content:
          'Wux Weapp 是一套组件化、可复用、易扩展的微信小程序 UI 组件库。80+ 丰富的组件，能够满足移动端开发的基本需求。',
      });
      const notice = $wuxNoticeBar('#wux-notice-bar');
      notice && notice.resetAnimation();
    }, 3000);
  },
  onClick() {
    void wx.showModal({
      title: 'Thank you for your support!',
      showCancel: false,
    });
  },
});

API

NoticeBar props

NoticeBar slot

NoticeBar externalClasses

NoticeBar.method

• NoticeBar.startAnimation
• NoticeBar.stopAnimation
• NoticeBar.resetAnimation

当我们使用 slot 自定义内容时或某些时候需要动态加载数据时可能导致内容长度计算不正确，此时需要手动调用一次使之正常

$wuxNoticeBar(this, '#wux-notice-bar').resetAnimation();