update

app.js

+App({
+    onLaunch: function () {
+        console.log('App Launch')
+    },
+    onShow: function () {
+        console.log('App Show')
+    },
+    onHide: function () {
+        console.log('App Hide')
+    },
+    globalData: {
+        hasLogin: false
+    }
+});
\ No newline at end of file

app.json

+{
+  "pages": [
+    "pages/index/index",
+    "pages/home/home",
+    "example/index",
+    "example/button/button",
+    "example/list/list",
+    "example/input/input",
+    "example/slider/slider",
+    "example/uploader/uploader",
+    "example/article/article",
+    "example/badge/badge",
+    "example/flex/flex",
+    "example/footer/footer",
+    "example/gallery/gallery",
+    "example/grid/grid",
+    "example/icons/icons",
+    "example/loadmore/loadmore",
+    "example/panel/panel",
+    "example/preview/preview",
+    "example/progress/progress",
+    "example/actionsheet/actionsheet",
+    "example/dialog/dialog",
+    "example/msg/msg",
+    "example/msg/msg_success",
+    "example/msg/msg_fail",
+    "example/picker/picker",
+    "example/toast/toast",
+    "example/navbar/navbar",
+    "example/tabbar/tabbar",
+    "example/searchbar/searchbar"
+        
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "兑吧图书馆",
+    "navigationBarBackgroundColor": "#f8f8f8",
+    "backgroundColor": "#f8f8f8"
+  },
+  "networkTimeout": {
+    "request": 10000,
+    "connectSocket": 10000,
+    "uploadFile": 10000,
+    "downloadFile": 10000
+  },
+  "tabBar": {
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页",
+        "selectedIconPath": "example/images/icon_nav_search.png",
+        "iconPath": "example/images/icon_nav_search.png"
+      },
+      {
+        "pagePath": "pages/home/home",
+        "text": "我的",
+        "selectedIconPath": "example/images/icon_nav_widget.png",
+        "iconPath": "example/images/icon_nav_widget.png"
+      }
+    ],
+    "color": "#c8c8c8",
+    "selectedColor": "#000000"
+  },
+  "debug": true
+}
\ No newline at end of file

app.wxss

+@import 'style/weui.wxss';
+
+page{
+    background-color: #F8F8F8;
+    font-size: 16px;
+    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+}
+.page__hd {
+    padding: 40px;
+}
+.page__bd {
+    padding-bottom: 0px;
+}
+.page__bd_spacing {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.page__ft{
+    padding-bottom: 10px;
+    text-align: center;
+}
+
+.page__title {
+    text-align: left;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.page__desc {
+    margin-top: 5px;
+    color: #888888;
+    text-align: left;
+    font-size: 14px;
+}
\ No newline at end of file

example/actionsheet/actionsheet.js

+Page({
+    open: function(){
+        wx.showActionSheet({
+            itemList: ['A', 'B', 'C'],
+            success: function(res) {
+                if (!res.cancel) {
+                    console.log(res.tapIndex)
+                }
+            }
+        });
+    }
+});
\ No newline at end of file

example/actionsheet/actionsheet.json

+{}
\ No newline at end of file

example/actionsheet/actionsheet.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">ActionSheet</view>
+        <view class="page__desc">弹出式菜单，采用小程序原生的actionsheet</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-btn-area">
+            <button type="default" bindtap="open">ActionSheet</button>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/actionsheet/actionsheet.wxss

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

example/article/article.js

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

example/article/article.json

+{}
\ No newline at end of file

example/article/article.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Article</view>
+        <view class="page__desc">文章</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-article">
+            <view class="weui-article__h1">大标题</view>
+            <view class="weui-article__section">
+                <view class="weui-article__title">章标题</view>
+                <view class="weui-article__section">
+                    <view class="weui-article__h3">1.1 节标题</view>
+                    <view class="weui-article__p">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </view>
+                    <view class="weui-article__p">
+                        <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" />
+                        <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" />
+                    </view>
+                </view>
+                <view class="weui-article__section">
+                    <view class="weui-article__h3">1.2 节标题</view>
+                    <view class="weui-article__p">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/article/article.wxss

+page{
+    background-color: #FFFFFF;
+}
+image{
+    margin: 4px 0;
+}
\ No newline at end of file

example/badge/badge.js

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

example/badge/badge.json

+{}
\ No newline at end of file

example/badge/badge.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Badge</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 weui-cell_access">
+                <view class="weui-cell__bd">单行列表</view>
+                <view class="weui-cell__ft weui-cell__ft_in-access" style="font-size: 0">
+                    <view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
+                    <view class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></view>
+                </view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell">
+                <view class="weui-cell__hd" style="position: relative;margin-right: 10px;">
+                    <image src="../images/pic_160.png" style="width: 50px; height: 50px; display: block"/>
+                    <view class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <view>联系人名称</view>
+                    <view style="font-size: 13px;color: #888888;">摘要信息</view>
+                </view>
+            </view>
+            <view class="weui-cell weui-cell_access">
+                <view class="weui-cell__bd">
+                    <view style="display: inline-block; vertical-align: middle">单行列表</view>
+                    <view class="weui-badge" style="margin-left: 5px;">8</view>
+                </view>
+                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+            </view>
+            <view class="weui-cell weui-cell_access">
+                <view class="weui-cell__bd">
+                    <view style="display: inline-block; vertical-align: middle">单行列表</view>
+                    <view class="weui-badge" style="margin-left: 5px;">8</view>
+                </view>
+                <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
+            </view>
+            <view class="weui-cell weui-cell_access">
+                <view class="weui-cell__bd">
+                    <view style="display: inline-block; vertical-align: middle">单行列表</view>
+                    <view class="weui-badge" style="margin-left: 5px;">New</view>
+                </view>
+                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+            </view>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/badge/badge.wxss

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

example/button/button.js

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

example/button/button.json

+{}
\ No newline at end of file

example/button/button.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Button</view>
+        <view class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</view>
+    </view>
+    <view class="page__bd page__bd_spacing">
+        <button class="weui-btn" type="primary">页面主操作 Normal</button>
+        <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>
+
+        <button class="weui-btn" type="default">页面次要操作 Normal</button>
+        <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>
+
+        <button class="weui-btn" type="warn">警告类操作 Normal</button>
+        <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</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>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/button/button.wxss

+.button-sp-area{
+    margin: 0 auto;
+    padding-top: 15px;
+    width: 60%;
+}
+.mini-btn{
+    margin-right: 5px;
+}
\ No newline at end of file

example/dialog/dialog.js

+Page({
+    openConfirm: function () {
+        wx.showModal({
+            title: '弹窗标题',
+            content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
+            confirmText: "主操作",
+            cancelText: "辅助操作",
+            success: function (res) {
+                console.log(res);
+                if (res.confirm) {
+                    console.log('用户点击主操作')
+                }else{
+                    console.log('用户点击辅助操作')
+                }
+            }
+        });
+    },
+    openAlert: function () {
+        wx.showModal({
+            content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
+            showCancel: false,
+            success: function (res) {
+                if (res.confirm) {
+                    console.log('用户点击确定')
+                }
+            }
+        });
+    }
+});
\ No newline at end of file

example/dialog/dialog.json

+{}
\ No newline at end of file

example/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="openConfirm">Confirm Dialog</button>
+            <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/dialog/dialog.wxss

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

example/flex/flex.js

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

example/flex/flex.json

+{}
\ No newline at end of file

example/flex/flex.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Flex</view>
+        <view class="page__desc">Flex布局</view>
+    </view>
+    <view class="page__bd page__bd_spacing">
+        <view class="weui-flex">
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+        </view>
+        <view class="weui-flex">
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+        </view>
+        <view class="weui-flex">
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+        </view>
+        <view class="weui-flex">
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+        </view>
+        <view class="weui-flex">
+            <view><view class="placeholder">weui</view></view>
+            <view class="weui-flex__item"><view class="placeholder">weui</view></view>
+            <view><view class="placeholder">weui</view></view>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/flex/flex.wxss

+.placeholder{
+    margin: 5px;
+    padding: 0 10px;
+    text-align: center;
+    background-color: #EBEBEB;
+    height: 2.3em;
+    line-height: 2.3em;
+    color: #cfcfcf;
+}
\ No newline at end of file

example/footer/footer.js

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

example/footer/footer.json

+{}
\ No newline at end of file

example/footer/footer.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Footer</view>
+        <view class="page__desc">页脚</view>
+    </view>
+    <view class="page__bd page__bd_spacing">
+        <view class="weui-footer">
+            <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
+        </view>
+
+
+        <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 class="weui-footer">
+            <view class="weui-footer__links">
+                <navigator url="" class="weui-footer__link">底部链接</navigator>
+                <navigator url="" class="weui-footer__link">底部链接</navigator>
+            </view>
+            <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
+        </view>
+
+
+        <view class="weui-footer weui-footer_fixed-bottom">
+            <view class="weui-footer__links">
+                <navigator url="" class="weui-footer__link">WeUI首页</navigator>
+            </view>
+            <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/footer/footer.wxss

+/* 作为展示用的样式 */
+
+.weui-footer{
+    margin-bottom: 50px;
+}
+.weui-footer_fixed-bottom{
+    margin-bottom: 0;
+}
\ No newline at end of file

example/gallery/gallery.js

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

example/gallery/gallery.json

+{}
\ No newline at end of file

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>
+</view>
\ No newline at end of file

example/gallery/gallery.wxss

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

example/grid/grid.js

+Page({
+    data: {
+        grids: [0, 1, 2, 3, 4, 5, 6, 7, 8]
+    }
+});
\ No newline at end of file

example/grid/grid.json

+{}
\ No newline at end of file

example/grid/grid.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Grid</view>
+        <view class="page__desc">九宫格</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-grids">
+            <block wx:for="{{grids}}" wx:key="*this">
+                <navigator url="" class="weui-grid" hover-class="weui-grid_active">
+                    <image class="weui-grid__icon" src="../images/icon_tabbar.png" />
+                    <view class="weui-grid__label">Grid</view>
+                </navigator>
+            </block>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/grid/grid.wxss

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

example/icons/icons.js

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

example/icons/icons.json

+{}
\ No newline at end of file

example/icons/icons.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Icons</view>
+        <view class="page__desc">图标</view>
+    </view>
+    <view class="page__bd">
+        <view class="icon-box">
+            <icon type="success" size="93"></icon>
+            <view class="icon-box__ctn">
+                <view class="icon-box__title">成功</view>
+                <view class="icon-box__desc">用于表示操作顺利达成</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <icon type="info" size="93"></icon>
+            <view class="icon-box__ctn">
+                <view class="icon-box__title">提示</view>
+                <view class="icon-box__desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <icon type="warn" size="93" color="#FFBE00"></icon>
+            <view class="icon-box__ctn">
+                <view class="icon-box__title">普通警告</view>
+                <view class="icon-box__desc">用于表示操作后将引起一定后果的情况</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <icon type="warn" size="93"></icon>
+            <view class="icon-box__ctn">
+                <view class="icon-box__title">强烈警告</view>
+                <view class="icon-box__desc">用于表示操作后将引起严重的不可挽回的后果的情况</view>
+            </view>
+        </view>
+        <view class="icon-box">
+            <icon type="waiting" size="93"></icon>
+            <view class="icon-box__ctn">
+                <view class="icon-box__title">等待</view>
+                <view class="icon-box__desc">用于表示等待</view>
+            </view>
+        </view>
+        <view class="icon_sp_area">
+            <icon type="success" size="23"></icon>
+            <icon type="success_no_circle" size="23"></icon>
+            <icon type="circle" size="23"></icon>
+            <icon type="warn" size="23" color="#F43530"></icon>
+            <icon type="download" size="23"></icon>
+            <icon type="info_circle" size="23"></icon>
+            <icon type="cancel" size="23"></icon>
+            <icon type="search" size="20"></icon>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/icons/icons.wxss

+icon{
+    margin-right: 13px;
+}
+.page__bd {
+    padding-left: 40px;
+    padding-right: 40px;
+    text-align: left;
+}
+.icon-box{
+    margin-bottom: 25px;
+    display: flex;
+    align-items: center;
+}
+.icon-box__ctn{
+    flex-shrink: 100;
+}
+.icon-box__title{
+    font-size: 20px;
+}
+.icon-box__desc{
+    margin-top: 6px;
+    font-size: 12px;
+    color: #888888;
+}
+.icon_sp_area {
+    margin-top: 10px;
+    text-align: left;
+}
\ No newline at end of file

example/images/base64.js

+module.exports = {
+    icon20: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=",
+    icon60: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg=="
+};
\ No newline at end of file

example/index.js

+Page({
+    data: {
+        list: [
+            {
+                id: 'form',
+                name: '表单',
+                open: false,
+                pages: ['button', 'list', 'input', 'slider', 'uploader']
+            },
+            {
+                id: 'widget',
+                name: '基础组件',
+                open: false,
+                pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loadmore', 'panel', 'preview', 'progress']
+            },
+            {
+                id: 'feedback',
+                name: '操作反馈',
+                open: false,
+                pages: ['actionsheet', 'dialog', 'msg', 'picker', 'toast']
+            },
+            {
+                id: 'nav',
+                name: '导航相关',
+                open: false,
+                pages: ['navbar', 'tabbar']
+            },
+            {
+                id: 'search',
+                name: '搜索相关',
+                open: false,
+                pages: ['searchbar']
+            }
+        ]
+    },
+    kindToggle: function (e) {
+        var id = e.currentTarget.id, list = this.data.list;
+        for (var i = 0, len = list.length; i < len; ++i) {
+            if (list[i].id == id) {
+                list[i].open = !list[i].open
+            } else {
+                list[i].open = false
+            }
+        }
+        this.setData({
+            list: list
+        });
+    }
+});

example/index.json

+{}
\ No newline at end of file

example/index.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">WeUI</view>
+        <view class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</view>
+    </view>
+    <view class="page__bd page__bd_spacing">
+        <view class="kind-list">
+            <block wx:for="{{list}}" wx:key="id">
+                <view class="kind-list__item">
+                    <view id="{{item.id}}" class="weui-flex kind-list__item-hd {{item.open ? 'kind-list__item-hd_show' : ''}}" bindtap="kindToggle">
+                        <view class="weui-flex__item">{{item.name}}</view>
+                        <image class="kind-list__img" src="images/icon_nav_{{item.id}}.png"></image>
+                    </view>
+                    <view class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}">
+                        <view class="weui-cells {{item.open ? 'weui-cells_show' : ''}}">
+                            <block wx:for="{{item.pages}}" wx:for-item="page" wx:key="*this">
+                                <navigator url="{{page}}/{{page}}" class="weui-cell weui-cell_access">
+                                    <view class="weui-cell__bd">{{page}}</view>
+                                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+                                </navigator>
+                            </block>
+                        </view>
+                    </view>
+                </view>
+            </block>
+        </view>
+    </view>
+    <view class="page__ft">
+        <image src="images/icon_footer.png" style="width: 84px; height: 19px;"></image>
+    </view>
+</view>
\ No newline at end of file

example/index.wxss

+/*!
+ * WeUI v1.1.1 (https://github.com/weui/weui-wxss)
+ * Copyright 2017 Tencent, Inc.
+ * Licensed under the MIT license
+ */
+
+.weui-flex {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.weui-cells {
+  margin-top: 0;
+  opacity: 0;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.weui-cells:after, .weui-cells:before {
+  display: none;
+}
+
+.weui-cells_show {
+  opacity: 1;
+  -webkit-transform: translateY(0);
+  transform: translateY(0);
+}
+
+.weui-cell:before {
+  right: 15px;
+}
+
+.kind-list__item {
+  margin: 10px 0;
+  background-color: #fff;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.kind-list__item:first-child {
+  margin-top: 0;
+}
+
+.kind-list__img {
+  width: 30px;
+  height: 30px;
+}
+
+.kind-list__item-hd {
+  padding: 20px;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+.kind-list__item-hd_show {
+  opacity: 0.4;
+}
+
+.kind-list__item-bd {
+  height: 0;
+  overflow: hidden;
+}
+
+.kind-list__item-bd_show {
+  height: auto;
+}

example/input/input.js

+Page({
+    data: {
+        showTopTips: false,
+
+        radioItems: [
+            {name: 'cell standard', value: '0'},
+            {name: 'cell standard', value: '1', checked: true}
+        ],
+        checkboxItems: [
+            {name: 'standard is dealt for u.', value: '0', checked: true},
+            {name: 'standard is dealicient for u.', value: '1'}
+        ],
+
+        date: "2016-09-01",
+        time: "12:01",
+
+        countryCodes: ["+86", "+80", "+84", "+87"],
+        countryCodeIndex: 0,
+
+        countries: ["中国", "美国", "英国"],
+        countryIndex: 0,
+
+        accounts: ["微信号", "QQ", "Email"],
+        accountIndex: 0,
+
+        isAgree: false
+    },
+    showTopTips: function(){
+        var that = this;
+        this.setData({
+            showTopTips: true
+        });
+        setTimeout(function(){
+            that.setData({
+                showTopTips: false
+            });
+        }, 3000);
+    },
+    radioChange: function (e) {
+        console.log('radio发生change事件，携带value值为：', e.detail.value);
+
+        var radioItems = this.data.radioItems;
+        for (var i = 0, len = radioItems.length; i < len; ++i) {
+            radioItems[i].checked = radioItems[i].value == e.detail.value;
+        }
+
+        this.setData({
+            radioItems: radioItems
+        });
+    },
+    checkboxChange: function (e) {
+        console.log('checkbox发生change事件，携带value值为：', e.detail.value);
+
+        var checkboxItems = this.data.checkboxItems, values = e.detail.value;
+        for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
+            checkboxItems[i].checked = false;
+
+            for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
+                if(checkboxItems[i].value == values[j]){
+                    checkboxItems[i].checked = true;
+                    break;
+                }
+            }
+        }
+
+        this.setData({
+            checkboxItems: checkboxItems
+        });
+    },
+    bindDateChange: function (e) {
+        this.setData({
+            date: e.detail.value
+        })
+    },
+    bindTimeChange: function (e) {
+        this.setData({
+            time: e.detail.value
+        })
+    },
+    bindCountryCodeChange: function(e){
+        console.log('picker country code 发生选择改变，携带值为', e.detail.value);
+
+        this.setData({
+            countryCodeIndex: e.detail.value
+        })
+    },
+    bindCountryChange: function(e) {
+        console.log('picker country 发生选择改变，携带值为', e.detail.value);
+
+        this.setData({
+            countryIndex: e.detail.value
+        })
+    },
+    bindAccountChange: function(e) {
+        console.log('picker account 发生选择改变，携带值为', e.detail.value);
+
+        this.setData({
+            accountIndex: e.detail.value
+        })
+    },
+    bindAgreeChange: function (e) {
+        this.setData({
+            isAgree: !!e.detail.value.length
+        });
+    }
+});
\ No newline at end of file

example/input/input.json

+{}
\ No newline at end of file

example/input/input.wxml

+<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
+    <view class="page__hd">
+        <view class="page__title">Input</view>
+        <view class="page__desc">表单输入</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">错误提示</view>
+
+        <view class="weui-cells__title">单选列表项</view>
+        <view class="weui-cells weui-cells_after-title">
+            <radio-group bindchange="radioChange">
+                <label class="weui-cell weui-check__label" wx:for="{{radioItems}}" wx:key="value">
+                    <radio class="weui-check" value="{{item.value}}" checked="{{item.checked}}"/>
+
+                    <view class="weui-cell__bd">{{item.name}}</view>
+                    <view class="weui-cell__ft weui-cell__ft_in-radio" wx:if="{{item.checked}}">
+                        <icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
+                    </view>
+                </label>
+            </radio-group>
+            <view class="weui-cell weui-cell_link">
+                <view class="weui-cell__bd">添加更多</view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">复选列表项</view>
+        <view class="weui-cells 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}}"/>
+
+                    <view class="weui-cell__hd weui-check__hd_in-checkbox">
+                        <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
+                        <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
+                    </view>
+                    <view class="weui-cell__bd">{{item.name}}</view>
+                </label>
+            </checkbox-group>
+            <view class="weui-cell weui-cell_link">
+                <view class="weui-cell__bd">添加更多</view>
+            </view>
+        </view>
+
+        <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__hd">
+                    <view class="weui-label">qq</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <input class="weui-input" placeholder="请输入qq"/>
+                </view>
+            </view>
+            <view class="weui-cell weui-cell_input weui-cell_vcode">
+                <view class="weui-cell__hd">
+                    <view class="weui-label">手机号</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <input class="weui-input" placeholder="请输入手机号" />
+                </view>
+                <view class="weui-cell__ft">
+                    <view class="weui-vcode-btn">获取验证码</view>
+                </view>
+            </view>
+            <view class="weui-cell weui-cell_input">
+                <view class="weui-cell__hd">
+                    <view class="weui-label">日期</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
+                        <view class="weui-input">{{date}}</view>
+                    </picker>
+                </view>
+            </view>
+            <view class="weui-cell weui-cell_input">
+                <view class="weui-cell__hd">
+                    <view class="weui-label">时间</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
+                        <view class="weui-input">{{time}}</view>
+                    </picker>
+                </view>
+            </view>
+            <view class="weui-cell weui-cell_input weui-cell_vcode">
+                <view class="weui-cell__hd">
+                    <view class="weui-label">验证码</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <input class="weui-input" placeholder="请输入验证码" />
+                </view>
+                <view class="weui-cell__ft">
+                    <image class="weui-vcode-img" src="../images/vcode.jpg" style="width: 108px"></image>
+                </view>
+            </view>
+        </view>
+        <view class="weui-cells__tips">底部说明文字底部说明文字</view>
+
+        <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__hd">
+                    <view class="weui-label">卡号</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <input class="weui-input" placeholder="请输入卡号"/>
+                </view>
+                <view class="weui-cell__ft">
+                    <icon type="warn" size="23" color="#E64340"></icon>
+                </view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">开关</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell weui-cell_switch">
+                <view class="weui-cell__bd">标题文字</view>
+                <view class="weui-cell__ft">
+                    <switch checked />
+                </view>
+            </view>
+        </view>
+
+        <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__bd">
+                    <input class="weui-input" placeholder="请输入文本" />
+                </view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">文本域</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell">
+                <view class="weui-cell__bd">
+                    <textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />
+                    <view class="weui-textarea-counter">0/200</view>
+                </view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">选择</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell weui-cell_select">
+                <view class="weui-cell__hd" style="width: 105px">
+                    <picker bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
+                        <view class="weui-select">{{countryCodes[countryCodeIndex]}}</view>
+                    </picker>
+                </view>
+                <view class="weui-cell__bd weui-cell__bd_in-select-before">
+                    <input class="weui-input" placeholder="请输入号码" />
+                </view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">选择</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell weui-cell_select">
+                <view class="weui-cell__bd">
+                    <picker bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
+                        <view class="weui-select">{{accounts[accountIndex]}}</view>
+                    </picker>
+                </view>
+            </view>
+            <view class="weui-cell weui-cell_select">
+                <view class="weui-cell__hd weui-cell__hd_in-select-after">
+                    <view class="weui-label">国家/地区</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <picker bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
+                        <view class="weui-select weui-select_in-select-after">{{countries[countryIndex]}}</view>
+                    </picker>
+                </view>
+            </view>
+        </view>
+
+        <checkbox-group bindchange="bindAgreeChange">
+            <label class="weui-agree" for="weuiAgree">
+                <view class="weui-agree__text">
+                    <checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
+                    <view class="weui-agree__checkbox-icon">
+                        <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
+                    </view>
+                    阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator>
+                </view>
+            </label>
+        </checkbox-group>
+
+        <view class="weui-btn-area">
+            <button class="weui-btn" type="primary" bindtap="showTopTips">确定</button>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/input/input.wxss

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

example/list/list.js

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

example/list/list.json

+{}
\ No newline at end of file

example/list/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-cell">
+                <view class="weui-cell__hd">
+                    <image src="{{icon}}" style="margin-right: 5px;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">
+                <view class="weui-cell__hd">
+                    <image src="{{icon}}" style="margin-right: 5px;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: 5px;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_access" hover-class="weui-cell_active">
+                <view class="weui-cell__hd">
+                    <image src="{{icon}}" style="margin-right: 5px;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>
\ No newline at end of file

example/list/list.wxss

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

example/loadmore/loadmore.js

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

example/loadmore/loadmore.json

+{}
\ No newline at end of file

example/loadmore/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

example/loadmore/loadmore.wxss

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

example/msg/msg.js

+Page({
+    openSuccess: function () {
+        wx.navigateTo({
+            url: 'msg_success'
+        })
+    },
+    openFail: function () {
+        wx.navigateTo({
+            url: 'msg_fail'
+        })
+    }
+});
\ No newline at end of file

example/msg/msg.json

+{}
\ No newline at end of file

example/msg/msg.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Msg</view>
+        <view class="page__desc">提示页</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-btn-area">
+            <button class="weui-btn" type="default" bindtap="openSuccess">成功提示页</button>
+            <button class="weui-btn" type="default" bindtap="openFail">失败提示页</button>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/msg/msg.wxss

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

example/msg/msg_fail.js

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

example/msg/msg_fail.json

+{}
\ No newline at end of file

example/msg/msg_fail.wxml

+<view class="page">
+    <view class="weui-msg">
+        <view class="weui-msg__icon-area">
+            <icon type="warn" 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

example/msg/msg_fail.wxss

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

example/msg/msg_success.js

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

example/msg/msg_success.json

+{}
\ No newline at end of file

example/msg/msg_success.wxml

+<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

example/msg/msg_success.wxss

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

example/navbar/navbar.js

+var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
+
+Page({
+    data: {
+        tabs: ["选项一", "选项二", "选项三"],
+        activeIndex: 1,
+        sliderOffset: 0,
+        sliderLeft: 0
+    },
+    onLoad: function () {
+        var that = this;
+        wx.getSystemInfo({
+            success: function(res) {
+                that.setData({
+                    sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
+                    sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
+                });
+            }
+        });
+    },
+    tabClick: function (e) {
+        this.setData({
+            sliderOffset: e.currentTarget.offsetLeft,
+            activeIndex: e.currentTarget.id
+        });
+    }
+});
\ No newline at end of file

example/navbar/navbar.json

+{}
\ No newline at end of file

example/navbar/navbar.wxml

+<view class="page">
+    <view class="page__bd">
+        <view class="weui-tab">
+            <view class="weui-navbar">
+                <block wx:for="{{tabs}}" wx:key="*this">
+                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
+                        <view class="weui-navbar__title">{{item}}</view>
+                    </view>
+                </block>
+                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
+            </view>
+            <view class="weui-tab__panel">
+                <view class="weui-tab__content" hidden="{{activeIndex != 0}}">选项一的内容</view>
+                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view>
+                <view class="weui-tab__content" hidden="{{activeIndex != 2}}">选项三的内容</view>
+            </view>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/navbar/navbar.wxss

+page,
+.page,
+.page__bd{
+    height: 100%;
+}
+.page__bd{
+    padding-bottom: 0;
+}
+.weui-tab__content{
+    padding-top: 60px;
+    text-align: center;
+}
\ No newline at end of file

example/panel/panel.js

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

example/panel/panel.json

+{}
\ No newline at end of file

example/panel/panel.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Panel</view>
+        <view class="page__desc">面板</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-panel weui-panel_access">
+            <view class="weui-panel__hd">图文组合列表</view>
+            <view class="weui-panel__bd">
+                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
+                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
+                        <image class="weui-media-box__thumb" src="{{icon60}}" />
+                    </view>
+                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
+                        <view class="weui-media-box__title">标题一</view>
+                        <view class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</view>
+                    </view>
+                </navigator>
+                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
+                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
+                        <image class="weui-media-box__thumb" src="{{icon60}}" />
+                    </view>
+                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
+                        <view class="weui-media-box__title">标题二</view>
+                        <view class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</view>
+                    </view>
+                </navigator>
+            </view>
+            <view class="weui-panel__ft">
+                <view class="weui-cell weui-cell_access weui-cell_link">
+                    <view class="weui-cell__bd">查看更多</view>
+                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+                </view>
+            </view>
+        </view>
+        <view class="weui-panel weui-panel_access">
+            <view class="weui-panel__hd">文字组合列表</view>
+            <view class="weui-panel__bd">
+                <view class="weui-media-box weui-media-box_text">
+                    <view class="weui-media-box__title weui-media-box__title_in-text">标题一</view>
+                    <view class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</view>
+                </view>
+                <view class="weui-media-box weui-media-box_text">
+                    <view class="weui-media-box__title weui-media-box__title_in-text">标题二</view>
+                    <view class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</view>
+                </view>
+            </view>
+            <view class="weui-panel__ft">
+                <view class="weui-cell weui-cell_access weui-cell_link">
+                    <view class="weui-cell__bd">查看更多</view>
+                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+                </view>
+            </view>
+        </view>
+        <view class="weui-panel">
+            <view class="weui-panel__hd">小图文组合列表</view>
+            <view class="weui-panel__bd">
+                <view class="weui-media-box weui-media-box_small-appmsg">
+                    <view class="weui-cells weui-cells_in-small-appmsg">
+                        <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
+                            <view class="weui-cell__hd"><image src="{{icon20}}" style="width: 20px;height: 20px;margin-right: 5px" /></view>
+                            <view class="weui-cell__bd weui-cell_primary">
+                                <view>文字标题</view>
+                            </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__hd"><image src="{{icon20}}" style="width: 20px;height: 20px;margin-right: 5px" /></view>
+                            <view class="weui-cell__bd weui-cell_primary">
+                                <view>文字标题</view>
+                            </view>
+                            <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+                        </navigator>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="weui-panel">
+            <view class="weui-panel__hd">文字列表附来源</view>
+            <view class="weui-panel__bd">
+                <view class="weui-media-box weui-media-box_text">
+                    <view class="weui-media-box__title weui-media-box__title_in-text">标题一</view>
+                    <view class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</view>
+                    <view class="weui-media-box__info">
+                        <view class="weui-media-box__info__meta">文字来源</view>
+                        <view class="weui-media-box__info__meta">时间</view>
+                        <view class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/panel/panel.wxss

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

example/picker/picker.js

+Page({
+    data: {
+        array: ['美国', '中国', '巴西', '日本'],
+        index: 0,
+        date: '2016-09-01',
+        time: '12:01'
+    },
+    bindPickerChange: function(e) {
+        console.log('picker发送选择改变，携带值为', e.detail.value)
+        this.setData({
+            index: e.detail.value
+        })
+    },
+    bindDateChange: function(e) {
+        this.setData({
+            date: e.detail.value
+        })
+    },
+    bindTimeChange: function(e) {
+        this.setData({
+            time: e.detail.value
+        })
+    }
+});
\ No newline at end of file

example/picker/picker.json

+{}
\ No newline at end of file

example/picker/picker.wxml

+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Picker</view>
+        <view class="page__desc">选择器，这里使用小程序原生的picker。</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-btn-area">
+            <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
+                <button type="default">单列选择器</button>
+            </picker>
+            <picker class="weui-btn" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
+                <button type="default">时间选择器</button>
+            </picker>
+            <picker class="weui-btn" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
+                <button type="default">日期选择器</button>
+            </picker>
+        </view>
+    </view>
+</view>
\ No newline at end of file

example/picker/picker.wxss

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

example/preview/preview.js

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