[Improvement] NoticeBar: update demo

2025-04-06 03:58:05 +08:00 · 2018-07-31 21:08:06 +08:00 · 2018-07-31 21:08:06 +08:00 · d2c2c5c693
commit d2c2c5c693
parent db363d95d5
6 changed files with 73 additions and 145 deletions
--- a/example/pages/notice-bar/index.js
+++ b/example/pages/notice-bar/index.js
@ -1,28 +1,5 @@
 Page({
  data: {
-    bar1: {
-      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
-      scrollable: true,
-      delay: 1000
-    },
-    bar2: {
-      text: '足协杯战线连续第2年上演广州德比战',
-      color: '#fff',
-      backgroundColor: '#000'
-    },
-    bar3: {
-      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
-    },
-    bar4: {
-      text: '带icon的公告',
-      leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png'
-    },
-    bar5: {
-      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
-      leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png',
-      mode: 'closeable',
-      scrollable: true,
-      speed: 10
-    }
+    text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
  }
 });
--- a/example/pages/notice-bar/index.json
+++ b/example/pages/notice-bar/index.json
@ -1,7 +1,7 @@
 {
  "navigationBarTitleText": "NoticeBar 通告栏",
  "usingComponents": {
-    "van-notice-bar": "../../dist/notice-bar/index",
-    "van-panel": "../../dist/panel/index"
+    "demo-block": "../../components/demo-block/index",
+    "van-notice-bar": "../../dist/notice-bar/index"
  }
 }
--- a/example/pages/notice-bar/index.wxml
+++ b/example/pages/notice-bar/index.wxml
@ -1,51 +1,15 @@
-
-<van-panel title="滚动通告栏">
+<demo-block title="基础用法">
  <van-notice-bar
-    text="{{ bar1.text }}"
-    scrollable="{{ bar1.scrollable }}"
+    text="{{ text }}"
+    left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
  />
-</van-panel>
+</demo-block>

-<van-panel title="延时滚动通告栏">
-  <van-notice-bar
-    text="{{ bar1.text }}"
-    scrollable="{{ bar1.scrollable }}"
-    delay="{{ bar1.delay }}"
-  />
-</van-panel>
+<demo-block title="禁用滚动">
+  <van-notice-bar scrollable="{{ false }}" text="{{ text }}" />
+</demo-block>

-<van-panel title="初始速度低滚动通告栏">
-  <van-notice-bar
-    text="{{ bar1.text }}"
-    scrollable="{{ bar1.scrollable }}"
-    speed="{{ bar5.speed }}"
-  />
-</van-panel>
-
-<van-panel title="改变颜色通告栏">
-  <van-notice-bar
-    text="{{ bar2.text }}"
-    color="{{ bar2.color }}"
-    background-color="{{ bar2.backgroundColor }}"
-  />
-</van-panel>
-
-<van-panel title="静止通告栏">
-  <van-notice-bar
-    text="{{ bar3.text }}"
-  />
-</van-panel>
-
-<van-panel title="带icon公告">
-  <van-notice-bar
-    text="{{ bar4.text }}"
-    left-icon="{{ bar4.leftIcon }}"
-  />
-</van-panel>
-
-<van-panel title="可关闭公告">
-  <van-notice-bar
-    text="{{ bar5.text }}"
-    mode="{{ bar5.mode }}"
-  />
-</van-panel>
+<demo-block title="通告栏模式">
+  <van-notice-bar mode="closeable" text="{{ text }}" custom-class="demo-margin-bottom" />
+  <van-notice-bar mode="link" text="{{ text }}" />
+</demo-block>
--- a/packages/notice-bar/README.md
+++ b/packages/notice-bar/README.md
@ -1,95 +1,75 @@
 ## NoticeBar 通告栏

 ### 使用指南
+
 在 index.json 中引入组件
 ```json
-{
-  "usingComponents": {
-    "van-notice-bar": "path/to/vant-weapp/dist/notice-bar/index"
-  }
+"usingComponents": {
+  "van-notice-bar": "path/to/vant-weapp/dist/notice-bar/index"
 }
 ```

-在 index.js 中声明组件数据
-```js
-// 在 Page 中声明 NoticeBar 依赖的展示数据
-Page({
-  data: {
-    text: 'xxx',
-    scrollable: 'xxx',
-    ...
-  }
-})
-```

 ### 代码演示
-`NoticeBar` 组件支持滚动和静止两种展示方式，通过 text 传入展示文案

-### 静止公告栏
+#### 基础用法
+
 ```html
 <van-notice-bar
-  text="{{ text }}"
+  left-icon="https://img.yzcdn.cn/1.png"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
 />
 ```

-### 滚动通告栏
+#### 禁用滚动
+文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动
+
 ```html
 <van-notice-bar
-  text="{{ text }}"
-  scrollable="true"
+  scrollable="false"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
 />
 ```

-### 延时滚动通告栏
-```html
-<van-notice-bar
-  text="{{ text }}"
-  scrollable="true"
-  delay="{{ delay }}"
-/>
-```
+#### 通告栏模式
+默认模式为空，支持`closeable`和`link`。

-### 改变滚动通告栏滚动速度
 ```html
+<!-- closeable 模式，在右侧显示关闭按钮 -->
 <van-notice-bar
-  text="{{ text }}"
-  scrollable="true"
-  speed="{{ speed }}"
-/>
-```
-
-### 自定义通告栏字体颜色和背景色
-```html
-<van-notice-bar
-  text="{{ text }}"
-  color="{{ color }}"
-  background-color="{{ backgroundColor }}"
-/>
-```
-
-### 添加左侧icon通告栏
-```html
-<van-notice-bar
-  text="{{ text }}"
-  left-icon="https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
-/>
-```
-
-### 可关闭通告栏
-```html
-<van-notice-bar
-  text="{{ text }}"
  mode="closeable"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
+/>
+
+<!-- link 模式，在右侧显示链接箭头 -->
+<van-notice-bar
+  mode="link"
+  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
 />
 ```

-| 参数       | 说明      | 类型       | 默认值       | 可选值     |
-|-----------|-----------|-----------|-------------|-------------|
-| text | 通告栏展示文案 | String | - | |
-| mode | 通告栏模式 | String | '' | `closeable` |
-| delay | 滚动延时时间 | Number | 0 | |
-| speed | 滚动速度 | Number | 40 | |
-| scrollable | 是否可滚动 | Boolean | false | |
-| leftIcon | 左侧图标 | String | - | |
-| color | 通告栏字体颜色 | String | `#f60` | |
-| backgroundColor | 通告栏背景色 | String | `#fff7cc` |
+### API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| mode | 通告栏模式，可选值为 `closeable` `link` | `String` | `''` |
+| delay | 动画延迟时间 (s) | `Number` | `1` |
+| speed | 滚动速率 (px/s) | `Number` | `50` |
+| scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` |
+| left-icon | 左侧图标图片 URL | `String` | - |
+| color | 文本颜色 | `String` | `#f60` |
+| background | 滚动条背景 | `String` | `#fff7cc` |
+| open-type | 微信开放能力 | `String` | `navigate` |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| tap | 点击事件回调 | - |
+
+
+### 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
--- a/packages/notice-bar/index.js
+++ b/packages/notice-bar/index.js
@ -1,8 +1,10 @@
-const VALID_MODE = ['closeable'];
+const VALID_MODE = ['closeable', 'link'];
 const FONT_COLOR = '#f60';
 const BG_COLOR = '#fff7cc';

 Component({
+  externalClasses: ['custom-class'],
+
  properties: {
    text: {
      type: String,
@ -29,11 +31,11 @@ Component({
    },
    speed: {
      type: Number,
-      value: 40
+      value: 50
    },
    scrollable: {
      type: Boolean,
-      value: false
+      value: true
    },
    leftIcon: {
      type: String,
@ -166,6 +168,10 @@ Component({
        show: false,
        timer: null
      });
+    },
+
+    onTap(event) {
+      this.triggerEvent('tap', event);
    }
  }
 });
--- a/packages/notice-bar/index.wxml
+++ b/packages/notice-bar/index.wxml
@ -1,7 +1,8 @@
 <view
  wx:if="{{ show }}"
-  class="van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
+  class="custom-class van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
  style="color: {{ color }};background-color: {{ backgroundColor }}"
+  bind:tap="onTap"
 >
  <view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon">
    <image src="{{ leftIcon }}" />
@ -24,7 +25,7 @@
      url="{{ url }}"
      open-type="{{ openType }}"
    >
-      <van-icon class="van-notice-bar__right-icon" type="arrow" />
+      <van-icon class="van-notice-bar__right-icon" name="arrow" />
    </navigator>
  </block>
 </view>