feat: weui-wxss 2.0

CHANGELOG.md

+#### v 2.0.0 (2019-08-01)
+
+- 【同步weui】 颜色规范、字体大小规范、间距规范对齐微信7.0新视觉风格
+- 【同步weui】 更新weui-cell、weui-uploader、weui-article、weui-footer、weui-msg、weui-panel、weui-search-bar等组件的UI
+- 【增强】 增加组件 slideview 右滑操作 
+- 【增强】 增加组件 gallery 模拟原生全屏预览 
+- 【增强】 增加组件 loading 加载中 
+- 【增强】 增加组件 dialog 模拟原生弹窗 
+- 【增强】 增加组件 half-screen-dialog 半屏弹窗
+- 【增强】 增加组件 navigation-bar 模拟原生顶部导航条
+- 【增强】 增加组件 tabbar 模拟原生底部tab
+- 【优化】 废弃组件 navbar
+
 #### v 1.1.1 (2017-01-18)
 
 - 【同步weui】 增加扩展类.weui-loading_transparent
@@ -18,4 +31,4 @@
 
 初始发布
 
-- Initial release
\ No newline at end of file
+- Initial release

dist/app.json

 {
   "pages": [
     "example/index",
-
     "example/button/button",
     "example/list/list",
+    "example/slideview/slideview",
     "example/input/input",
     "example/slider/slider",
     "example/uploader/uploader",
-
     "example/article/article",
     "example/badge/badge",
     "example/flex/flex",
@@ -15,12 +14,13 @@
     "example/gallery/gallery",
     "example/grid/grid",
     "example/icons/icons",
+    "example/loading/loading",
     "example/loadmore/loadmore",
     "example/panel/panel",
     "example/preview/preview",
     "example/progress/progress",
-
     "example/actionsheet/actionsheet",
+    "example/half-screen-dialog/half-screen-dialog",
     "example/dialog/dialog",
     "example/msg/msg",
     "example/msg/msg_text",
@@ -29,17 +29,15 @@
     "example/msg/msg_fail",
     "example/picker/picker",
     "example/toast/toast",
-
-    "example/navbar/navbar",
+    "example/navigation-bar/navigation-bar",
     "example/tabbar/tabbar",
-
     "example/searchbar/searchbar"
   ],
   "window": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "WeUI for 小程序",
-    "navigationBarBackgroundColor": "#f8f8f8",
-    "backgroundColor": "#f8f8f8"
+    "navigationBarBackgroundColor": "#EDEDED",
+    "backgroundColor": "#EDEDED"
   },
   "networkTimeout": {
     "request": 10000,
@@ -47,5 +45,7 @@
     "uploadFile": 10000,
     "downloadFile": 10000
   },
-  "debug": true
-}
+  "style": "v2",
+  "debug": true,
+  "sitemapLocation": "sitemap42.json"
+}
\ No newline at end of file

dist/app.wxss

@@ -17,10 +17,13 @@ page{
 }
 
 .page__ft{
-    padding-bottom: 10px;
     text-align: center;
+    padding:0 0 10px;
+    padding:0 0 calc(10px + constant(safe-area-inset-bottom));
+    padding:0 0 calc(10px + env(safe-area-inset-bottom));
 }
 
+
 .page__title {
     text-align: left;
     font-size: 20px;

dist/example/button/button.wxml

@@ -14,12 +14,6 @@
         <button class="weui-btn" type="warn" disabled="true">警告类操作</button>
 
         <view class="button-sp-area">
-            <button class="weui-btn" type="primary" plain="true">按钮</button>
-            <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>
-
-            <button class="weui-btn" type="default" plain="true">按钮</button>
-            <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>
-
             <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
             <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
             <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>

dist/example/dialog/dialog.js

 Page({
-    openConfirm: function () {
+    data: {
+        showDialog: false
+    },
+     openConfirm: function () {
         wx.showModal({
             title: '弹窗标题',
             content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
@@ -15,15 +18,14 @@ Page({
             }
         });
     },
-    openAlert: function () {
-        wx.showModal({
-            content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
-            showCancel: false,
-            success: function (res) {
-                if (res.confirm) {
-                    console.log('用户点击确定')
-                }
-            }
-        });
+    openDialog: function () {
+        this.setData({
+            istrue: true
+        })
+    },
+    closeDialog: function () {
+        this.setData({
+            istrue: false
+        })
     }
-});
\ No newline at end of file
+});

dist/example/dialog/dialog.wxml

 <view class="page">
     <view class="page__hd">
         <view class="page__title">Dialog</view>
-        <view class="page__desc">对话框，采用小程序原生的modal</view>
+        <view class="page__desc">对话框</view>
     </view>
     <view class="page__bd">
         <view class="weui-btn-area">
-            <button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button>
-            <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>
+            <button class="weui-btn" type="default" bindtap="openConfirm">原生 Dialog</button>
+            <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">
+                  <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFill" style="max-width:100%;"/>
+                </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>
\ No newline at end of file
+</view>

dist/example/dialog/dialog.wxss

 page{
     background-color: #FFFFFF;
-}
\ No newline at end of file
+}
+.weui-demo-dialog{
+  visibility:hidden;
+  opacity:0;
+  transition:opacity .3s;
+}
+.weui-demo-dialog_show{
+  visibility:visible;
+  opacity:1;
+}

dist/example/gallery/gallery.js

-Page({});
\ No newline at end of file
+Page({
+    openGallery: function () {
+        this.setData({
+            istrue: true
+        })
+    },
+    closeGallery: function () {
+        this.setData({
+            istrue: false
+        })
+    }
+});

dist/example/gallery/gallery.wxml

 <view class="page">
     <view class="page__hd">
         <view class="page__title">Gallery</view>
-        <view class="page__desc">画廊，建议采用小程序原生的wx.previewImage来实现。详情请看小程序文档。</view>
+        <view class="page__desc">画廊，模拟小程序原生的wx.previewImage。</view>
     </view>
-</view>
\ No newline at end of file
+    <view class="page__bd">
+      <view class="weui-btn-area">
+          <button class="weui-btn" type="default" bindtap="openGallery">Gallery</button>
+      </view>
+      <view class="weui-gallery {{istrue ? 'weui-gallery_show' : ''}}" bindtap="closeGallery">
+        <view class="weui-gallery__info">1/17</view>
+        <view class="weui-gallery__img__wrp">
+              <image mode="aspectFit" class="weui-gallery__img" src="../images/pic_160.png"></image>
+        </view>
+        <view class="weui-gallery__opr">
+          <navigator href="javascript:" class="weui-gallery__del">删除</navigator>
+        </view>
+      </view>
+    </view>
+</view>

dist/example/index.js

@@ -5,25 +5,25 @@ Page({
                 id: 'form',
                 name: '表单',
                 open: false,
-                pages: ['button', 'list', 'input', 'slider', 'uploader']
+                pages: ['button', 'list', 'slideview', 'input', 'slider', 'uploader']
             },
             {
                 id: 'widget',
                 name: '基础组件',
                 open: false,
-                pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loadmore', 'panel', 'preview', 'progress']
+                pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loading', 'loadmore', 'panel', 'preview', 'progress']
             },
             {
                 id: 'feedback',
                 name: '操作反馈',
                 open: false,
-                pages: ['actionsheet', 'dialog', 'msg', 'picker', 'toast']
+                pages: ['actionsheet', 'dialog', 'half-screen-dialog', 'msg', 'picker', 'toast']
             },
             {
                 id: 'nav',
                 name: '导航相关',
                 open: false,
-                pages: ['navbar', 'tabbar']
+                pages: ['navigation-bar', 'tabbar']
             },
             {
                 id: 'search',

dist/example/index.wxss

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

dist/example/input/input.wxml

@@ -24,7 +24,7 @@
         </view>
 
         <view class="weui-cells__title">复选列表项</view>
-        <view class="weui-cells weui-cells_after-title">
+        <view class="weui-cells weui-cells_checkbox weui-cells_after-title">
             <checkbox-group bindchange="checkboxChange">
                 <label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}" wx:key="value">
                     <checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
@@ -43,7 +43,7 @@
 
         <view class="weui-cells__title">表单</view>
         <view class="weui-cells weui-cells_after-title">
-            <view class="weui-cell weui-cell_input">
+            <view class="weui-cell ">
                 <view class="weui-cell__hd">
                     <view class="weui-label">qq</view>
                 </view>
@@ -51,7 +51,7 @@
                     <input class="weui-input" placeholder="请输入qq"/>
                 </view>
             </view>
-            <view class="weui-cell weui-cell_input weui-cell_vcode">
+            <view class="weui-cell  weui-cell_vcode">
                 <view class="weui-cell__hd">
                     <view class="weui-label">手机号</view>
                 </view>
@@ -62,7 +62,7 @@
                     <view class="weui-vcode-btn">获取验证码</view>
                 </view>
             </view>
-            <view class="weui-cell weui-cell_input">
+            <view class="weui-cell ">
                 <view class="weui-cell__hd">
                     <view class="weui-label">日期</view>
                 </view>
@@ -72,7 +72,7 @@
                     </picker>
                 </view>
             </view>
-            <view class="weui-cell weui-cell_input">
+            <view class="weui-cell ">
                 <view class="weui-cell__hd">
                     <view class="weui-label">时间</view>
                 </view>
@@ -82,7 +82,7 @@
                     </picker>
                 </view>
             </view>
-            <view class="weui-cell weui-cell_input weui-cell_vcode">
+            <view class="weui-cell  weui-cell_vcode">
                 <view class="weui-cell__hd">
                     <view class="weui-label">验证码</view>
                 </view>
@@ -98,7 +98,7 @@
 
         <view class="weui-cells__title">表单报错</view>
         <view class="weui-cells weui-cells_after-title">
-            <view class="weui-cell weui-cell_input weui-cell_warn">
+            <view class="weui-cell  weui-cell_warn">
                 <view class="weui-cell__hd">
                     <view class="weui-label">卡号</view>
                 </view>
@@ -123,7 +123,7 @@
 
         <view class="weui-cells__title">文本框</view>
         <view class="weui-cells weui-cells_after-title">
-            <view class="weui-cell weui-cell_input">
+            <view class="weui-cell ">
                 <view class="weui-cell__bd">
                     <input class="weui-input" placeholder="请输入文本" />
                 </view>
@@ -191,4 +191,4 @@
             <button class="weui-btn" type="primary" bindtap="showTopTips">确定</button>
         </view>
     </view>
-</view>
\ No newline at end of file
+</view>

dist/example/msg/msg_success copy.js

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

dist/example/msg/msg_success.wxml copy

-<view class="page">
-    <view class="weui-msg">
-        <view class="weui-msg__icon-area">
-            <icon type="success" size="93"></icon>
-        </view>
-        <view class="weui-msg__text-area">
-            <view class="weui-msg__title">操作成功</view>
-            <view class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></view>
-        </view>
-        <view class="weui-msg__opr-area">
-            <view class="weui-btn-area">
-                <button class="weui-btn" type="primary">推荐操作</button>
-                <button class="weui-btn" type="default">辅助操作</button>
-            </view>
-        </view>
-        <view class="weui-msg__extra-area">
-            <view class="weui-footer">
-                <view class="weui-footer__links">
-                    <navigator url="" class="weui-footer__link">底部链接文本</navigator>
-                </view>
-                <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
-            </view>
-        </view>
-    </view>
-</view>
\ No newline at end of file

dist/example/msg/msg_success.wxss copy

-page{
-    background-color: #FFFFFF;
-}
-page,.page{height:100%;}

dist/example/msg/msg_text copy.js

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

dist/example/msg/msg_text.wxml copy

-<view class="page">
-    <view class="weui-msg">
-        <view class="weui-msg__icon-area">
-            <icon type="success" size="93"></icon>
-        </view>
-        <view class="weui-msg__text-area">
-            <view class="weui-msg__title">操作成功</view>
-            <view class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></view>
-        </view>
-        <view class="weui-msg__opr-area">
-            <view class="weui-btn-area">
-                <button class="weui-btn" type="primary">推荐操作</button>
-                <button class="weui-btn" type="default">辅助操作</button>
-            </view>
-        </view>
-        <view class="weui-msg__extra-area">
-            <view class="weui-footer">
-                <view class="weui-footer__links">
-                    <navigator url="" class="weui-footer__link">底部链接文本</navigator>
-                </view>
-                <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
-            </view>
-        </view>
-    </view>
-</view>
\ No newline at end of file

dist/example/msg/msg_text.wxss copy

-page{
-    background-color: #FFFFFF;
-}
-page,.page{height:100%;}

dist/example/searchbar/searchbar.wxml

@@ -7,14 +7,14 @@
         <view class="weui-search-bar">
             <view class="weui-search-bar__form">
                 <view class="weui-search-bar__box">
-                    <icon class="weui-icon-search_in-box" type="search" size="12"></icon>
+                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                     <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
                     <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
-                        <icon type="clear" size="12"></icon>
+                        <icon type="clear" size="14"></icon>
                     </view>
                 </view>
                 <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
-                    <icon class="weui-icon-search" type="search" size="12"></icon>
+                    <icon class="weui-icon-search" type="search" size="14"></icon>
                     <view class="weui-search-bar__text">搜索</view>
                 </label>
             </view>