wxc-notice

通告栏 - 小程序组件

Install

$ min install @minui/wxc-notice

Demos

自定义颜色

<template>
  <wxc-notice scroll="{{true}}" close="{{true}}" bg-color="#ff9300" bg-rgba="rgba(255, 147, 0, 0)" show-icon="{{true}}" notice="{{notice}}"></wxc-notice>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-notice': '@minui/wxc-notice'
    }
  },
  data: {
    notice: '蘑菇街平台将在1月22日0点－9点进行系统升级，升级期间将暂停服务，敬请谅解。'
  },
  methods: {
  }
}
</script>
<style>
</style>

带icon和关闭按钮的通告栏

<template>
  <wxc-notice scroll="{{true}}" close="{{true}}" show-icon="{{true}}" notice="{{notice}}" bind:close="onClose"></wxc-notice>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-notice': '@minui/wxc-notice'
    }
  },
  data: {
    notice: '蘑菇街平台将在1月22日0点－9点进行系统升级，升级期间将暂停服务，敬请谅解。'
  },
  /** note: 在 wxp 文件或者页面文件中请去掉 methods 包装 */
  methods: {
    onClose() {
        wx.showToast({title: 'closed'});
    }
  }
}
</script>
<style>
</style>

简易通告栏

<template>
  <wxc-notice notice="{{notice}}" color="#ff5777" bgColor="#ffe8ee"></wxc-notice>
</template>
<script>
export default {
  config: {
    usingComponents: {
      'wxc-notice': '@minui/wxc-notice'
    }
  },
  data: {
    notice: '海外商品需经海关清关,中国海关需核对必要的身份信息'
  },
  methods: {
  }
}
</script>
<style>
</style>

API

Notice

ChangeLog

v1.0.0（2018-4-3）

• 初始版本