toptips

app.json

@@ -7,7 +7,8 @@
     "pages/label/index",
     "pages/loadmore/index",
     "pages/panel/index",
-    "pages/tab/index"
+    "pages/tab/index",
+    "pages/toptips/index"
   ],
   "window":{
     "navigationBarBackgroundColor": "#FAFAFA",

pages/dashboard/index.wxml

@@ -25,10 +25,14 @@
       <view class="zui-cell__bd">Tab</view>
       <view class="zui-cell__ft"></view>
     </navigator>
-    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/label/index">
+    <navigator class="zui-cell zui-cell--access" url="/pages/label/index">
       <view class="zui-cell__bd">Label</view>
       <view class="zui-cell__ft"></view>
     </navigator>
+    <navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/toptips/index">
+      <view class="zui-cell__bd">Toptips</view>
+      <view class="zui-cell__ft"></view>
+    </navigator>
   </view>
 
 </view>

pages/toptips/index.js

@@ -0,0 +1,9 @@
+var topTips = require('../../zui/toptips/index');
+
+Page(Object.assign({}, topTips, {
+  data: {},
+
+  showTopTips() {
+    this.showZuiTopTips('哎呀，出了点小问题');
+  }
+}));

pages/toptips/index.wxml

@@ -0,0 +1,7 @@
+<import src="/zui/toptips/index.wxml" />
+
+<view class="container">
+  <button class="zui-btn zui-btn--primary zui-btn--big" catchtap="showTopTips">显示toptips</button>
+</view>
+
+<template is="zui-toptips" data="{{ componentTopTips }}"></template>

zui/index.wxss

@@ -13,3 +13,4 @@
 @import "quantity/index.wxss";
 @import "steps/index.wxss";
 @import "toast/index.wxss";
+@import "toptips/index.wxss";

zui/toptips/index.js

@@ -0,0 +1,38 @@
+var timer = undefined;
+
+module.exports = {
+  showZuiTopTips(content = '', options = {}) {
+    // 如果已经有一个计时器在了，就清理掉先
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    if (typeof options === 'number') {
+      options = {
+        duration: options
+      };
+    }
+
+    // options参数默认参数扩展
+    options = Object.assign({
+      duration: 3000
+    }, options);
+
+    // 展示出topTips
+    this.setData({
+      componentTopTips: {
+        show: true,
+        content,
+        options
+      }
+    });
+
+    // 设置定时器，定时关闭topTips
+    timer = setTimeout(() => {
+      this.setData({
+        'componentTopTips.show': false
+      });
+      timer = undefined;
+    }, options.duration);
+  }
+};

zui/toptips/index.wxml

@@ -0,0 +1,3 @@
+<template name="zui-toptips">
+  <view class="zui-toptips {{ componentTopTips.show ? 'zui-toptips--show' : '' }}">{{ componentTopTips.content }}</view>
+</template>

zui/toptips/index.wxss

@@ -0,0 +1,20 @@
+.zui-toptips {
+  display: block;
+  position: fixed;
+  -webkit-transform: translateZ(0) translateY(-100%);
+  width: 100%;
+  top: 0;
+  line-height: 2.3;
+  font-size: 14px;
+  text-align: center;
+  color: #FFF;
+  background-color: #E64340;
+  z-index: 2;
+
+  /* 动画部分 */
+  transition: all 0.4s ease;
+}
+
+.zui-toptips--show {
+  -webkit-transform: translateZ(0) translateY(0);
+}