README.md

Noticebar 通告栏

使用指南

在 app.wxss 中引入组件库所有样式

@import "path/to/zanui-weapp/dist/index.wxss";

在需要使用的页面里引入组件库模板和脚本

<import src="path/to/zanui-weapp/dist/noticebar/index.wxml" />

<!-- 直接使用 zan-noticebar 模板，并且直接传入设置值 -->
<template is="zan-noticebar" data="{{ ...data, componentId: 'noticebar'  }}"></template>

// 在 Page 中混入 Noticebar 里面声明的方法

const { Noticebar, extend } = require('path/to/zanui-weapp/dist/index');

Page(extend({}, Noticebar, {
  // ...
}));

代码演示

Noticebar 组件支持滚动和静止两种展示方式，通过 text 传入展示文案

<template is="zan-noticebar" data="{{ text: '展示文案', componentId: 'noticebar'  }}"></template>

注意

如果组件需要开启滚动展示，需要在 Page 的脚本中执行 initZanNoticeBarScroll 方法，来开启滚动展示

Page(extend({}, Noticebar, {
  // ...
  onShow() {
    // 在方法中传入对应的 componentId
    this.initZanNoticeBarScroll('movable');
  }
  // ...
}));

参数	说明	类型	默认值	必须
text	通告栏展示文案	String	-
componentId	用于区分页面多个 Noticebar 组件，在调用 initZanNoticeBarScroll 时需要传入	String	-