fix: toptips bug, add demo

Author: davidysxue

src/toptips/toptips.less

@@ -0,0 +1,17 @@
+.weui-toptips_show.weui-toptips {
+    display: block;
+}
+.weui-toptips_show {
+    -webkit-transform: translateZ(0) translateY(0);
+    transform: translateZ(0) translateY(0);
+    opacity: 1;
+}
+.weui-toptips_success {
+    background-color: var(--weui-BRAND);
+}
+.weui-toptips_error {
+    background-color: var(--weui-RED);
+}
+.weui-toptips_info {
+    background-color: var(--weui-BLUE);
+}

tools/demo/app.json

@@ -32,6 +32,7 @@
     "example/msg/msg_fail",
     "example/picker/picker",
     "example/toast/toast",
+    "example/toptips/toptips",
 
     "example/navbar/navbar",
     "example/navigation/navigation",

tools/demo/example/index.js

@@ -31,7 +31,7 @@ CustomPage({
                 id: 'feedback',
                 name: '操作反馈',
                 open: false,
-                pages: ['dialog', 'msg', 'half-screen-dialog', 'actionsheet']
+                pages: ['dialog', 'msg', 'half-screen-dialog', 'actionsheet', 'toptips']
             },
             {
                 id: 'nav',

tools/demo/example/toptips/toptips.js

@@ -0,0 +1,12 @@
+import CustomPage from '../../base/CustomPage'
+
+CustomPage({
+    data: {
+        show: false
+    },
+    showToptips() {
+        this.setData({
+            show: true
+        })
+    }
+})

tools/demo/example/toptips/toptips.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+        "mp-toptips": "../../components/toptips/toptips"
+    }
+}

tools/demo/example/toptips/toptips.wxml

@@ -0,0 +1,12 @@
+<view class="page" data-weui-theme="{{theme}}">
+    <view class="page__hd">
+        <view class="page__title">Toptips</view>
+    </view>
+    <view class="page__bd">
+        <button type="primary" disabled="{{disabled}}" bindtap="showToptips">显示Toptips</button>
+
+        <mp-toptips ext-class="top100" msg="距离顶部100px" type="error" show="{{show}}"></mp-toptips>
+        <mp-toptips ext-class="top200" msg="距离顶部200px" type="info" show="{{show}}"></mp-toptips>
+        <mp-toptips ext-class="top300" msg="距离顶部300px" type="success" show="{{show}}"></mp-toptips>
+    </view>
+</view>

tools/demo/example/toptips/toptips.wxss

@@ -0,0 +1,10 @@
+@import '../common.wxss';
+.weui-toptips.top100 {
+    top: 100px;
+}
+.weui-toptips.top200 {
+    top: 200px;
+}
+.weui-toptips.top300 {
+    top: 300px;
+}