doc: example update

dist/example/half-screen-dialog/dialog.js

+Page({
+    data: {
+        showDialog: false
+    },
+    openDialog: function () {
+        this.setData({
+            istrue: true
+        })
+    },
+    closeDialog: function () {
+        this.setData({
+            istrue: false
+        })
+    }
+});

dist/example/half-screen-dialog/dialog.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Dialog</view>
+        <view class="page__desc">对话框，采用小程序原生的modal</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-btn-area">
+            <button class="weui-btn" type="default" bindtap="openDialog">Dialog</button>
+        </view>
+        <view class="weui-demo-dialog {{istrue ? 'weui-demo-dialog_show' : ''}}">
+          <view class="weui-mask" bindtap="closeDialog"></view>
+          <view class="weui-dialog__wrp" bindtap="closeDialog">
+              <view class="weui-dialog" catchtap="stopEvent">
+                <view class="weui-dialog__hd">
+                  <view class="weui-dialog__title">标题</view>
+                </view>
+                <view class="weui-dialog__bd">
+                  详细内容
+                </view>
+                <view class="weui-dialog__ft">
+                    <view class="weui-dialog__btn weui-dialog__btn_default" bindtap="closeDialog">取消</view>
+                    <view class="weui-dialog__btn" bindtap="closeDialog">确定</view>
+                </view>
+              </view>
+          </view>
+        </view>
+    </view>
+</view>

dist/example/half-screen-dialog/dialog.wxss

+page{
+    background-color: #FFFFFF;
+}
+.weui-demo-dialog{
+  visibility:hidden;
+  opacity:0;
+  transition:opacity .3s;
+}
+.weui-demo-dialog_show{
+  visibility:visible;
+  opacity:1;
+}

dist/example/half-screen-dialog/half-screen-dialog.js

+Page({
+    data: {
+        showDialog: false
+    },
+    openDialog: function () {
+        this.setData({
+            istrue: true
+        })
+    },
+    closeDialog: function () {
+        this.setData({
+            istrue: false
+        })
+    }
+});

dist/example/half-screen-dialog/half-screen-dialog.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

dist/example/half-screen-dialog/half-screen-dialog.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Half Screen Dialog</view>
+        <view class="page__desc">半屏弹窗，辅助完成当前页面任务时；提醒用户并引导用户的下一步操作；用户主动发起的任务时。</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-btn-area">
+            <button class="weui-btn" type="default" bindtap="openDialog">Half Screen Dialog</button>
+        </view>
+        <view class="weui-demo-dialog {{istrue ? 'weui-demo-dialog_show' : ''}}">
+          <view class="weui-mask" bindtap="closeDialog"></view>
+          <view class="weui-half-screen-dialog" catchtap="stopEvent">
+            <view class="weui-half-screen-dialog__hd">
+              <view class="weui-half-screen-dialog__hd__side">
+                <view bindtap="closeDialog" class="weui-icon-btn weui-icon-btn_close">关闭</view>
+              </view>
+              <view class="weui-half-screen-dialog__hd__main">
+                <text class="weui-half-screen-dialog__title">标题</text>
+                <text class="weui-half-screen-dialog__subtitle">标题</text>
+              </view>
+              <view class="weui-half-screen-dialog__hd__side">
+                <view class="weui-icon-btn weui-icon-btn_more">更多</view>
+              </view>
+            </view>
+            <view class="weui-half-screen-dialog__bd">
+              <view class="weui-half-screen-dialog__desc">
+                辅助描述内容，可根据实际需要安排
+              </view>
+              <view class="weui-half-screen-dialog__tips">
+                辅助提示内容，可根据实际需要安排
+              </view>
+            </view>
+            <view class="weui-half-screen-dialog__ft">
+                <button type="default" class="weui-btn">辅助操作</button>
+                <button type="primary" class="weui-btn">主操作</button>
+            </view>
+          </view>
+        </view>
+    </view>
+</view>

dist/example/half-screen-dialog/half-screen-dialog.wxss

+.weui-demo-dialog{
+  visibility:hidden;
+  opacity:0;
+  transition:all .3s;
+}
+.weui-half-screen-dialog{
+  transition:all .3s;
+  transform:translateY(100%);
+}
+.weui-demo-dialog_show{
+  visibility:visible;
+  opacity:1;
+}
+.weui-demo-dialog_show .weui-half-screen-dialog{
+    transform:translateY(0);
+}
+

dist/example/images/icon_del.svg

+<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'> <path fill-opacity='.9' fill-rule='evenodd' d='M6.21 5.867l.744 12.51c.023.387.344.69.732.69h6.628a.733.733 0 0 0 .732-.69l.745-12.51H6.209zm10.683 0l-.749 12.575a1.833 1.833 0 0 1-1.83 1.725H7.686c-.97 0-1.773-.756-1.83-1.725L5.107 5.867H3.208v-.642c0-.253.206-.458.459-.458h14.666c.253 0 .459.205.459.458v.642h-1.9zm-4.06-3.117c.253 0 .459.205.459.458v.642H8.708v-.642c0-.253.206-.458.459-.458h3.666zm-4.125 5.5h1.1l.459 8.25h-1.1l-.459-8.25zm3.484 0h1.1l-.459 8.25h-1.1l.459-8.25z'/></svg>
\ No newline at end of file

dist/example/images/icon_love.svg

+<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'> <path fill-opacity='.9' fill-rule='evenodd' d='M17.678 11.591a3.483 3.483 0 0 0-4.964-4.887c-.177.176-.4.391-.672.648l-.754.71-.755-.71a32.337 32.337 0 0 1-.671-.648 3.483 3.483 0 0 0-4.927 0 3.481 3.481 0 0 0-.05 4.876l6.403 6.402 6.39-6.39zM4.158 5.926a4.583 4.583 0 0 1 6.481 0c.168.167.384.376.649.625.264-.25.48-.458.648-.625a4.583 4.583 0 0 1 6.531 6.431l-6.531 6.532a.917.917 0 0 1-1.297 0l-6.531-6.531a4.584 4.584 0 0 1 .05-6.432z'/></svg>
\ No newline at end of file

dist/example/images/icon_star.svg

+<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'> <path fill-opacity='.9' fill-rule='evenodd' d='M14.613 13.09l3.613-3.521-4.993-.726L11 4.32 8.767 8.843l-4.993.726 3.613 3.522-.853 4.972L11 15.716l4.466 2.347-.853-4.972zM11 16.959L6.717 19.21a.917.917 0 0 1-1.33-.966l.818-4.77-3.465-3.377a.917.917 0 0 1 .508-1.563l4.789-.696 2.141-4.34a.917.917 0 0 1 1.644 0l2.141 4.34 4.789.696a.917.917 0 0 1 .508 1.563l-3.465 3.378.818 4.769a.917.917 0 0 1-1.33.966L11 16.958z'/></svg>
\ No newline at end of file

dist/example/loading/loading.js

+Page({});
\ No newline at end of file

dist/example/loading/loading.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

dist/example/loading/loading.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Loading</view>
+        <view class="page__desc">加载中</view>
+    </view>
+    <view class="page__bd">
+      <view class="weui-loading__wrp">
+          <view class="weui-loading"></view>
+      </view>
+      <view class="weui-loading__wrp">
+          <view class="loading wx_dot_loading"></view>
+      </view>
+      <view class="weui-loading__wrp">
+          <view class="loading wx_dot_loading wx_dot_loading_white"></view>
+      </view>
+    </view>
+</view>

dist/example/loading/loading.wxss

+page{
+    background-color: #FFFFFF;
+}
+.weui-loading__wrp{
+  padding:16px;text-align:center;
+}
+.weui-loading__wrp:last-child{
+  background-color:rgba(0,0,0,.1);
+}

dist/example/loading/loadmore.js

+Page({});
\ No newline at end of file

dist/example/loading/loadmore.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Loadmore</view>
+        <view class="page__desc">加载更多</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-loadmore">
+            <view class="weui-loading"></view>
+            <view class="weui-loadmore__tips">正在加载</view>
+        </view>
+        <view class="weui-loadmore weui-loadmore_line">
+            <view class="weui-loadmore__tips weui-loadmore__tips_in-line">暂无数据</view>
+        </view>
+        <view class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
+            <view class="weui-loadmore__tips weui-loadmore__tips_in-line weui-loadmore__tips_in-dot"></view>
+        </view>
+    </view>
+</view>
\ No newline at end of file

dist/example/loading/loadmore.wxss

+page{
+    background-color: #FFFFFF;
+}
\ No newline at end of file

dist/example/navbar/navigation_bar.js

+// example/navbar/navigation_bar.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

dist/example/navbar/navigation_bar.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

dist/example/navbar/navigation_bar.wxml

+<!--example/navbar/navigation_bar.wxml-->
+<text>example/navbar/navigation_bar.wxml</text>

dist/example/navbar/navigation_bar.wxss

+/* example/navbar/navigation_bar.wxss */
\ No newline at end of file

dist/example/navigation-bar/navigation-bar.js

+Page({
+});

dist/example/navigation-bar/navigation-bar.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

dist/example/navigation-bar/navigation-bar.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Navigation Bar</view>
+        <view class="page__desc">导航栏，模拟小程序原生顶部导航栏。</view>
+    </view>
+    <view class="page__bd">
+      <view class="weui-navigation-bar">
+        <view class="weui-navigation-bar__placeholder" style="visible: hidden;"></view>
+        <view class="weui-navigation-bar__inner">
+
+          <view class='weui-navigation-bar__left'>
+              <view class="weui-navigation-bar__buttons">
+                <view bindtap="back" class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+              </view>
+          </view>
+
+          <view class='weui-navigation-bar__center'>
+            <view class="weui-navigation-bar__loading">
+              <view class="weui-loading"></view>
+            </view>
+            <text>标题</text>
+          </view>
+
+          <view class='weui-navigation-bar__right'>
+          </view>
+        </view>
+      </view>
+    </view>
+</view>

dist/example/navigation-bar/navigation-bar.wxss

+.weui-navigation-bar{position:relative;}
+.weui-navigation-bar__inner{position:absolute;}

dist/example/navigation-bar/navigation_bar.js

+Page({
+});

dist/example/navigation-bar/navigation_bar.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Navigation Bar</view>
+        <view class="page__desc">导航栏，模拟小程序原生顶部导航栏。</view>
+    </view>
+    <view class="page__bd">
+      <view class="weui-navigation-bar">
+        <view class="weui-navigation-bar__placeholder" style="visible: hidden;"></view>
+        <view class="weui-navigation-bar__inner">
+
+          <view class='weui-navigation-bar__left'>
+              <view class="weui-navigation-bar__buttons">
+                <view bindtap="back" class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+              </view>
+          </view>
+
+          <view class='weui-navigation-bar__center'>
+            <view class="weui-navigation-bar__loading">
+              <view class="weui-loading"></view>
+            </view>
+            <text>标题</text>
+          </view>
+
+          <view class='weui-navigation-bar__right'>
+          </view>
+        </view>
+      </view>
+    </view>
+</view>

dist/example/navigation-bar/navigation_bar.wxss

+.weui-navigation-bar{position:relative;}
+.weui-navigation-bar__inner{position:absolute;}

dist/example/navigation_bar/navigation_bar.js

+Page({
+});

dist/example/navigation_bar/navigation_bar.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

dist/example/navigation_bar/navigation_bar.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Navigation Bar</view>
+        <view class="page__desc">导航栏，模拟小程序原生顶部导航栏。</view>
+    </view>
+    <view class="page__bd">
+      <view class="weui-navigation-bar">
+        <view class="weui-navigation-bar__placeholder" style="visible: hidden;"></view>
+        <view class="weui-navigation-bar__inner">
+
+          <view class='weui-navigation-bar__left'>
+              <view class="weui-navigation-bar__buttons">
+                <view bindtap="back" class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+              </view>
+          </view>
+
+          <view class='weui-navigation-bar__center'>
+            <view class="weui-navigation-bar__loading">
+              <view class="weui-loading"></view>
+            </view>
+            <text>标题</text>
+          </view>
+
+          <view class='weui-navigation-bar__right'>
+          </view>
+        </view>
+      </view>
+    </view>
+</view>

dist/example/navigation_bar/navigation_bar.wxss

+.weui-navigation-bar{position:relative;}
+.weui-navigation-bar__inner{position:absolute;}

dist/example/navigationbar/tabbar.js

+Page({});
\ No newline at end of file

dist/example/navigationbar/tabbar.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Tabbar</view>
+        <view class="page__desc">底部导航，建议采用小程序原生的tabbar，通过设置app.json来实现。详情请看小程序文档。</view>
+    </view>
+</view>
\ No newline at end of file

dist/example/slideview/list.js

+var base64 = require("../images/base64");
+Page({
+    onLoad: function(){
+        this.setData({
+            icon: base64.icon20
+        });
+    }
+});
\ No newline at end of file

dist/example/slideview/list.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">List</view>
+        <view class="page__desc">列表</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-cells__title">带说明的列表项</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell">
+                <view class="weui-cell__bd">标题文字</view>
+                <view class="weui-cell__ft">说明文字</view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">带说明的列表项 右滑 文字按钮</view>
+        <view class="weui-cells weui-cells_after-title">
+          <view class="weui-slideview">
+            <view class="weui-slideview__left" style="transform:translateX(-207px);">
+                <view class="weui-cell">
+                    <view class="weui-cell__bd">标题文字</view>
+                    <view class="weui-cell__ft">说明文字</view>
+                </view>
+            </view>
+            <view class="weui-slideview__right" style="width:207px;line-height:56px;">
+              <view class="weui-slideview__buttons">
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_default" style="transform:translateX(-207px);">
+                  <view class="weui-slideview__btn">普通</view>
+                </view>
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_default" style="transform:translateX(-138px);">
+                  <view class="weui-slideview__btn">普通</view>
+                </view>
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_warn" style="transform:translateX(-69px);">
+                  <view class="weui-slideview__btn">警示</view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view class="weui-cells__title">带说明的列表项 右滑 图标按钮</view>
+        <view class="weui-cells weui-cells_after-title">
+          <view class="weui-slideview weui-slideview_icon">
+            <view class="weui-slideview__left" style="transform:translateX(-231px);">
+                <view class="weui-cell">
+                    <view class="weui-cell__bd">标题文字</view>
+                    <view class="weui-cell__ft">说明文字</view>
+                </view>
+            </view>
+            <view class="weui-slideview__right" style="width:231px;line-height:56px;">
+              <view class="weui-slideview__buttons">
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-231px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_love.svg"></image>
+                  </view>
+                </view>
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-146px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_star.svg"></image>
+                  </view>
+                </view>
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-77px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_del.svg"></image>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view class="weui-cells__title">带图标、说明的列表项</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell weui-cell_example ">
+                <view class="weui-cell__hd">
+                    <image src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
+                </view>
+                <view class="weui-cell__bd">标题文字</view>
+                <view class="weui-cell__ft">说明文字</view>
+            </view>
+            <view class="weui-cell weui-cell_example ">
+                <view class="weui-cell__hd">
+                    <image src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
+                </view>
+                <view class="weui-cell__bd">标题文字</view>
+                <view class="weui-cell__ft">说明文字</view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">带跳转的列表项</view>
+        <view class="weui-cells weui-cells_after-title">
+            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+                <view class="weui-cell__bd">cell standard</view>
+                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+            </navigator>
+            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+                <view class="weui-cell__bd">cell standard</view>
+                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+            </navigator>
+        </view>
+
+        <view class="weui-cells__title">带说明、跳转的列表项</view>
+        <view class="weui-cells weui-cells_after-title">
+            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+                <view class="weui-cell__bd">cell standard</view>
+                <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
+            </navigator>
+            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+                <view class="weui-cell__bd">cell standard</view>
+                <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
+            </navigator>
+        </view>
+
+        <view class="weui-cells__title">带图标、说明、跳转的列表项</view>
+        <view class="weui-cells weui-cells_after-title">
+            <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+                <view class="weui-cell__hd">
+                    <image src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
+                </view>
+                <view class="weui-cell__bd">cell standard</view>
+                <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
+            </navigator>
+            <navigator url="" class="weui-cell weui-cell_example weui-cell_access" hover-class="weui-cell_active">
+                <view class="weui-cell__hd">
+                    <image src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
+                </view>
+                <view class="weui-cell__bd">cell standard</view>
+                <view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view>
+            </navigator>
+        </view>
+    </view>
+</view>

dist/example/slideview/slideview.js

+var base64 = require("../images/base64");
+Page({
+    onLoad: function(){
+        this.setData({
+            icon: base64.icon20
+        });
+    }
+});
\ No newline at end of file

dist/example/slideview/slideview.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

dist/example/slideview/slideview.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">slideview</view>
+        <view class="page__desc">左滑操作</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-cells__title">右滑 文字按钮</view>
+        <view class="weui-cells weui-cells_after-title">
+          <view class="weui-slideview">
+            <view class="weui-slideview__left" style="transform:translateX(-207px);">
+                <view class="weui-cell">
+                    <view class="weui-cell__bd">标题文字</view>
+                    <view class="weui-cell__ft">说明文字</view>
+                </view>
+            </view>
+            <view class="weui-slideview__right" style="width:207px;line-height:56px;">
+              <view class="weui-slideview__buttons">
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_default" style="transform:translateX(-207px);">
+                  <view class="weui-slideview__btn">普通</view>
+                </view>
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_default" style="transform:translateX(-138px);">
+                  <view class="weui-slideview__btn">普通</view>
+                </view>
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_warn" style="transform:translateX(-69px);">
+                  <view class="weui-slideview__btn">警示</view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+
+        <view class="weui-cells__title">右滑 图标按钮</view>
+        <view class="weui-slidecells">
+          <view class="weui-slideview weui-slideview_icon">
+            <view class="weui-slideview__left" style="transform:translateX(-231px);">
+                <view class="weui-slidecell">
+                  <view class="weui-slidecell__tips">
+                    提示文字
+                  </view>
+                </view>
+            </view>
+            <view class="weui-slideview__right" style="width:231px;line-height:71px;">
+              <view class="weui-slideview__buttons">
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-231px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_love.svg"></image>
+                  </view>
+                </view>
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-146px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_star.svg"></image>
+                  </view>
+                </view>
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-77px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_del.svg"></image>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+    </view>
+</view>

dist/example/slideview/slideview.wxss

+.weui-slidecells{
+  margin:8px;
+}
+.weui-slidecell{
+  background-color:#FFFFFF;
+  border-radius:8px;
+  padding:24px;
+  line-height:1.4;
+  font-size:17px;
+  color:rgba(0,0,0,.9);
+  text-align:right;
+}
+.weui-slidecell__tips{
+  color:rgba(0,0,0,.5);
+}

dist/project.config.json

+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true,
+		"autoAudits": false,
+		"checkInvalidKey": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.8.0",
+	"appid": "wx92269e3b2f304afc",
+	"projectname": "weui-wxss",
+	"cloudfunctionTemplateRoot": "",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"scripts": {},
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}
\ No newline at end of file

dist/sitemap.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}
\ No newline at end of file

dist/sitemap42.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}
\ No newline at end of file

dist/sitemap92.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}
\ No newline at end of file

dist/style/base/variable/weui-tab.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */

dist/style/widget/weui-cell/weui-gallery.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+.weui-gallery{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;z-index:1000;-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-flex-wrap:nowrap;flex-wrap:nowrap;opacity:0;visibility:hidden;-webkit-transition:opacity .3s;transition:opacity .3s}.weui-gallery_show{display:-webkit-box;display:-webkit-flex;display:flex;visibility:visible;opacity:1}.weui-gallery__img__wrp{-webkit-box-flex:1;-webkit-flex:1;flex:1;position:relative;font-size:0}.weui-gallery__img{background:50% no-repeat;background-size:contain;position:absoulte;width:100%;height:100%}.weui-gallery__opr{background-color:#0d0d0d;color:#fff;line-height:60px;min-height:60px;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);text-align:center}.weui-gallery__opr navigator{color:#fff}.weui-gallery__del{display:block}.weui-gallery__info{color:#fff;font-size:17px;line-height:60px;min-height:60px;text-align:center}
\ No newline at end of file

dist/style/widget/weui-cell/weui-slideview.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+:host{width:100%}.weui-slideview{position:relative;overflow:hidden}.weui-slideview__left{position:relative;z-index:10}.weui-slideview__right{position:absolute;z-index:1;left:100%;top:0;height:100%}.weui-slideview__btn__wrp{position:absolute;left:0;bottom:0;text-align:center;min-width:69px;height:100%;white-space:nowrap}.weui-slideview__btn{color:#fff;padding:0 17px}.weui-slideview__btn-group_default .weui-slideview__btn{background:#c7c7cc}.weui-slideview__btn-group_default~.weui-slideview__btn-group_default:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #fff;color:#fff}.weui-slideview__btn-group_default:first-child:before{display:none}.weui-slideview__btn-group_warn .weui-slideview__btn{background:#fe3b30}.weui-slideview__btn-group_warn~.weui-slideview__btn-group_warn:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #fff;color:#fff}.weui-slideview__btn-group_warn:first-child:before{display:none}.weui-slideview_icon .weui-slideview__btn__wrp{background:transparent;font-size:0}.weui-slideview_icon .weui-slideview__btn__wrp:first-child{padding-left:16px}.weui-slideview_icon .weui-slideview__btn__wrp:last-child{padding-right:8px}.weui-slideview_icon .weui-slideview__btn{width:48px;height:48px;line-height:48px;padding:0;display:inline-block;vertical-align:middle;border-radius:50%;background-color:#fff}.weui-slideview_icon .weui-slideview__btn__icon{display:inline-block;vertical-align:middle;width:22px;height:22px}
\ No newline at end of file

dist/style/widget/weui-loading/weui-dot-loading.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+.wx_dot_loading,.wx_dot_loading:after,.wx_dot_loading:before{display:inline-block;vertical-align:middle;width:6px;height:6px;border-radius:50%;background-color:rgba(0,0,0,.3);font-size:0;-webkit-animation:b 1.6s step-start infinite;animation:b 1.6s step-start infinite}.wx_dot_loading{position:relative}.wx_dot_loading:before{content:"";position:absolute;left:-12px;background-color:rgba(0,0,0,.1);-webkit-animation:a 1.6s step-start infinite;animation:a 1.6s step-start infinite}.wx_dot_loading:after{content:"";position:absolute;right:-12px;background-color:rgba(0,0,0,.5);-webkit-animation:c 1.6s step-start infinite;animation:c 1.6s step-start infinite}@-webkit-keyframes a{0%,to{background-color:rgba(0,0,0,.1)}30%{background-color:rgba(0,0,0,.5)}60%{background-color:rgba(0,0,0,.3)}}@keyframes a{0%,to{background-color:rgba(0,0,0,.1)}30%{background-color:rgba(0,0,0,.5)}60%{background-color:rgba(0,0,0,.3)}}@-webkit-keyframes b{0%,to{background-color:rgba(0,0,0,.3)}30%{background-color:rgba(0,0,0,.1)}60%{background-color:rgba(0,0,0,.5)}}@keyframes b{0%,to{background-color:rgba(0,0,0,.3)}30%{background-color:rgba(0,0,0,.1)}60%{background-color:rgba(0,0,0,.5)}}@-webkit-keyframes c{0%,to{background-color:rgba(0,0,0,.5)}30%{background-color:rgba(0,0,0,.3)}60%{background-color:rgba(0,0,0,.1)}}@keyframes c{0%,to{background-color:rgba(0,0,0,.5)}30%{background-color:rgba(0,0,0,.3)}60%{background-color:rgba(0,0,0,.1)}}.wx_dot_loading_white{background-color:hsla(0,0%,100%,.3);-webkit-animation:e 1.6s step-start infinite;animation:e 1.6s step-start infinite}.wx_dot_loading_white:before{background-color:hsla(0,0%,100%,.5);-webkit-animation:d 1.6s step-start infinite;animation:d 1.6s step-start infinite}.wx_dot_loading_white:after{background-color:hsla(0,0%,100%,.1);-webkit-animation:f 1.6s step-start infinite;animation:f 1.6s step-start infinite}@-webkit-keyframes d{0%,to{background-color:hsla(0,0%,100%,.5)}30%{background-color:hsla(0,0%,100%,.1)}60%{background-color:hsla(0,0%,100%,.3)}}@keyframes d{0%,to{background-color:hsla(0,0%,100%,.5)}30%{background-color:hsla(0,0%,100%,.1)}60%{background-color:hsla(0,0%,100%,.3)}}@-webkit-keyframes e{0%,to{background-color:hsla(0,0%,100%,.3)}30%{background-color:hsla(0,0%,100%,.5)}60%{background-color:hsla(0,0%,100%,.1)}}@keyframes e{0%,to{background-color:hsla(0,0%,100%,.3)}30%{background-color:hsla(0,0%,100%,.5)}60%{background-color:hsla(0,0%,100%,.1)}}@-webkit-keyframes f{0%,to{background-color:hsla(0,0%,100%,.1)}30%{background-color:hsla(0,0%,100%,.3)}60%{background-color:hsla(0,0%,100%,.5)}}@keyframes f{0%,to{background-color:hsla(0,0%,100%,.1)}30%{background-color:hsla(0,0%,100%,.3)}60%{background-color:hsla(0,0%,100%,.5)}}
\ No newline at end of file

dist/style/widget/weui-navigation-bar/weui-navigation-bar.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+page{--height:44px;--right:190rpx}.weui-navigation-bar{overflow:hidden}.weui-navigation-bar .android{--height:48px;--right:222rpx}.weui-navigation-bar__inner{position:fixed;top:0;left:0;z-index:5001;height:var(--height);padding-right:var(--right);width:calc(100% - var(--right))}.weui-navigation-bar__inner,.weui-navigation-bar__inner .weui-navigation-bar__left{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-navigation-bar__inner .weui-navigation-bar__left{position:relative;width:var(--right);padding-left:16px;-webkit-box-pack:center}.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn{display:inline-block;vertical-align:middle;background-repeat:no-repeat}.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback{font-size:12px;width:1em;height:2em;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");background-position:50% 50%;background-size:cover}.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback:active{opacity:.5}.weui-navigation-bar__inner .weui-navigation-bar__center{font-size:17px;text-align:center;position:relative;-webkit-box-flex:1;-webkit-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.weui-navigation-bar__inner .weui-navigation-bar__loading{font-size:0}.weui-navigation-bar__inner .weui-navigation-bar__loading .weui-loading{margin-left:0}.weui-navigation-bar__inner .weui-navigation-bar__right{margin-right:16px}.weui-navigation-bar__placeholder{height:var(--height);background:#f8f8f8;position:relative;z-index:50}
\ No newline at end of file

dist/style/widget/weui-tab/weui-tabbar.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+.weui-tabbar{display:-webkit-box;display:-webkit-flex;display:flex;position:relative;z-index:500;background-color:#f7f7f7}.weui-tabbar:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid rgba(0,0,0,.1);color:rgba(0,0,0,.1)}.weui-tabbar__item{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:8px 0 4px;padding-bottom:calc(8px + constant(safe-area-inset-bottom));padding-bottom:calc(8px + env(safe-area-inset-bottom));font-size:0;color:rgba(0,0,0,.5);text-align:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.weui-tabbar__item:first-child{padding-left:constant(safe-area-inset-left);padding-left:env(safe-area-inset-left)}.weui-tabbar__item:last-child{padding-right:constant(safe-area-inset-right);padding-right:env(safe-area-inset-right)}.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{color:#07c160}.weui-tabbar__icon{display:inline-block;width:28px;height:28px;margin-bottom:2px}.weui-tabbar__icon>i,i.weui-tabbar__icon{font-size:24px;color:rgba(0,0,0,.5)}.weui-tabbar__icon image{width:100%;height:100%}.weui-tabbar__label{color:rgba(0,0,0,.9);font-size:10px;line-height:1.4}
\ No newline at end of file

dist/style/widget/weui-tips/weui-dialog.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+.weui-dialog__wrp{position:fixed;z-index:5000;top:16px;bottom:16px;left:16px;right:16px;text-align:center;font-size:0;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.weui-dialog__wrp .weui-dialog{max-height:100%}.weui-dialog{background-color:#fff;text-align:center;border-radius:12px;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;max-height:90%}.weui-dialog__hd{padding:32px 24px 16px}.weui-dialog__title{font-weight:700;font-size:17px;line-height:1.4}.weui-dialog__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 24px;margin-bottom:32px;min-height:40px;font-size:17px;line-height:1.4;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;color:rgba(0,0,0,.5)}.weui-dialog__bd:first-child{padding:32px 24px 0;font-weight:700;color:rgba(0,0,0,.9);-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.weui-dialog__bd:first-child,.weui-dialog__ft{display:-webkit-box;display:-webkit-flex;display:flex}.weui-dialog__ft{position:relative;line-height:64px;min-height:64px;font-size:17px}.weui-dialog__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid rgba(0,0,0,.1);color:rgba(0,0,0,.1)}.weui-dialog__btn{display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#576b95;font-weight:700;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.weui-dialog__btn:active{background-color:#ececec}.weui-dialog__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid rgba(0,0,0,.1);color:rgba(0,0,0,.1)}.weui-dialog__btn:first-child:after{display:none}.weui-dialog__btn_default{color:rgba(0,0,0,.9)}@media screen and (min-width:352px){.weui-dialog{width:320px;margin:0 auto}}
\ No newline at end of file

dist/style/widget/weui-tips/weui-half-screen-dialog.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+.weui-half-screen-dialog{position:fixed;left:0;right:0;bottom:0;max-height:75%;z-index:5000;line-height:1.4;background-color:#fff;border-top-left-radius:12px;border-top-right-radius:12px;overflow:hidden;padding:0 24px;padding:0 calc(24px + constant(safe-area-inset-right)) constant(safe-area-inset-bottom) calc(24px + constant(safe-area-inset-left));padding:0 calc(24px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(24px + env(safe-area-inset-left))}.weui-half-screen-dialog__hd{font-size:8px;height:8em;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-half-screen-dialog__hd .weui-icon-btn{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.weui-half-screen-dialog__hd__side{position:relative;left:-8px}.weui-half-screen-dialog__hd__main{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-half-screen-dialog__hd__side+.weui-half-screen-dialog__hd__main{text-align:center;padding:0 40px}.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side{right:-8px;left:auto}.weui-half-screen-dialog__hd__main+.weui-half-screen-dialog__hd__side .weui-icon-btn{right:0}.weui-half-screen-dialog__title{display:block;color:rgba(0,0,0,.9);font-weight:700;font-size:15px}.weui-half-screen-dialog__subtitle{display:block;color:rgba(0,0,0,.5);font-size:10px}.weui-half-screen-dialog__bd{word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;overflow-y:auto}.weui-half-screen-dialog__desc{padding-top:4px;font-size:17px;font-weight:700;color:rgba(0,0,0,.9);line-height:1.4}.weui-half-screen-dialog__tips{padding-top:16px;font-size:14px;color:rgba(0,0,0,.3);line-height:1.4}.weui-half-screen-dialog__ft{padding:40px 24px 32px;text-align:center}.weui-half-screen-dialog__ft .weui-btn:nth-last-child(n+2),.weui-half-screen-dialog__ft .weui-btn:nth-last-child(n+2)+.weui-btn{display:inline-block;vertical-align:top;margin:0 8px;width:120px}.weui-icon-btn{background-color:transparent;background-repeat:no-repeat;background-position:50% 50%;background-size:100%;border:0;outline:0;font-size:0}.weui-icon-btn_goback{width:12px;height:24px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-16-8c0-6.627 5.367-12 12-12h390c6.628 0 12 5.374 12 12v52H-16V-8z'/%3E%3Cpath fill='%23000' fill-opacity='.9' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/g%3E%3C/svg%3E")}.weui-icon-btn_close{width:24px;height:24px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cpath id='a' d='M8 6.943L1.807.75.75 1.807 6.943 8 .75 14.193l1.057 1.057L8 9.057l6.193 6.193 1.057-1.057L9.057 8l6.193-6.193L14.193.75z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(-16 -20)'%3E%3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E%3Cuse fill='%23000' fill-opacity='.9' transform='translate(20 24)' xlink:href='%23a'/%3E%3C/g%3E%3C/svg%3E")}.weui-icon-btn_more{width:24px;height:24px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FFF' d='M-374-8c0-6.627 5.367-12 12-12H28c6.628 0 12 5.374 12 12v52h-414V-8z'/%3E%3Cpath fill='%23000' fill-opacity='.9' d='M6.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0zM12 10.25a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E%3C/g%3E%3C/svg%3E")}
\ No newline at end of file

dist/style/widget/weui-tips/weui-mask.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+.weui-mask{background:rgba(0,0,0,.6)}.weui-mask,.weui-mask_transparent{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0}
\ No newline at end of file

dist/style/widget/weui-tips/weui-toptips.wxss

+/*!
+ * WeUI v2.0.0 (https://github.com/weui/weui-wxss)
+ * Copyright 2019 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+.weui-toptips{position:fixed;-webkit-transform:translateZ(0) translateY(-108%);transform:translateZ(0) translateY(-108%);text-align:center;top:8px;left:16px;right:16px;border-radius:4px;padding:8px;-webkit-border-radius:4px;color:hsla(0,0%,100%,.9);font-size:17px;line-height:1.4;background:rgba(250,81,81,.9);z-index:5000;word-wrap:break-word;word-break:break-all;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.weui-toptips_show{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}.weui-toptips_warn{background-color:#fa5151}.weui-toptips_success{background-color:#09bb07}.weui-toptips_error{background-color:#fa5151}.weui-toptips_info{background-color:#10aeff}
\ No newline at end of file

src/example/half-screen-dialog/half-screen-dialog.js

+Page({
+    data: {
+        showDialog: false
+    },
+    openDialog: function () {
+        this.setData({
+            istrue: true
+        })
+    },
+    closeDialog: function () {
+        this.setData({
+            istrue: false
+        })
+    }
+});

src/example/half-screen-dialog/half-screen-dialog.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Half Screen Dialog</view>
+        <view class="page__desc">半屏弹窗，辅助完成当前页面任务时；提醒用户并引导用户的下一步操作；用户主动发起的任务时。</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-btn-area">
+            <button class="weui-btn" type="default" bindtap="openDialog">Half Screen Dialog</button>
+        </view>
+        <view class="weui-demo-dialog {{istrue ? 'weui-demo-dialog_show' : ''}}">
+          <view class="weui-mask" bindtap="closeDialog"></view>
+          <view class="weui-half-screen-dialog" catchtap="stopEvent">
+            <view class="weui-half-screen-dialog__hd">
+              <view class="weui-half-screen-dialog__hd__side">
+                <view bindtap="closeDialog" class="weui-icon-btn weui-icon-btn_close">关闭</view>
+              </view>
+              <view class="weui-half-screen-dialog__hd__main">
+                <text class="weui-half-screen-dialog__title">标题</text>
+                <text class="weui-half-screen-dialog__subtitle">标题</text>
+              </view>
+              <view class="weui-half-screen-dialog__hd__side">
+                <view class="weui-icon-btn weui-icon-btn_more">更多</view>
+              </view>
+            </view>
+            <view class="weui-half-screen-dialog__bd">
+              <view class="weui-half-screen-dialog__desc">
+                辅助描述内容，可根据实际需要安排
+              </view>
+              <view class="weui-half-screen-dialog__tips">
+                辅助提示内容，可根据实际需要安排
+              </view>
+            </view>
+            <view class="weui-half-screen-dialog__ft">
+                <button type="default" class="weui-btn">辅助操作</button>
+                <button type="primary" class="weui-btn">主操作</button>
+            </view>
+          </view>
+        </view>
+    </view>
+</view>

src/example/half-screen-dialog/half-screen-dialog.wxss

+.weui-demo-dialog{
+  visibility:hidden;
+  opacity:0;
+  transition:all .3s;
+}
+.weui-half-screen-dialog{
+  transition:all .3s;
+  transform:translateY(100%);
+}
+.weui-demo-dialog_show{
+  visibility:visible;
+  opacity:1;
+}
+.weui-demo-dialog_show .weui-half-screen-dialog{
+    transform:translateY(0);
+}
+

src/example/images/icon_del.svg

+<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'> <path fill-opacity='.9' fill-rule='evenodd' d='M6.21 5.867l.744 12.51c.023.387.344.69.732.69h6.628a.733.733 0 0 0 .732-.69l.745-12.51H6.209zm10.683 0l-.749 12.575a1.833 1.833 0 0 1-1.83 1.725H7.686c-.97 0-1.773-.756-1.83-1.725L5.107 5.867H3.208v-.642c0-.253.206-.458.459-.458h14.666c.253 0 .459.205.459.458v.642h-1.9zm-4.06-3.117c.253 0 .459.205.459.458v.642H8.708v-.642c0-.253.206-.458.459-.458h3.666zm-4.125 5.5h1.1l.459 8.25h-1.1l-.459-8.25zm3.484 0h1.1l-.459 8.25h-1.1l.459-8.25z'/></svg>
\ No newline at end of file

src/example/images/icon_love.svg

+<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'> <path fill-opacity='.9' fill-rule='evenodd' d='M17.678 11.591a3.483 3.483 0 0 0-4.964-4.887c-.177.176-.4.391-.672.648l-.754.71-.755-.71a32.337 32.337 0 0 1-.671-.648 3.483 3.483 0 0 0-4.927 0 3.481 3.481 0 0 0-.05 4.876l6.403 6.402 6.39-6.39zM4.158 5.926a4.583 4.583 0 0 1 6.481 0c.168.167.384.376.649.625.264-.25.48-.458.648-.625a4.583 4.583 0 0 1 6.531 6.431l-6.531 6.532a.917.917 0 0 1-1.297 0l-6.531-6.531a4.584 4.584 0 0 1 .05-6.432z'/></svg>
\ No newline at end of file

src/example/images/icon_star.svg

+<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'> <path fill-opacity='.9' fill-rule='evenodd' d='M14.613 13.09l3.613-3.521-4.993-.726L11 4.32 8.767 8.843l-4.993.726 3.613 3.522-.853 4.972L11 15.716l4.466 2.347-.853-4.972zM11 16.959L6.717 19.21a.917.917 0 0 1-1.33-.966l.818-4.77-3.465-3.377a.917.917 0 0 1 .508-1.563l4.789-.696 2.141-4.34a.917.917 0 0 1 1.644 0l2.141 4.34 4.789.696a.917.917 0 0 1 .508 1.563l-3.465 3.378.818 4.769a.917.917 0 0 1-1.33.966L11 16.958z'/></svg>
\ No newline at end of file

src/example/loading/loading.js

+Page({});
\ No newline at end of file

src/example/loading/loading.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Loading</view>
+        <view class="page__desc">加载中</view>
+    </view>
+    <view class="page__bd">
+      <view class="weui-loading__wrp">
+          <view class="weui-loading"></view>
+      </view>
+      <view class="weui-loading__wrp">
+          <view class="loading wx_dot_loading"></view>
+      </view>
+      <view class="weui-loading__wrp">
+          <view class="loading wx_dot_loading wx_dot_loading_white"></view>
+      </view>
+    </view>
+</view>

src/example/loading/loading.wxss

+page{
+    background-color: #FFFFFF;
+}
+.weui-loading__wrp{
+  padding:16px;text-align:center;
+}
+.weui-loading__wrp:last-child{
+  background-color:rgba(0,0,0,.1);
+}

src/example/navigation-bar/navigation-bar.js

+Page({
+});

src/example/navigation-bar/navigation-bar.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Navigation Bar</view>
+        <view class="page__desc">导航栏，模拟小程序原生顶部导航栏。</view>
+    </view>
+    <view class="page__bd">
+      <view class="weui-navigation-bar">
+        <view class="weui-navigation-bar__placeholder" style="visible: hidden;"></view>
+        <view class="weui-navigation-bar__inner">
+
+          <view class='weui-navigation-bar__left'>
+              <view class="weui-navigation-bar__buttons">
+                <view bindtap="back" class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+              </view>
+          </view>
+
+          <view class='weui-navigation-bar__center'>
+            <view class="weui-navigation-bar__loading">
+              <view class="weui-loading"></view>
+            </view>
+            <text>标题</text>
+          </view>
+
+          <view class='weui-navigation-bar__right'>
+          </view>
+        </view>
+      </view>
+    </view>
+</view>

src/example/navigation-bar/navigation-bar.wxss

+.weui-navigation-bar{position:relative;}
+.weui-navigation-bar__inner{position:absolute;}

src/example/navigation_bar/navigation_bar.js

+Page({
+});

src/example/navigation_bar/navigation_bar.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Navigation Bar</view>
+        <view class="page__desc">导航栏，模拟小程序原生顶部导航栏。</view>
+    </view>
+    <view class="page__bd">
+      <view class="weui-navigation-bar">
+        <view class="weui-navigation-bar__placeholder" style="visible: hidden;"></view>
+        <view class="weui-navigation-bar__inner">
+
+          <view class='weui-navigation-bar__left'>
+              <view class="weui-navigation-bar__buttons">
+                <view bindtap="back" class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+              </view>
+          </view>
+
+          <view class='weui-navigation-bar__center'>
+            <view class="weui-navigation-bar__loading">
+              <view class="weui-loading"></view>
+            </view>
+            <text>标题</text>
+          </view>
+
+          <view class='weui-navigation-bar__right'>
+          </view>
+        </view>
+      </view>
+    </view>
+</view>

src/example/navigation_bar/navigation_bar.wxss

+.weui-navigation-bar{position:relative;}
+.weui-navigation-bar__inner{position:absolute;}

src/example/slideview/slideview.js

+var base64 = require("../images/base64");
+Page({
+    onLoad: function(){
+        this.setData({
+            icon: base64.icon20
+        });
+    }
+});
\ No newline at end of file

src/example/slideview/slideview.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">slideview</view>
+        <view class="page__desc">左滑操作</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-cells__title">右滑 文字按钮</view>
+        <view class="weui-cells weui-cells_after-title">
+          <view class="weui-slideview">
+            <view class="weui-slideview__left" style="transform:translateX(-207px);">
+                <view class="weui-cell">
+                    <view class="weui-cell__bd">标题文字</view>
+                    <view class="weui-cell__ft">说明文字</view>
+                </view>
+            </view>
+            <view class="weui-slideview__right" style="width:207px;line-height:56px;">
+              <view class="weui-slideview__buttons">
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_default" style="transform:translateX(-207px);">
+                  <view class="weui-slideview__btn">普通</view>
+                </view>
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_default" style="transform:translateX(-138px);">
+                  <view class="weui-slideview__btn">普通</view>
+                </view>
+                <view class="weui-slideview__btn__wrp weui-slideview__btn-group_warn" style="transform:translateX(-69px);">
+                  <view class="weui-slideview__btn">警示</view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+
+        <view class="weui-cells__title">右滑 图标按钮</view>
+        <view class="weui-slidecells">
+          <view class="weui-slideview weui-slideview_icon">
+            <view class="weui-slideview__left" style="transform:translateX(-231px);">
+                <view class="weui-slidecell">
+                  <view class="weui-slidecell__tips">
+                    提示文字
+                  </view>
+                </view>
+            </view>
+            <view class="weui-slideview__right" style="width:231px;line-height:71px;">
+              <view class="weui-slideview__buttons">
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-231px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_love.svg"></image>
+                  </view>
+                </view>
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-146px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_star.svg"></image>
+                  </view>
+                </view>
+                <view class="weui-slideview__btn__wrp " style="transform:translateX(-77px);">
+                  <view class="weui-slideview__btn">
+                    <image class="weui-slideview__btn__icon" src="../images/icon_del.svg"></image>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+    </view>
+</view>

src/example/slideview/slideview.wxss

+.weui-slidecells{
+  margin:8px;
+}
+.weui-slidecell{
+  background-color:#FFFFFF;
+  border-radius:8px;
+  padding:24px;
+  line-height:1.4;
+  font-size:17px;
+  color:rgba(0,0,0,.9);
+  text-align:right;
+}
+.weui-slidecell__tips{
+  color:rgba(0,0,0,.5);
+}

src/example/tabbar/tabbar.wxss

+.weui-tabbar{
+  position:fixed;
+  bottom:0;
+  left:0;
+  right:0;
+}

src/style/base/variable/weui-tab.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@weuiNavBarHeight:56px;
+@weuiTabBarHeight:60px;

src/style/widget/weui-cell/weui-gallery.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn.wxss";
+
+@weuiGalleryInfoHeight: 60px;
+@weuiGalleryOprHeight: 60px;
+.weui-gallery {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #000000;
+    z-index: 1000;
+
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    opacity:0;
+    visibility:hidden;
+    transition:opacity .3s;
+}
+.weui-gallery_show {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    visibility:visible;
+    opacity:1;
+}
+.weui-gallery__img__wrp {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    position:relative;
+    font-size:0;
+}
+.weui-gallery__img {
+    background: center center no-repeat;
+    background-size: contain;
+    position:absoulte;
+    width:100%;
+    height:100%;
+}
+.weui-gallery__opr {
+    background-color: #0D0D0D;
+    color: #FFFFFF;
+    line-height: @weuiGalleryOprHeight;
+    min-height: @weuiGalleryOprHeight;
+    padding-bottom:constant(safe-area-inset-bottom);
+    padding-bottom:env(safe-area-inset-bottom);
+    text-align: center;
+}
+.weui-gallery__opr {
+  navigator{
+    color: #FFFFFF;
+  }
+}
+.weui-gallery__del {
+    display: block;
+}
+.weui-gallery__info{
+  color:#FFFFFF;
+  font-size:17px;
+  line-height:@weuiGalleryInfoHeight;
+  min-height:@weuiGalleryInfoHeight;
+  text-align:center;
+}

src/style/widget/weui-cell/weui-slideview.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn.wxss";
+
+:host {
+  width: 100%;
+}
+.weui-slideview{
+  position: relative;
+  overflow: hidden;
+}
+
+.weui-slideview__left {
+  position: relative;
+  z-index: 10;
+}
+
+.weui-slideview__right {
+  position: absolute;
+  z-index: 1;
+  left: 100%;
+  top: 0;
+  height: 100%;
+}
+.weui-slideview__btn__wrp {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  text-align: center;
+  min-width:69px;
+  height: 100%;
+  white-space:nowrap;
+
+
+}
+.weui-slideview__btn {
+  color:#FFFFFF;
+  padding: 0 17px;
+}
+.weui-slideview__btn-group_default{
+  .weui-slideview__btn {
+    background: #C7C7CC;
+  }
+  &~&{
+    &:before{
+      .setLeftLine(#FFFFFF);
+    }
+  }
+  &:first-child{
+    &:before{
+      display:none;
+    }
+  }
+}
+.weui-slideview__btn-group_warn{
+  .weui-slideview__btn {
+    background: #FE3B30;
+  }
+  &~&{
+    &:before{
+      .setLeftLine(#FFFFFF);
+    }
+  }
+  &:first-child{
+    &:before{
+      display:none;
+    }
+  }
+}
+
+.weui-slideview_icon{
+  .weui-slideview__btn__wrp{
+    background: transparent;
+    font-size:0;
+    &:first-child{
+      padding-left:16px;
+    }
+    &:last-child{
+      padding-right:8px;
+    }
+  }
+  .weui-slideview__btn{
+    width:48px;
+    height:48px;
+    line-height:48px;
+    padding:0;
+    display:inline-block;
+    vertical-align:middle;
+    border-radius:50%;
+    background-color:#FFFFFF;
+  }
+  .weui-slideview__btn__icon{
+    display:inline-block;
+    vertical-align:middle;
+    width:22px;
+    height:22px;
+  }
+}

src/style/widget/weui-loading/weui-dot-loading.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+
+@import "../../base/fn.wxss";
+
+.wx_dot_loading,.wx_dot_loading:before,.wx_dot_loading:after{
+    display:inline-block;vertical-align:middle;width:6px;height:6px;-webkit-border-radius:50%;border-radius:50%;background-color:rgba(0,0,0,.3);
+    font-size:0;
+    animation: dot2 1.6s step-start infinite;
+}
+.wx_dot_loading{
+    position:relative;
+    &:before{
+      content:"";
+      position:absolute;
+      left:-12px;
+      background-color:rgba(0,0,0,.1);
+      animation: dot1 1.6s step-start infinite;
+    }
+    &:after{
+      content:"";
+      position:absolute;
+      right:-12px;
+      background-color:rgba(0,0,0,.5);
+      animation: dot3 1.6s step-start infinite;
+    }
+}
+
+@keyframes dot1 {
+  0%,100%{background-color:rgba(0,0,0,.1);}
+  30%{background-color:rgba(0,0,0,.5);}
+  60%{background-color:rgba(0,0,0,.3);}
+}
+@keyframes dot2 {
+  0%,100%{background-color:rgba(0,0,0,.3);}
+  30%{background-color:rgba(0,0,0,.1);}
+  60%{background-color:rgba(0,0,0,.5);}
+}
+@keyframes dot3 {
+  0%,100%{background-color:rgba(0,0,0,.5);}
+  30%{background-color:rgba(0,0,0,.3);}
+  60%{background-color:rgba(0,0,0,.1);}
+}
+.wx_dot_loading_white{
+  background-color:rgba(255,255,255,.3);
+  animation: dotw2 1.6s step-start infinite;
+  &:before{
+    background-color:rgba(255,255,255,.5);
+    animation: dotw1 1.6s step-start infinite;
+  }
+  &:after{
+    background-color:rgba(255,255,255,.1);
+    animation: dotw3 1.6s step-start infinite;
+  }
+}
+@keyframes dotw1 {
+  0%,100%{background-color:rgba(255,255,255,.5);}
+  30%{background-color:rgba(255,255,255,.1);}
+  60%{background-color:rgba(255,255,255,.3);}
+}
+@keyframes dotw2 {
+  0%,100%{background-color:rgba(255,255,255,.3);}
+  30%{background-color:rgba(255,255,255,.5);}
+  60%{background-color:rgba(255,255,255,.1);}
+}
+@keyframes dotw3 {
+  0%,100%{background-color:rgba(255,255,255,.1);}
+  30%{background-color:rgba(255,255,255,.3);}
+  60%{background-color:rgba(255,255,255,.5);}
+}

src/style/widget/weui-navigation-bar/weui-navigation-bar.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn.wxss";
+
+
+page {
+  --height: 44px;
+  --right: 190rpx;
+}
+
+
+.weui-navigation-bar{
+  overflow: hidden;
+  .android{
+    --height: 48px;
+    --right: 222rpx;
+  }
+
+}
+.weui-navigation-bar__inner{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 5001;
+  height: var(--height);
+  display: flex;
+  align-items: center;
+  padding-right: var(--right);
+  width: calc(100% ~"- var(--right)");
+
+  .weui-navigation-bar__left {
+    position: relative;
+    width: var(--right);
+    padding-left: 16px;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:flex;
+    align-items:center;
+    -webkit-box-pack:center;
+
+    .weui-navigation-bar__btn{
+      display:inline-block;
+      vertical-align:middle;
+      background-repeat:no-repeat;
+    }
+    .weui-navigation-bar__btn_goback{
+      font-size:12px;
+      width:1em;
+      height:2em;
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
+      background-position: 50% 50%;
+      background-size:cover;
+      &:active{
+        opacity:.5;
+      }
+    }
+  }
+
+  .weui-navigation-bar__center {
+    font-size: 17px;
+    text-align: center;
+    position: relative;
+    flex: 1;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:flex;
+    align-items:center;
+    -webkit-box-pack:center;
+    -webkit-justify-content:center;
+    justify-content:center;
+  }
+  .weui-navigation-bar__loading{
+    font-size:0;
+    .weui-loading{
+      margin-left:0;
+    }
+  }
+
+  .weui-navigation-bar__right {
+    margin-right: 16px;
+  }
+}
+
+.weui-navigation-bar__placeholder {
+  height: var(--height);
+  background: #F8F8F8;
+  position:relative;
+  z-index:50;
+}
+
+

src/style/widget/weui-tab/weui-tabbar.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn.wxss";
+
+.weui-tabbar {
+    display: flex;
+    position: relative;
+    z-index: 500;
+    background-color: @weuiBgColorPrimary;
+
+    &:before {
+        .setTopLine(@weuiLineColorLight);
+    }
+}
+
+.weui-tabbar__item {
+    display: block;
+    flex: 1;
+    padding: 8px 0 4px;
+    padding-bottom:calc(8px ~"+ constant(safe-area-inset-bottom)");
+    padding-bottom:calc(8px ~"+ env(safe-area-inset-bottom)");
+    font-size: 0;
+    color: @weuiTextColorDesc;
+    text-align: center;
+    .setTapColor();
+
+    &:first-child {
+      padding-left:constant(safe-area-inset-left);
+      padding-left:env(safe-area-inset-left);
+    }
+    &:last-child {
+        padding-right:constant(safe-area-inset-right);
+        padding-right:env(safe-area-inset-right);
+    }
+
+    &.weui-bar__item_on {
+        .weui-tabbar__icon,
+        .weui-tabbar__icon > i,
+        .weui-tabbar__label {
+            color: @weuiColorPrimary;
+        }
+    }
+}
+
+.weui-tabbar__icon {
+    display: inline-block;
+    width: @weuiTabBarHeight - 8*2 - 10*1.4 - 2;
+    height: @weuiTabBarHeight - 8*2 - 10*1.4 - 2;
+    margin-bottom:2px;
+
+
+    i&,
+    > i {
+        font-size: 24px;
+        color: @weuiTextColorDesc;
+    }
+
+    image {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.weui-tabbar__label {
+    color: @weuiTextColorTitle;
+    font-size: 10px;
+    line-height: 1.4;
+}

src/style/widget/weui-tips/weui-dialog.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn.wxss";
+
+.weui-dialog__wrp {
+  position: fixed;
+  z-index: 5000;
+  top: 16px;
+  bottom: 16px;
+  left: 16px;
+  right: 16px;
+  text-align:center;
+  font-size:0;
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:flex;
+  align-items:center;
+  -webkit-box-pack:center;
+  -webkit-justify-content:center;
+  justify-content:center;
+  .weui-dialog {
+    max-height:100%;
+  }
+}
+.weui-dialog {
+    background-color: @weuiDialogBackgroundColor;
+    text-align: center;
+    border-radius: 12px;
+    overflow: hidden;
+    display:-webkit-box;
+    display:-webkit-flex;
+    display:flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    max-height:90%;
+}
+.weui-dialog__hd {
+    padding: 32px @weuiDialogGapWidth 16px;
+}
+.weui-dialog__title {
+    font-weight: 700;
+    font-size: 17px;
+    line-height:1.4;
+}
+.weui-dialog__bd {
+    flex:1;
+    overflow-y:auto;
+    -webkit-overflow-scrolling:touch;
+    padding: 0 @weuiDialogGapWidth;
+    margin-bottom:32px;
+    min-height: 40px;
+    font-size: 17px;
+    line-height: 1.4;
+    overflow-wrap:break-word;
+    -webkit-hyphens:auto;
+    hyphens:auto;
+    color: @weuiTextColorDesc;
+    &:first-child{
+        padding:32px @weuiDialogGapWidth 0;
+        font-weight:700;
+        color:@weuiTextColorTitle;
+        display:-webkit-box;
+        display:-webkit-flex;
+        display:flex;
+        -webkit-flex-direction: column;
+        flex-direction: column;
+        -webkit-box-pack:center;
+        -webkit-justify-content:center;
+        justify-content:center;
+    }
+}
+.weui-dialog__ft {
+    position: relative;
+    line-height: 64px;
+    min-height: 64px;
+    font-size: 17px;
+    display: flex;
+    &:after {
+        content: " ";
+        .setTopLine(@weuiDialogLineColor);
+    }
+}
+.weui-dialog__btn {
+    display: block;
+    flex: 1;
+    color: @weuiDialogLinkColor;
+    font-weight:700;
+    text-decoration: none;
+    .setTapColor();
+    &:active {
+        background-color: @weuiDialogLinkActiveBc;
+    }
+
+    position: relative;
+    &:after {
+        content: " ";
+        .setLeftLine(@weuiDialogLineColor);
+    }
+    &:first-child {
+        &:after {
+            display: none;
+        }
+    }
+}
+.weui-dialog__btn_default {
+    color: @weuiTextColorTitle;
+}
+
+@media screen and (min-width: 352px) {
+    .weui-dialog {
+        width: 320px;
+        margin:0 auto;
+    }
+}

src/style/widget/weui-tips/weui-half-screen-dialog.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn.wxss";
+
+.weui-half-screen-dialog {
+  position:fixed;
+  left:0;
+  right:0;
+  bottom:0;
+  max-height:75%;
+  z-index:5000;
+
+  line-height:1.4;
+  background-color:#FFFFFF;
+  border-top-left-radius:12px;
+  border-top-right-radius:12px;
+  overflow:hidden;
+
+  padding:0 24px;
+  padding:0 calc(24px ~"+ constant(safe-area-inset-right)") constant(safe-area-inset-bottom) calc(24px ~"+ constant(safe-area-inset-left)");
+  padding:0 calc(24px ~"+ env(safe-area-inset-right)") env(safe-area-inset-bottom) calc(24px ~"+ env(safe-area-inset-left)");
+}
+.weui-half-screen-dialog__hd {
+  font-size:8px;
+  height:8em;
+  display:flex;
+  align-items:center;
+
+  .weui-icon-btn{
+    position:absolute;
+    top:50%;
+    -webkit-transform:translateY(-50%);
+    transform:translateY(-50%);
+  }
+}
+.weui-half-screen-dialog__hd__side{
+  position:relative;
+  left:-8px;
+}
+.weui-half-screen-dialog__hd__main {
+  flex:1;
+  .weui-half-screen-dialog__hd__side + &{
+    text-align:center;
+    padding:0 40px;
+  }
+  & + .weui-half-screen-dialog__hd__side{
+    right:-8px;
+    left:auto;
+    .weui-icon-btn{
+      right:0;
+    }
+  }
+}
+.weui-half-screen-dialog__title {
+  display:block;
+  color:rgba(0,0,0,.9);
+  font-weight:700;
+  font-size:15px;
+}
+.weui-half-screen-dialog__subtitle {
+  display:block;
+  color:rgba(0,0,0,.5);
+  font-size:10px;
+}
+
+.weui-half-screen-dialog__bd {
+  .hyphens();
+  overflow-y:auto;
+}
+.weui-half-screen-dialog__desc {
+  padding-top:4px;
+  font-size:17px;
+  font-weight:700;
+  color:rgba(0,0,0,.9);
+  line-height:1.4;
+}
+.weui-half-screen-dialog__tips {
+  padding-top:16px;
+  font-size:14px;
+  color:rgba(0,0,0,.3);
+  line-height:1.4;
+}
+.weui-half-screen-dialog__ft {
+  padding:40px 24px 32px;
+  text-align:center;
+  .weui-btn:nth-last-child(n+2),
+  .weui-btn:nth-last-child(n+2) + .weui-btn{
+    display:inline-block;
+    vertical-align:top;
+    margin:0 8px;
+    width:120px;
+  }
+}
+
+.weui-icon-btn{
+  background-color:transparent;
+  background-repeat:no-repeat;
+  background-position:50% 50%;
+  background-size: 100%;
+  border:0;
+  outline:0;
+  font-size:0;
+}
+.weui-icon-btn_goback{
+  width:12px;
+  height:24px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cg fill='none' fill-rule='evenodd' transform='translate(-16 -20)'%3E    %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E    %3Cpath fill='%23000' fill-opacity='.9' d='M26 39.438L24.955 40.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42l7.666-7.79L26 24.563 18.682 32 26 39.438z'/%3E  %3C/g%3E%3C/svg%3E");
+}
+.weui-icon-btn_close{
+  width:24px;
+  height:24px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cdefs%3E    %3Cpath id='33cf2e7b-22e9-42d7-9c56-a9f4a4e03565-a' d='M8 6.943L1.807.75.75 1.807 6.943 8 .75 14.193l1.057 1.057L8 9.057l6.193 6.193 1.057-1.057L9.057 8l6.193-6.193L14.193.75z'/%3E  %3C/defs%3E  %3Cg fill='none' fill-rule='evenodd' transform='translate(-16 -20)'%3E    %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E    %3Cuse fill='%23000' fill-opacity='.9' transform='translate(20 24)' xlink:href='%2333cf2e7b-22e9-42d7-9c56-a9f4a4e03565-a'/%3E  %3C/g%3E%3C/svg%3E");
+}
+.weui-icon-btn_more{
+  width:24px;
+  height: 24px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E  %3Cg fill='none' fill-rule='evenodd' transform='translate(-374 -20)'%3E    %3Cpath fill='%23FFF' d='M0 12C0 5.373 5.367 0 12 0h390c6.628 0 12 5.374 12 12v52H0V12z'/%3E    %3Cpath fill='%23000' fill-opacity='.9' d='M380.75 32a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0zm5.25-1.75a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5zm7 0a1.75 1.75 0 1 1 0 3.5 1.75 1.75 0 0 1 0-3.5z'/%3E  %3C/g%3E%3C/svg%3E");
+}

src/style/widget/weui-tips/weui-mask.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn.wxss";
+
+.weui-mask {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .6);
+}
+
+.weui-mask_transparent{
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+}

src/style/widget/weui-tips/weui-toptips.wxss

+/**
+* Tencent is pleased to support the open source community by making
+* WeUI-WXSS available.
+* 
+* Copyright (C) 2017 THL A29 Limited, a Tencent company.
+* All rights reserved.
+* 
+* Licensed under the MIT License (the "License"); you may not use
+* this file except in compliance with the License. You may obtain a copy of
+* the License at
+* 
+*       http://opensource.org/licenses/MIT
+* 
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+@import "../../base/fn.wxss";
+
+.weui-toptips{
+    position: fixed;
+    -webkit-transform: translateZ(0) translateY(calc(-100% - 8px));
+    transform: translateZ(0) translateY(calc(-100% - 8px));
+    text-align: center;
+    top:8px;
+    left:16px;
+    right:16px;
+    border-radius:4px;
+    padding:8px;
+    -webkit-border-radius:4px;
+    color:rgba(255,255,255,.9);
+    font-size:17px;
+    line-height:1.4;
+    background:rgba(250,81,81,.9);
+    z-index: 5000;
+    .text_wrap();
+    -webkit-transition: all 0.4s ease-in-out;
+    transition: all 0.4s ease-in-out;
+}
+.weui-toptips_show {
+  -webkit-transform: translateZ(0) translateY(0);
+  transform:translateZ(0) translateY(0);
+  opacity: 1;
+}
+.weui-toptips_warn{
+    background-color: @weuiColorWarn;
+}
+.weui-toptips_success {
+  background-color: #09BB07;
+}
+.weui-toptips_error {
+  background-color:#FA5151;
+}
+.weui-toptips_info {
+  background-color: #10AEFF;
+}