first commit

.gitignore

@@ -0,0 +1,15 @@
+.DS_Store
+node_modules/
+unpackage/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.hbuilderx
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

App.vue

@@ -0,0 +1,24 @@
+<script>
+	export default {
+		// 此处globalData为了演示其作用，不是uView框架的一部分
+		globalData: {
+			username: '白居易'
+		},
+		onLaunch() {
+			// 1.1.0版本之前关于http拦截器代码，已平滑移动到/common/http.interceptor.js中
+			// 注意，需要在/main.js中实例化Vue之后引入如下(详见文档说明)：
+			// import httpInterceptor from '@/common/http.interceptor.js'
+			// Vue.use(httpInterceptor, app)
+			// process.env.VUE_APP_PLATFORM 为通过js判断平台名称的方法，结果分别如下：
+			/**
+			 * h5，app-plus(nvue下也为app-plus)，mp-weixin，mp-alipay......
+			 */
+			this.$wxApi.config();
+		},
+	}
+</script>
+
+<style lang="scss">
+	@import "uview-ui/index.scss";
+	@import "common/demo.scss";
+</style>

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 www.uviewui.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,133 @@
+<p align="center">
+    <img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
+</p>
+<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
+<h3 align="center">多平台快速开发的UI框架</h3>
+
+[![star](https://gitee.com/xuqu/uView/badge/star.svg?theme=gvp)](https://gitee.com/xuqu/uView/stargazers)
+[![fork](https://gitee.com/xuqu/uView/badge/fork.svg?theme=gvp)](https://gitee.com/xuqu/uView/members)
+[![stars](https://img.shields.io/github/stars/YanxinNet/uView?style=flat-square&logo=GitHub)](https://github.com/YanxinNet/uView)
+[![forks](https://img.shields.io/github/forks/YanxinNet/uView?style=flat-square&logo=GitHub)](https://github.com/YanxinNet/uView)
+[![issues](https://img.shields.io/github/issues/YanxinNet/uView?style=flat-square&logo=GitHub)](https://github.com/YanxinNet/uView/issues)
+[![Website](https://img.shields.io/badge/uView-up-blue?style=flat-square)](https://uviewui.com)
+[![release](https://img.shields.io/github/v/release/YanxinNet/uView?style=flat-square)](https://gitee.com/xuqu/uView/releases)
+[![license](https://img.shields.io/github/license/YanxinNet/uView?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
+
+## 说明
+
+uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
+
+## [官方文档：https://www.uviewui.com](https://www.uviewui.com)
+
+### [点击加群交流反馈：863820668](https://jq.qq.com/?_wv=1027&k=uyZUkSlo)
+
+## 特性
+
+- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
+- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
+- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
+- 众多的常用页面和布局，让您专注逻辑，事半功倍
+- 详尽的文档支持，现代化的演示效果
+- 按需引入，精简打包体积
+
+
+## 预览
+
+您可以通过**微信**扫码，查看最佳的演示效果。
+<br>
+<br>
+<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
+
+
+## 友情链接
+
+#### **vue-admin-beautiful** —— [企业级、通用型中后台前端解决方案（基于vue/cli 4 最新版，同时支持电脑，手机，平板）](https://github.com/chuzhixin/vue-admin-beautiful)
+
+#### **vue-admin-beautiful** —— [在线演示](http://beautiful.panm.cn/vue-admin-beautiful/#/index)
+
+#### **pl-table** —— [ 完美解决 element 万级表格数据渲染卡顿问题](https://github.com/livelyPeng/pl-table)
+
+#### **luch-request** —— [基于 Promise 开发的 uni-app 跨平台、项目级别的请求库，它有更小的体积，易用的 api，方便简单的自定义能力](https://www.quanzhan.co/luch-request/)
+<br>
+
+## 链接
+
+- [官方文档](https://uviewui.com/)
+- [更新日志](https://uviewui.com/components/changelog.html)
+- [升级指南](https://uviewui.com/components/changelog.html)
+- [关于我们](https://uviewui.com/cooperation/about.html)
+
+## 交流反馈
+
+欢迎加入我们的QQ群交流反馈：[点此跳转](https://www.uviewui.com/components/addQQGroup.html)
+
+## 安装
+
+#### **下载地址** —— [https://ext.dcloud.net.cn/plugin?id=1593](https://ext.dcloud.net.cn/plugin?id=1593)
+
+## 快速上手
+
+1. `main.js`引入uView库
+```js
+// main.js
+import uView from 'uview-ui';
+Vue.use(uView);
+```
+
+2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
+```css
+/* App.vue */
+<style lang="scss">
+/* 注意声明lang="scss"！ */
+@import "uview-ui/index.scss";
+</style>
+```
+
+3. `uni.scss`引入全局scss变量文件
+```css
+/* uni.scss */
+@import "uview-ui/theme.scss";
+```
+
+4. `pages.json`配置easycom规则(按需引入)
+
+```js
+// pages.json
+{
+	"easycom": {
+		// 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
+		// 下载安装方式
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+		// npm安装方式
+		// "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+	},
+	// 此为本身已有的内容
+	"pages": [
+		// ......
+	]
+}
+```
+
+请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
+
+## 使用方法
+配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
+
+```html
+<template>
+	<u-button>按钮</u-button>
+</template>
+```
+
+请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
+
+
+## 捐赠uView的研发
+
+uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
+
+<img src="https://uviewui.com/common/wechat.png" width="220" >
+<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
+
+## 版权信息
+uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。

common/apiurl.js

@@ -0,0 +1,18 @@
+const apiurl = {
+	//反馈
+	feedbackAddUrl:'/articleFeedback/add',
+	// 获取微信用户信息
+	getuseinfourl:'/wechat/h5/user',
+	// 公众号支付
+	payurl:'/app/pay',
+	// 创建订单
+	createOrderurl:'/order/createOrder',
+	// 退款
+	refundurl:'/app/order/refund',
+	// 绑定手机号
+	bindphoneurl:'/app/order/refund2',
+}
+
+export {
+	apiurl
+}

common/classify.data.js

@@ -0,0 +1,1087 @@
+export default[
+   {
+      "name": "女装",
+      "foods": [
+          {
+            "name": "A字裙",
+            "key": "A字裙",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
+            "cat": 10
+          },
+          {
+            "name": "T恤",
+            "key": "T恤",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/2.jpg",
+            "cat": 10
+          },
+          {
+            "name": "半身裙",
+            "key": "半身裙",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/3.jpg",
+            "cat": 10
+          },
+          {
+            "name": "衬衫",
+            "key": "衬衫",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/4.jpg",
+            "cat": 10
+          },
+          {
+            "name": "短裙",
+            "key": "短裙",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/5.jpg",
+            "cat": 10
+          },
+          {
+            "name": "阔腿裤",
+            "key": "阔腿裤",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/6.jpg",
+            "cat": 10
+          },
+          {
+            "name": "连衣裙",
+            "key": "连衣裙",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/7.jpg",
+            "cat": 10
+          },
+          {
+            "name": "妈妈装",
+            "key": "妈妈装",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/8.jpg",
+            "cat": 10
+          },
+          {
+            "name": "牛仔裤",
+            "key": "牛仔裤",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/9.jpg",
+            "cat": 10
+          },
+          {
+            "name": "情侣装",
+            "key": "情侣装",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/10.jpg",
+            "cat": 10
+          },
+          {
+            "name": "休闲裤",
+            "key": "休闲裤",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/11.jpg",
+            "cat": 10
+          },
+          {
+            "name": "雪纺衫",
+            "key": "雪纺衫",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/12.jpg",
+            "cat": 10
+          },
+          {
+            "name": "防晒衣",
+            "key": "防晒衣",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/13.jpg",
+            "cat": 10
+          },
+          {
+            "name": "礼服/婚纱",
+            "key": "礼服婚纱",
+            "icon": "https://cdn.uviewui.com/uview/common/classify/1/14.jpg",
+            "cat": 10
+          }
+      ]
+   },
+   {
+    "name": "美食",
+    "foods": [
+        {
+          "name": "火锅",
+          "key": "火锅",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/1.jpg",
+          "cat": 6
+        },
+        {
+          "name": "糕点饼干",
+          "key": "糕点饼干",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/2.jpg",
+          "cat": 6
+        },
+        {
+          "name": "坚果果干",
+          "key": "坚果果干",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/3.jpg",
+          "cat": 6
+        },
+        {
+          "name": "酒类",
+          "key": "酒类",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/4.jpg",
+          "cat": 6
+        },
+        {
+          "name": "辣条",
+          "key": "辣条",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/5.jpg",
+          "cat": 6
+        },
+        {
+          "name": "大礼包",
+          "key": "大礼包",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/6.jpg",
+          "cat": 6
+        },
+        {
+          "name": "精品茗茶",
+          "key": "茶",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/7.jpg",
+          "cat": 6
+        },
+        {
+          "name": "休闲食品",
+          "key": "休闲食品",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/8.jpg",
+          "cat": 6
+        },
+        {
+          "name": "糖果巧克力",
+          "key": "糖果巧克力",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/9.jpg",
+          "cat": 6
+        },
+        {
+          "name": "方便速食",
+          "key": "方便速食",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/10.jpg",
+          "cat": 6
+        },
+        {
+          "name": "营养代餐",
+          "key": "营养代餐",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/11.jpg",
+          "cat": 6
+        },
+        {
+          "name": "粮油副食",
+          "key": "粮油",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/12.jpg",
+          "cat": 6
+        },
+        {
+          "name": "生鲜水果",
+          "key": "水果",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/13.jpg",
+          "cat": 6
+        },
+        {
+          "name": "饮品",
+          "key": "饮品",
+          "icon": "https://cdn.uviewui.com/uview/common/classify/2/14.jpg",
+          "cat": 6
+        }
+        ]
+    },
+    {
+        "name": "美妆",
+        "foods": [
+            {
+                "name": "化妆刷",
+                "key": "化妆刷",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/1.jpg",
+                "cat": 3
+            },
+            {
+                "name": "粉底",
+                "key": "粉底",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/2.jpg",
+                "cat": 3
+            },
+            {
+                "name": "洗发护发",
+                "key": "洗发护发",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/3.jpg",
+                "cat": 3
+            },
+            {
+                "name": "美容工具",
+                "key": "美容工具",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/4.jpg",
+                "cat": 3
+            },
+            {
+                "name": "眼部护理",
+                "key": "眼部护理",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/5.jpg",
+                "cat": 3
+            },
+            {
+                "name": "眉妆",
+                "key": "眉妆",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/6.jpg",
+                "cat": 3
+            },
+            {
+                "name": "卸妆品",
+                "key": "卸妆品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/7.jpg",
+                "cat": 3
+            },
+            {
+                "name": "基础护肤",
+                "key": "基础护肤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/8.jpg",
+                "cat": 3
+            },
+            {
+                "name": "眼妆",
+                "key": "眼妆",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/9.jpg",
+                "cat": 3
+            },
+            {
+                "name": "唇妆",
+                "key": "唇妆",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/10.jpg",
+                "cat": 3
+            },
+            {
+                "name": "面膜",
+                "key": "面膜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/11.jpg",
+                "cat": 3
+            },
+            {
+                "name": "沐浴用品",
+                "key": "沐浴用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/12.jpg",
+                "cat": 3
+            },
+            {
+                "name": "护肤套装",
+                "key": "护肤套装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/13.jpg",
+                "cat": 3
+            },
+            {
+                "name": "防晒品",
+                "key": "防晒品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/14.jpg",
+                "cat": 3
+            },
+            {
+                "name": "美甲",
+                "key": "美甲",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/3/15.jpg",
+                "cat": 3
+            }
+
+        ]
+    },
+    {
+        "name": "居家日用",
+        "foods": [
+            {
+              "name": "垃圾袋",
+              "key": "垃圾袋",
+              "icon": "https://cdn.uviewui.com/uview/common/classify/4/1.jpg",
+              "cat": 4
+            },
+            {
+                "name": "纸巾",
+                "key": "纸巾",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/2.jpg",
+                "cat": 4
+            },
+            {
+                "name": "驱蚊用品",
+                "key": "驱蚊用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/3.jpg",
+                "cat": 4
+            },
+            {
+                "name": "收纳神器",
+                "key": "收纳神器",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/4.jpg",
+                "cat": 4
+            },
+            {
+                "name": "厨房用品",
+                "key": "厨房用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/5.jpg",
+                "cat": 4
+            },
+            {
+                "name": "厨房烹饪",
+                "key": "烹饪",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/6.jpg",
+                "cat": 4
+            },
+            {
+                "name": "衣物晾晒",
+                "key": "衣物晾晒",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/7.jpg",
+                "cat": 4
+            },
+            {
+                "name": "衣物护理",
+                "key": "衣物护理",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/8.jpg",
+                "cat": 4
+            },
+            {
+                "name": "宠物用品",
+                "key": "宠物用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/9.jpg",
+                "cat": 4
+            },
+            {
+                "name": "医药保健",
+                "key": "医药",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/10.jpg",
+                "cat": 4
+            },
+            {
+                "name": "日用百货",
+                "key": "百货",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/11.jpg",
+                "cat": 4
+            },
+            {
+                "name": "清洁用品",
+                "key": "清洁",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/12.jpg",
+                "cat": 4
+            },
+            {
+                "name": "绿植园艺",
+                "key": "绿植",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/4/13.jpg",
+                "cat": 4
+            }
+        ]
+    },
+    {
+        "name": "男装",
+        "foods": [
+            {
+                "name": "爸爸装",
+                "key": "爸爸装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/1.jpg",
+                "cat": 12
+            },
+            {
+                "name": "牛仔裤",
+                "key": "牛仔裤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/2.jpg",
+                "cat": 12
+            },
+            {
+                "name": "衬衫",
+                "key": "衬衫",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/3.jpg",
+                "cat": 12
+            },
+            {
+                "name": "休闲裤",
+                "key": "休闲裤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/4.jpg",
+                "cat": 12
+            },
+            {
+                "name": "外套",
+                "key": "外套",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/5.jpg",
+                "cat": 12
+            },
+            {
+                "name": "T恤",
+                "key": "T恤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/6.jpg",
+                "cat": 12
+            },
+            {
+                "name": "套装",
+                "key": "套装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/7.jpg",
+                "cat": 12
+            },
+            {
+                "name": "运动裤",
+                "key": "运动裤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/8.jpg",
+                "cat": 12
+            },
+            {
+                "name": "马甲/背心",
+                "key": "马甲背心",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/9.jpg",
+                "cat": 12
+            },
+            {
+                "name": "POLO衫",
+                "key": "POLO衫",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/10.jpg",
+                "cat": 12
+            },
+            {
+                "name": "商务装",
+                "key": "商务装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/5/11.jpg",
+                "cat": 12
+            }
+        ]
+    },
+    {
+        "name": "鞋品",
+        "foods": [
+            {
+                "name": "单鞋",
+                "key": "单鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/1.jpg",
+                "cat": 5
+            },
+            {
+                "name": "皮鞋",
+                "key": "皮鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/2.jpg",
+                "cat": 5
+            },
+            {
+                "name": "帆布鞋",
+                "key": "帆布鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/3.jpg",
+                "cat": 5
+            },
+            {
+                "name": "北京老布鞋",
+                "key": "北京老布鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/4.jpg",
+                "cat": 5
+            },
+            {
+                "name": "运动鞋",
+                "key": "运动鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/5.jpg",
+                "cat": 5
+            },
+            {
+                "name": "拖鞋",
+                "key": "拖鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/6.jpg",
+                "cat": 5
+            },
+            {
+                "name": "凉鞋",
+                "key": "凉鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/7.jpg",
+                "cat": 5
+            },
+            {
+                "name": "休闲鞋",
+                "key": "休闲鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/8.jpg",
+                "cat": 5
+            },
+            {
+                "name": "高跟鞋",
+                "key": "高跟鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/9.jpg",
+                "cat": 5
+            },
+            {
+                "name": "老人鞋",
+                "key": "老人鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/10.jpg",
+                "cat": 5
+            },
+            {
+                "name": "懒人鞋",
+                "key": "懒人鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/6/11.jpg",
+                "cat": 5
+            }
+        ]
+    },
+    {
+        "name": "数码家电",
+        "foods": [
+            {
+                "name": "数据线",
+                "key": "数据线",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/1.jpg",
+                "cat": 8
+            },
+            {
+                "name": "耳机",
+                "key": "耳机",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/2.jpg",
+                "cat": 8
+            },
+            {
+                "name": "生活家电",
+                "key": "家电",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/3.jpg",
+                "cat": 8
+            },
+            {
+                "name": "电风扇",
+                "key": "电风扇",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/4.jpg",
+                "cat": 8
+            },
+            {
+                "name": "电吹风",
+                "key": "电吹风",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/5.jpg",
+                "cat": 8
+            },
+            {
+                "name": "手机壳",
+                "key": "手机壳",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/6.jpg",
+                "cat": 8
+            },
+            {
+                "name": "榨汁机",
+                "key": "榨汁机",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/7.jpg",
+                "cat": 8
+            },
+            {
+                "name": "小家电",
+                "key": "小家电",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/8.jpg",
+                "cat": 8
+            },
+            {
+                "name": "数码电子",
+                "key": "数码",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/9.jpg",
+                "cat": 8
+            },
+            {
+                "name": "电饭锅",
+                "key": "电饭锅",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/10.jpg",
+                "cat": 8
+            },
+            {
+                "name": "手机支架",
+                "key": "手机支架",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/11.jpg",
+                "cat": 8
+            },
+            {
+                "name": "剃须刀",
+                "key": "剃须刀",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/12.jpg",
+                "cat": 8
+            },
+            {
+                "name": "充电宝",
+                "key": "充电宝",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/13.jpg",
+                "cat": 8
+            },
+            {
+                "name": "手机配件",
+                "key": "手机配件",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/7/14.jpg",
+                "cat": 8
+            }
+        ]
+    },
+    {
+        "name": "母婴",
+        "foods": [
+            {
+              "name": "婴童服饰",
+              "key": "衣服",
+              "icon": "https://cdn.uviewui.com/uview/common/classify/8/1.jpg",
+              "cat": 2  
+            },
+            {
+                "name": "玩具乐器",
+                "key": "玩具乐器",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/2.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "尿不湿",
+                "key": "尿不湿",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/3.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "安抚牙胶",
+                "key": "安抚牙胶",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/4.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "奶瓶奶嘴",
+                "key": "奶瓶奶嘴",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/5.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "孕妈用品",
+                "key": "孕妈用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/6.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "宝宝用品",
+                "key": "宝宝用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/7.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "婴童湿巾",
+                "key": "湿巾",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/8.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "喂养洗护",
+                "key": "洗护",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/9.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "婴童鞋靴",
+                "key": "童鞋",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/10.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "口水巾",
+                "key": "口水巾",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/11.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "营养辅食",
+                "key": "营养",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/12.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "婴幼书籍",
+                "key": "书籍",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/13.jpg",
+                "cat": 2  
+            },
+            {
+                "name": "婴儿车",
+                "key": "婴儿车",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/8/14.jpg",
+                "cat": 2  
+            }
+        ]
+    },
+    {
+        "name": "箱包",
+        "foods": [
+            {
+                "name": "单肩包",
+                "key": "单肩包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/1.jpg",
+                "cat": 0
+            },
+            {
+                "name": "斜挎包",
+                "key": "斜挎包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/2.jpg",
+                "cat": 0
+            },
+            {
+                "name": "女包",
+                "key": "女包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/3.jpg",
+                "cat": 0
+            },
+            {
+                "name": "男包",
+                "key": "男包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/4.jpg",
+                "cat": 0
+            },
+            {
+                "name": "双肩包",
+                "key": "双肩包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/5.jpg",
+                "cat": 0
+            },
+            {
+                "name": "小方包",
+                "key": "小方包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/6.jpg",
+                "cat": 0
+            },
+            {
+                "name": "钱包",
+                "key": "钱包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/7.jpg",
+                "cat": 0
+            },
+            {
+                "name": "旅行箱包",
+                "key": "旅行箱包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/8.jpg",
+                "cat": 0
+            },
+            {
+                "name": "零钱包",
+                "key": "零钱包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/9.jpg",
+                "cat": 0
+            },
+            {
+                "name": "手提包",
+                "key": "手提包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/10.jpg",
+                "cat": 0
+            },
+            {
+                "name": "胸包",
+                "key": "胸包",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/9/11.jpg",
+                "cat": 0
+            }
+        ]
+    },
+    {
+        "name": "内衣",
+        "foods": [
+            {
+                "name": "袜子",
+                "key": "袜子",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/1.jpg",
+                "cat": 11
+            },
+            {
+                "name": "吊带背心",
+                "key": "吊带背心",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/2.jpg",
+                "cat": 11
+            },
+            {
+                "name": "抹胸",
+                "key": "抹胸",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/3.jpg",
+                "cat": 11
+            },
+            {
+                "name": "内裤",
+                "key": "内裤",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/4.jpg",
+                "cat": 11
+            },
+            {
+                "name": "文胸",
+                "key": "文胸",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/5.jpg",
+                "cat": 11
+            },
+            {
+                "name": "文胸套装",
+                "key": "文胸套装",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/6.jpg",
+                "cat": 11
+            },
+            {
+                "name": "打底塑身",
+                "key": "打底塑身",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/7.jpg",
+                "cat": 11
+            },
+            {
+                "name": "家居服",
+                "key": "家居服",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/8.jpg",
+                "cat": 11
+            },
+            {
+                "name": "船袜",
+                "key": "船袜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/9.jpg",
+                "cat": 11
+            },
+            {
+                "name": "情侣睡衣",
+                "key": "情侣睡衣",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/10.jpg",
+                "cat": 11
+            },
+            {
+                "name": "丝袜",
+                "key": "丝袜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/10/11.jpg",
+                "cat": 11
+            }
+        ]
+    },
+    {
+        "name": "文娱车品",
+        "foods": [
+            {
+                "name": "车市车品",
+                "key": "车市车品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/1.jpg",
+                "cat": 7
+            },
+            {
+                "name": "办公文具",
+                "key": "办公文具",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/2.jpg",
+                "cat": 7
+            },
+            {
+                "name": "考试必备",
+                "key": "考试必备",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/3.jpg",
+                "cat": 7
+            },
+            {
+                "name": "笔记本",
+                "key": "笔记本",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/4.jpg",
+                "cat": 7
+            },
+            {
+                "name": "艺术礼品",
+                "key": "礼品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/5.jpg",
+                "cat": 7
+            },
+            {
+                "name": "书写工具",
+                "key": "书写工具",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/6.jpg",
+                "cat": 7
+            },
+            {
+                "name": "车载电器",
+                "key": "车载电器",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/7.jpg",
+                "cat": 7
+            },
+            {
+                "name": "图书音像",
+                "key": "图书音像",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/8.jpg",
+                "cat": 7
+            },
+            {
+                "name": "画具画材",
+                "key": "画具画材",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/11/9.jpg",
+                "cat": 7
+            }
+        ]
+    },
+    {
+        "name": "配饰",
+        "foods": [
+            {
+                "name": "太阳镜",
+                "key": "太阳镜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/1.jpg",
+                "cat": 0
+            },
+            {
+                "name": "皮带",
+                "key": "皮带",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/2.jpg",
+                "cat": 0
+            },
+            {
+                "name": "棒球帽",
+                "key": "棒球帽",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/3.jpg",
+                "cat": 0
+            },
+            {
+                "name": "手表",
+                "key": "手表",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/4.jpg",
+                "cat": 0
+            },
+            {
+                "name": "发饰",
+                "key": "发饰",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/5.jpg",
+                "cat": 0
+            },
+            {
+                "name": "项链",
+                "key": "项链",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/6.jpg",
+                "cat": 0
+            },
+            {
+                "name": "手饰",
+                "key": "手饰",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/7.jpg",
+                "cat": 0
+            },
+            {
+                "name": "耳环",
+                "key": "耳环",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/8.jpg",
+                "cat": 0
+            },
+            {
+                "name": "帽子丝巾",
+                "key": "帽子丝巾",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/9.jpg",
+                "cat": 0
+            },
+            {
+                "name": "眼镜墨镜",
+                "key": "眼镜墨镜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/10.jpg",
+                "cat": 0
+            },
+            {
+                "name": "发带发箍",
+                "key": "发带发箍",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/12/11.jpg",
+                "cat": 0
+            }
+        ]
+    },
+    {
+        "name": "家装家纺",
+        "foods": [
+            {
+                "name": "家居饰品",
+                "key": "家居饰品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/1.jpg",
+                "cat": 0
+            },
+            {
+                "name": "凉席",
+                "key": "凉席",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/2.jpg",
+                "cat": 0
+            },
+            {
+                "name": "背枕靠枕",
+                "key": "靠枕",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/3.jpg",
+                "cat": 0
+            },
+            {
+                "name": "床上用品",
+                "key": "床上用品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/4.jpg",
+                "cat": 0
+            },
+            {
+                "name": "摆件",
+                "key": "摆件",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/5.jpg",
+                "cat": 0
+            },
+            {
+                "name": "四件套",
+                "key": "四件套",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/6.jpg",
+                "cat": 0
+            },
+            {
+                "name": "装饰品",
+                "key": "装饰品",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/7.jpg",
+                "cat": 0
+            },
+            {
+                "name": "卫浴用品",
+                "key": "卫浴",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/8.jpg",
+                "cat": 0
+            },
+            {
+                "name": "家居家装",
+                "key": "家具",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/9.jpg",
+                "cat": 0
+            },
+            {
+                "name": "蚊帐",
+                "key": "蚊帐",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/10.jpg",
+                "cat": 0
+            },
+            {
+                "name": "墙纸贴纸",
+                "key": "墙纸",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/11.jpg",
+                "cat": 0
+            },
+            {
+                "name": "空调被",
+                "key": "空调被",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/13/12.jpg",
+                "cat": 0
+            }
+        ]
+    },
+    {
+        "name": "户外运动",
+        "foods": [
+            {
+                "name": "游泳装备",
+                "key": "游泳",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/1.jpg",
+                "cat": 0
+            },
+            {
+                "name": "泳镜",
+                "key": "泳镜",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/2.jpg",
+                "cat": 0
+            },
+            {
+                "name": "户外装备",
+                "key": "户外",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/3.jpg",
+                "cat": 0
+            },
+            {
+                "name": "健身服饰",
+                "key": "健身",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/4.jpg",
+                "cat": 0
+            },
+            {
+                "name": "泳衣",
+                "key": "泳衣",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/5.jpg",
+                "cat": 0
+            },
+            {
+                "name": "瑜伽垫",
+                "key": "瑜伽垫",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/6.jpg",
+                "cat": 0
+            },
+            {
+                "name": "瑜伽用品",
+                "key": "瑜伽",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/7.jpg",
+                "cat": 0
+            },
+            {
+                "name": "健身装备",
+                "key": "健身",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/8.jpg",
+                "cat": 0
+            },
+            {
+                "name": "球迷用品",
+                "key": "球迷",
+                "icon": "https://cdn.uviewui.com/uview/common/classify/14/9.jpg",
+                "cat": 0
+            }
+        ]
+    }
+]

common/config.js

@@ -0,0 +1,15 @@
+const config = {
+	
+	//地址选择数据
+	addrApi: 'http://gzhjt.gzsdzth.com/api/wap/treeOrganize/get/preToJson',
+	//api baseUrl
+	baseUrl:'http://wx.hw.hongweisoft.com/wxpaydemoapi',
+	
+	//登录链接
+	loginUrl:'http://wx.hw.hongweisoft.com/wxpaydemoapi/wechat/h5/authorize?returnUrl=http://wx.hw.hongweisoft.com/wxpaydemoh5',
+	//七牛云
+	imgUrl:"http://qny.gzsdtfp.com/",
+}
+export {
+	config
+}

common/demo.scss

@@ -0,0 +1,86 @@
+/* #ifndef APP-NVUE */
+view,
+text {
+	box-sizing: border-box;
+}
+/* #endif */
+
+/* start--演示页面使用的统一样式--start */
+.u-demo {
+	padding: 25px 20px;
+}
+
+.u-demo-wrap {
+	border-width: 1px;
+	border-color: #ddd;
+	border-style: dashed;
+	background-color: rgb(250, 250, 250);
+	padding: 20px 10px;
+	border-radius: 3px;
+}
+
+.u-demo-area {
+	text-align: center;
+}
+
+.u-no-demo-here {
+	color: $u-tips-color;
+	font-size: 13px;
+}
+
+.u-demo-result-line {
+	border-width: 1px;
+	border-color: #ddd;
+	border-style: dashed;
+	padding: 5px 20px;
+	margin-top: 30px;
+	border-radius: 5px;
+	background-color: rgb(240, 240, 240);
+	color: $u-content-color;
+	font-size: 16px;
+	/* #ifndef APP-NVUE */
+	word-break: break-word;
+	display: inline-block;
+	/* #endif */
+	text-align: left;
+	
+}
+
+.u-demo-title,
+.u-config-title {
+	text-align: center;
+	font-size: 16px;
+	font-weight: bold;
+	margin-bottom: 20px;
+}
+
+.u-config-item {
+	margin-top: 25px;
+}
+
+.u-config-title {
+	margin-top: 20px;
+	padding-bottom: 5px;
+}
+
+.u-item-title {
+	position: relative;
+	font-size: 15px;
+	padding-left: 8px;
+	line-height: 1;
+	margin-bottom: 11px;
+}
+
+.u-item-title:after {
+	position: absolute;
+	width: 4px;
+	top: -1px;
+	height: 16px;
+	/* #ifndef APP-NVUE */
+	content: '';
+	/* #endif */
+	left: 0;
+	border-radius: 10px;
+	background-color: $u-content-color;
+}
+/* end--演示页面使用的统一样式--end */

common/http.api.js

@@ -0,0 +1,46 @@
+import {apiurl} from "./apiurl.js"
+// 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分)
+let hotSearchUrl = '/ebapi/store_api/hot_search';
+let indexUrl = '/ebapi/public_api/index';
+
+
+
+// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
+// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
+const install = (Vue, vm) => {
+	
+	// 此处没有使用传入的params参数
+	let getSearch = (params = {}) => vm.$u.get(hotSearchUrl, {
+		id: 2
+	});	
+	// 此处使用了传入的params参数，一切自定义即可
+	let getInfo = (params = {}) => vm.$u.post(indexUrl, params);
+	
+	// 反馈提交
+	let feedbackAdd = (params = {}) => vm.$u.post(apiurl.feedbackAddUrl, params);
+	
+	let getuseinfo = (params = {}) => vm.$u.get(apiurl.getuseinfourl+'/'+params);
+	
+	let createOrder = (params = {}) => vm.$u.post(apiurl.createOrderurl, params);
+	
+	let pay = (params = {}) => vm.$u.post(apiurl.payurl, params);
+	
+	let refund = (params = {}) => vm.$u.post(apiurl.refundurl, params);
+	
+	let bindphone = (params = {}) => vm.$u.post(apiurl.bindphoneurl, params);
+	
+	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
+	vm.$u.api = {
+		getSearch, 
+		getInfo,
+		feedbackAdd,
+		getuseinfo,
+		createOrder,
+		refund,
+		bindphone
+	};
+}
+
+export default {
+	install
+}

common/http.interceptor.js

@@ -0,0 +1,54 @@
+import { config } from '@/common/config.js';
+// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token
+// 同时，我们也可以在此使用getApp().globalData，如果你把token放在getApp().globalData的话，也是可以使用的
+const install = (Vue, vm) => {
+	Vue.prototype.$u.http.setConfig({
+		baseUrl: config.baseUrl,
+		// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
+		// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
+		// originalData: true, 
+		// 设置自定义头部content-type
+		// header: {
+		// 	'content-type': 'xxx'
+		// }
+	});
+	// 请求拦截，配置Token等参数
+	Vue.prototype.$u.http.interceptor.request = (config) => {
+		// config.header.Token = 'xxxxxx';
+		
+		// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式，见：https://uviewui.com/components/globalVariable.html
+		config.header.token = vm.vuex_token;
+		
+		// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
+		// config.header.token = vm.$store.state.token;
+		
+		// 方式三，如果token放在了globalData，通过getApp().globalData获取
+		// config.header.token = getApp().globalData.username;
+		
+		// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的，所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
+		// const token = uni.getStorageSync('token');
+		// config.header.token = token;
+		
+		// 此url参数为this.$u.get(url)中的url值
+		let noTokenList = ['/wechat/h5/user'];
+		if(noTokenList.includes(config.url)) config.header.noToken = true;
+		// console.log('noTokenList.includes(config.url)',noTokenList.includes(config.url));
+		// console.log('config.url',config.url);
+		
+		return config; 
+	}
+	// 响应拦截，判断状态码是否通过
+	Vue.prototype.$u.http.interceptor.response = (res) => {
+		// 如果把originalData设置为了true，这里得到将会是服务器返回的所有的原始数据
+		// 判断可能变成了res.statueCode，或者res.data.code之类的，请打印查看结果
+		// console.log('interceptor res',res);
+		if(res.retHead.errCode == 0) {
+			// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
+			return res;  
+		} else return false;
+	}
+}
+
+export default {
+	install
+}

common/index.list.js

@@ -0,0 +1,585 @@
+module.exports = {
+	list: [{
+			"letter": "A",
+			"data": [{
+					"name": "阿拉斯加",
+					"mobile": "13588889999",
+					"keyword": "阿拉斯加ABA13588889999"
+				},
+				{
+					"name": "阿克苏",
+					"mobile": "0551-4386721",
+					"keyword": "阿克苏AKESU0551-4386721"
+				},
+				{
+					"name": "阿拉善",
+					"mobile": "4008009100",
+					"keyword": "阿拉善ALASHAN4008009100"
+				},
+				{
+					"name": "阿勒泰",
+					"mobile": "13588889999",
+					"keyword": "阿勒泰ALETAI13588889999"
+				},
+				{
+					"name": "阿里",
+					"mobile": "13588889999",
+					"keyword": "阿里ALI13588889999"
+				},
+				{
+					"name": "安阳",
+					"mobile": "13588889999",
+					"keyword": "13588889999安阳ANYANG"
+				}
+			]
+		},
+		{
+			"letter": "B",
+			"data": [{
+					"name": "白城",
+					"mobile": "该主子没有留电话~",
+					"keyword": "白城BAICHENG"
+				},
+				{
+					"name": "白山",
+					"mobile": "13588889999",
+					"keyword": "白山BAISHAN13588889999"
+				},
+				{
+					"name": "白银",
+					"mobile": "13588889999",
+					"keyword": "白银BAIYIN13588889999"
+				},
+				{
+					"name": "保定",
+					"mobile": "13588889999",
+					"keyword": "保定BAODING13588889999"
+				}
+			]
+		},
+		{
+			"letter": "C",
+			"data": [{
+					"name": "沧州",
+					"mobile": "13588889999",
+					"keyword": "沧州CANGZHOU13588889999"
+				},
+				{
+					"name": "长春",
+					"mobile": "13588889999",
+					"keyword": "长春CHANGCHUN13588889999"
+				}
+			]
+		},
+		{
+			"letter": "D",
+			"data": [{
+					"name": "大理",
+					"mobile": "13588889999",
+					"keyword": "大理DALI13588889999"
+				},
+				{
+					"name": "大连",
+					"mobile": "13588889999",
+					"keyword": "大连DALIAN13588889999"
+				}
+			]
+		},
+		{
+			"letter": "E",
+			"data": [{
+					"name": "鄂尔多斯",
+					"mobile": "13588889999",
+					"keyword": "鄂尔多斯EERDUOSI13588889999"
+				},
+				{
+					"name": "恩施",
+					"mobile": "13588889999",
+					"keyword": "恩施ENSHI13588889999"
+				},
+				{
+					"name": "鄂州",
+					"mobile": "13588889999",
+					"keyword": "鄂州EZHOU13588889999"
+				}
+			]
+		},
+		{
+			"letter": "F",
+			"data": [{
+					"name": "防城港",
+					"mobile": "该主子没有留电话~",
+					"keyword": "防城港FANGCHENGGANG"
+				},
+				{
+					"name": "抚顺",
+					"mobile": "13588889999",
+					"keyword": "抚顺FUSHUN13588889999"
+				},
+				{
+					"name": "阜新",
+					"mobile": "13588889999",
+					"keyword": "阜新FUXIN13588889999"
+				},
+				{
+					"name": "阜阳",
+					"mobile": "13588889999",
+					"keyword": "阜阳FUYANG13588889999"
+				},
+				{
+					"name": "抚州",
+					"mobile": "13588889999",
+					"keyword": "抚州FUZHOU13588889999"
+				},
+				{
+					"name": "福州",
+					"mobile": "13588889999",
+					"keyword": "福州FUZHOU13588889999"
+				}
+			]
+		},
+		{
+			"letter": "G",
+			"data": [{
+					"name": "甘南",
+					"mobile": "13588889999",
+					"keyword": "甘南GANNAN13588889999"
+				},
+				{
+					"name": "赣州",
+					"mobile": "13588889999",
+					"keyword": "赣州GANZHOU13588889999"
+				},
+				{
+					"name": "甘孜",
+					"mobile": "13588889999",
+					"keyword": "甘孜GANZI13588889999"
+				}
+			]
+		},
+		{
+			"letter": "H",
+			"data": [{
+					"name": "哈尔滨",
+					"mobile": "13588889999",
+					"keyword": "哈尔滨HAERBIN13588889999"
+				},
+				{
+					"name": "海北",
+					"mobile": "13588889999",
+					"keyword": "海北HAIBEI13588889999"
+				},
+				{
+					"name": "海东",
+					"mobile": "13588889999",
+					"keyword": "海东HAIDONG13588889999"
+				},
+				{
+					"name": "海口",
+					"mobile": "13588889999",
+					"keyword": "海口HAIKOU13588889999"
+				}
+			]
+		},
+		{
+			"letter": "I",
+			"data": [{
+				"name": "ice",
+				"mobile": "13588889999",
+				"keyword": "佳木斯JIAMUSI13588889999"
+			}]
+		},
+		{
+			"letter": "J",
+			"data": [{
+					"name": "佳木斯",
+					"mobile": "13588889999",
+					"keyword": "佳木斯JIAMUSI13588889999"
+				},
+				{
+					"name": "吉安",
+					"mobile": "13588889999",
+					"keyword": "吉安JIAN13588889999"
+				},
+				{
+					"name": "江门",
+					"mobile": "13588889999",
+					"keyword": "江门JIANGMEN13588889999"
+				}
+			]
+		},
+		{
+			"letter": "K",
+			"data": [{
+					"name": "开封",
+					"mobile": "13588889999",
+					"keyword": "开封KAIFENG13588889999"
+				},
+				{
+					"name": "喀什",
+					"mobile": "13588889999",
+					"keyword": "喀什KASHI13588889999"
+				},
+				{
+					"name": "克拉玛依",
+					"mobile": "13588889999",
+					"keyword": "克拉玛依KELAMAYI13588889999"
+				}
+			]
+		},
+		{
+			"letter": "L",
+			"data": [{
+					"name": "来宾",
+					"mobile": "13588889999",
+					"keyword": "来宾LAIBIN13588889999"
+				},
+				{
+					"name": "兰州",
+					"mobile": "13588889999",
+					"keyword": "兰州LANZHOU13588889999"
+				},
+				{
+					"name": "拉萨",
+					"mobile": "13588889999",
+					"keyword": "拉萨LASA13588889999"
+				},
+				{
+					"name": "乐山",
+					"mobile": "13588889999",
+					"keyword": "乐山LESHAN13588889999"
+				},
+				{
+					"name": "凉山",
+					"mobile": "13588889999",
+					"keyword": "凉山LIANGSHAN13588889999"
+				},
+				{
+					"name": "连云港",
+					"mobile": "13588889999",
+					"keyword": "连云港LIANYUNGANG13588889999"
+				},
+				{
+					"name": "聊城",
+					"mobile": "18322223333",
+					"keyword": "聊城LIAOCHENG18322223333"
+				},
+				{
+					"name": "辽阳",
+					"mobile": "18322223333",
+					"keyword": "辽阳LIAOYANG18322223333"
+				},
+				{
+					"name": "辽源",
+					"mobile": "18322223333",
+					"keyword": "辽源LIAOYUAN18322223333"
+				},
+				{
+					"name": "丽江",
+					"mobile": "18322223333",
+					"keyword": "丽江LIJIANG18322223333"
+				},
+				{
+					"name": "临沧",
+					"mobile": "18322223333",
+					"keyword": "临沧LINCANG18322223333"
+				},
+				{
+					"name": "临汾",
+					"mobile": "18322223333",
+					"keyword": "临汾LINFEN18322223333"
+				},
+				{
+					"name": "临夏",
+					"mobile": "18322223333",
+					"keyword": "临夏LINXIA18322223333"
+				},
+				{
+					"name": "临沂",
+					"mobile": "18322223333",
+					"keyword": "临沂LINYI18322223333"
+				},
+				{
+					"name": "林芝",
+					"mobile": "18322223333",
+					"keyword": "林芝LINZHI18322223333"
+				},
+				{
+					"name": "丽水",
+					"mobile": "18322223333",
+					"keyword": "丽水LISHUI18322223333"
+				}
+			]
+		},
+		{
+			"letter": "M",
+			"data": [{
+					"name": "眉山",
+					"mobile": "15544448888",
+					"keyword": "眉山MEISHAN15544448888"
+				},
+				{
+					"name": "梅州",
+					"mobile": "15544448888",
+					"keyword": "梅州MEIZHOU15544448888"
+				},
+				{
+					"name": "绵阳",
+					"mobile": "15544448888",
+					"keyword": "绵阳MIANYANG15544448888"
+				},
+				{
+					"name": "牡丹江",
+					"mobile": "15544448888",
+					"keyword": "牡丹江MUDANJIANG15544448888"
+				}
+			]
+		},
+		{
+			"letter": "N",
+			"data": [{
+					"name": "南昌",
+					"mobile": "15544448888",
+					"keyword": "南昌NANCHANG15544448888"
+				},
+				{
+					"name": "南充",
+					"mobile": "15544448888",
+					"keyword": "南充NANCHONG15544448888"
+				},
+				{
+					"name": "南京",
+					"mobile": "15544448888",
+					"keyword": "南京NANJING15544448888"
+				},
+				{
+					"name": "南宁",
+					"mobile": "15544448888",
+					"keyword": "南宁NANNING15544448888"
+				},
+				{
+					"name": "南平",
+					"mobile": "15544448888",
+					"keyword": "南平NANPING15544448888"
+				}
+			]
+		},
+		{
+			"letter": "O",
+			"data": [{
+				"name": "欧阳",
+				"mobile": "15544448888",
+				"keyword": "欧阳ouyang15544448888"
+			}]
+		},
+		{
+			"letter": "P",
+			"data": [{
+					"name": "盘锦",
+					"mobile": "15544448888",
+					"keyword": "盘锦PANJIN15544448888"
+				},
+				{
+					"name": "攀枝花",
+					"mobile": "15544448888",
+					"keyword": "攀枝花PANZHIHUA15544448888"
+				},
+				{
+					"name": "平顶山",
+					"mobile": "15544448888",
+					"keyword": "平顶山PINGDINGSHAN15544448888"
+				},
+				{
+					"name": "平凉",
+					"mobile": "15544448888",
+					"keyword": "平凉PINGLIANG15544448888"
+				},
+				{
+					"name": "萍乡",
+					"mobile": "15544448888",
+					"keyword": "萍乡PINGXIANG15544448888"
+				},
+				{
+					"name": "普洱",
+					"mobile": "15544448888",
+					"keyword": "普洱PUER15544448888"
+				},
+				{
+					"name": "莆田",
+					"mobile": "15544448888",
+					"keyword": "莆田PUTIAN15544448888"
+				},
+				{
+					"name": "濮阳",
+					"mobile": "15544448888",
+					"keyword": "濮阳PUYANG15544448888"
+				}
+			]
+		},
+		{
+			"letter": "Q",
+			"data": [{
+					"name": "黔东南",
+					"mobile": "15544448888",
+					"keyword": "黔东南QIANDONGNAN15544448888"
+				},
+				{
+					"name": "黔南",
+					"mobile": "15544448888",
+					"keyword": "黔南QIANNAN15544448888"
+				},
+				{
+					"name": "黔西南",
+					"mobile": "15544448888",
+					"keyword": "黔西南QIANXINAN15544448888"
+				}
+			]
+		},
+		{
+			"letter": "R",
+			"data": [{
+					"name": "日喀则",
+					"mobile": "15544448888",
+					"keyword": "日喀则RIKAZE15544448888"
+				},
+				{
+					"name": "日照",
+					"mobile": "15544448888",
+					"keyword": "日照RIZHAO15544448888"
+				}
+			]
+		},
+		{
+			"letter": "S",
+			"data": [{
+					"name": "三门峡",
+					"mobile": "15544448888",
+					"keyword": "三门峡SANMENXIA15544448888"
+				},
+				{
+					"name": "三明",
+					"mobile": "15544448888",
+					"keyword": "三明SANMING15544448888"
+				},
+				{
+					"name": "三沙",
+					"mobile": "15544448888",
+					"keyword": "三沙SANSHA15544448888"
+				}
+			]
+		},
+		{
+			"letter": "T",
+			"data": [{
+					"name": "塔城",
+					"mobile": "15544448888",
+					"keyword": "塔城TACHENG15544448888"
+				},
+				{
+					"name": "漯河",
+					"mobile": "15544448888",
+					"keyword": "漯河TAHE15544448888"
+				},
+				{
+					"name": "泰安",
+					"mobile": "15544448888",
+					"keyword": "泰安TAIAN15544448888"
+				}
+			]
+		},
+		{
+			"letter": "W",
+			"data": [{
+					"name": "潍坊",
+					"mobile": "15544448888",
+					"keyword": "潍坊WEIFANG15544448888"
+				},
+				{
+					"name": "威海",
+					"mobile": "15544448888",
+					"keyword": "威海WEIHAI15544448888"
+				},
+				{
+					"name": "渭南",
+					"mobile": "15544448888",
+					"keyword": "渭南WEINAN15544448888"
+				},
+				{
+					"name": "文山",
+					"mobile": "15544448888",
+					"keyword": "文山WENSHAN15544448888"
+				}
+			]
+		},
+		{
+			"letter": "X",
+			"data": [{
+					"name": "厦门",
+					"mobile": "15544448888",
+					"keyword": "厦门XIAMEN15544448888"
+				},
+				{
+					"name": "西安",
+					"mobile": "15544448888",
+					"keyword": "西安XIAN15544448888"
+				},
+				{
+					"name": "湘潭",
+					"mobile": "15544448888",
+					"keyword": "湘潭XIANGTAN15544448888"
+				}
+			]
+		},
+		{
+			"letter": "Y",
+			"data": [{
+					"name": "雅安",
+					"mobile": "15544448888",
+					"keyword": "雅安YAAN15544448888"
+				},
+				{
+					"name": "延安",
+					"mobile": "15544448888",
+					"keyword": "延安YANAN15544448888"
+				},
+				{
+					"name": "延边",
+					"mobile": "15544448888",
+					"keyword": "延边YANBIAN15544448888"
+				},
+				{
+					"name": "盐城",
+					"mobile": "15544448888",
+					"keyword": "盐城YANCHENG15544448888"
+				}
+			]
+		},
+		{
+			"letter": "Z",
+			"data": [{
+					"name": "枣庄",
+					"mobile": "15544448888",
+					"keyword": "枣庄ZAOZHUANG15544448888"
+				},
+				{
+					"name": "张家界",
+					"mobile": "15544448888",
+					"keyword": "张家界ZHANGJIAJIE15544448888"
+				},
+				{
+					"name": "张家口",
+					"mobile": "15544448888",
+					"keyword": "张家口ZHANGJIAKOU15544448888"
+				}
+			]
+		},
+		{
+			"letter": "#",
+			"data": [{
+				"name": "其他.",
+				"mobile": "16666666666",
+				"keyword": "echo16666666666"
+			}]
+		}
+	]
+}

common/locales/en.js

@@ -0,0 +1,21 @@
+export default {
+	// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
+	components: {
+		desc: 'Numerous components cover the various requirements of the development process, and the components are rich in functions and compatible with multiple terminals. Let you integrate quickly, out of the box'
+	},
+	js: {
+		desc: 'Numerous intimate gadgets are a weapon that you can call upon during the development process, allowing you to dart in your hand and pierce the Yang with a hundred steps'
+	},
+	template: {
+		desc: 'Collection of many commonly used pages and layouts, reducing the repetitive work of developers, allowing you to focus on logic and get twice the result with half the effort'
+	},
+	nav: {
+		components: 'Components',
+		js: 'JS',
+		template: 'Template'
+	},
+	common: {
+		intro: 'UI framework for rapid development of multiple platforms',
+		title: 'uView UI',
+	},
+}

common/locales/zh.js

@@ -0,0 +1,21 @@
+export default {
+	// 可以以页面为单位来写，比如首页的内容，写在index字段，个人中心写在center，共同部分写在common部分
+	components: {
+		desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用'
+	},
+	js: {
+		desc: '众多的贴心小工具，是你开发过程中召之即来的利器，让你飞镖在手，百步穿杨'
+	},
+	template: {
+		desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
+	},
+	nav: {
+		components: '组件',
+		js: '工具',
+		template: '模板'
+	},
+	common: {
+		intro: '多平台快速开发的UI框架',
+		title: 'uView UI',
+	},
+}

components/page-nav/page-nav.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="nav-wrap">
+		<view class="nav-title">
+			<image class="logo" src="https://cdn.uviewui.com/uview/common/logo.png" mode="widthFix"></image>
+			<view class="nav-info">
+				<view class="nav-title__text">
+					{{$t('common.title')}}
+				</view>
+				<view class="nav-slogan">
+					 {{$t('common.intro')}}
+				</view>
+			</view>
+		</view>
+		<view class="nav-desc">
+			{{desc}}
+		</view>
+		<view class="lang" @tap="switchLang">
+			<u-icon size="46" color="warning" :name="lang"></u-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			desc: String,
+			title: String,
+		},
+		computed: {
+			lang() {
+				return this.$i18n.locale == 'zh' ? 'zh' : 'en';
+			}
+		},
+		methods: {
+			switchLang() {
+				this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh' : 'en';
+				this.vuex_tabbar[0].text = this.$t('nav.components')
+				this.vuex_tabbar[1].text = this.$t('nav.js')
+				this.vuex_tabbar[2].text = this.$t('nav.template')
+				uni.setNavigationBarTitle({
+					title: this.$t(this.title)
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.nav-wrap {
+		padding: 15px;
+		position: relative;
+	}
+	
+	.lang {
+		position: absolute;
+		top: 15px;
+		right: 15px;
+	}
+	
+	.nav-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+	}
+	
+	.nav-info {
+		margin-left: 15px;
+	}
+	
+	.nav-title__text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		color: $u-main-color;
+		font-size: 25px;
+		font-weight: bold;
+	}
+	
+	.logo {
+		width: 70px;
+		/* #ifndef APP-NVUE */
+		height: auto;
+		/* #endif */
+	}
+	
+	.nav-slogan {
+		color: $u-tips-color;
+		font-size: 14px;
+	}
+	
+	.nav-desc {
+		margin-top: 10px;
+		font-size: 14px;
+		color: $u-content-color;
+	}
+</style>

main.js

@@ -0,0 +1,74 @@
+import Vue from 'vue';
+import App from './App';
+
+Vue.config.productionTip = false;
+import { config } from './common/config'
+Vue.prototype.config = config;
+
+App.mpType = 'app';
+
+// 此处为演示Vue.prototype使用，非uView的功能部分
+Vue.prototype.vuePrototype = '枣红';
+
+// 引入全局uView
+import uView from 'uview-ui';
+Vue.use(uView);
+
+// 此处为演示vuex使用，非uView的功能部分
+import store from '@/store';
+
+// 引入uView提供的对vuex的简写法文件
+let vuexStore = require('@/store/$u.mixin.js');
+Vue.mixin(vuexStore);
+
+// 引入uView对小程序分享的mixin封装
+let mpShare = require('uview-ui/libs/mixin/mpShare.js');
+Vue.mixin(mpShare);
+
+import $wxApi from "./wxapi.js";
+Vue.prototype.$wxApi = $wxApi;
+
+//微信支付封装
+import $pay from "./pay.js";
+Vue.prototype.$pay = $pay
+
+// i18n部分的配置
+// 引入语言包，注意路径
+import Chinese from '@/common/locales/zh.js';
+import English from '@/common/locales/en.js';
+
+// VueI18n
+import VueI18n from '@/common/vue-i18n.min.js';
+
+
+// VueI18n
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+	// 默认语言
+	locale: 'zh',
+	// 引入语言文件
+	messages: {
+		'zh': Chinese,
+		'en': English,
+	}
+});
+
+// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
+Vue.prototype._i18n = i18n;
+
+const app = new Vue({
+	i18n,
+	store,
+	...App
+});
+
+// http拦截器，将此部分放在new Vue()和app.$mount()之间，才能App.vue中正常使用
+import httpInterceptor from '@/common/http.interceptor.js';
+Vue.use(httpInterceptor, app);
+
+// http接口API抽离，免于写url或者一些固定的参数
+import httpApi from '@/common/http.api.js';
+Vue.use(httpApi, app);
+
+app.$mount();

manifest.json

@@ -0,0 +1,139 @@
+{
+    "name" : "mobile-frame-h5",
+    "appid" : "",
+    "description" : "多平台快速开发的UI框架",
+    "versionName" : "1.8.3",
+    "versionCode" : "100",
+    "transformPx" : false,
+    "app-plus" : {
+        // APP-VUE分包，可提APP升启动速度，2.7.12开始支持，兼容微信小程序分包方案，默认关闭
+        "optimization" : {
+            "subPackages" : true
+        },
+        "safearea" : {
+            "bottom" : {
+                "offset" : "none"
+            }
+        },
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        "usingComponents" : true,
+        "nvueCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "modules" : {},
+        "distribute" : {
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ],
+                "abiFilters" : [ "armeabi-v7a", "arm64-v8a" ]
+            },
+            "ios" : {},
+            "sdkConfigs" : {
+                "ad" : {}
+            },
+            "icons" : {
+                "android" : {
+                    "hdpi" : "unpackage/res/icons/72x72.png",
+                    "xhdpi" : "unpackage/res/icons/96x96.png",
+                    "xxhdpi" : "unpackage/res/icons/144x144.png",
+                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                },
+                "ios" : {
+                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "ipad" : {
+                        "app" : "unpackage/res/icons/76x76.png",
+                        "app@2x" : "unpackage/res/icons/152x152.png",
+                        "notification" : "unpackage/res/icons/20x20.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "proapp@2x" : "unpackage/res/icons/167x167.png",
+                        "settings" : "unpackage/res/icons/29x29.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "spotlight" : "unpackage/res/icons/40x40.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                    },
+                    "iphone" : {
+                        "app@2x" : "unpackage/res/icons/120x120.png",
+                        "app@3x" : "unpackage/res/icons/180x180.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@3x" : "unpackage/res/icons/60x60.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@3x" : "unpackage/res/icons/87x87.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
+                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    }
+                }
+            }
+        }
+    },
+    "quickapp" : {},
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : true,
+            "es6" : false,
+            "minified" : true,
+            "postcss" : true
+        },
+        "optimization" : {
+            "subPackages" : true
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true,
+        "component2" : true
+    },
+    "mp-qq" : {
+        "optimization" : {
+            "subPackages" : true
+        },
+        "appid" : ""
+    },
+    "mp-baidu" : {
+        "usingComponents" : true,
+        "appid" : ""
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true,
+        "appid" : ""
+    },
+    "h5" : {
+        "template" : "template.h5.html",
+        "router" : {
+            "mode" : "hash",
+            "base" : ""
+        },
+        "optimization" : {
+            "treeShaking" : {
+                "enable" : false
+            }
+        },
+        "title" : "uView UI"
+    }
+}

package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "uView",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "vue-i18n": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.20.0.tgz",
+      "integrity": "sha512-ZiAOoeR4d/JtKpbjipx3I80ey7cYG1ki5gQ7HwzWm4YFio9brA15BEYHjalEoBaEfzF5OBEZP+Y2MvAaWnyXXg=="
+    }
+  }
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "uView",
+  "version": "1.0.0",
+  "description": "<p align=\"center\">\r     <img alt=\"logo\" src=\"https://uviewui.com/common/logo.png\" width=\"120\" height=\"120\" style=\"margin-bottom: 10px;\">\r </p>\r <h3 align=\"center\" style=\"margin: 30px 0 30px;font-weight: bold;font-size:40px;\">uView</h3>\r <h3 align=\"center\">多平台快速开发的UI框架</h3>",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YanxinNet/uView.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/YanxinNet/uView/issues"
+  },
+  "homepage": "https://github.com/YanxinNet/uView#readme",
+  "dependencies": {
+    "vue-i18n": "^8.20.0"
+  }
+}

pages.json

@@ -0,0 +1,883 @@
+{
+	"easycom": {
+		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
+	},
+	// "condition": { //模式配置，仅开发期间生效
+	// 	"current": 0, //当前激活的模式(list 的索引项)
+	// 	"list": [{
+	// 		"name": "test", //模式名称
+	// 		"path": "pages/componentsC/test/index", //启动页面，必选
+	// 		"query": "uuid=c4bba940-f69e-11ea-a419-6bafda9d095e&__id__=1" //启动参数，在页面的onLoad函数里面得到
+	// 	}]
+	// },
+	"pages": [
+		// 演示-组件
+		{
+			"path": "pages/example/components",
+			"style": {
+				"navigationBarTitleText": "组件"
+			}
+		},
+		// avatarCropper-头像裁剪
+		{
+			"path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper",
+			"style": {
+				"navigationBarTitleText": "头像裁剪",
+				"navigationBarBackgroundColor": "#000000"
+			}
+		},
+		// 演示-工具
+		{
+			"path": "pages/example/js",
+			"style": {
+				"navigationBarTitleText": "工具"
+			}
+		},
+		// 演示-模板
+		{
+			"path": "pages/example/template",
+			"style": {
+				"navigationBarTitleText": "模板"
+			}
+		},
+		// fullScreen-压窗屏
+		{
+			"path": "uview-ui/components/u-full-screen/u-full-screen",
+			"style": {
+				"navigationStyle": "custom",
+				"app-plus": {
+					"animationType": "fade-in",
+					"background": "transparent",
+					"backgroundColor": "rgba(0,0,0,0)",
+					"popGesture": "none"
+				}
+			}
+		}
+	],
+	"subPackages": [{
+			"root": "pages/componentsC",
+			"pages": [
+				// test-测试
+				{
+					"path": "test/index",
+					"style": {
+						"navigationBarTitleText": "Test"
+						// "navigationStyle": "custom" ,// 隐藏系统导航栏
+						// "navigationBarTextStyle": "white" // 状态栏字体为白色
+					}
+				},
+				// gap-间隔槽
+				{
+					"path": "gap/index",
+					"style": {
+						"navigationBarTitleText": "gap-间隔槽"
+					}
+				},
+				// subsection分段器
+				{
+					"path": "subsection/index",
+					"style": {
+						"navigationBarTitleText": "subsection-分段器"
+					}
+				},
+				// section 查看更多
+				{
+					"path": "section/index",
+					"style": {
+						"navigationBarTitleText": "section-查看更多"
+					}
+				},
+				// link链接
+				{
+					"path": "link/index",
+					"style": {
+						"navigationBarTitleText": "link-链接"
+					}
+				},
+				// mask遮罩层
+				{
+					"path": "mask/index",
+					"style": {
+						"navigationBarTitleText": "mask-遮罩层"
+					}
+				},
+				// countTo数字滚动
+				{
+					"path": "countTo/index",
+					"style": {
+						"navigationBarTitleText": "countTo-数字滚动"
+					}
+				},
+				// color颜色
+				{
+					"path": "color/index",
+					"style": {
+						"navigationBarTitleText": "color-颜色"
+					}
+				},
+				// countDown倒计时
+				{
+					"path": "countDown/index",
+					"style": {
+						"navigationBarTitleText": "countDown-倒计时"
+					}
+				},
+				// progress进度条
+				{
+					"path": "progress/index",
+					"style": {
+						"navigationBarTitleText": "progress-进度条"
+					}
+				},
+				// alertTips警告提示
+				{
+					"path": "alertTips/index",
+					"style": {
+						"navigationBarTitleText": "alertTips-警告提示"
+					}
+				},
+				// badge 徽标数
+				{
+					"path": "badge/index",
+					"style": {
+						"navigationBarTitleText": "badge-徽标数"
+					}
+				},
+				// button按钮
+				{
+					"path": "button/index",
+					"style": {
+						"navigationBarTitleText": "button-按钮"
+					}
+				},
+				// collapse折叠面板
+				{
+					"path": "collapse/index",
+					"style": {
+						"navigationBarTitleText": "collapse-折叠面板"
+					}
+				},
+				// actionSheet操作菜单
+				{
+					"path": "actionSheet/index",
+					"style": {
+						"navigationBarTitleText": "actionSheet-操作菜单"
+					}
+				},
+				// messageInput验证码输入
+				{
+					"path": "messageInput/index",
+					"style": {
+						"navigationBarTitleText": "messageInput-验证码输入"
+					}
+				},
+				// popup弹窗
+				{
+					"path": "popup/index",
+					"style": {
+						"navigationBarTitleText": "popup-弹窗"
+					}
+				},
+				// listCell
+				{
+					"path": "cell/index",
+					"style": {
+						"navigationBarTitleText": "listCell-列表"
+					}
+				},
+				// numberBox数字输入框
+				{
+					"path": "numberBox/index",
+					"style": {
+						"navigationBarTitleText": "numberBox-步进器"
+					}
+				},
+				// grid宫格布局
+				{
+					"path": "grid/index",
+					"style": {
+						"navigationBarTitleText": "grid-宫格布局"
+					}
+				},
+				// layout栅格布局
+				{
+					"path": "layout/index",
+					"style": {
+						"navigationBarTitleText": "layout-栅格布局"
+					}
+				},
+				// 加载更多
+				{
+					"path": "loadmore/index",
+					"style": {
+						"navigationBarTitleText": "loadmore-加载更多"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/template",
+			"pages": [
+				// 反馈
+				{
+					"path": "feedback/feedback",
+					"style": {
+						"navigationBarTitleText": "反馈",
+						"navigationStyle": "custom"
+					}
+				},
+				// wxCenter 仿微信个人中心
+				{
+					"path": "wxCenter/index",
+					"style": {
+						"navigationBarTitleText": "wxCenter 仿微信个人中心",
+						"navigationStyle": "custom"
+					}
+				},
+				// 绑定手机号
+				{
+					"path": "bindPhoneNumber/bindPhoneNumber",
+					"style": {
+						"navigationBarTitleText": "绑定手机号",
+						"navigationStyle": "custom"
+					}
+				},
+				// keyboardPay 自定义键盘支付
+				{
+					"path": "keyboardPay/index",
+					"style": {
+						"navigationBarTitleText": "keyboardPay 自定义键盘支付"
+					}
+				},
+				// douyin 仿抖音
+				// {
+				// 	"path": "douyin/index",
+				// 	"style": {
+				// 		"navigationBarTitleText": "douyin 仿抖音"
+				// 	}
+				// },
+				// mallMenu商城分类
+				{
+					"path": "mallMenu/index2",
+					"style": {
+						"navigationBarTitleText": "mallMenu-商城分类"
+					}
+				},
+				// mallMenu商城分类
+				{
+					"path": "mallMenu/index1",
+					"style": {
+						"navigationBarTitleText": "mallMenu-商城分类"
+					}
+				},
+				// coupon优惠券
+				{
+					"path": "coupon/index",
+					"style": {
+						"navigationBarTitleText": "coupon-优惠券"
+					}
+				},
+				{
+					"path": "login/index",
+					"style": {
+						"navigationBarTitleText": "美团登录"
+					}
+				},
+				// 城市选择
+				{
+					"path": "citySelect/index",
+					"style": {
+						"navigationBarTitleText": "城市选择"
+					}
+				},
+				// SubmitBar提交订单栏
+				{
+					"path": "submitBar/index",
+					"style": {
+						"navigationBarTitleText": "提交订单栏"
+					}
+				},
+				// comment评论
+				{
+					"path": "comment/index",
+					"style": {
+						"navigationBarTitleText": "评论"
+					}
+				},
+				// comment评论详情
+				{
+					"path": "comment/reply",
+					"style": {
+						"navigationBarTitleText": "评论详情"
+					}
+				},
+				// order订单
+				{
+					"path": "order/index",
+					"style": {
+						"navigationBarTitleText": "订单"
+					}
+				},
+				// login登录获取验证码
+				{
+					"path": "login/code",
+					"style": {
+						"navigationBarTitleText": "登录获取验证码"
+					}
+				},
+				// address用户地址
+				{
+					"path": "address/index",
+					"style": {
+						"navigationBarTitleText": "用户地址"
+					}
+				},
+				// address添加用户地址
+				{
+					"path": "address/addSite",
+					"style": {
+						"navigationBarTitleText": "添加用户地址"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/library",
+			"pages": [
+				// debounce-节流防抖
+				{
+					"path": "debounce/index",
+					"style": {
+						"navigationBarTitleText": "throttle | debounce-节流防抖"
+					}
+				},
+				// deepClone-对象深度克隆
+				{
+					"path": "deepClone/index",
+					"style": {
+						"navigationBarTitleText": "deepClone-对象深度克隆"
+					}
+				},
+				// deepMerge-对象深度合并
+				{
+					"path": "deepMerge/index",
+					"style": {
+						"navigationBarTitleText": "deepMerge-对象深度合并"
+					}
+				},
+				// getRect-元素节点
+				{
+					"path": "getRect/index",
+					"style": {
+						"navigationBarTitleText": "getRect-元素节点"
+					}
+				},
+				// timeFrom-多久之前
+				{
+					"path": "timeFrom/index",
+					"style": {
+						"navigationBarTitleText": "timeFrom-多久之前"
+					}
+				},
+				// globalData-全局变量
+				{
+					"path": "globalVariable/globalData",
+					"style": {
+						"navigationBarTitleText": "globalData-全局变量"
+					}
+				},
+				// prototype-全局变量
+				{
+					"path": "globalVariable/prototype",
+					"style": {
+						"navigationBarTitleText": "prototype-全局变量"
+					}
+				},
+				// vuex-全局变量
+				{
+					"path": "globalVariable/vuex",
+					"style": {
+						"navigationBarTitleText": "vuex-全局变量"
+					}
+				},
+				// globalVariable-全局变量
+				{
+					"path": "globalVariable/index",
+					"style": {
+						"navigationBarTitleText": "globalVariable-全局变量"
+					}
+				},
+				// http-请求
+				{
+					"path": "http/index",
+					"style": {
+						"navigationBarTitleText": "http-请求"
+					}
+				},
+				// test-规则验证
+				{
+					"path": "test/index",
+					"style": {
+						"navigationBarTitleText": "test-规则验证"
+					}
+				},
+				// mpShare-小程序分享
+				{
+					"path": "mpShare/index",
+					"style": {
+						"navigationBarTitleText": "mpShare-小程序分享"
+					}
+				},
+				// color-JS调用颜色
+				{
+					"path": "color/index",
+					"style": {
+						"navigationBarTitleText": "color-JS调用颜色"
+					}
+				},
+				// trim-去除空格
+				{
+					"path": "trim/index",
+					"style": {
+						"navigationBarTitleText": "trim-去除空格"
+					}
+				},
+				// random-随机数生成
+				{
+					"path": "random/index",
+					"style": {
+						"navigationBarTitleText": "random-随机数生成"
+					}
+				},
+				// md5加密
+				{
+					"path": "md5/index",
+					"style": {
+						"navigationBarTitleText": "md5-加密"
+					}
+				},
+				// colorSwitch颜色转换
+				{
+					"path": "colorSwitch/index",
+					"style": {
+						"navigationBarTitleText": "colorSwitch-颜色转换"
+					}
+				},
+				// randomArray数组乱序
+				{
+					"path": "randomArray/index",
+					"style": {
+						"navigationBarTitleText": "randomArray-数组乱序"
+					}
+				},
+				// guid全局唯一标识符
+				{
+					"path": "guid/index",
+					"style": {
+						"navigationBarTitleText": "guid-全局唯一标识符"
+					}
+				},
+				// timeFormat时间格式化
+				{
+					"path": "timeFormat/index",
+					"style": {
+						"navigationBarTitleText": "timeFormat-时间格式化"
+					}
+				}, // route-路由
+				{
+					"path": "route/index",
+					"style": {
+						"navigationBarTitleText": "route-路由"
+					}
+				},
+				// route-路由跳转
+				{
+					"path": "route/routeTo",
+					"style": {
+						"navigationBarTitleText": "route-路由跳转"
+					}
+				},
+				// queryParams-对象转URL参数
+				{
+					"path": "queryParams/index",
+					"style": {
+						"navigationBarTitleText": "queryParams-对象转URL参数"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/componentsA",
+			"pages": [
+				// parse-富文本解析器
+				{
+					"path": "parse/index",
+					"style": {
+						"navigationBarTitleText": "parse-富文本解析器"
+					}
+				},
+				// backTop-返回顶部
+				{
+					"path": "backTop/index",
+					"style": {
+						"navigationBarTitleText": "backTop-返回顶部"
+					}
+				},
+				// calendar-日历
+				{
+					"path": "calendar/index",
+					"style": {
+						"navigationBarTitleText": "calendar-日历"
+					}
+				},
+				// form-表单
+				{
+					"path": "form/index",
+					"style": {
+						"navigationBarTitleText": "form-表单"
+					}
+				},
+				// select-列选择器
+				{
+					"path": "select/index",
+					"style": {
+						"navigationBarTitleText": "select-列选择器"
+					}
+				},
+				// slider-滑动选择器
+				{
+					"path": "slider/index",
+					"style": {
+						"navigationBarTitleText": "slider-滑动选择器"
+					}
+				},
+				// fullScreen-压窗屏
+				{
+					"path": "fullScreen/index",
+					"style": {
+						"navigationBarTitleText": "fullScreen-压窗屏"
+					}
+				},
+				// navbar-自定义导航栏
+				{
+					"path": "navbar/index",
+					"style": {
+						// "navigationBarTitleText": "navbar-自定义导航栏",
+						"navigationStyle": "custom", // 隐藏系统导航栏
+						"navigationBarTextStyle": "white" // 状态栏字体为白色
+					}
+				},
+				// field-输入框
+				{
+					"path": "field/index",
+					"style": {
+						"navigationBarTitleText": "field-输入框"
+					}
+				},
+				// modal-模态框
+				{
+					"path": "modal/index",
+					"style": {
+						"navigationBarTitleText": "modal-模态框"
+					}
+				},
+				// indexList索引列表
+				{
+					"path": "indexList/index",
+					"style": {
+						"navigationBarTitleText": "indexList-索引列表"
+					}
+				},
+				// empty内容为空
+				{
+					"path": "empty/index",
+					"style": {
+						"navigationBarTitleText": "empty-内容为空"
+					}
+				},
+				// avatarCropper-头像裁剪
+				{
+					"path": "avatarCropper/index",
+					"style": {
+						"navigationBarTitleText": "avatarCropper-头像裁剪"
+					}
+				}, // noNetwork没有网络
+				{
+					"path": "noNetwork/index",
+					"style": {
+						"navigationBarTitleText": "noNetwork-没有网络"
+					}
+				}, // icon字体图标
+				{
+					"path": "icon/index",
+					"style": {
+						"navigationBarTitleText": "icon-字体图标"
+					}
+				}, // avatar-用户头像展示
+				{
+					"path": "avatar/index",
+					"style": {
+						"navigationBarTitleText": "avatar-用户头像展示"
+					}
+				}, // keyboard键盘
+				{
+					"path": "keyboard/index",
+					"style": {
+						"navigationBarTitleText": "keyboard-键盘"
+					}
+				}, // 图片懒加载
+				{
+					"path": "lazyLoad/index",
+					"style": {
+						"navigationBarTitleText": "lazyLoad-懒加载"
+					}
+				},
+				// tabs切换
+				{
+					"path": "tabs/index",
+					"style": {
+						"navigationBarTitleText": "Tabs-切换"
+					}
+				},
+				// tag标签
+				{
+					"path": "tag/index",
+					"style": {
+						"navigationBarTitleText": "tag-标签"
+					}
+				},
+				// timeLine时间轴
+				{
+					"path": "timeLine/index",
+					"style": {
+						"navigationBarTitleText": "timeLine-时间轴"
+					}
+				},
+				// toast轻提示
+				{
+					"path": "toast/index",
+					"style": {
+						"navigationBarTitleText": "toast-轻提示"
+					}
+				},
+				// topTips消息提示
+				{
+					"path": "topTips/index",
+					"style": {
+						"navigationBarTitleText": "topTips-消息提示"
+					}
+				},
+				// Code-验证码倒计时
+				{
+					"path": "verificationCode/index",
+					"style": {
+						"navigationBarTitleText": "Code-验证码倒计时"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/componentsB",
+			"pages": [
+				// dropdown-下拉菜单
+				{
+					"path": "dropdown/index",
+					"style": {
+						"navigationBarTitleText": "dropdown-下拉菜单"
+					}
+				},
+				// tabbar-底部导航栏
+				{
+					"path": "tabbar/index",
+					"style": {
+						"navigationBarTitleText": "tabbar-底部导航栏"
+					}
+				},
+				// line-线条
+				{
+					"path": "line/index",
+					"style": {
+						"navigationBarTitleText": "line-线条"
+					}
+				},
+				// image-图片
+				{
+					"path": "image/index",
+					"style": {
+						"navigationBarTitleText": "image-图片"
+					}
+				},
+				// card-卡片
+				{
+					"path": "card/index",
+					"style": {
+						"navigationBarTitleText": "card-卡片"
+					}
+				},
+				// divider-分割线
+				{
+					"path": "divider/index",
+					"style": {
+						"navigationBarTitleText": "divider-分割线"
+					}
+				},
+				// picker选择器
+				{
+					"path": "picker/index",
+					"style": {
+						"navigationBarTitleText": "picker-选择器"
+					}
+				}, // noticeBar通告栏
+				{
+					"path": "noticeBar/index",
+					"style": {
+						"navigationBarTitleText": "noticeBar-通告栏"
+					}
+				},
+				// checkbox-复选框
+				{
+					"path": "checkbox/index",
+					"style": {
+						"navigationBarTitleText": "checkbox-复选框"
+					}
+				},
+				// radio-单选框
+				{
+					"path": "radio/index",
+					"style": {
+						"navigationBarTitleText": "radio-单选框"
+					}
+				},
+				// loading-加载动画
+				{
+					"path": "loading/index",
+					"style": {
+						"navigationBarTitleText": "loading-加载动画"
+					}
+				},
+				// switch-开关选择器
+				{
+					"path": "switch/index",
+					"style": {
+						"navigationBarTitleText": "switch-开关选择器"
+					}
+				},
+				// 骨架屏
+				{
+					"path": "skeleton/index",
+					"style": {
+						"navigationBarTitleText": "skeleton-骨架屏"
+					}
+				}, // upload上传
+				{
+					"path": "upload/index",
+					"style": {
+						"navigationBarTitleText": "upload-上传"
+					}
+				},
+				// waterfall瀑布流
+				// #ifndef MP-TOUTIAO 
+				{
+					"path": "waterfall/index",
+					"style": {
+						"navigationBarTitleText": "waterfall-瀑布流"
+					}
+				},
+				// #endif
+				// table表格
+				{
+					"path": "table/index",
+					"style": {
+						"navigationBarTitleText": "table-表格"
+					}
+				},
+				// rate评分
+				{
+					"path": "rate/index",
+					"style": {
+						"navigationBarTitleText": "rate-评分"
+					}
+				},
+				// readMore显示更多
+				{
+					"path": "readMore/index",
+					"style": {
+						"navigationBarTitleText": "readMore-查看更多"
+					}
+				},
+				// search搜索框
+				{
+					"path": "search/index",
+					"style": {
+						"navigationBarTitleText": "search-搜索框"
+					}
+				},
+				// steps步骤条
+				{
+					"path": "steps/index",
+					"style": {
+						"navigationBarTitleText": "steps-步骤条"
+					}
+				},
+				// sticky吸顶
+				{
+					"path": "sticky/index",
+					"style": {
+						"navigationBarTitleText": "sticky-吸顶"
+					}
+				},
+				// swiper轮播图
+				{
+					"path": "swiper/index",
+					"style": {
+						"navigationBarTitleText": "swiper-轮播图"
+					}
+				},
+				// swipeAction-左滑删除
+				{
+					"path": "swipeAction/index",
+					"style": {
+						"navigationBarTitleText": "swipeAction-左滑删除"
+					}
+				}
+			]
+		}
+	],
+	"preloadRule": {
+		"pages/example/components": {
+			"network": "all",
+			"packages": ["pages/componentsA", "pages/componentsB", "pages/componentsC"]
+		}
+	},
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uView",
+		"navigationBarBackgroundColor": "#FFFFFF",
+		"backgroundColor": "#FFFFFF"
+	},
+	"tabBar": {
+		"color": "#909399",
+		"selectedColor": "#303133",
+		"backgroundColor": "#FFFFFF",
+		"borderStyle": "black",
+		"list": [{
+				"pagePath": "pages/example/components",
+				"iconPath": "static/uview/example/component.png",
+				"selectedIconPath": "static/uview/example/component_select.png",
+				"text": "组件"
+			},
+			{
+				"pagePath": "pages/example/js",
+				"iconPath": "static/uview/example/js.png",
+				"selectedIconPath": "static/uview/example/js_select.png",
+				"text": "工具"
+			},
+			{
+				"pagePath": "pages/example/template",
+				"iconPath": "static/uview/example/template.png",
+				"selectedIconPath": "static/uview/example/template_select.png",
+				"text": "模板"
+			}
+		]
+	}
+}

pages/componentsA/avatar/index.vue

@@ -0,0 +1,90 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-avatar 
+					:mode="mode" 
+					:size="size" 
+					:src="src" 
+					:text="text"
+					:showLevel="showLevel"
+					:showSex="showSex"
+					:sexIcon="sexIcon"
+					:bgColor='bgColor'
+				></u-avatar>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择</view>
+				<u-subsection :list="['圆形', '圆角方形']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">性别选择</view>
+				<u-subsection :list="['男', '女', '不显示']" @change="sexChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">等级</view>
+				<u-subsection :list="['显示', '不显示']" @change="levelChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义内容</view>
+				<u-subsection current="0" :list="['图片', '文字']" @change="styleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">尺寸</view>
+				<u-subsection current="1" :list="['large', 'default', 'mini', 160]" @change="sizeChange"></u-subsection>
+			</view> 
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				mode: 'circle',
+				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
+				text: '', // 优先级比src高
+				size: '90',
+				showLevel: true,
+				showSex: true,
+				sexIcon: 'man',
+				bgColor: '#fcbd71'
+			}
+		},
+		methods: {
+			modeChange(index) {
+				this.mode = index == 0 ? 'circle' : 'square';
+			},
+			styleChange(index) {
+				if(index == 0) {
+					this.text = '';
+					this.src = 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg';
+				} else {
+					this.text = '无头像';
+				}
+			},
+			sizeChange(index) {
+				this.size = index == 0 ? 'large' : index == 1 ? 'default' : index == 2 ? 'mini' : 160;
+			},
+			sexChange(index) {
+				this.showSex = true;
+				if(index == 0) this.sexIcon = 'man';
+				if(index == 1) this.sexIcon = 'woman';
+				if(index == 2) this.showSex = false;
+			},
+			levelChange(index) {
+				this.showLevel = !index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

pages/componentsA/avatarCropper/index.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<view class="u-avatar-wrap">
+					<image @tap="preAvatar" class="u-avatar-demo" v-if="avatar" :src="avatar" mode="aspectFill"></image>
+				</view>
+				<u-button @click="chooseAvatar">选择图片</u-button>
+			</view>
+		</view>
+		<!-- <view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">生成图片质量</view>
+				<u-subsection :current="1" :list="['0.3', '0.7', '1']" @change="qualityChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义参数</view>
+				<u-subsection :current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+		</view> -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
+			}
+		},
+		created() {
+			uni.$on('uAvatarCropper', path => {
+				this.avatar = path;
+				// 可以在此上传到服务端
+				// uni.uploadFile({
+				// 	url: 'http://192.168.100.17/index.php/index/index/upload',
+				// 	filePath: path,
+				// 	name: 'file',
+				// 	complete: (res) => {
+				// 		console.log(res);
+				// 	}
+				// });
+			})
+		},
+		methods: {
+			chooseAvatar() {
+				this.$u.route({
+					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
+					params: {
+						// 输出图片宽度，高等于宽，单位px
+						destWidth: 300,
+						// 裁剪框宽度，高等于宽，单位px
+						rectWidth: 200,
+						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
+						fileType: 'jpg',
+					}
+				})
+			},
+			qualityChange(index) {
+				this.quality = index == 0 ? 0.3 : index == 1 ? 0.7 : 1;
+			},
+			styleChange(index) {
+				if (index == 0) {
+					this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 200;
+					this.boundStyle = {
+						lineWidth: 8,
+						borderColor: this.$u.color['error'],
+						mask: 'rgba(0, 0, 0, 0.8)'
+					}
+				} else {
+					this.rectHeight = this.rectWidth = this.destHeight = this.destWidth = 400;
+					this.boundStyle = {
+						lineWidth: 4,
+						borderColor: 'rgb(245, 245, 245)',
+						mask: 'rgba(0, 0, 0, 0.35)'
+					}
+				}
+			},
+			// 预览图片
+			preAvatar() {
+				wx.previewImage({
+					current: '', // 当前显示图片的 http 链接
+					urls: [this.avatar] // 需要预览的图片 http 链接列表
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx;
+	}
+
+	.u-avatar-wrap {
+		overflow: hidden;
+		margin-bottom: 20rpx;
+	}
+
+	.u-avatar-demo {
+		width: 150rpx;
+		height: 150rpx;
+		border-radius: 100rpx;
+	}
+</style>

pages/componentsA/backTop/index.vue

@@ -0,0 +1,105 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="u-no-demo-here">滚动页面即可在右下角看到返回顶部的按钮</view>
+			</view>
+			<u-back-top :scrollTop="scrollTop" :mode="mode"
+			:bottom="bottom" :right="right" :top="top" :icon="icon" :custom-style="customStyle"
+			:icon-style="iconStyle" :tips="tips"
+			>
+			</u-back-top>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式</view>
+				<u-subsection :list="['圆形', '方形']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">组件位置</view>
+				<u-subsection :list="['默认', '自定义']" @change="positionChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示组件的滚动条距离</view>
+				<u-subsection current="1" :list="['200', '400', '600']" @change="scrollTopChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				scrollTop: 0,
+				mode: 'circle',
+				bottom: 200,
+				right: 40,
+				top: 400,
+				icon: 'arrow-upward',
+				iconStyle: {
+					color: '#909399',
+					fontSize: '38rpx'
+				},
+				customStyle: {},
+				tips: ''
+			}
+		},
+		methods: {
+			modeChange(index) {
+				this.mode = !index ? 'circle' : 'square';
+			},
+			positionChange(index) {
+				if(index == 0) {
+					this.bottom = 200;
+					this.right = 40;
+				} else {
+					this.bottom = 400;
+					this.right = 80;
+				}
+			},
+			scrollTopChange(index) {
+				this.top = [200, 400, 600][index];
+			},
+			styleChange(index) {
+				if(index == 0) {
+					this.icon = 'arrow-up';
+					this.iconStyle = {
+						color: '#2979ff',
+						fontSize: '34rpx'
+					};
+					this.customStyle = {
+						backgroundColor: '#a0cfff',
+						color: '#2979ff'
+					};
+					this.tips = '顶部';
+				} else {
+					this.icon = 'arrow-upward';
+					this.iconStyle = {
+						color: '#909399',
+						fontSize: '38rpx'
+					};
+					this.customStyle = {};
+					this.tips = '';
+				}
+			}
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {
+		height: 200vh;
+	}
+</style>

pages/componentsA/calendar/index.vue

@@ -0,0 +1,111 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap" style="background-color: #FFFFFF;">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-calendar v-model="show" ref="calendar" @change="change" :mode="mode"
+					:start-text="startText" :end-text="endText" :range-color="rangeColor"
+					:range-bg-color="rangeBgColor" :active-bg-color="activeBgColor" :btn-type="btnType"
+				>
+				</u-calendar>
+				<view class="u-demo-result-line">
+					{{result}}
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="showBtnStatus" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式</view>
+				<u-subsection current="1" :list="['单个日期', '日期范围']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				mode: 'range',
+				result: "请选择日期",
+				startText: '开始',
+				endText: '结束',
+				rangeColor: '#2979ff',
+				rangeBgColor: 'rgba(41,121,255,0.13)',
+				activeBgColor: '#2979ff',
+				btnType: 'primary',
+			}
+		},
+		computed: {
+			showBtnStatus() {
+				return this.show ? 0 : 1;
+			}
+		},
+		methods: {
+			showChange(index) {
+				this.show = !index;
+			},
+			modeChange(index) {
+				this.mode = index == 0 ? 'date' : 'range';
+				this.show = true;
+			},
+			styleChange(index) {
+				if(index == 0) {
+					this.startText = '住店';
+					this.endText = '离店';
+					this.activeBgColor = '#19be6b';
+					this.rangeColor = '#19be6b';
+					this.rangeBgColor = 'rgba(25,190,107, 0.13)';
+					this.btnType = 'success';
+				} else {
+					this.startText = '开始';
+					this.endText = '结束';
+					this.activeBgColor = '#2979ff';
+					this.rangeColor = '#2979ff';
+					this.rangeBgColor = 'rgba(41,121,255,0.13)';
+					this.btnType = 'primary';
+				}
+				this.show = true;
+			},
+			customChange(index) {
+				if(index == 0) {
+					this.icon1 = 'map';
+					this.icon2 = 'photo';
+					this.arrow = true;
+				} else {
+					this.icon1 = '';
+					this.icon2 = '';
+					this.arrow = false;
+				}
+			},
+			textareaChange(index) {
+				this.type = index == 0 ? 'textarea' : 'text';
+			},
+			change(e) {
+				if (this.mode == 'range') {
+					this.result = e.startDate + " - " + e.endDate;
+				} else {
+					this.result = e.result;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {
+		
+	}
+</style>

pages/componentsA/empty/index.vue

@@ -0,0 +1,115 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-empty :mode="mode">
+					<u-button v-if="slot" slot="bottom" size="medium">
+						slot按钮
+					</u-button>
+				</u-empty>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择</view>
+				<u-table>
+					<u-tr class="u-tr">
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('car')">购物车为空</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('page')">页面不存在</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('search')">没有搜索结果</u-button>
+						</u-td>
+					</u-tr>
+					<u-tr class="u-tr">
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('address')">没有收货地址</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('wifi')">没有WiFi</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('order')">订单为空</u-button>
+						</u-td>
+					</u-tr>
+					<u-tr class="u-tr">
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('coupon')">没有优惠券</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('favor')">没有收藏</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('permission')">无权限</u-button>
+						</u-td>
+					</u-tr>
+					<u-tr class="u-tr">
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('history')">无历史记录</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('news')">无新闻列表</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('message')">消息列表为空</u-button>
+						</u-td>
+					</u-tr>
+					<u-tr class="u-tr">
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('list')">列表为空</u-button>
+						</u-td>
+						<u-td class="u-td">
+							<u-button :hair-line="false" size="mini" @click="modeChange('data')">数据为空</u-button>
+						</u-td>
+						<u-td class="u-td">
+							待扩展
+						</u-td>
+					</u-tr>
+				</u-table>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">传入slot</view>
+				<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				mode: 'data',
+				slot: false
+			}
+		},
+		methods: {
+			modeChange(mode = 'data') {
+				this.mode = mode;
+			},
+			slotChange(index) {
+				this.slot = !index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo-area {
+		height: 160px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.u-demo-area .u-empty {
+		padding-top: 0;
+	}
+</style>

pages/componentsA/field/index.vue

@@ -0,0 +1,103 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap" style="background-color: #FFFFFF;">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-field
+					v-model="mobile"
+					label="手机号"
+					:error-message="errorMessage"
+					placeholder="请填写手机号"
+					:required="required"
+					:icon="icon1"
+					:type="type"
+				>
+				</u-field>
+				<u-field
+					v-model="code"
+					label="验证码"
+					placeholder="请填写验证码"
+					:required="required"
+					:icon="icon2"
+				>
+					<u-button v-if="showBtn" slot="right" size="mini" type="success">发送验证码</u-button>
+				</u-field>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">右侧按钮</view>
+				<u-subsection current="1" :list="['是', '否']" @change="showBtnChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示错误信息</view>
+				<u-subsection current="1" :list="['是', '否']" @change="errorMessageChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否必填</view>
+				<u-subsection current="1" :list="['是', '否']" @change="requiredChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示左图标和右箭头</view>
+				<u-subsection current="1" :list="['是', '否']" @change="customChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">第一个输入框为textarea类型</view>
+				<u-subsection current="1" :list="['是', '否']" @change="textareaChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				mobile: '',
+				code: '',
+				errorMessage: '',
+				required: false,
+				placeholderColor: this.$u.color['tipsColor'],
+				arrow: false,
+				showBtn: false,
+				icon1: '',
+				icon2: '',
+				type: 'text',
+			}
+		},
+		methods: {
+			showBtnChange(index) {
+				this.showBtn = index == 0 ? true : false;
+			},
+			errorMessageChange(index) {
+				this.errorMessage = index == 0 ? '手机号有误' : false
+			},
+			requiredChange(index) {
+				this.required = index == 0 ? true : false;
+			},
+			customChange(index) {
+				if(index == 0) {
+					this.icon1 = 'map';
+					this.icon2 = 'photo';
+					this.arrow = true;
+				} else {
+					this.icon1 = '';
+					this.icon2 = '';
+					this.arrow = false;
+				}
+			},
+			textareaChange(index) {
+				this.type = index == 0 ? 'textarea' : 'text';
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {
+		
+	}
+</style>

pages/componentsA/form/index.vue

@@ -0,0 +1,454 @@
+<template>
+	<view class="wrap">
+		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
+			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="120" :label-position="labelPosition" label="姓名" prop="name">
+				<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="性别" prop="sex">
+				<u-input :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex" placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="简介" prop="intro">
+				<u-input type="textarea" :border="border" placeholder="请填写简介" v-model="model.intro" />
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="密码" prop="password">
+				<u-input :password-icon="true" :border="border" type="password" v-model="model.password" placeholder="请输入密码"></u-input>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="确认密码" label-width="150" prop="rePassword">
+				<u-input :border="border" type="password" v-model="model.rePassword" placeholder="请确认密码"></u-input>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="水果品种" label-width="150" prop="likeFruit">
+				<u-checkbox-group @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
+					<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
+				</u-checkbox-group>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="结算方式" prop="payType" label-width="150">
+				<u-radio-group v-model="radio" @change="radioGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
+					<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio>
+				</u-radio-group>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="所在地区" prop="region" label-width="150">
+				<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="商品类型" prop="goodsType" label-width="150">
+				<u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType" placeholder="请选择商品类型" @click="selectShow = true"></u-input>
+			</u-form-item>
+			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" :label-position="labelPosition" label="手机号码" prop="phone" label-width="150">
+				<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="验证码" prop="code" label-width="150">
+				<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
+				<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
+			</u-form-item>
+			<!-- 此处switch的slot为right，如果不填写slot名，也即<u-switch v-model="model.remember"></u-switch>，将会左对齐 -->
+			<u-form-item :label-position="labelPosition" label="记住密码" prop="remember" label-width="150">
+				<u-switch v-model="model.remember" slot="right"></u-switch>
+			</u-form-item>
+			<u-form-item :label-position="labelPosition" label="上传图片" prop="photo" label-width="150">
+				<u-upload width="160" height="160"></u-upload>
+			</u-form-item>
+		</u-form>
+		<view class="agreement">
+			<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
+			<view class="agreement-text">
+				勾选代表同意uView的版权协议
+			</view>
+		</view>
+		<u-button @click="submit">提交</u-button>
+		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
+		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
+		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
+		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">label对齐方式</view>
+				<u-subsection :list="['左边', '上方']" @change="labelPositionChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">边框</view>
+				<u-subsection :current="borderCurrent" :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">radio、checkbox样式</view>
+				<u-subsection :list="['自适应', '换行', '50%宽度']" @change="radioCheckboxChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">错误提示方式</view>
+				<u-subsection :list="['message', 'toast', '下划线', '输入框']" @change="errorChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		let that = this;
+		return {
+			model: {
+				name: '',
+				sex: '',
+				likeFruit: '',
+				intro: '',
+				payType: '支付宝',
+				agreement: false,
+				region: '',
+				goodsType: '',
+				phone: '',
+				code: '',
+				password: '',
+				rePassword: '',
+				remember: false,
+				photo: ''
+			},
+			selectList: [
+				{
+					value: '电子产品',
+					label: '电子产品'
+				},
+				{
+					value: '服装',
+					label: '服装'
+				},
+				{
+					value: '工艺品',
+					label: '工艺品'
+				}
+			],
+			rules: {
+				name: [
+					{
+						required: true,
+						message: '请输入姓名',
+						trigger: 'blur' ,
+					},
+					{
+						min: 3,
+						max: 5,
+						message: '姓名长度在3到5个字符',
+						trigger: ['change','blur'],
+					},
+					{
+						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
+						validator: (rule, value, callback) => {
+							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
+							return this.$u.test.chinese(value);
+						},
+						message: '姓名必须为中文',
+						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
+						trigger: ['change','blur'],
+					},
+					// 异步验证，用途：比如用户注册时输入完账号，后端检查账号是否已存在
+					// {
+					// 	trigger: ['blur'],
+					// 	// 异步验证需要通过调用callback()，并且在里面抛出new Error()
+					// 	// 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
+					// 	asyncValidator: (rule, value, callback) => {
+					// 		this.$u.post('/ebapi/public_api/index').then(res => {
+					// 			// 如果验证出错，需要在callback()抛出new Error('错误提示信息')
+					// 			if(res.error) {
+					// 				callback(new Error('姓名重复'));
+					// 			} else {
+					// 				// 如果没有错误，也要执行callback()回调
+					// 				callback();
+					// 			}
+					// 		})
+					// 	},
+					// }
+				],
+				sex: [
+					{
+						required: true,
+						message: '请选择性别',
+						trigger: 'change'
+					},
+				],
+				intro: [
+					{
+						required: true,
+						message: '请填写简介'
+					},
+					{
+						min: 5,
+						message: '简介不能少于5个字',
+						trigger: 'change' ,
+					},
+					// 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
+					{
+						pattern: /^[\u4e00-\u9fa5]+$/gi,
+						message: '简介只能为中文',
+						trigger: 'change',
+					},
+				],
+				likeFruit: [
+					{
+						required: true,
+						message: '请选择您喜欢的水果',
+						trigger: 'change',
+						type: 'array',
+					}
+				],
+				payType: [
+					{
+						required: true,
+						message: '请选择任意一种支付方式',
+						trigger: 'change',
+					}
+				],
+				region: [
+					{
+						required: true,
+						message: '请选择地区',
+						trigger: 'change',
+					}
+				],
+				goodsType: [
+					{
+						required: true,
+						message: '请选择商品类型',
+						trigger: 'change',
+					}
+				],
+				phone: [
+					{
+						required: true,
+						message: '请输入手机号',
+						trigger: ['change','blur'],
+					},
+					{
+						validator: (rule, value, callback) => {
+							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
+							return this.$u.test.mobile(value);
+						},
+						message: '手机号码不正确',
+						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
+						trigger: ['change','blur'],
+					}
+				],
+				code: [
+					{
+						required: true,
+						message: '请输入验证码',
+						trigger: ['change','blur'],
+					},
+					{
+						type: 'number',
+						message: '验证码只能为数字',
+						trigger: ['change','blur'],
+					}
+				],
+				password: [
+					{
+						required: true,
+						message: '请输入密码',
+						trigger: ['change','blur'],
+					},
+					{
+						// 正则不能含有两边的引号
+						pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
+						message: '需同时含有字母和数字，长度在6-12之间',
+						trigger: ['change','blur'],
+					}
+				],
+				rePassword: [
+					{
+						required: true,
+						message: '请重新输入密码',
+						trigger: ['change','blur'],
+					},
+					{
+						validator: (rule, value, callback) => {
+							return value === this.model.password;
+						},
+						message: '两次输入的密码不相等',
+						trigger: ['change','blur'],
+					}
+				],
+			},
+			border: false,
+			check: false,
+			selectStatus: 'close',
+			checkboxList: [
+				{
+					name: '荔枝',
+					checked: false,
+					disabled: false
+				},
+				{
+					name: '香蕉',
+					checked: false,
+					disabled: false
+				},
+				{
+					name: '橙子',
+					checked: false,
+					disabled: false
+				},
+				{
+					name: '草莓',
+					checked: false,
+					disabled: false
+				}
+			],
+			radioList: [
+				{
+					name: '支付宝',
+					checked: true,
+					disabled: false
+				},
+				{
+					name: '微信',
+					checked: false,
+					disabled: false
+				},
+				{
+					name: '银联',
+					checked: false,
+					disabled: false
+				},
+				{
+					name: '现金',
+					checked: false,
+					disabled: false
+				}
+			],
+			radio: '支付宝',
+			actionSheetList: [
+				{
+					text: '男'
+				},
+				{
+					text: '女'
+				},
+				{
+					text: '保密'
+				}
+			],
+			actionSheetShow: false,
+			pickerShow: false,
+			selectShow: false,
+			radioCheckWidth: 'auto',
+			radioCheckWrap: false,
+			labelPosition: 'left',
+			codeTips: '',
+			errorType: ['message'],
+		};
+	},
+	onLoad() {
+
+	},
+	computed: {
+		borderCurrent() {
+			return this.border ? 0 : 1;
+		}
+	},
+	onReady() {
+		this.$refs.uForm.setRules(this.rules);
+	},
+	methods: {
+		submit() {
+			this.$refs.uForm.validate(valid => {
+				if (valid) {
+					if(!this.model.agreement) return this.$u.toast('请勾选协议');
+					console.log('验证通过');
+				} else {
+					console.log('验证失败');
+				}
+			});
+		},
+		// 点击actionSheet回调
+		actionSheetCallback(index) {
+			uni.hideKeyboard();
+			this.model.sex = this.actionSheetList[index].text;
+		},
+		// checkbox选择发生变化
+		checkboxGroupChange(e) {
+			this.model.likeFruit = e;
+		},
+		// radio选择发生变化
+		radioGroupChange(e) {
+			this.model.payType = e;
+		},
+		// 勾选版权协议
+		checkboxChange(e) {
+			this.model.agreement = e.value;
+		},
+		// 选择地区回调
+		regionConfirm(e) {
+			this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
+		},
+		// 选择商品类型回调
+		selectConfirm(e) {
+			this.model.goodsType = '';
+			e.map((val, index) => {
+				this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
+			})
+		},
+		borderChange(index) {
+			this.border = !index;
+		},
+		radioCheckboxChange(index) {
+			if(index == 0) {
+				this.radioCheckWrap = false;
+				this.radioCheckWidth = 'auto';
+			} else if(index == 1) {
+				this.radioCheckWrap = true;
+				this.radioCheckWidth = 'auto';
+			} else if(index == 2) {
+				this.radioCheckWrap = false;
+				this.radioCheckWidth = '50%';
+			}
+		},
+		labelPositionChange(index) {
+			this.labelPosition = index == 0 ? 'left' : 'top';
+		},
+		codeChange(text) {
+			this.codeTips = text;
+		},
+		// 获取验证码
+		getCode() {
+			if(this.$refs.uCode.canGetCode) {
+				// 模拟向后端请求验证码
+				uni.showLoading({
+					title: '正在获取验证码',
+					mask: true
+				})
+				setTimeout(() => {
+					uni.hideLoading();
+					// 这里此提示会被this.start()方法中的提示覆盖
+					this.$u.toast('验证码已发送');
+					// 通知验证码组件内部开始倒计时
+					this.$refs.uCode.start();
+				}, 2000);
+			} else {
+				this.$u.toast('倒计时结束后再发送');
+			}
+		},
+		errorChange(index) {
+			if(index == 0) this.errorType = ['message'];
+			if(index == 1) this.errorType = ['toast'];
+			if(index == 2) this.errorType = ['border-bottom'];
+			if(index == 3) this.errorType = ['border'];
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.wrap {
+	padding: 30rpx;
+}
+
+.agreement {
+	display: flex;
+	align-items: center;
+	margin: 40rpx 0;
+
+	.agreement-text {
+		padding-left: 8rpx;
+		color: $u-tips-color;
+	}
+}
+</style>

pages/componentsA/fullScreen/index.vue

@@ -0,0 +1,49 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="u-no-demo-here">
+					通过压窗屏打开的模态框，可以遮盖顶部原生的导航栏和底部tabbar栏。
+					注意：压窗屏只对APP有效，其他端无效。
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="current" :list="['打开', '关闭']" @change="openModal"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				current: 1
+			}
+		},
+		onShow() {
+			this.$nextTick(() => {
+				this.current = 1;
+			})
+		},
+		methods: {
+			openModal(index) {
+				// 可以传递参数
+				if(index == 0) {
+					this.$u.route("/uview-ui/components/u-full-screen/u-full-screen?id=1");
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsA/icon/index.vue

@@ -0,0 +1,652 @@
+<template>
+	<view class="wrap">
+		<view class="u-border-left u-border-top inner-wrap">
+			<view @tap="selectIcon(item.name)" class="u-icon-item u-border-bottom u-border-right" v-for="(item, index) in iconList" :key="index">
+				<u-icon :name="item.name" size="40" color="#909399"></u-icon>
+				<text class="u-icon-name">{{item.name}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				iconList: [
+					{
+						name: 'level'
+					},
+					{
+						name: 'woman'
+					},
+					{
+						name: 'man'
+					},
+					{
+						name: 'arrow-left-double'
+					},
+					{
+						name: 'arrow-right-double'
+					},
+					{
+						name: 'chat'
+					},
+					{
+						name: 'chat-fill'
+					},
+					{
+						name: 'red-packet'
+					},
+					{
+						name: 'red-packet-fill'
+					},
+					{
+						name: 'order'
+					},
+					{
+						name: 'checkbox-mark'
+					},
+					{
+						name: 'arrow-up-fill'
+					},
+					{
+						name: 'arrow-down-fill'
+					},
+					{
+						name: 'backspace'
+					},
+					{
+						name: 'photo'
+					},
+					{
+						name: 'photo-fill'
+					},
+					{
+						name: 'lock'
+					},
+					{
+						name: 'lock-fill'
+					},
+					{
+						name: 'lock-open'
+					},
+					{
+						name: 'lock-opened-fill'
+					},
+					{
+						name: 'hourglass'
+					},
+					{
+						name: 'hourglass-half-fill'
+					},
+					{
+						name: 'home'
+					},
+					{
+						name: 'home-fill'
+					},
+					{
+						name: 'fingerprint'
+					},
+					{
+						name: 'cut'
+					},
+					{
+						name: 'star'
+					},
+					{
+						name: 'star-fill'
+					},
+					{
+						name: 'share'
+					},
+					{
+						name: 'share-fill'
+					},
+					{
+						name: 'volume-up'
+					},
+					{
+						name: 'volume-up-fill'
+					},
+					{
+						name: 'volume-off'
+					},
+					{
+						name: 'volume-off-fill'
+					},
+					{
+						name: 'trash'
+					},
+					{
+						name: 'trash-fill'
+					},
+					{
+						name: 'rewind-right'
+					},
+					{
+						name: 'rewind-right-fill'
+					},
+					{
+						name: 'rewind-left'
+					},
+					{
+						name: 'rewind-left-fill'
+					},
+					{
+						name: 'shopping-cart'
+					},
+					{
+						name: 'shopping-cart-fill'
+					},
+					{
+						name: 'question'
+					},
+					{
+						name: 'question-circle'
+					},
+					{
+						name: 'question-circle-fill'
+					},
+					{
+						name: 'plus'
+					},
+					{
+						name: 'plus-circle'
+					},
+					{
+						name: 'plus-circle-fill'
+					},
+					{
+						name: 'tags'
+					},
+					{
+						name: 'tags-fill'
+					},
+					{
+						name: 'pause'
+					},
+					{
+						name: 'pause-circle'
+					},
+					{
+						name: 'pause-circle-fill'
+					},
+					{
+						name: 'play-circle'
+					},
+					{
+						name: 'play-circle-fill'
+					},
+					{
+						name: 'map'
+					},
+					{
+						name: 'map-fill'
+					},
+					{
+						name: 'phone'
+					},
+					{
+						name: 'phone-fill'
+					},
+					{
+						name: 'list'
+					},
+					{
+						name: 'list-dot'
+					},
+					{
+						name: 'man-delete'
+					},
+					{
+						name: 'man-add'
+					},
+					{
+						name: 'man-add-fill'
+					},
+					{
+						name: 'person-delete-fill'
+					},
+					{
+						name: 'info'
+					},
+					{
+						name: 'info-circle'
+					},
+					{
+						name: 'info-circle-fill'
+					},
+					{
+						name: 'minus'
+					},
+					{
+						name: 'minus-circle'
+					},
+					{
+						name: 'minus-circle-fill'
+					},
+					{
+						name: 'mic'
+					},
+					{
+						name: 'mic-off'
+					},
+					{
+						name: 'grid'
+					},
+					{
+						name: 'grid-fill'
+					},
+					{
+						name: 'eye'
+					},
+					{
+						name: 'eye-fill'
+					},
+					{
+						name: 'eye-off'
+					},
+					{
+						name: 'file-text'
+					},
+					{
+						name: 'file-text-fill'
+					},
+					{
+						name: 'edit-pen'
+					},
+					{
+						name: 'edit-pen-fill'
+					},
+					{
+						name: 'email'
+					},
+					{
+						name: 'email-fill'
+					},
+					{
+						name: 'download'
+					},
+					{
+						name: 'checkmark'
+					},
+					{
+						name: 'checkmark-circle'
+					},
+					{
+						name: 'checkmark-circle-fill'
+					},
+					{
+						name: 'clock'
+					},
+					{
+						name: 'clock-fill'
+					},
+					{
+						name: 'close'
+					},
+					{
+						name: 'close-circle'
+					},
+					{
+						name: 'close-circle-fill'
+					},
+					{
+						name: 'calendar'
+					},
+					{
+						name: 'calendar-fill'
+					},
+					{
+						name: 'car'
+					},
+					{
+						name: 'car-fill'
+					},
+					{
+						name: 'bell'
+					},
+					{
+						name: 'bell-fill'
+					},
+					{
+						name: 'bookmark'
+					},
+					{
+						name: 'bookmark-fill'
+					},
+					{
+						name: 'attach'
+					},
+					{
+						name: 'play-right'
+					},
+					{
+						name: 'play-right-fill'
+					},
+					{
+						name: 'play-left'
+					},
+					{
+						name: 'play-left-fill'
+					},
+					{
+						name: 'error'
+					},
+					{
+						name: 'error-circle'
+					},
+					{
+						name: 'error-circle-fill'
+					},
+					{
+						name: 'wifi'
+					},
+					{
+						name: 'wifi-off'
+					},
+					{
+						name: 'skip-back-left'
+					},
+					{
+						name: 'skip-forward-right'
+					},
+					{
+						name: 'search'
+					},
+					{
+						name: 'setting'
+					},
+					{
+						name: 'setting-fill'
+					},
+					{
+						name: 'volume'
+					},
+					{
+						name: 'volume-fill'
+					},
+					{
+						name: 'more-dot-fill'
+					},
+					{
+						name: 'more-circle'
+					},
+					{
+						name: 'more-circle-fill'
+					},
+					{
+						name: 'bag'
+					},
+					{
+						name: 'bag-fill'
+					},
+					{
+						name: 'arrow-upward'
+					},
+					{
+						name: 'arrow-downward'
+					},
+					{
+						name: 'arrow-leftward'
+					},
+					{
+						name: 'arrow-rightward'
+					},
+					{
+						name: 'arrow-up'
+					},
+					{
+						name: 'arrow-down'
+					},
+					{
+						name: 'arrow-left'
+					},
+					{
+						name: 'arrow-right'
+					},
+					{
+						name: 'rmb'
+					},
+					{
+						name: 'rmb-circle'
+					},
+					{
+						name: 'rmb-circle-fill'
+					},
+					{
+						name: 'thumb-up'
+					},
+					{
+						name: 'thumb-up-fill'
+					},
+					{
+						name: 'thumb-down'
+					},
+					{
+						name: 'thumb-down-fill'
+					},
+					{
+						name: 'coupon'
+					},
+					{
+						name: 'coupon-fill'
+					},
+					{
+						name: 'kefu-ermai'
+					},
+					{
+						name: 'server-fill'
+					},
+					{
+						name: 'server-man'
+					},
+					{
+						name: 'scan'
+					},
+					{
+						name: 'warning'
+					},
+					{
+						name: 'warning-fill'
+					},
+					{
+						name: 'google'
+					},
+					{
+						name: 'google-circle-fill'
+					},
+					{
+						name: 'chrome-circle-fill'
+					},
+					{
+						name: 'ie'
+					},
+					{
+						name: 'IE-circle-fill'
+					},
+					{
+						name: 'github-circle-fill'
+					},
+					{
+						name: 'android-fill'
+					},
+					{
+						name: 'android-circle-fill'
+					},
+					{
+						name: 'apple-fill'
+					},
+					{
+						name: 'camera'
+					},
+					{
+						name: 'camera-fill'
+					},
+					{
+						name: 'pushpin'
+					},
+					{
+						name: 'pushpin-fill'
+					},
+					{
+						name: 'minus-square-fill'
+					},
+					{
+						name: 'plus-square-fill'
+					},
+					{
+						name: 'heart'
+					},
+					{
+						name: 'heart-fill'
+					},
+					{
+						name: 'reload'
+					},
+					{
+						name: 'account'
+					},
+					{
+						name: 'account-fill'
+					},
+					{
+						name: 'minus-people-fill'
+					},
+					{
+						name: 'plus-people-fill'
+					},
+					{
+						name: 'integral'
+					},
+					{
+						name: 'integral-fill'
+					},
+					{
+						name: 'zhihu'
+					},
+					{
+						name: 'zhihu-circle-fill'
+					},
+					{
+						name: 'gift'
+					},
+					{
+						name: 'gift-fill'
+					},
+					{
+						name: 'zhifubao'
+					},
+					{
+						name: 'zhifubao-circle-fill'
+					},
+					{
+						name: 'weixin-fill'
+					},
+					{
+						name: 'weixin-circle-fill'
+					},
+					{
+						name: 'twitter'
+					},
+					{
+						name: 'twitter-circle-fill'
+					},
+					{
+						name: 'taobao'
+					},
+					{
+						name: 'taobao-circle-fill'
+					},
+					{
+						name: 'weibo'
+					},
+					{
+						name: 'weibo-circle-fill'
+					},
+					{
+						name: 'qq-fill'
+					},
+					{
+						name: 'qq-circle-fill'
+					},
+					{
+						name: 'moments'
+					},
+					{
+						name: 'moments-circel-fill'
+					},
+					{
+						name: 'qzone'
+					},
+					{
+						name: 'qzone-circle-fill'
+					},
+					{
+						name: 'facebook'
+					},
+					{
+						name: 'facebook-circle-fill'
+					},
+					{
+						name: 'baidu'
+					},
+					{
+						name: 'baidu-circle-fill'
+					},
+					{
+						name: 'zhuanfa'
+					},
+				]
+			};
+		},
+		methods: {
+			selectIcon(name) {
+				// #ifdef H5
+				return this.$u.toast('H5暂不支持复制');
+				// #endif
+				uni.setClipboardData({
+				    data: name,
+				    success: () => {
+				        
+				    }
+				});
+				uni.hideToast()
+				this.$u.toast('图标名称已复制');
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.wrap {
+		padding: 24rpx;
+	}
+	
+	.inner-wrap {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	.u-icon-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: 190rpx;
+		flex: 0 0 33.33333333%;
+		justify-content: center;
+		overflow: hidden;
+	}
+	
+	.u-icon-name {
+		color: $u-tips-color;
+		word-wrap: break-word;
+		word-break:break-all;
+		margin-top: 16rpx;
+		font-size: 26rpx;
+		padding: 0 14rpx;
+		// 给定高度是为了图标名超出一行时，进行换行能有更好的效果
+		height: 26rpx;
+	}
+</style>

pages/componentsA/indexList/index.vue

@@ -0,0 +1,43 @@
+<template>
+	<u-index-list :scrollTop="scrollTop" :index-list="indexList">
+		<view v-for="(item, index) in list" :key="index">
+			<u-index-anchor :index="item.letter" />
+			<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index">
+				{{item1.name}}
+			</view>
+		</view>
+	</u-index-list>
+</template>
+
+<script>
+	import indexList from "@/common/index.list.js";
+	const letterArr = indexList.list.map(val => {
+		return val.letter;
+	})
+	export default {
+		data() {
+			return {
+				scrollTop: 0,
+				indexList: letterArr,
+				list: indexList.list
+			}
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.list-cell {
+		display: flex;
+		box-sizing: border-box;
+		width: 100%;
+		padding: 10px 24rpx;
+		overflow: hidden;
+		color: $u-content-color;
+		font-size: 14px;
+		line-height: 24px;
+		background-color: #fff;
+	}
+</style>

pages/componentsA/keyboard/index.vue

@@ -0,0 +1,113 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="input-wrap">
+					<input class="input" disabled type="text" :value="input" placeholder="来自键盘的输入内容" />
+					<u-button :custom-style="{height: '32px'}" :hairLine="false" class="clear-btn" @tap="input = ''">清空</u-button>
+				</view>
+				<u-keyboard :mask="mask" ref="uKeyboard" safe-area-inset-bottom @confirm="confirm" 
+				:random="random" :dotEnable="false" :mode="mode"
+				:confirmBtn="true" :cancelBtn="true" :tooltip="tooltip" v-model="show" 
+				@change="change" @backspace="backspace"></u-keyboard>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置 
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">键盘开关</view>
+				<u-subsection :current="show == true ? 0 : 1" :list="['开', '关']" @change="statusChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">键盘类型</view>
+				<u-subsection :list="['数字键盘', '身份证键盘', '车牌号键盘']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">打乱顺序</view>
+				<u-subsection :current="1" :list="['是', '否']" @change="randomChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">上方工具条</view>
+				<u-subsection :list="['显示', '隐藏']" @change="tooltipChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否显示遮罩</view>
+				<u-subsection :list="['显示', '隐藏']" @change="maskChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				input: '', 
+				mode: 'number',
+				random: false,
+				tooltip: true,
+				mask: true,
+				
+			}
+		},
+		methods: {
+			statusChange(index) {
+				this.show = index == 0 ? true : false;
+			},
+			modeChange(index) {
+				if(index == 0) this.mode = 'number';
+				if(index == 1) this.mode = 'card';
+				if(index == 2) this.mode = 'car';
+				this.show = true;
+			},
+			randomChange(index) {
+				this.random = index == 0 ? true : false;
+				this.show = true;
+			},
+			tooltipChange(index) {
+				this.tooltip = index == 0 ? true : false;
+				this.show = true;
+			},
+			maskChange(index) {
+				this.show = true;
+				this.mask = !index;
+			},
+			// 点击退格键
+			backspace() {
+				if(this.input.length) this.input = this.input.substr(0, this.input.length - 1);
+			},
+			// 键盘按键发生变化
+			change(detail) {
+				this.input += detail;
+			},
+			confirm(e) {
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.input {
+		border: 1px solid $u-light-color;
+		border-radius: 4px;
+		margin-bottom: 20px;
+		height: 32px;
+		font-size: 26rpx;
+		flex: 1;
+		box-sizing: border-box;
+	}
+	
+	.input-wrap {
+		display: flex;
+	}
+	
+	.clear-btn {
+		margin-left: 10px;
+		font-size: 28rpx;
+	}
+</style>

pages/componentsA/lazyLoad/index.vue

@@ -0,0 +1,253 @@
+<template>
+	<view class="wrap">
+		<view class="item-warp">
+			<view class="item" v-for="(item, index) in list" :key="index">
+				<u-lazy-load threshold="-450" height="400" img-mode="aspectFill" border-radius="10" :image="item.src" :index="index" @statusChange="statusChange" @clickImg="clickImg"></u-lazy-load>
+			</view>
+		</view>
+		<u-loadmore :status="status" @loadmore="getData"></u-loadmore>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [],
+				status: 'loadmore',
+				data: [{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						// 这里会加载失败，显示错误的占位图
+						src: "error.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						// 这里会加载失败，显示错误的占位图
+						src: "error.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						// 这里会加载失败，显示错误的占位图
+						src: "error.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i6/TB1fVJJQFXXXXcyXpXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i3/TB1wnBTKFXXXXcQXXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB1DX3hIpXXXXXIaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i6/TB1SIYrLXXXXXaAXpXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB11yxeNVXXXXbwXFXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i3/TB1ndJiQFXXXXctaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i4/TB1BYGDLpXXXXbuXXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i2/TB1_9GoMVXXXXXmaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i2/TB1cSZZNFXXXXaKaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						// 这里会加载失败，显示错误的占位图
+						src: "error.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i8/TB1RVS_QpXXXXXBXXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i5/TB1xEJiLXXXXXcxaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i6/TB1DSuHJVXXXXXmXXXXwu0bFXXX.png_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i5/TB1aMNyLpXXXXa2XXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i8/TB1JRHEQpXXXXXwXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i7/TB1qKEuQpXXXXXYXXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i7/TB1TlOfQFXXXXX2XXXXwu0bFXXX.png_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB1SKu.QpXXXXbDXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i2/TB17gJ3OXXXXXcrXpXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i8/TB1um5GQpXXXXbiaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB1pxCTQpXXXXa2apXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i6/TB1zksMNVXXXXaRapXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i4/TB1nbrcOXXXXXXEXpXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i4/TB1CI_NQpXXXXXaXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i2/TB18vTdQFXXXXXlXpXXwu0bFXXX.png_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i7/TB1doDVQpXXXXcRaXXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						src: "https://gtd.alicdn.com/sns_logo/i1/TB17LgBNFXXXXaSXVXXSutbFXXX.jpg_240x240xz.jpg",
+					},
+					{
+						// 这里会加载失败，显示错误的占位图
+						src: "error.jpg",
+					}
+				]
+			}
+		},
+		onLoad() {
+			this.getData();
+		},
+		onReachBottom() {
+			this.getData();
+		},
+		methods: {
+			statusChange(status) {
+				//console.log(status);
+			},
+			clickImg(img) {
+				//console.log(img);
+			},
+			getData() {
+				let index = 0;
+				this.status = 'loading';
+				setTimeout(() => {
+					for(let i = 0; i < 10; i++) {
+						index = this.$u.random(0, this.data.length - 1);
+						this.list.push({
+							src: this.data[index].src
+						})
+					}
+					this.status = 'loadmore';
+				}, 1500);
+			}
+		},
+	} 
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 30rpx;
+		display: block;
+		
+	}
+	
+	.item-warp {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+	
+	.item-warp .item {
+		flex: 0 0 335rpx;
+		height: 400rpx;
+		margin-bottom: 20rpx;
+		border-radius: 10rpx;
+		overflow: hidden;
+	}
+</style>

pages/componentsA/modal/index.vue

@@ -0,0 +1,91 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<view class="u-no-demo-here">请点击弹出弹窗查看效果</view>
+				<u-modal ref="uModal" v-model="show" :show-cancel-button="true" 
+					:show-title="showTitle" :async-close="asyncClose"
+					@confirm="confirm" :content="content"
+				>
+					<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
+					<view class="warp" style="margin: 30rpx;" v-if="contentSlot">
+						<image class="logo" src="https://uviewui.com/common/logo.png" style="width: 220rpx;" mode="widthFix"></image>
+					</view>
+					<!-- #endif -->
+				</u-modal>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否显示标题</view>
+				<u-subsection current="0" :list="['是', '否']" @change="titleChange"></u-subsection>
+			</view>
+			<!-- #ifndef MP-WEIXIN -->
+			<view class="u-config-item">
+				<view class="u-item-title">自定义内容</view>
+				<u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
+			</view>
+			<!-- #endif -->
+			<view class="u-config-item">
+				<view class="u-item-title">异步关闭</view>
+				<u-subsection current="1" :list="['是', '否']" @change="asyncChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				zoom: false,
+				content: '慈母手中线，游子身上衣',
+				contentSlot: false,
+				showTitle: true,
+				asyncClose: false,
+			};
+		},
+		computed: {
+			current() {
+				return this.show ? 0 : 1;
+			}
+		},
+		methods: {
+			showChange(index) {
+				this.show = !index;
+			},
+			titleChange(index) {
+				this.showTitle = !index;
+				this.show = true;
+			},
+			contentChange(index) {
+				this.contentSlot = !index;
+				this.show = true;
+			},
+			asyncChange(index) {
+				this.show = true;
+				this.asyncClose = !index;
+			},
+			confirm() {
+				setTimeout(() => {
+					this.show = false;
+				}, 2000)
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	.logo {
+		height: auto;
+		will-change: transform;
+	}
+</style>

pages/componentsA/navbar/index.vue

@@ -0,0 +1,258 @@
+<template>
+	<view class="">
+		<u-navbar title-color="#fff" back-icon-color="#ffffff" 
+			:is-fixed="isFixed" :is-back="isBack" 
+			:background="background" 
+			:back-text-style="{color: '#fff'}" :title="title" 
+			:back-icon-name="backIconName" :back-text="backText"
+		>
+			<view class="slot-wrap" v-if="useSlot">
+				<view class="search-wrap" v-if="search">
+					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
+					<u-search v-model="keyword" :show-action="showAction" height="56" :action-style="{color: '#fff'}"></u-search>
+				</view>
+				<view class="navbar-right" v-if="rightSlot">
+					<view class="message-box right-item">
+						<u-icon name="chat" size="38"></u-icon>
+						<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
+					</view>
+					<view class="dot-box right-item">
+						<u-icon name="calendar-fill" size="38"></u-icon>
+						<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
+					</view>
+				</view>
+				<view class="map-wrap" v-if="custom">
+					<u-icon name="map" color="#ffffff" size="24"></u-icon>
+					<text class="map-wrap-text">轻舟已过万重山</text>
+					<u-icon name="arrow-down-fill" color="#ffffff" size="22"></u-icon>
+				</view>
+			</view>
+			<view class="navbar-right" slot="right" v-if="slotRight">
+				<view class="message-box right-item">
+					<u-icon name="chat" size="38"></u-icon>
+					<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
+				</view>
+				<view class="dot-box right-item">
+					<u-icon name="calendar-fill" size="38"></u-icon>
+					<u-badge size="mini" :is-dot="true" :offset="[-6, -6]"></u-badge>
+				</view>
+			</view>
+		</u-navbar>
+		<view class="u-demo">
+			<view class="u-demo-wrap">
+				<view class="u-demo-title">演示效果</view>
+				<view class="u-demo-area">
+					<u-toast ref="uToast"></u-toast>
+					<view class="u-no-demo-here">查看顶部导航栏效果</view>
+				</view> 
+			</view>
+			<view class="u-config-wrap">
+				<view class="u-config-title u-border-bottom">
+					参数配置
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">标题长度</view>
+					<u-subsection :list="['短', '中', '长']" @change="titleChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">隐藏左侧返回区域</view>
+					<u-subsection current="1" :list="['是', '否']" @change="backChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">自定义左侧内容</view>
+					<u-subsection current="1" :list="['是', '否']" @change="leftChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">自定义右侧内容</view>
+					<u-subsection :current="slotRightCurrent" :list="['是', '否']" @change="rightChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">传入整体slot</view>
+					<u-subsection :list="['无', '搜索框', '搜索+按钮', '搜索+图标']" @change="searchChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">完全自定义传入内容</view>
+					<u-subsection current="1" :list="['是', '否']" @change="customChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">背景色</view>
+					<u-subsection :list="['渐变', '#39CCCC', '#B471CC', '#001f3f']" @change="bgColorChange"></u-subsection>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '新闻',
+				backText: '返回',
+				backIconName: 'nav-back',
+				right: false,
+				showAction: false,
+				rightSlot: false,
+				useSlot: false,
+				background: {
+					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
+				},
+				isBack: true,
+				search: false,
+				custom: false,
+				isFixed: true,
+				keyword: '',
+				// #ifdef MP
+				slotRight: false,
+				// #endif
+				// #ifndef MP
+				slotRight: true
+				// #endif
+			}
+		},
+		computed: {
+			slotRightCurrent() {
+				return this.slotRight ? 0 : 1;
+			}
+		},
+		methods: {
+			titleChange(index) {
+				this.useSlot = false;
+				this.title = index == 0 ? '新闻' : index == 1 ? '新闻列表' : '雨打梨花深闭门，忘了青春，误了青春';
+			},
+			leftChange(index) {
+				if(index == 0) {
+					this.backText = '';
+					this.backIconName = 'arrow-leftward';
+				} else {
+					this.backText = '返回';
+					this.backIconName = 'arrow-left';
+				}
+			},
+			searchChange(index) {
+				this.title = null;
+				this.useSlot = true;
+				this.search = false;
+				this.custom = false;
+				if(index == 0) {
+					this.title = '新闻';
+					this.useSlot = false;
+					this.rightSlot = false;
+				} else if(index == 1) {
+					this.showAction = false;
+					this.useSlot = true;
+					this.rightSlot = false;
+					this.search = true;
+					this.slotRight = false;
+				} else if(index == 2) {
+					this.useSlot = true;
+					this.showAction = true;
+					this.rightSlot = false;
+					this.search = true;
+					this.slotRight = false;
+				} else {
+					this.useSlot = true;
+					this.search = true;
+					this.showAction = false;
+					this.rightSlot = true;
+					this.slotRight = false;
+				}
+			},
+			backChange(index) {
+				this.isBack = !!index;
+			},
+			bgColorChange(index) {
+				this.background = {};
+				if(index == 0) {
+					this.background = {
+						'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
+					}
+				} else {
+					let color = index == 1 ? '#39CCCC' : index == 2 ? '#B471CC' : '#001f3f';
+					this.background = {
+						background: color
+					}
+				}
+				
+			},
+			rightChange(index) {
+				if(index == 0) {
+					this.slotRight = true;
+					this.useSlot = false;
+				} else {
+					this.slotRight = false;
+				}
+			},
+			customChange(index) {
+				this.search = false;
+				this.rightSlot = false;
+				if(index == 0) {
+					this.custom = true;
+					this.title = null;
+					this.isBack = false;
+					this.useSlot = true;
+				} else {
+					this.useSlot = false;
+					this.title = '新闻';
+					this.isBack = true;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {
+		//height: 200vh;
+		height: calc(100% - 44px);
+		height: calc(100% - 44px - constant(safe-area-inset-top));
+		height: calc(100% - 44px - env(safe-area-inset-top));
+	}
+	
+	.wrap {
+		padding: 24rpx;
+	}
+	
+	.navbar-right {
+		margin-right: 24rpx;
+		display: flex;
+	}
+	
+	.search-wrap {
+		margin: 0 20rpx;
+		flex: 1;
+	}
+	
+	.right-item {
+		margin: 0 12rpx;
+		position: relative;
+		color: #ffffff;
+		display: flex;
+	}
+	
+	.message-box {
+		
+	}
+	
+	.slot-wrap {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+	
+	.map-wrap {
+		display: flex;
+		align-items: center;
+		padding: 4px 6px;
+		background-color: rgba(240,240, 240, 0.35);
+		color: #fff;
+		font-size: 22rpx;
+		border-radius: 100rpx;
+		margin-left: 30rpx;
+	}
+	
+	.map-wrap-text {
+		padding: 0 6rpx;
+	}
+</style>
+

pages/componentsA/parse/index.vue

@@ -0,0 +1,70 @@
+<template>
+	<view class="u-content">
+		<u-parse :html="detail.content"></u-parse>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				detail: {
+					content: `
+						<div class="content_area" id="content_area" style="display: block;">
+						                    
+						                        <!--repaste.body.begin--><p>　　巴尼小镇是云南省怒江傈僳族自治州首个易地扶贫搬迁集中安置点。从山上的金满村搬迁到巴尼小镇，近3年的时间里，搬迁户们的生活发生了可喜的变化。</p>
+						<p class="photo_img_20190808" style="text-align: center;"><img src="//p2.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613380766481.jpg" alt="泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）" isflag="1"></p>
+						<p class="photo_alt_20190808" style="text-align: center;"><em></em>泸水市巴尼小镇易地扶贫搬迁安置点全景 李韩金摄（人民视觉）</p>
+						<p>　　搬出四面透风、容易漏雨的“千脚落地房”，住进如今宽敞明亮的楼房，当地居民的生活不断改善。另一边，留在山上的村民在企业帮助下改种经济林果，家庭收入节节攀升。</p>
+						<p class="photo_img_20190808" style="text-align: center;"><img src="//p3.img.cctvpic.com/photoworkspace/contentimg/2020/07/16/2020071613382671669.jpg" alt="金满村搬迁户在巴尼小镇的扶贫车间里上班 余秀英摄（人民视觉）" isflag="1"></p>
+						<p class="photo_alt_20190808" style="text-align: center;"><em></em>金满村搬迁户在巴尼小镇的扶贫车间里上班 余秀英摄（人民视觉）</p>
+						<p>　　这阵子，52岁的米四东心里老惦记个事：吃两碗包谷稀饭。包谷稀饭是把包谷和蚕豆混在一起，有时加点腊肉，搁在三脚架上，生火煮制而成。在高黎贡山上，包谷稀饭曾是金满村人的主食，大多数人连个菜都不舍得炒，就配一碗蘸水吃。从山上搬下来快3年了，米四东说：“在山上盼着吃大米饭，如今天天吃米饭，又想念包谷稀饭了。”</p>
+						<p>　　米四东的家在巴尼小镇，地处云南省怒江傈僳族自治州泸水市洛本卓白族乡，紧邻着怒江。这里是怒江州首个易地扶贫搬迁集中安置点，2017年国庆节，金满村首批40户村民入住，2018年最后11户村民入住新居。如今已有搬迁户168户744人，都属于白族支系勒墨人。</p>
+						<p>　　3年时间，这里的人和生活发生了哪些变化？这个夏天，记者走进了巴尼小镇。</p>
+						<p>　　曾经——</p>
+						<p>　　8公里的距离，20年的差距</p>
+						<p>　　村民叁益光的家里干净亮堂，客厅的墙上，挂着一家三口在老房子前的合影。由于山地太陡，找不到平地打地基，老房子都是篱笆为墙、木板为顶、木头为柱的“千脚落地房”的样子。四面透风的房子里面黑黢黢的，下面养牲畜，中间住人，上面放粮食。“一入雨季，屋里就怕漏雨，潮乎乎有虱子”。2017年搬迁前，金满村九成村民就住在这种房子里。</p>
+						<p>　　从巴尼小镇往背后的高黎贡山深处走，沿着一条水泥路走上8公里，就回到了金满村村委会。金满村11个村民小组，其中5个不通公路、1个是地质灾害隐患点，这6个组如今已整体搬迁。“最远的马社王底小组有16户人家，到村委会要过悬崖、涉小河、爬陡坡，走上三四个小时。”说起过往，村委会主任沈光干嘘唏不已。</p>
+						<p>　　站在村委会的院子里，只见大山围绕、白云悠悠，山外面还是山。2014年底，金满村人均收入仅有1400多元，全村1310人有建档立卡贫困户1250人。沈光干说：“在山上，一年到头辛辛苦苦，还是穷成这个样！”</p>
+						<p>　　听老人们说起以前的生活，就像听“穿越故事”一样：去邻近的县背洋芋回来种，前后得一星期，头疼脑热不舍得花钱去卫生院……“过去从金满村到巴尼小镇的8公里距离，也是发展相差20年的距离。”巴尼小镇社区副主任和碧武介绍，群众刚搬出大山时，不会用电器，连起床叠被子的习惯都没有。</p>
+						<p>　　不过，在宽敞明亮的楼房里住上一段时间，大家都知道了现代生活的好处。乡中心完小五年级的学生花燕梅一家去年搬到小镇上，每天早上走几分钟就能到学校。“搬下来好，在这里衣服不容易脏，老师也讲得好！”孩子的话，总是简单明了。</p>
+						<p>　　如今，按照“一户一宅基地”的政策，米四东在山上的老房子拆了，一家人踏踏实实住在了小镇上。米四东感慨：“还是在山下容易赚钱。”</p>
+						<p>　　山下——</p>
+						<p>　　干活更方便，管理更规范</p>
+						<p>　　在巴尼小镇，最常见的交通工具就是摩托车，还有不少人家门口停着机动三轮车、小货车和轿车。米四东说，有了钱，大家都愿意买辆摩托车，“干活方便了许多。”</p>
+						<p>　　记者了解到，巴尼小镇目前外出务工118户282人，以本地打零工为主。在小镇上，就有家扶贫车间生产民族服装，平时有20多个女工。车间的管理人员告诉记者，一个熟练女工一个月挣三四千元没问题。</p>
+						<p>　　赚得多了，还要看花得多不多，对于搬出大山的人来说，上楼后的生活成本增加了多少？</p>
+						<p>　　米四东算了算账：小镇的水费一户每年20元，电费也不贵，过日子主要就是买些吃的。“这个就丰俭由己了，青菜要买，土豆南瓜山上就有。”</p>
+						<p>　　和碧武介绍，随着巴尼小镇社区建设越来越规范，一些以前“难以想象”的方法都有了实打实的用处。“比如我们这里实行积分制管理，积极参加升国旗仪式、搞好卫生都有加分，居民可以到超市用积分兑换商品。”社区超市经营者玉花梅说，去年超市里兑换了2万多元的积分。</p>
+						<p>　　当然，搬下来的时间并不长，对大部分人来说还是处在适应阶段。在和碧武看来，村子里的人与外界的交流还是偏少，视野和观念转变得还不够快。</p>
+						<p>　　米四东就有这种体会。洛本卓白族乡是“中国民间文化艺术之乡”，金满村被列入“云南省第四批旅游特色村”。作为州级非物质文化遗产传人，米四东如今在巴尼小镇教授勒墨人的传统歌舞。“等哪天怒江大峡谷的旅游火起来了，这门技艺一定会是旅游的‘招牌’产品。”米四东心里寻思着。</p>
+						<p>　　山上——</p>
+						<p>　　既抓“生态账”，又算“经济账”</p>
+						<p>　　一边是米四东感慨“山下容易赚钱”，另一边却是仍然留在山上的5个村民小组80户人家，如今的8公里，还有20年的发展差距吗？</p>
+						<p>　　“‘两不愁三保障’早就实现了，现在村里的生活跟过去相比简直是天壤之别。眼下村里惦记的，是怎样既抓‘生态账’，又算‘经济账’。”洛本卓乡宣传委员麻继成兼任金满村党总支书记，搬迁启动前就驻村工作，到现在还扎在村里忙活调整种养殖业结构。</p>
+						<p>　　靠山吃山，金满村过去是在四五十度的山坡地上开荒种包谷，如今要进行山体生态修复，除了改种经济林果，别无他法。</p>
+						<p>　　麻继成说，乡里组织搬迁群众将原住地的土地林地出租、流转或退耕还林，采取“合作社+村党总支+农户+基地”模式，种植花椒、核桃、草果、香橼等经济作物。现在，1000多亩花椒、1000多亩核桃、600多亩草果和300多亩香橼已经成了山上的“绿色银行”。“村里今年准备再发展250亩香橼，香橼两年就能挂果，收益前景非常可观。”</p>
+						<p>　　农产品“升了级”，收入也“开了源”。麻继成说，农民在企业承包的果园里务工，每天的工资有100元，如今每天都有二三十人在果园里干活。</p>
+						<p>　　“搬出去有盼头，留下来有干劲。”如今，乡里还在加紧研究制定金满村乡村旅游规划。“等客栈、农家乐、步行街都建好了，幸福一定来敲门。”洛本卓乡党委书记郝春荣说，巩固脱贫成果、走向乡村振兴，“好日子还在后头”。</p><!--repaste.body.end-->
+						                    
+						                </div>
+					`
+				}
+			}
+		},
+		onLoad() {
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-content {
+		padding: 24rpx;
+		font-size: 32rpx;
+		color: $u-content-color;
+		line-height: 1.6;
+	}
+</style>

pages/componentsA/select/index.vue

@@ -0,0 +1,211 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-select @click="show = true" :default-value="defaultValue" :mode="mode" v-model="show" :list="list" @confirm="confirm" @cancel="cancel"></u-select>
+				<view class="u-demo-result-line">select值：{{ result }}</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="current" :list="['打开', '收起']" @change="statusChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式</view>
+				<u-subsection :list="['单列', '多列独立', '多列联动']" @change="modeChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			show: false,
+			result: '尚未选择',
+			defaultValue: [3],
+			mode: 'single-column', // single-column, mutil-column, mutil-column-auto
+			list: [],
+			list1: [
+				{
+					value: '江',
+					label: '江'
+				},
+				{
+					value: '湖',
+					label: '湖'
+				},
+				{
+					value: '夜',
+					label: '夜'
+				},
+				{
+					value: '雨',
+					label: '雨'
+				},
+				{
+					value: '十',
+					label: '十'
+				},
+				{
+					value: '年',
+					label: '年'
+				},
+				{
+					value: '灯',
+					label: '灯'
+				}
+			],
+			list2: [
+				[
+					{
+						value: '昔',
+						label: '昔'
+					},
+					{
+						value: '去',
+						label: '去'
+					},
+					{
+						value: '雪',
+						label: '雪'
+					},
+					{
+						value: '如',
+						label: '如'
+					},
+					{
+						value: '花',
+						label: '花'
+					}
+				],
+				[
+					{
+						value: '今',
+						label: '今'
+					},
+					{
+						value: '来',
+						label: '来'
+					},
+					{
+						value: '花',
+						label: '花'
+					},
+					{
+						value: '似',
+						label: '似'
+					},
+					{
+						value: '雪',
+						label: '雪'
+					}
+				]
+			],
+			list3: [
+				{
+					label: '中国',
+					value: '1',
+					children: [
+						{
+							label: '广西',
+							value: '2',
+							children: [
+								{
+									label: '南宁',
+									value: '3'
+								},
+								{
+									label: '梧州',
+									value: '3'
+								},
+								{
+									label: '柳州',
+									value: '3'
+								}
+							]
+						},
+						{
+							label: '广东',
+							value: '2',
+							children: [
+								{
+									label: '深圳',
+									value: '3'
+								},
+								{
+									label: '惠州',
+									value: '3'
+								},
+								{
+									label: '清远',
+									value: '3'
+								}
+							]
+						}
+					]
+				},
+				{
+					label: '美国',
+					value: '1',
+					children: [
+						{
+							label: '纽约',
+							value: '2',
+							children: [
+								{
+									label: '皇后街道',
+									value: '3'
+								}
+							]
+						}
+					]
+				}
+			]
+		};
+	},
+	onLoad() {
+		this.list = this.list1;
+	},
+	computed: {
+		current() {
+			return this.show ? 0 : 1;
+		}
+	},
+	methods: {
+		statusChange(index) {
+			this.show = !index;
+		},
+		modeChange(index) {
+			let type = ['single-column', 'mutil-column', 'mutil-column-auto'];
+			this.mode = type[index];
+			this.list = index == 0 ? this.list1 : index == 1 ? this.list2 : this.list3;
+			this.show = true;
+		},
+		confirm(e) {
+			this.result = '';
+			e.map((val, index) => {
+				this.result += this.result == '' ? val.label : '-' + val.label;
+			})
+		},
+		cancel(e) {
+			console.log(e);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.badge-button {
+	padding: 4rpx 6rpx;
+	background-color: $u-type-error;
+	color: #fff;
+	border-radius: 10rpx;
+	font-size: 22rpx;
+	line-height: 1;
+}
+</style>

pages/componentsA/slider/index.vue

@@ -0,0 +1,127 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-slider :step="step" :height="height" :block-width="blockWidth" 
+					:active-color="activeColor" :value="30" 
+					:use-slot="useSlot" v-model="value"
+					:min="min" :max="max" 
+					@end="end"
+					@moving="moving"
+				>
+					<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
+					<view class="" v-if="useSlot">
+						<view class="badge-button">
+							{{value}}
+						</view>
+					</view>
+					<!-- #endif -->
+				</u-slider>
+				<view class="u-demo-result-line">
+					滑块值：{{value}}
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义颜色</view>
+				<u-subsection :list="['primary', 'warning', 'error', 'success']" @change="typeChange"></u-subsection>
+			</view>
+			<!-- #ifndef MP-WEIXIN -->
+			<view class="u-config-item">
+				<view class="u-item-title">自定义传入内容</view>
+				<u-subsection current="1" :list="['是', '否']" @change="slotChange"></u-subsection>
+			</view>
+			<!-- #endif -->
+			<view class="u-config-item">
+				<view class="u-item-title">自定义尺寸</view>
+				<u-subsection current="1" :list="['是', '否']" @change="sizeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">步进值</view>
+				<u-subsection :list="['1', '10', '20']" @change="stepChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">最大最小值</view>
+				<u-subsection :list="['0-100', '40-80']" @change="minMaxchange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: 30,
+				useSlot: false,
+				setp: 1,
+				activeColor: '#2979ff',
+				height: 6,
+				blockWidth: 30,
+				step: 1,
+				min: 0,
+				max: 100
+			};
+		},
+		onLoad() {
+			
+		},
+		computed: {
+			current() {
+				return this.show ? 0 : 1;
+			}
+		},
+		methods: {
+			typeChange(index) {
+				let type = ['primary', 'warning', 'error', 'success'];
+				this.activeColor = this.$u.color[type[index]];
+			},
+			sizeChange(index) {
+				if(index == 0) {
+					this.height = 4;
+					this.blockWidth = 30;
+				} else {
+					this.height = 6;
+					this.blockWidth = 20;
+				}
+			},
+			stepChange(index) {
+				let arr = ['1', '10', '20'];
+				this.step = arr[index];
+			},
+			slotChange(index) {
+				this.useSlot = !index;
+			},
+			minMaxchange(index) {
+				if(index == 0) {
+					this.min = 0;
+					this.max = 100;
+				} else {
+					this.min = 40;
+					this.max = 80;
+				}
+			},
+			end() {
+				// console.log('end');
+			},
+			moving() {
+				// console.log('moving');
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	.badge-button {
+		padding: 4rpx 6rpx;
+		background-color: $u-type-error;
+		color: #fff;
+		border-radius: 10rpx;
+		font-size: 22rpx;
+		line-height: 1;
+	}
+</style>

pages/componentsA/tabs/index.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list"
+				@change="change" :current="current" :is-scroll="isScroll" :offset="offset"></u-tabs>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择</view>
+				<u-subsection :current="sectionCurrent" :list="['滚动', '非滚动']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">标签个数(非滚动模式)</view>
+				<u-subsection :list="['2', '3',  '4']" @change="countChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">活动选项字颜色</view>
+				<u-subsection mode="button" :list="['primary', 'success', 'error', 'warning']" @change="colorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">字体加粗</view>
+				<u-subsection mode="button" :list="['是', '否']" @change="boldChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [],
+				data: [{
+					name: '关注',
+					count: 100
+				}, {
+					name:  '推荐',
+					count: 7
+				}, {
+					name: '电影'
+				},{
+					name: '电视剧'
+				},{
+					name: '小视频'
+				}, {
+					name:  '游戏'
+				}, {
+					name: '校园'
+				},{
+					name: '影视'
+				},{
+					name: '音乐'
+				}],
+				current: 0,
+				sectionCurrent: 0,
+				isScroll: true,
+				tabCountIndex: 0,
+				activeColor: this.$u.color['primary'],
+				bold: true,
+				control: true,
+				offset: [5, -5]
+			}
+		},
+		onLoad() {
+			this.list = this.data;
+		},
+		methods: {
+			countChange(index) {
+				this.sectionCurrent = 1;
+				if(index == 0) {
+					this.list = [];
+					this.list.push(this.data[0]);
+					this.list.push(this.data[1]);
+					this.offset = [5, 60]
+				} else if(index == 1) {
+					this.list = [];
+					this.list.push(this.data[0]);
+					this.list.push(this.data[1]);
+					this.list.push(this.data[2]);
+					this.offset = [5, 20]
+				} else {
+					this.list = [];
+					this.list.push(this.data[0]);
+					this.list.push(this.data[1]);
+					this.list.push(this.data[2]);
+					this.list.push(this.data[3]);
+					this.offset = [5, 5]
+				}
+				this.tabCountIndex = index;
+				this.isScroll = false;
+			},
+			change(index) {
+				this.current = index;
+			},
+			modeChange(index) {
+				this.control = false;
+				this.current = 0;
+				if(index == 0) {
+					this.isScroll = true;
+					this.list = this.data;
+					this.offset = [5, -5]
+				} else {
+					this.isScroll = false;
+					this.countChange(this.tabCountIndex);
+				}
+				this.$nextTick(() => {
+					this.control = true;
+				})
+			},
+			colorChange(e) {
+				let color = 'primary';
+				switch(e) {
+					case 0:
+						color = 'primary';break;
+					case 1:
+						color = 'success';break;
+					case 2:
+						color = 'error';break;
+					case 3:
+						color = 'warning';break;
+				}
+				this.activeColor = this.$u.color[color];
+			},
+			boldChange(e) {
+				switch(e) {
+					case 0:
+						this.bold = true;break;
+					case 1:
+						this.bold = false;break;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-config-wrap {
+
+	}
+</style>

pages/componentsA/tag/index.vue

@@ -0,0 +1,91 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-tag :text="text" :type="type" :shape="shape" :closeable="closeable" :mode="mode" @close="close" @click="click" :show="show" :size="size" />
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择</view>
+				<u-subsection :list="['light', 'dark', 'plain']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示内容</view>
+				<u-subsection :list="['蒹葭苍苍', '白露为霜', '在水一方']" @change="textChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主题选择</view>
+				<u-subsection current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">形状</view>
+				<u-subsection :list="['square', 'circle', 'circleLeft', 'circleRight']" @change="shapeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">尺寸</view>
+				<u-subsection :list="['default', 'mini']" @change="sizeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">关闭图标</view>
+				<u-subsection :list="['是', '否']" @change="closeableChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			text: '蒹葭苍苍',
+			mode: 'light',
+			type: 'error',
+			size: 'default',
+			shape: 'square',
+			closeable: true,
+			show: true
+		};
+	},
+	methods: {
+		modeChange(index) {
+			this.mode = index == 0 ? 'light' : index == 1 ? 'dark' : 'plain';
+		},
+		textChange(index) {
+			this.text = index == 0 ? '蒹葭苍苍' : index == 1 ? '白露为霜' : '在水一方';
+		},
+		typeChange(index) {
+			this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
+		},
+		shapeChange(index) {
+			this.shape = index == 0 ? 'square' : index == 1 ? 'circle' : index == 2 ? 'circleLeft' : 'circleRight';
+		},
+		sizeChange(index) {
+			this.size = index == 0 ? 'default' : 'mini';
+		},
+		closeableChange(index) {
+			this.closeable = index == 0 ? true : false;
+		},
+		click(index) {
+			this.$refs.uToast.show({
+				title: `第${index + 1}个标签被点击`,
+				type: 'success'
+			});
+		},
+		close(index) {
+			this.$refs.uToast.show({
+				title: `关闭图标被点击`,
+				type: 'success'
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.u-demo {
+}
+</style>

pages/componentsA/test/index.vue

@@ -0,0 +1,90 @@
+<template>
+    <u-form
+        :model="form"
+        ref="uForm"
+    >
+        <u-form-item label="姓名">
+            <u-input v-model="form.name" />
+        </u-form-item>
+        <u-form-item label="简介">
+            <u-input v-model="form.intro" />
+        </u-form-item>
+        <u-form-item label="性别">
+            <u-input
+                v-model="form.sex"
+                type="select"
+            />
+        </u-form-item>
+        <u-form-item label="水果">
+            <u-checkbox-group>
+                <u-checkbox
+                    v-model="item.checked"
+                    v-for="(item, index) in checkboxList"
+                    :key="index"
+                    :name="item.name"
+                >
+                    {{ item.name }}
+                </u-checkbox>
+            </u-checkbox-group>
+        </u-form-item>
+        <u-form-item label="味道">
+            <u-radio-group v-model="radio">
+                <u-radio
+                    v-for="(item, index) in radioList"
+                    :key="index"
+                    :name="item.name"
+                    :disabled="item.disabled"
+                >
+                    {{ item.name }}
+                </u-radio>
+            </u-radio-group>
+        </u-form-item>
+        <u-form-item label="开关">
+            <u-switch
+                slot="right"
+                v-model="switchVal"
+            ></u-switch>
+        </u-form-item>
+    </u-form>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                form: {
+                    name: '',
+                    intro: '',
+                    sex: ''
+                },
+                checkboxList: [{
+                        name: '苹果',
+                        checked: false,
+                        disabled: false
+                    },
+                    {
+                        name: '雪梨',
+                        checked: false,
+                        disabled: false
+                    },
+                    {
+                        name: '柠檬',
+                        checked: false,
+                        disabled: false
+                    }
+                ],
+                radioList: [{
+                        name: '鲜甜',
+                        disabled: false
+                    },
+                    {
+                        name: '麻辣',
+                        disabled: false
+                    }
+                ],
+                radio: '',
+                switchVal: false
+            };
+        }
+    };
+</script>

pages/componentsA/timeLine/index.vue

@@ -0,0 +1,144 @@
+<template>
+	<view class="wrap">
+		<u-time-line>
+			<u-time-line-item nodeTop="2">
+				<template v-slot:node>
+					<view class="u-node" style="background: #19be6b;">
+						<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
+					</view>
+				</template>
+				<template v-slot:content>
+					<view>
+						<view class="u-order-title">待取件</view>
+						<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
+						<view class="u-order-time">2019-05-08 12:12</view>
+					</view>
+				</template>
+			</u-time-line-item>
+			<u-time-line-item nodeTop="2">
+				<template v-slot:node>
+					<view class="u-node">
+						<u-icon name="account-fill" color="#fff" :size="24"></u-icon>
+					</view>
+				</template>
+				<template v-slot:content>
+					<view>
+						<view class="u-order-title unacive">派送中</view>
+						<view class="u-order-desc">【深圳市】快件已到达目的地，派件员为国产锦衣卫007号，电话：<text class="tel">13833882438</text>，请留意快递信息</view>
+						<view class="u-order-time">2019-05-08 06:03</view>
+					</view>
+				</template>
+			</u-time-line-item>
+			<u-time-line-item nodeTop="2">
+				<template v-slot:node>
+					<view class="u-node">
+						<u-icon name="car-fill" color="#fff" :size="24"></u-icon>
+					</view>
+				</template>
+				<template v-slot:content>
+					<view>
+						<view class="u-order-title unacive">运输中</view>
+						<view class="u-order-desc">【深圳市】快递已到达 深圳固戍一部</view>
+						<view class="u-order-time">2019-05-07 08:05</view>
+					</view>
+				</template>
+			</u-time-line-item>
+			<u-time-line-item>
+				<template v-slot:content>
+					<view>
+						<view class="u-order-desc">【深圳市】快件已从深圳运转中心发出，正在发往深圳宝安一部</view>
+						<view class="u-order-time">2019-12-06 22:30</view>
+					</view>
+				</template>
+			</u-time-line-item>
+			<u-time-line-item>
+				<template v-slot:content>
+					<view>
+						<view class="u-order-desc">【深圳市】快件已到达 深圳运转中心</view>
+						<view class="u-order-time">2019-12-04 16:42</view>
+					</view>
+				</template>
+			</u-time-line-item>
+			<u-time-line-item>
+				<template v-slot:content>
+					<view>
+						<view class="u-order-desc">【郑州市】快件已从郑州运转中心出发，正在发往深圳运转中心</view>
+						<view class="u-order-time">2019-12-02 12:55</view>
+					</view>
+				</template>
+			</u-time-line-item>
+			<u-time-line-item>
+				<template v-slot:content>
+					<view>
+						<view class="u-order-desc">【郑州市】快件已到达 郑州运转中心</view>
+						<view class="u-order-time">2019-12-02 08:23</view>
+					</view>
+				</template>
+			</u-time-line-item>
+			<u-time-line-item nodeTop="0">
+				<template v-slot:node>
+					<view class="u-node">
+						<u-icon name="file-text-fill" color="#fff" :size="24"></u-icon>
+					</view>
+				</template>
+				<template v-slot:content>
+					<view>
+						<view class="u-order-desc">您购买的商品【尚方宝剑，先斩后奏】，经由北京军区仓库发货，国内快递承运人【中南海保镖】。</view>
+						<view class="u-order-time">2019-12-01 07:00</view>
+					</view>
+				</template>
+			</u-time-line-item>
+		</u-time-line>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx 24rpx 24rpx 40rpx;
+	}
+	
+	.u-node {
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 100rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: #d0d0d0;
+	}
+	
+	.u-order-title {
+		color: #333333;
+		font-weight: bold;
+		font-size: 32rpx;
+	}
+	
+	.u-order-title.unacive {
+		color: rgb(150, 150, 150);
+	}
+	
+	.u-order-desc {
+		color: rgb(150, 150, 150);
+		font-size: 28rpx;
+		margin-bottom: 6rpx;
+	}
+	
+	.u-order-time {
+		color: rgb(200, 200, 200);
+		font-size: 26rpx;
+	}
+	
+	.tel {
+		color: $u-type-primary;
+	}
+</style>

pages/componentsA/toast/index.vue

@@ -0,0 +1,83 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast :type="type" ref="uToast"></u-toast>
+				<text class="no-mode-here">见弹出toast</text>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主题</view>
+				<u-subsection :current="4" :list="['primary', 'success', 'error', 'warning', 'default']" @change="typeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">结束后自动跳转</view>
+				<u-subsection current="1" :list="['是', '否']" @change="urlChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">位置</view>
+				<u-subsection current="1" :list="['顶部', '中部', '底部']" @change="positionChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示图标</view>
+				<u-subsection :list="['是', '否']" @change="iconChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				type: 'success',
+				title: '桃花潭水深千尺',
+				icon: true,
+				position: 'center',
+				url: '',
+			}
+		},
+		methods: {
+			typeChange(index) {
+				this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning'  : 'default';
+				this.show();
+			},
+			positionChange(index) {
+				this.position = index == 0 ? 'top' : index == 1 ? 'center' : 'bottom';
+				this.show();
+			},
+			iconChange(index) {
+				this.icon = index == 0 ? true : false;
+				this.show();
+			},
+			urlChange(index) {
+				this.url = index == 0 ? '/pages/components/button/index' : '';
+				this.show();
+			},
+			show() {
+				this.$refs.uToast.show({
+					title: this.title,
+					position: this.position,
+					type: this.type,
+					icon: this.icon,
+					url: this.url,
+				});
+			},
+			hide() {
+				this.$refs.uToast.hide();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.no-mode-here {
+		color: $u-tips-color;
+		font-size: 28rpx;
+	}
+</style>

pages/componentsA/topTips/index.vue

@@ -0,0 +1,57 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-top-tips ref="uTips"></u-top-tips>
+				<text class="u-no-demo-here">点击参数配置查看效果</text>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主题选择</view>
+				<u-subsection :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示时间</view>
+				<u-subsection current="1" :list="['长', '正常', '短']" @change="durationChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				duration: 2000,
+				title: '忽如一夜春风来，千树万树梨花开',
+				type: 'primary'
+			}
+		},
+		methods: {
+			showTips() {
+				this.$refs.uTips.show({
+					duration: this.duration,
+					title: this.title,
+					type: this.type
+				});
+			},
+			typeChange(index) {
+				this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning'  : 'info';
+				this.showTips();
+			},
+			durationChange(index) {
+				this.duration = index == 0 ? 4000 : index == 1 ? 2000 : 500;
+				this.showTips();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsA/verificationCode/index.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode" 
+				@change="codeChange" :startText="startText" :changeText="changeText" 
+				:endText="endText"></u-verification-code>
+				<u-button @click="getCode">{{tips}}</u-button>
+				<u-button :custom-style="{marginTop: '30rpx'}" @tap="reset" style="margin-top: 30rpx;">重置</u-button>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">倒计时间</view>
+				<u-subsection :current="0" :list="['60s', '10s', '5s']" @change="secondsChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义提示语</view>
+				<u-subsection :current="1" :list="['是', '否']" @change="textChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tips: '',
+				seconds: 60,
+				refCode: null,
+				startText: '获取验证码',
+				changeText: 'X秒重新获取',
+				endText: '重新获取'
+			}
+		},
+		onReady() {
+			// 注意这里为错误示例，目前微信小程序最新稳定版开发工具如此
+			// 赋值会报错，很诡异，其他端无此问题
+			// this.refCode = this.$refs.uCode;
+		},
+		methods: {
+			codeChange(text) {
+				// console.log(text);
+				this.tips = text;
+			},
+			getCode() {
+				if(this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						this.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 2000);
+				} else {
+					this.$u.toast('倒计时结束后再发送');
+				}
+			},
+			secondsChange(index) {
+				this.seconds = index == 0 ? 60 : index == 1 ? 10 : 5;
+			},
+			textChange(index) {
+				if(index == 0) {
+					this.startText = '点一下获取',
+					this.changeText = '重新获取Xs',
+					this.endText = '再次获取'
+				} else {
+					this.startText = '获取验证码',
+					this.changeText = 'X秒重新获取',
+					this.endText = '重新获取'
+				}
+			},
+			end() {
+				this.$u.toast('倒计时结束');
+			},
+			start() {
+				this.$u.toast('倒计时开始');
+			},
+			reset() {
+				this.$refs.uCode.reset();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsB/card/index.vue

@@ -0,0 +1,106 @@
+<template>
+	<view class="">
+		<view class="u-card-wrap">
+			<u-card @click="click" @head-click="headClick" :title="title" :sub-title="subTitle" :thumb="thumb" :padding="padding" :border="border">
+				<view class="" slot="body"> 
+					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
+						<view class="u-body-item-title u-line-2">
+							瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半
+						</view>
+						<image src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg" mode="aspectFill"></image>
+					</view>
+					<view class="u-body-item u-flex u-row-between u-p-b-0">
+						<view class="u-body-item-title u-line-2">
+							釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放
+						</view>
+						<image src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg" mode="aspectFill"></image>
+					</view>
+				</view>
+				<view class="" slot="foot">
+					<u-icon v-if="bottomSlot" name="chat-fill" size="34" label="30评论"></u-icon>
+				</view>
+			</u-card>
+		</view>
+		<view class="u-config-wrap u-demo">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">左上角图标</view>
+				<u-subsection :list="['显示', '隐藏']" @change="thumbChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">内边距</view>
+				<u-subsection current="1" :list="['20', '30', '40']" @change="paddingChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">底部</view>
+				<u-subsection :list="['显示', '隐藏']" @change="bottomChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">外边框</view>
+				<u-subsection :list="['显示', '隐藏']" @change="borderChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '素胚勾勒出青花，笔锋浓转淡',
+				subTitle: '2020-05-15',
+				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
+				padding: 20,
+				bottomSlot: true,
+				border: true
+			}
+		},
+		methods: {
+			thumbChange(index) {
+				this.thumb = index == 0 ? 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg' : '';
+			},
+			paddingChange(index) {
+				this.padding = [20, 30, 40][index];
+			},
+			bottomChange(index) {
+				this.bottomSlot = !index;
+			},
+			borderChange(index) {
+				this.border = !index;
+			},
+			click(index) {
+				console.log(index);
+			},
+			headClick(index) {
+				console.log(index);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {
+		padding-top: 0;
+	}
+	
+	.u-card-wrap { 
+		background-color: $u-bg-color;
+		padding: 1px;
+	}
+	
+	.u-body-item {
+		font-size: 32rpx;
+		color: #333;
+		padding: 20rpx 10rpx;
+	}
+		
+	.u-body-item image {
+		width: 120rpx;
+		flex: 0 0 120rpx;
+		height: 120rpx;
+		border-radius: 8rpx;
+		margin-left: 12rpx;
+	}
+</style>

pages/componentsB/checkbox/index.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="">
+					<u-checkbox-group :size="size" :width="width" 
+						:wrap="wrap" :max="max" 
+						@change="checkboxGroupChange" 
+						:activeColor="activeColor"
+					>
+						<u-checkbox @change="checkboxChange"
+							v-model="item.checked" v-for="(item, index) in list" 
+							:key="index" :name="item.name"
+							:shape="shape"
+							:disabled="item.disabled"
+						>{{item.name}}</u-checkbox>
+					</u-checkbox-group>
+				</view>
+				<view class="u-demo-result-line">
+					{{result.length ? `选中了"${getResult}"` : '请选择'}}
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">形状</view>
+				<u-subsection :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">整体大小(单位rpx)</view>
+				<u-subsection current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">激活颜色</view>
+				<u-subsection :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">默认选中第一个</view>
+				<u-subsection current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">每个占一行</view>
+				<u-subsection current="1" :list="['是', '否']" @change="wrapChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">每个宽度50%</view>
+				<u-subsection current="1" :list="['是', '否']" @change="widthChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">最大选择数量</view>
+				<u-subsection current="2" :list="['1', '2', '3']" @change="maxChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">禁用第一个</view>
+				<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						name: '荔枝',
+						checked: false,
+						disabled: false
+					},
+					{
+						name: '香蕉',
+						checked: false,
+						disabled: false
+					},
+					{
+						name: '橙子',
+						checked: false,
+						disabled: false
+					},
+					{
+						name: '草莓',
+						checked: false,
+						disabled: false
+					}
+				],
+				disabled: false,
+				checked: true,
+				result: [],
+				shape: 'square',
+				max: 3,
+				activeColor: '#2979ff',
+				size: 34,
+				wrap: false,
+				width: 'auto'
+			}
+		},
+		computed: {
+			getResult() {
+				return this.result.join(",");
+			}
+		},
+		methods: {
+			shapeChange(index) {
+				this.shape = index == 0 ? 'square' : 'circle';
+			},
+			sizeChange(index) {
+				this.size = index == 0 ? 30 : index == 1 ? 40 : 50;
+			},
+			defaultChooseChange(index) {
+				// 特别处理对第一个选的选中的情况，涉及到提示语，选中状态等
+				// 实际开发中不会存在这些情况，只是演示用
+				if(index == 0) {
+					this.list[0].checked = true;
+					this.result = [this.list[0].name];
+				} else {
+					this.list[0].checked = false;
+					this.result.splice(this.result.indexOf(this.list[0].name), 1);
+				}
+			},
+			maxChange(index) {
+				this.max = index + 1;
+			},
+			disabledChange(index) {
+				if(index == 0) {
+					this.list[0].disabled = true;
+				} else {
+					this.list[0].disabled = false;
+				}
+			},
+			activeColorChange(index) {
+				// 如果用户尚未勾选任何checkbox，切换颜色时，默认选中第一个让用户看到效果，因为勾选了才有效果
+				if(!this.result.length) this.list[0].checked = true;
+				let theme = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : index == 3 ? 'success' : 'info';
+				this.activeColor = this.$u.color[theme];
+			},
+			// 选中某个复选框时，由checkbox时触发
+			checkboxChange(e) {
+				// console.log(e);
+			},
+			// 选中任一checkbox时，由checkbox-group触发
+			checkboxGroupChange(e) {
+				this.result = e;
+			},
+			widthChange(index) {
+				this.width = index == 0 ? '50%' : '';
+			},
+			wrapChange(index) {
+				this.wrap = !index;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {}
+</style>

pages/componentsB/divider/index.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-divider :type="type" :borderColor="borderColor" :bg-color="bgColor" @click="click"
+				:half-width="halfWidth" :color="color" :font-size="fontSize">{{text}}</u-divider>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">提示内容</view>
+				<u-subsection :list="['没有更多了', '到底了']" @change="textChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">单边线宽</view>
+				<u-subsection current="1" :list="['50', '150', '250']" @change="halfWidthChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">横线颜色</view>
+				<u-subsection :list="['#dcdfe6', 'primary', 'error', 'warning', 'success']" @change="borderColorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">内容样式</view>
+				<u-subsection :list="['默认', '自定义']" @change="contentChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				text: '没有更多了',
+				bgColor: '#fafafa',
+				halfWidth: 150,
+				borderColor: '#dcdfe6',
+				type: 'primary',
+				color: '#909399',
+				fontSize: '26'
+			}
+		},
+		methods: {
+			textChange(index) {
+				this.text = index == 0 ? '没有更多了' : '到底了';
+			},
+			halfWidthChange(index) {
+				this.halfWidth = index == 0 ? 50 : index == 1 ? 150 : 250;
+			},
+			borderColorChange(index) {
+				if(index == 0) {
+					this.borderColor = '#dcdfe6';
+				} else {
+					// 因为border-color参数优先级高于type，要让type起作用，就需要设置border-color为空
+					this.borderColor = '';
+					this.type = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
+				}
+			},
+			contentChange(index) {
+				if(index == 0) {
+					 this.color = '#909399';
+					 this.fontSize = 26;
+				} else {
+					this.color = this.$u.color['primary'];
+					this.fontSize = 30;
+				}
+			},
+			click() {
+				console.log('click');
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {}
+</style>

pages/componentsB/dropdown/index.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="">
+		<view class="u-m-p-50">
+			<view class="u-demo-area u-flex u-row-center">
+				<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor" :borderBottom="borderBottom">
+					<u-dropdown-item @change="change" v-model="value1" title="距离" :options="options1"></u-dropdown-item>
+					<u-dropdown-item @change="change" v-model="value2" title="温度" :options="options2"></u-dropdown-item>
+					<u-dropdown-item title="属性">
+						<view class="slot-content">
+							<view class="item-box">
+								<view class="item" :class="[item.active ? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in list" :key="index">
+									{{item.label}}
+								</view>
+							</view>
+							<u-button type="primary" @click="closeDropdown">确定</u-button>
+						</view>
+					</u-dropdown-item>
+				</u-dropdown>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">下边框</view>
+				<u-subsection current="1" :list="['有', '无']" @change="borderChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">激活颜色</view>
+				<u-subsection :list="['#2979ff', '#ff9900', '#19be6b']" @change="activeColorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">遮罩是否可点击</view>
+				<u-subsection :list="['是', '否']" @change="maskChange"></u-subsection>
+			</view> 
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() { 
+			return {
+				value1: '',
+				value2: '2',
+				mask: true,
+				options1: [{
+						label: '默认排序',
+						value: 1,
+					},
+					{
+						label: '距离优先',
+						value: 2,
+					},
+					{
+						label: '价格优先',
+						value: 3,
+					}
+				],
+				options2: [{
+						label: '去冰',
+						value: 1,
+					},
+					{
+						label: '加冰',
+						value: 2,
+					},
+					{
+						label: '正常温',
+						value: 3,
+					},
+					{
+						label: '加热',
+						value: 4,
+					},
+					{
+						label: '极寒风暴',
+						value: 5,
+					}
+				],
+				list: [{
+						label: '琪花瑶草',
+						active: true,
+					},
+					{
+						label: '清词丽句',
+						active: false,
+					},
+					{
+						label: '宛转蛾眉',
+						active: false,
+					},
+					{
+						label: '煦色韶光',
+						active: false,
+					},
+					{
+						label: '鱼沉雁落',
+						active: false,
+					},
+					{
+						label: '章台杨柳',
+						active: false,
+					},
+					{
+						label: '霞光万道',
+						active: false,
+					}
+				],
+				borderBottom: false,
+				activeColor: '#2979ff'
+			}
+		},
+		methods: {
+			borderChange(index) {
+				this.borderBottom = !index;
+			},
+			activeColorChange(index) {
+				this.activeColor = ['#2979ff', '#ff9900', '#19be6b'][index];
+			},
+			change(index) {
+				this.$u.toast(`点击了第${index}项`);
+			},
+			closeDropdown() {
+				this.$refs.uDropdown.close();
+			},
+			tagClick(index) {
+				this.list[index].active = !this.list[index].active;
+			},
+			maskChange(index) {
+				this.mask = !index;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-config-wrap {
+		padding: 40rpx;
+	}
+	
+	.slot-content {
+		background-color: #FFFFFF;
+		padding: 24rpx;
+		
+		.item-box {
+			margin-bottom: 50rpx;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			
+			.item {
+				border: 1px solid $u-type-primary;
+				color: $u-type-primary;
+				padding: 8rpx 40rpx;
+				border-radius: 100rpx;
+				margin-top: 30rpx;
+			}
+			
+			.active {
+				color: #FFFFFF;
+				background-color: $u-type-primary;
+			}
+		}
+	}
+</style>

pages/componentsB/image/index.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area u-flex u-row-center">
+				<u-image :shape="shape" ref="uImage" :width="width" :height="height" :src="src" mode="aspectFill">
+					<u-loading size="44" mode="flower" slot="loading" v-if="loadingSlot"></u-loading>
+					<view v-if="errorSlot" slot="error" style="font-size: 24rpx;">加载失败</view>
+				</u-image>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="statusCurrent" :list="['加载成功', '加载中', '加载失败']" @change="statusChange"></u-subsection>
+			</view>
+			<!-- 微信小程序中，无法动态切换slot，所以隐藏此部分的演示 -->
+			<!-- #ifndef MP-WEIXIN -->
+			<view class="u-config-item">
+				<view class="u-item-title">加载中状态</view>
+				<u-subsection :list="['默认', '自定义']" @change="loadingChange"></u-subsection>
+			</view>
+			<!-- #endif -->
+			<view class="u-config-item">
+				<view class="u-item-title">加载失败状态</view>
+				<u-subsection :list="['默认', '自定义']" @change="errorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">形状</view>
+				<u-subsection :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			src: 'https://cdn.uviewui.com/uview/example/fade.jpg',
+			width: '200',
+			height: '200',
+			loadingSlot: false,
+			statusCurrent: 0,
+			errorSlot: false,
+			shape: 'square'
+		};
+	},
+	computed: {
+		// statusCurrent() {
+		// }
+	},
+	methods: {
+		statusChange(index) {
+			// 此处通过ref操作组件内部状态，仅是为了演示使用，实际中无需这些操作，由内部的图片加载事件自动完成
+			if (index == 0) {
+				this.src = 'http://img5.imgtn.bdimg.com/it/u=2438062088,2808868405&fm=26&gp=0.jpg';
+				this.$refs.uImage.loading = false;
+				this.$refs.uImage.isError = false;
+			} else if (index == 1) {
+				this.$refs.uImage.loading = true;
+			} else {
+				this.$refs.uImage.loading = false;
+				this.$refs.uImage.isError = true;
+			}
+		},
+		loadingChange(index) {
+			this.statusCurrent = 1;
+			this.statusChange(1);
+			if (index == 0) {
+				this.loadingSlot = false;
+			} else {
+				this.loadingSlot = true;
+			}
+		},
+		errorChange(index) {
+			this.statusCurrent = 2;
+			this.statusChange(2);
+			if (index == 0) {
+				this.errorSlot = false;
+			} else {
+				this.errorSlot = true;
+			}
+		},
+		shapeChange(index) {
+			this.shape = index == 0 ? 'square' : 'circle';
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.u-demo-area {
+}
+</style>

pages/componentsB/line/index.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area u-flex u-row-center">
+				<!-- 头条小程序因为兼容性，必须要给组件写上u-line类 -->
+				<u-line class="u-line" :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">颜色</view>
+				<u-subsection :list="['primary', 'success', 'warning', 'error', 'info']" @change="colorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">线条类型</view>
+				<u-subsection :list="['实线', '方形虚线', '圆点虚线']" @change="borderStyleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">细边</view>
+				<u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">方向</view>
+				<u-subsection :list="['水平', '垂直']" @change="directionChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				direction: 'row',
+				hairLine: true,
+				length: '100%',
+				color: this.$u.color['primary'],
+				borderStyle: 'solid'
+			}
+		},
+		methods: {
+			colorChange(index) {
+				this.color = this.$u.color[['primary', 'success', 'warning', 'error', 'info'][index]];
+			},
+			hairLineChange(index) {
+				this.hairLine = !index;
+			},
+			directionChange(index) {
+				this.direction = index == 0 ? 'row' : 'col';
+				if(index == 0) this.length = '100%';
+				else this.length = '50rpx';
+			},
+			borderStyleChange(index) {
+				this.borderStyle = ['solid', 'dashed', 'dotted'][index];
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo-area {
+		
+	}
+</style>

pages/componentsB/loading/index.vue

@@ -0,0 +1,77 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-loading :mode="mode" :show="show" :color="color" :size="size"></u-loading>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式</view>
+				<u-subsection :list="['圆圈', '花朵']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">颜色(只对圆圈模式有效)</view>
+				<u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">尺寸(单位rpx)</view>
+				<u-subsection current="1" :list="['28', '34', '40']" @change="sizeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否显示</view>
+				<u-subsection current="1" :list="['否', '是']" @change="showChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				mode: 'circle',
+				color: '#c7c7c7',
+				size: '34', 
+				show: true
+			}
+		},
+		methods: {
+			modeChange(index) {
+				this.mode = index == 0 ? 'circle' : 'flower';
+			},
+			colorChange(index) {
+				if(index == 0) {
+					this.color = '#c7c7c7';
+				} else {
+					let color = index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
+					this.color = this.$u.color[color];
+				}
+			},
+			sizeChange(index) {
+				this.size = index == 0 ? '28' : index == 1 ? '34' : '40';
+			},
+			showChange(index) {
+				// 两个!!可以把0变成false，1变成true
+				this.show = !!index;
+			},
+			// 选中某个复选框时，由checkbox时触发
+			checkboxChange(e) {
+				//console.log(e);
+			},
+			// 选中任一checkbox时，由checkbox-group触发
+			checkboxGroupChange(e) {
+				this.result = e;
+				// console.log(this.result);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {}
+</style>

pages/componentsB/noticeBar/index.vue

@@ -0,0 +1,144 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast :type="type" ref="uToast"></u-toast>
+				<u-notice-bar :autoplay="autoplay" :playState="playState" :speed="speed" @getMore="getMore" 
+				:mode="mode" @end="end" @close="close" @click="click" :show="show" :type="type" :list="list"
+				:moreIcon="moreIcon" :volumeIcon="volumeIcon" :duration="duration" :isCircular="isCircular"></u-notice-bar>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主题</view>
+				<u-subsection :current="3" :list="['primary', 'success', 'error', 'warning', 'none']" @change="typeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">滚动模式</view>
+				<u-subsection :current="current" :list="['水平', '垂直']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否衔接(水平模式有效)</view>
+				<u-subsection :list="['是', '否']" @change="isCircularChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :list="['播放', '暂停']" @change="playStateChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">速度</view>
+				<u-subsection :current="1" :list="['慢', '正常', '快']" @change="speedChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">图标</view>
+				<u-subsection :list="['显示', '隐藏']" @change="iconChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: true,
+				autoplay: false,
+				type: 'warning',
+				list: [
+					'锦瑟无端五十弦，一弦一柱思华年',
+					'庄生晓梦迷蝴蝶，望帝春心托杜鹃',
+					'沧海月明珠有泪，蓝田日暖玉生烟'
+				],
+				mode: 'horizontal',
+				playState: 'play',
+				speed: 160,
+				duration: 2000,
+				moreIcon: true,
+				volumeIcon: true,
+				isCircular: true,
+				current: 0
+			}
+		},
+		onLoad() {
+			
+		},
+		methods: {
+			typeChange(index) {
+				let type = ['primary', 'success', 'error', 'warning', 'none'];
+				this.type = type[index];
+			},
+			modeChange(index) {
+				this.current = index;
+				this.mode = index == 0 ? 'horizontal' : 'vertical';
+			},
+			playStateChange(index) {
+				this.playState = index == 0 ? 'play' : 'paused';
+			},
+			speedChange(index) {
+				if(index == 0) {
+					this.$nextTick(() => {
+						this.speed = 50;
+						this.duration = 6000;
+					})
+				} else if(index == 1) {
+					this.$nextTick(() => {
+						this.speed = 160;
+						this.duration = 2000;
+					})
+				} else {
+					this.$nextTick(() => {
+						this.speed = 350;
+						this.duration = 400;
+					})
+				}
+			},
+			iconChange(index) {
+				if(index == 0) {
+					this.moreIcon = true;
+					this.volumeIcon = true;
+				} else {
+					this.moreIcon = false;
+					this.volumeIcon = false;
+				}
+			},
+			isCircularChange(index) {
+				this.isCircular = index == 0 ? true : false;
+				this.current = 0;
+				this.mode = 'horizontal';
+			},
+			close() {
+				this.toast(`点击了关闭图标`);
+			},
+			click(index) {
+				if(this.mode == 'horizontal' && this.isCircular) {
+					this.toast('此模式无法获取Index值');
+				} else {
+					this.toast(`点击了第${index + 1}条消息`);
+				}
+				
+			},
+			getMore() {
+				this.toast(`点击了更多图标`);
+			},
+			toast(title) {
+				this.$refs.uToast.show({
+					title: title,
+					type: 'warning'
+				})
+			},
+			end() {
+				// console.log('end');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.item {
+		margin-top: 30px;
+	}
+</style>

pages/componentsB/picker/index.vue

@@ -0,0 +1,199 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="u-demo-result-line">{{ input ? input : 'Picker值' }}</view>
+				<u-picker
+					:mode="mode"
+					:defaultTime="defaultTime"
+					v-model="show"
+					:defaultRegion="defaultRegion"
+					:params="params"
+					end-year="2030"
+					@confirm="confirm"
+					:defaultSelector="defaultSelector"
+					:range="range"
+					:range-key="rangKey"
+					@columnchange="columnchange"
+				></u-picker>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">Picker开关</view>
+				<u-subsection :current="status" :list="['显示', '隐藏']" @change="statusChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择</view>
+				<u-subsection :list="['单列', '多列', '时间', '地区']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">默认时间</view>
+				<u-subsection :list="['2019-12-11 20:15:35', '2020-02-05 13:09:42']" @change="defaultTimeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示时分秒</view>
+				<u-subsection :list="['显示', '隐藏']" @change="minSecChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">默认地区</view>
+				<u-subsection :list="['广东-深圳-宝安', '海南-三亚-海棠']" @change="defaultRegionChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			show: false,
+			input: '',
+			rangKey: 'name',
+			mode: 'selector',
+			range: ['一', '片', '冰', '心', '在', '玉', '壶'],
+			defaultTime: '2019-12-11 20:15:35',
+			defaultSelector: [0],
+			defaultRegion: ['广东省', '深圳市', '宝安区'],
+			params: {
+				year: true,
+				month: true,
+				day: true,
+				hour: true,
+				minute: true,
+				second: true,
+				province: true,
+				city: true,
+				area: true,
+				timestamp: true
+			}
+		};
+	},
+	computed: {
+		status() {
+			return this.show == true ? 0 : 1;
+		}
+	},
+	methods: {
+		statusChange(index) {
+			this.show = index == 0 ? true : false;
+		},
+		modeChange(index) {
+			this.mode = ['selector', 'multiSelector', 'time', 'region'][index];
+			if (this.mode == 'selector') {
+				this.range = ['一', '片', '冰', '心', '在', '玉', '壶'];
+				this.defaultSelector = [0];
+			}
+			if (this.mode == 'multiSelector') {
+				this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']];
+				this.defaultSelector = [0, 0, 0];
+			}
+			this.show = true;
+		},
+		defaultTimeChange(index) {
+			this.defaultTime = index == 0 ? '2019-12-11 20:15:35' : '2020-02-05 13:09:42';
+			this.mode = 'time';
+			this.show = true;
+		},
+		defaultRegionChange(index) {
+			this.defaultRegion = index == 0 ? ['广东省', '深圳市', '宝安区'] : ['海南省', '三亚市', '海棠区'];
+			this.mode = 'region';
+			this.show = true;
+		},
+		minSecChange(index) {
+			if (index == 0) {
+				this.params.hour = true;
+				this.params.minute = true;
+				this.params.second = true;
+			}
+			if (index == 1) {
+				this.params.hour = false;
+				this.params.minute = false;
+				this.params.second = false;
+			}
+			this.mode = 'time';
+			this.show = true;
+		},
+		confirm(e) {
+			// console.log(e);
+			this.input = '';
+			if (this.mode == 'time') {
+				if (this.params.year) this.input += e.year;
+				if (this.params.month) this.input += '-' + e.month;
+				if (this.params.day) this.input += '-' + e.day;
+				if (this.params.hour) this.input += ' ' + e.hour;
+				if (this.params.minute) this.input += ':' + e.minute;
+				if (this.params.second) this.input += ':' + e.second;
+			} else if (this.mode == 'region') {
+				this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
+			} else if (this.mode == 'selector') {
+				this.input = this.range[e[0]];
+			} else if (this.mode == 'multiSelector') {
+				this.input = this.range[0][e[0]] + '-' + this.range[1][e[1]] + '-' + this.range[2][e[2]];
+			}
+		},
+		columnchange(e) {
+			let column = e.column, index = e.index;
+			this.defaultSelector[column] = index;
+			switch (column) {
+				case 0: 
+					switch (index) {
+						case 0:
+							this.range[1] = ['中国', '日本']
+							this.range[2] = ['北京', '上海', '广州']
+							break
+						case 1:
+							this.range[1] = ['英国', '法国']
+							this.range[2] = ['伦敦', '曼彻斯特']
+							break
+					}
+					this.defaultSelector.splice(1, 1, 0)
+					this.defaultSelector.splice(2, 1, 0)
+					break
+				case 1: //拖动第2列
+					switch (this.defaultSelector[0]) { //判断第一列是什么
+						case 0:
+							switch (this.defaultSelector[1]) {
+								case 0:
+									this.range[2] = ['北京', '上海', '广州']
+									break
+								case 1:
+									this.range[2] = ['东京','北海道']
+									break
+							}
+							break
+						case 1:
+							switch (this.defaultSelector[1]) {
+								case 0:
+									this.range[2] = ['伦敦', '曼彻斯特']
+									break
+								case 1:
+									this.range[2] = ['巴黎', '马赛']
+									break
+							}
+							break
+					}
+					this.defaultSelector.splice(2, 1, 0)
+					break
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.input {
+	border: 1px solid $u-light-color;
+	border-radius: 4px;
+	margin-bottom: 20px;
+	height: 30px;
+	font-size: 26rpx;
+	flex: 1;
+}
+
+.input-wrap {
+	display: flex;
+}
+</style>

pages/componentsB/radio/index.vue

@@ -0,0 +1,142 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="">
+					<u-radio-group :shape="shape" :size="size" :width="width" :wrap="wrap" v-model="value" @change="radioGroupChange" :activeColor="activeColor">
+						<u-radio @change="radioChange" v-for="(item, index) in list" :disabled="item.disabled"
+							:key="index" :name="item.name"
+						>{{item.name}}</u-radio>
+					</u-radio-group>
+				</view>
+				<view class="u-demo-result-line">
+					{{value ? `选中了"${result}"` : '请选择'}}
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">形状</view>
+				<u-subsection current="1" :list="['方形', '圆形']" @change="shapeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">整体大小(单位rpx)</view>
+				<u-subsection current="1" :list="['30', '40', '50']" @change="sizeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">激活颜色</view>
+				<u-subsection :list="['primary', 'error', 'warning', 'success', 'info']" @change="activeColorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">每个占一行</view>
+				<u-subsection current="1" :list="['是', '否']" @change="wrapChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">每个宽度50%</view>
+				<u-subsection current="1" :list="['是', '否']" @change="widthChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">默认选中第一个</view>
+				<u-subsection current="1" :list="['是', '否']" @change="defaultChooseChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">禁用第一个</view>
+				<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						name: '荔枝',
+						checked: true,
+						disabled: false
+					},
+					{
+						name: '香蕉',
+						checked: false,
+						disabled: false
+					},
+					{
+						name: '橙子',
+						checked: false,
+						disabled: false
+					},
+					{
+						name: '草莓',
+						checked: false,
+						disabled: false
+					}
+				],
+				disabled: false,
+				result: '荔枝',
+				shape: 'circle', 
+				value: '荔枝',
+				activeColor: '#2979ff',
+				size: 34,
+				wrap: false,
+				width: 'auto'
+			}
+		},
+		methods: {
+			shapeChange(index) {
+				this.shape = index == 0 ? 'square' : 'circle';
+			},
+			sizeChange(index) {
+				this.size = index == 0 ? 30 : index == 1 ? 40 : 50;
+			},
+			defaultChooseChange(index) {
+				// 特别处理对第一个选的选中的情况，涉及到提示语，选中状态等
+				// 实际开发中不会存在这些情况，只是演示用
+				if(index == 0) {
+					this.result = this.value = this.list[0].name;
+				} else {
+					if(this.value == this.list[0].name) {
+						this.result = this.value = '';
+					}
+				}
+			},
+			activeColorChange(index) {
+				// 如果用户尚未勾选任何radio，切换颜色时，默认选中第一个让用户看到效果，因为勾选了才有效果
+				if(!this.result) this.result = this.value = this.list[0].name;
+				let theme = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : index == 3 ? 'success' : 'info';
+				this.activeColor = this.$u.color[theme];
+			},
+			disabledChange(index) {
+				if(index == 0) {
+					this.list[0].disabled = true;
+				} else {
+					this.list[0].disabled = false;
+				}
+			},
+			// 选中某个单选框时，由radio时触发
+			radioChange(e) {
+				//console.log(e);
+			},
+			// 选中任一radio时，由radio-group触发
+			radioGroupChange(e) {
+				this.result = e;
+				//console.log(e);
+			},
+			widthChange(index) {
+				this.width = index == 0 ? '50%' : '';
+			},
+			wrapChange(index) {
+				this.wrap = !index;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {}
+</style>

pages/componentsB/rate/index.vue

@@ -0,0 +1,123 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-rate v-model="value" :count="count" @change="change"
+				:active-color="activeColor" :inaction-color="inactiveColor"
+				:active-icon="activeIcon" :inactive-icon="inactiveIcon"
+				:disabled="disabled" :colors="colors" :icons="icons"></u-rate>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">初始值</view>
+				<u-subsection :list="[1, 2, 3, 4]" @change="currentChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">镂空状态</view>
+				<u-subsection current="1" :list="['是', '否']" @change="plainChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义图标</view>
+				<u-subsection current="1" :list="['是', '否']" @change="iconChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否分层</view>
+				<u-subsection current="1" :list="['是', '否']" @change="decimalChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否禁用</view>
+				<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">星星数量</view>
+				<u-subsection current="1" :list="[4, 5, 6]" @change="countChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 1.4.5后推荐使用v-model双向绑定，弃用current
+				// current: 1,
+				activeColor: '#FA3534',
+				inactiveColor: '#b2b2b2',
+				disabled: false,
+				count: 5,
+				customIcon: false,
+				plain: false,
+				value: 0,
+				colors: [],
+				icons: []
+			}
+		},
+		watch: {
+			value(n) {
+				// console.log(n);
+			}
+		},
+		computed: {
+			activeIcon() {
+				let icon = this.customIcon ? 'heart' : 'star';
+				return this.plain ? icon : icon + '-fill'
+			},
+			inactiveIcon() {
+				let icon = this.customIcon ? 'heart' : 'star';
+				return this.plain ? icon : icon + '-fill'
+			}
+		},
+		methods: {
+			currentChange(index) {
+				this.value = index == 0 ? 1 : index == 1 ? 2 : index == 2 ? 3 : 4;
+			},
+			plainChange(index) {
+				this.plain = !index;
+			},
+			disabledChange(index) {
+				this.disabled = index == 0 ? true : false;
+			},
+			countChange(index) {
+				this.count = index == 0 ? 4 : index == 1 ? 5 : 6;
+			},
+			styleChange(index) {
+				if(index == 0) {
+					this.activeColor = this.$u.color['primary'];
+					this.inactiveColor = this.$u.color['info'];
+				} else {
+					this.activeColor = '#FA3534';
+					this.inactiveColor = '#b2b2b2';
+				}
+			},
+			decimalChange(index) {
+				if(index == 0) {
+					this.colors = ['#ffc454', '#ffb409', '#ff9500'];
+					this.icons = ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'];
+				} else {
+					this.colors = [];
+					this.icons = [];
+				}
+			},
+			iconChange(index) {
+				this.customIcon = !index;
+			},
+			change(val) {
+				// console.log(val);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {}
+</style>

pages/componentsB/readMore/index.vue

@@ -0,0 +1,67 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-read-more @open="open" @close="close" :toggle="toggle" :show-height="showHeight" ref="uReadMore">
+					<!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 -->
+					<!-- #ifdef MP-ALIPAY -->
+					<u-parse :html="content"></u-parse>
+					<!-- #endif -->
+					<!-- #ifndef MP-ALIPAY -->
+					<rich-text :nodes="content"></rich-text>
+					<!-- #endif -->
+				</u-read-more>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">超出高度隐藏</view>
+				<u-subsection current="1"  :list="['100', '200', '400']" @change="showHeightChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">展开后可关闭</view>
+				<u-subsection current="1" :list="['是', '否']" @change="toggleChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script> 
+	export default {
+		data() {
+			return {
+				content: `浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
+					忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
+					沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。
+					我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。`,
+				showHeight: 200,
+				toggle: false,
+			}
+		},
+		methods: {
+			showHeightChange(index) {
+				this.showHeight = index == 0 ? 100 : index == 1 ? 200 : 400;
+			},
+			toggleChange(index) {
+				this.toggle = index == 0 ? true : false;
+			},
+			open() {
+				// console.log('open');
+			},
+			close() {
+				// console.log('close');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	// 通过/deep/样式穿透去控制组件的内容
+	.wrap /deep/ .u-content {
+		color: #666!important;
+	}
+</style>

pages/componentsB/search/index.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-search v-model="value" @change="change" @custom="custom" @search="search" :shape="shape" :clearabled="clearabled" 
+				:show-action="showAction" :input-align="inputAlign" @clear="clear"></u-search>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">初始值</view>
+				<u-subsection :list="['空', '天山雪莲']" @change="valueChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">搜索框形状</view>
+				<u-subsection :list="['圆形', '方形']" @change="shapeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">清除控件</view>
+				<u-subsection :list="['启用', '关闭']" @change="clearabledChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">右侧控件</view>
+				<u-subsection :list="['启用', '关闭']" @change="showActionChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">水平对齐方式</view>
+				<u-subsection :list="['左', '中', '右']" @change="inputAlignChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: '',
+				shape: 'round',
+				clearabled: true,
+				showAction: true,
+				inputAlign: 'left'
+			}
+		},
+		watch: {
+			// 这里的演示为证明通过v-model绑定值，它是双向绑定的，意味着您无需监听change事件
+			// 也能知道value值当前的内容
+			value(val) {
+				// console.log(val);
+			}
+		},
+		methods: {
+			valueChange(index) {
+				this.value = index == 0 ? '' : '天山雪莲';
+			},
+			shapeChange(index) {
+				this.shape = index == 0 ? 'round' : 'square';
+			},
+			clearabledChange(index) {
+				this.clearabled = index == 0 ? true : false;
+			},
+			showActionChange(index) {
+				this.showAction = index == 0 ? true : false;
+			},
+			inputAlignChange(index) {
+				this.inputAlign = index == 0 ? 'left' : index == 1 ? 'center' : 'right';
+			},
+			change(value) {
+				// 搜索框内容变化时，会触发此事件，value值为输入框的内容
+				//console.log(value);
+			},
+			custom(value) {
+				//console.log(value);
+				this.$u.toast('输入值为：' + value)
+			},
+			search(value) {
+				this.$refs.uToast.show({
+					title: '搜索内容为：' + value,
+					type: 'success'
+				})
+			},
+			clear() {
+				// console.log(this.value);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsB/skeleton/index.vue

@@ -0,0 +1,128 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<view class="container u-skeleton">
+					<view class="userinfo">
+						<block>
+							<!--u-skeleton-circle 绘制圆形-->
+							<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image>
+							<!--u-skeleton-fillet 绘制圆角矩形-->
+							<text class="u-skeleton-fillet">{{userInfo.nickName}}</text>
+						</block>
+					</view>
+					<view style="margin: 20px 0">
+						<!--u-skeleton-rect 绘制矩形-->
+						<view class="u-skeleton-rect lists" v-for="(item,index) in lists" :key="index">
+							<text>{{item}}</text>
+						</view>
+					</view>
+				</view>
+				<!--引用组件-->
+				<u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation" 
+				:el-color="elColor" :border-radius="borderRadius"></u-skeleton>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">加载状态</view>
+				<u-subsection :current="current" :list="['请求中', '请求结束']" @change="loadingChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">骨架动画</view>
+				<u-subsection current="1" :list="['是', '否']" @change="animationChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				userInfo: {
+					avatarUrl: 'https://cdn.uviewui.com/uview/common/logo.png',
+					nickName: 'uView'
+				},
+				lists: [
+					'君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。',
+					'人生得意须尽欢，莫使金樽空对月',
+					'天生我材必有用，千金散尽还复来',
+				],
+				loading: true, // 是否显示骨架屏组件
+				animation: false,
+				elColor: '#e5e5e5',
+				borderRadius: 10,
+			}
+		},
+		computed: {
+			current() {
+				return this.loading ? 0 : 1;
+			},
+		},
+		onLoad() {
+			this.getData();
+		},
+		methods: {
+			animationChange(index) {
+				this.animation = index == 0 ? true : false;
+				this.getData();
+			},
+			loadingChange(index) {
+				this.loading = index == 0 ? true : false;
+				if(index == 0) this.getData();
+			},
+			styleChange(index) {
+				if(index == 0) {
+					this.elColor = this.$u.color['primary'];
+					this.borderRadius = 14;
+				} else {
+					this.elColor = '#e5e5e5';
+					this.borderRadius = 10;
+				}
+				this.getData();
+			},
+			getData() {
+				this.loading = true;
+				// 通过延时模拟向后端请求数据，调隐藏骨架屏
+				setTimeout(() => {
+					this.loading = false;
+				}, 3000)
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		text-align: left;
+		font-size: 28rpx;
+		color: $u-content-color;
+	}
+
+	.userinfo {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.userinfo-avatar {
+		width: 128rpx;
+		height: 128rpx;
+		margin: 20rpx;
+		border-radius: 50%;
+	}
+
+	.lists {
+		margin: 10px 0;
+	}
+</style>

pages/componentsB/steps/index.vue

@@ -0,0 +1,77 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-steps :direction="direction" :current="current" :list="steps" :mode="mode" :icon="icon"></u-steps>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式</view>
+				<u-subsection :list="['number', 'dot']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">方向</view>
+				<u-subsection :list="['横向', '竖向']" @change="directionChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义图标</view>
+				<u-subsection :list="['否', '是']" @change="iconChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">当前步值</view>
+				<u-subsection :list="['1', '2', '3', '4']" @change="stepChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				steps: [{
+					name: '下单'
+				}, {
+					name: '出库'
+				}, {
+					name: '运输'
+				}, {
+					name: '签收'
+				}, ],
+				current: 0,
+				icon: 'checkmark',
+				mode: 'number',
+				direction: 'row'
+			}
+		},
+		methods: {
+			modeChange(index) {
+				this.mode = index == 0 ? 'number' : 'dot';
+			},
+			stepChange(index) {
+				this.current = [0, 1, 2, 3][index];
+			},
+			iconChange(index) {
+				this.icon = index == 0 ? 'checkmark' : 'map-fill';
+			},
+			directionChange(index) {
+				this.direction = index == 0 ? 'row' : 'column';
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx;
+	}
+	
+	.box {
+		margin: 50rpx 0;
+	}
+</style>

pages/componentsB/sticky/index.vue

@@ -0,0 +1,87 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed" @unfixed="unfixed">
+					<view class="sticky">
+						宝剑锋从磨砺出,梅花香自苦寒来
+					</view>
+				</u-sticky>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">吸顶高度</view>
+				<u-subsection :list="[0, 120, 200]" @change="offsetTopChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :list="['允许吸顶', '禁止吸顶']" @change="enableChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				offsetTop: 0,
+				enable: true,
+			}
+		},
+		methods: {
+			offsetTopChange(index) {
+				this.offsetTop = index == 0 ? 0 : index == 1 ? 120 : 200;
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 0
+				})
+			},
+			enableChange(index) {
+				this.enable = index == 0 ? true : false;
+			},
+			fixed() {
+				this.$refs.uToast.show({
+					type: 'warning',
+					title: '触发吸顶'
+				})
+			},
+			unfixed() {
+				this.$refs.uToast.show({
+					type: 'success',
+					title: '取消吸顶'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo-area {
+		overflow: hidden;
+	}
+	
+	.u-config-wrap {
+		height: 200vh;
+	}
+	
+	.u-demo-title {
+		margin-bottom: 140rpx;
+	}
+	
+	.sticky {
+		background-color: $u-type-primary;
+		color: #fff;
+		padding: 24rpx;
+		margin: auto;
+		font-size: 28rpx;
+		line-height: 1;
+		border-radius: 5px;
+	}
+</style>

pages/componentsB/swipeAction/index.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-swipe-action
+					bg-color="rgb(250, 250, 250)"
+					@open="open"
+					:disabled="disabled"
+					:index="index"
+					v-for="(item, index) in list"
+					:key="item.id"
+					:show="item.show"
+					@click="click"
+					:btn-width="btnWidth"
+					@close="close"
+					:options="options"
+					@content-click="contentClick"
+				>
+					<view class="item u-border-bottom">
+						<image mode="aspectFill" :src="item.images" />
+						<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
+						<view class="title-wrap">
+							<text class="title u-line-2">{{ item.title }}</text>
+						</view>
+					</view>
+				</u-swipe-action>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态(操作第一个)</view>
+				<u-subsection :current="1" :list="['打开', '关闭']" @change="showChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">禁止滑动</view>
+				<u-subsection :current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			list1: [
+				{
+					id: 1,
+					title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
+					images: 'https://cdn.uviewui.com/uview/common/logo.png',
+					show: false
+				},
+				{
+					id: 2,
+					title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
+					images: 'https://cdn.uviewui.com/uview/common/logo.png',
+					show: false
+				},
+				{
+					id: 3,
+					title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
+					images: 'https://cdn.uviewui.com/uview/common/logo.png',
+					show: false,
+				}
+			],
+			list: [],
+			disabled: false,
+			btnWidth: 180,
+			show: false,
+			options: [
+				{
+					text: '收藏',
+					style: {
+						backgroundColor: '#007aff'
+					}
+				},
+				{
+					text: '删除',
+					style: {
+						backgroundColor: '#dd524d'
+					}
+				}
+			]
+		};
+	},
+	onLoad() {
+		setTimeout(() => {
+			this.list = this.list1;
+		}, 0)
+	},
+	methods: {
+		disabledChange(index) {
+			this.disabled = index == 0 ? true : false;
+		},
+		showChange(index) {
+			if (index == 0) {
+				this.list.map((val, ids) => {
+					if (ids != 0) val.show = false;
+					else val.show = true;
+				});
+			} else {
+				this.list[0].show = false;
+			}
+		},
+		click(index, index1) {
+			if(index1 == 1) {
+				this.list.splice(index, 1);
+				this.$u.toast(`删除了第${index}个cell`);
+			} else {
+				this.list[index].show = false;
+				this.$u.toast(`收藏成功`);
+			}
+		},
+		open(index) {
+			this.list[index].show = true;
+			this.list.map((val, idx) => {
+				if (index != idx) this.list[idx].show = false;
+			});
+		},
+		close(index) {
+			this.list[index].show = false;
+		},
+		contentClick(index) {
+			// console.log(index);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.item {
+	display: flex;
+	padding: 20rpx;
+}
+
+image {
+	width: 120rpx;
+	flex: 0 0 120rpx;
+	height: 120rpx;
+	margin-right: 20rpx;
+	border-radius: 12rpx;
+}
+
+.title {
+	text-align: left;
+	font-size: 28rpx;
+	color: $u-content-color;
+	margin-top: 20rpx;
+}
+</style>

pages/componentsB/swiper/index.vue

@@ -0,0 +1,89 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-swiper @change="change" :height="250" :list="list" :title="title" :effect3d="effect3d" 
+				:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">指示器模式</view>
+				<u-subsection :list="['round', 'rect', 'number', 'none']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">标题</view>
+				<u-subsection current="1" :list="['显示', '隐藏']" @change="titleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">指示器位置</view>
+				<u-subsection current="3" :list="['上左', '上右', '下左', '下中', '下右']" @change="indicatorPosChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">3D效果</view>
+				<u-subsection current="1" :list="['开启', '关闭']" @change="effect3dChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+						title: '身无彩凤双飞翼，心有灵犀一点通'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+					}
+				],
+				title: false,
+				mode: 'round',
+				indicatorPos: 'bottomCenter',
+				effect3d: false,
+				
+			}
+		},
+		methods: {
+			titleChange(index) {
+				this.title = index == 0 ? true : false;
+			},
+			modeChange(index) {
+				this.mode = index == 0 ? 'round' : index == 1 ? 'rect' : index == 2 ? 'number' : 'none';
+			},
+			indicatorPosChange(index) {
+				this.indicatorPos = index == 0 ? 'topLeft' : index == 1 ? 'topRight' : index == 2 ? 'bottomLeft' : index == 3 ? 'bottomCenter'  : 'bottomRight';
+			},
+			effect3dChange(index) {
+				this.effect3d = index == 0 ? true : false;
+			},
+			click(index) {
+				this.$refs.uToast.show({
+					title: `点击了第${index + 1}张图片`,
+					type: 'success'
+				})
+			},
+			change(index) {
+				// console.log(index);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.item {
+		margin: 30rpx 0;
+	}
+</style>

pages/componentsB/switch/index.vue

@@ -0,0 +1,113 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-switch v-model="checked" :loading="loading" 
+					:size="size" @change="change" 
+					:active-color="activeColor"
+					:disabled="disabled"
+					:activeValue="100"
+					:inactiveValue="1"
+				></u-switch>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :list="['关闭', '打开']" @change="modelChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">颜色</view>
+				<u-subsection :list="['primary', 'error', 'warning', 'success']" @change="colorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">尺寸(单位rpx)</view>
+				<u-subsection current="1" :list="['40', '60', '80']" @change="sizeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">加载中</view>
+				<u-subsection :list="['否', '是']" @change="loadingChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">禁用</view>
+				<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">异步控制</view>
+				<u-subsection :list="['关闭', '打开']" @change="asyncChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				checked: false,
+				activeColor: '#2979ff',
+				size: 50,
+				loading: false,
+				disabled: false
+			}
+		},
+		methods: {
+			modelChange(index) {
+				// 两个!!可以把0变成false，1变成true
+				this.checked = !!index;
+			},
+			colorChange(index) {
+				let color = index == 0 ? 'primary' : index == 1 ? 'error' : index == 2 ? 'warning' : 'success';
+				this.activeColor = this.$u.color[color];
+			},
+			sizeChange(index) {
+				this.size = index == 0 ? '40' : index == 1 ? '60' : '80';
+			},
+			loadingChange(index) {
+				this.loading = !!index;
+			},
+			disabledChange(index) {
+				this.disabled = index == 0 ? true : false;
+			},
+			asyncChange(index) {
+				if(this.checked && index == 1) {
+					this.$u.toast('请先关闭选择器');
+					return;
+				}
+				if(!this.checked && index == 0) {
+					this.$u.toast('请先打开选择器');
+					return;
+				}
+				let str = index == 0 ? '是否要关闭？' : '是否要打开？';
+				this.loading = true;
+				let oldStatus = this.checked;
+				this.checked = true;
+				uni.showModal({
+					title: '提示',
+					content: str,
+					complete: (res) => {
+						this.loading = false;
+						if(res.confirm) {
+							if(oldStatus) this.checked = false;
+							else this.checked = true;
+						} else {
+							if(!oldStatus) this.checked = false;
+							else this.checked = true;
+						}
+					}
+				})
+			},
+			change(value) {
+				// console.log(value);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo {}
+</style>

pages/componentsB/tabbar/index.vue

@@ -0,0 +1,133 @@
+<template>
+	<view class="">
+		<view class="u-demo">
+			<view class="u-config-wrap">
+				<view class="u-config-title u-border-bottom">
+					参数配置
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">状态</view>
+					<u-subsection :list="['显示', '隐藏']" @change="showChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">凸起按钮</view>
+					<u-subsection :list="['显示', '隐藏']" @change="minButtonChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">背景色</view>
+					<u-subsection :list="['#ffffff', '#1f1f1d']" @change="bgColorChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">顶部边框</view>
+					<u-subsection :list="['显示', '隐藏']" @change="borderTopChange"></u-subsection>
+				</view>
+				<view class="u-config-item">
+					<view class="u-item-title">提示角标</view>
+					<u-subsection :list="['显示', '隐藏']" @change="badgeChange"></u-subsection>
+				</view>
+			</view>
+		</view>
+		<u-tabbar
+		    v-model="current"
+		    :show="show"
+		    :bg-color="bgColor"
+		    :border-top="borderTop"
+		    :list="list"
+			:mid-button="midButton"
+			:inactive-color="inactiveColor"
+			:activeColor="activeColor"
+		></u-tabbar>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				current: 0,
+				show: true,
+				bgColor: '#ffffff',
+				borderTop: true,
+				list: [{
+						iconPath: "home",
+						selectedIconPath: "home-fill",
+						text: '首页',
+						count: 2,
+						isDot: true,
+						customIcon: false,
+					},
+					{
+						iconPath: "photo",
+						selectedIconPath: "photo-fill",
+						text: '放映厅',
+						customIcon: false,
+					},
+					{
+						iconPath: "/static/uview/example/min_button.png",
+						selectedIconPath: "/static/uview/example/min_button_select.png",
+						text: '发布',
+						midButton: true,
+						customIcon: false,
+					},
+					{
+						iconPath: "play-right",
+						selectedIconPath: "play-right-fill",
+						text: '直播',
+						customIcon: false,
+					},
+					{
+						iconPath: "account",
+						selectedIconPath: "account-fill",
+						text: '我的',
+						count: 23,
+						isDot: false,
+						customIcon: false,
+					},
+				],
+				midButton: true,
+				inactiveColor: '#909399',
+				activeColor: '#5098FF'
+			}
+		},
+		methods: {
+			beforeSwitch(index) {
+				return true;
+			},
+			showChange(index) {
+				this.show = !index;
+			},
+			bgColorChange(index) {
+				if(index == 0) {
+					this.activeColor = '#5098FF';
+					this.inactiveColor = '#909399';
+				}
+				if(index == 1) {
+					this.activeColor = '#D0D0D0';
+					this.inactiveColor = '#5A5A5A';
+				}
+				this.bgColor = ['#ffffff', '#1f1f1d'][index];
+			},
+			borderTopChange(index) {
+				this.borderTop = !index;
+			},
+			badgeChange(index) {
+				if (index == 1) {
+					this.list[0].count = 0;
+					this.list[4].count = 0;
+				} else {
+					this.list[0].count = 2;
+					this.list[4].count = 23;
+				}
+			},
+			minButtonChange(index) {
+				this.midButton = !index;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-demo-area {
+		margin: 0 -40rpx;
+	}
+</style>

pages/componentsB/table/index.vue

@@ -0,0 +1,83 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-table :align="align" :borderColor="borderColor">
+					<u-tr class="u-tr">
+						<u-th class="u-th">姓名</u-th>
+						<u-th class="u-th">年龄</u-th>
+						<u-th class="u-th">籍贯</u-th>
+						<u-th class="u-th">性别</u-th>
+					</u-tr>
+					<u-tr class="u-tr">
+						<u-td class="u-td">吕布</u-td>
+						<u-td class="u-td">22</u-td>
+						<u-td class="u-td">楚河</u-td>
+						<u-td class="u-td">男</u-td>
+					</u-tr>
+					<u-tr class="u-tr">
+						<u-td class="u-td">项羽</u-td>
+						<u-td class="u-td">28</u-td>
+						<u-td class="u-td">汉界</u-td>
+						<u-td class="u-td">男</u-td>
+					</u-tr>
+					<u-tr class="u-tr">
+						<u-td class="u-td">木兰</u-td>
+						<u-td class="u-td">24</u-td>
+						<u-td class="u-td">南国</u-td>
+						<u-td class="u-td">女</u-td>
+					</u-tr>
+				</u-table>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">边框颜色</view>   
+				<u-subsection :list="['gray', 'primary', 'warning']" @change="borderColorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">对齐方式</view>
+				<u-subsection current="1" :list="['左', '中', '右']" @change="alignChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				mode: false,
+				borderColor: '#e4e7ed',
+				align: 'center',
+				index: 0,
+			}
+		},
+		methods: {
+			modeChange(index) {
+				// #ifdef MP-WEIXIN
+				return this.$u.toast('微信小程序暂不支持单元格合并')
+				// #endif
+				this.mode = index == 0 ? true : false;
+				this.key ++;
+			},
+			borderColorChange(index) {
+				this.borderColor = index == 0 ? '#e4e7ed' : index == 1 ? '#2979ff' : '#ff9900';
+			},
+			alignChange(index) {
+				this.align = index == 0 ? 'left' : index == 1 ? 'center' : 'right';
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx;
+	}
+</style>

pages/componentsB/upload/index.vue

@@ -0,0 +1,224 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<view class="pre-box" v-if="!showUploadList">
+					<view class="pre-item" v-for="(item, index) in lists" :key="index">
+						<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
+						<view class="u-delete-icon" @tap.stop="deleteItem(index)">
+							<u-icon name="close" size="20" color="#ffffff"></u-icon>
+						</view>
+						<u-line-progress v-if="item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress"
+						 :percent="item.progress"></u-line-progress>
+					</view>
+				</view>
+				<u-upload @on-choose-fail="onChooseFail" :before-remove="beforeRemove" ref="uUpload" :custom-btn="customBtn" :show-upload-list="showUploadList" :action="action" :auto-upload="autoUpload" :file-list="fileList"
+				 :show-progress="showProgress" :deletable="deletable" :max-count="maxCount" @on-list-change="onListChange">
+					<view v-if="customBtn" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
+						<u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
+					</view>
+				</u-upload>
+				<u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button>
+				<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button>
+				<!-- <u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button> -->
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">上传方式</view>
+				<u-subsection current="1" :list="['自动上传', '手动上传']" @change="autoUploadChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义控件(进度条和删除按钮)</view>
+				<u-subsection :list="['显示', '隐藏']" @change="controlChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">最大上传数量</view>
+				<u-subsection current="1" :list="['1', '2', '4']" @change="maxCountChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式(预览区域和上传按钮)</view>
+				<u-subsection current="1" :list="['是', '否']" @change="customStyleChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				action: 'http://127.0.0.1:7001/upload',
+				// 预置上传列表
+				fileList: [],
+				// fileList: [{
+				// 	url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
+				// 	error: false,
+				// 	progress: 100
+				// }],
+				showUploadList: true,
+				customBtn: false,
+				autoUpload: false,
+				showProgress: true,
+				deletable: true,
+				customStyle: false,
+				maxCount: 2,
+				lists: [], // 组件内部的文件列表
+			}
+		},
+		onLoad() {
+			
+		},
+		methods: {
+			reUpload() {
+				this.$refs.uUpload.reUpload();
+			},
+			clear() {
+				this.$refs.uUpload.clear();
+			},
+			autoUploadChange(index) {
+				this.autoUpload = index == 0 ? true : false;
+			},
+			controlChange(index) {
+				if(index == 0) {
+					this.showProgress = true;
+					this.deletable = true;
+				} else {
+					this.showProgress = false;
+					this.deletable = false;
+				}
+			},
+			maxCountChange(index) {
+				this.maxCount = index == 0 ? 1 : index == 1 ? 2 : 4;
+			},
+			customStyleChange(index) {
+				if (index == 0) {
+					this.showUploadList = false;
+					this.customBtn = true;
+					
+				} else {
+					this.showUploadList = true;
+					this.customBtn = false;
+				}
+			},
+			upload() {
+				this.$refs.uUpload.upload();
+			},
+			deleteItem(index) {
+				this.$refs.uUpload.remove(index);
+			},
+			onOversize(file, lists) {
+				// console.log('onOversize', file, lists);
+			},
+			onPreview(url, lists) {
+				// console.log('onPreview', url, lists);
+			},
+			onRemove(index, lists) {
+				// console.log('onRemove', index, lists);
+			},
+			onSuccess(data, index, lists) {
+				// console.log('onSuccess', data, index, lists);
+			},
+			onChange(res, index, lists) {
+				// console.log('onChange', res, index, lists);
+			},
+			error(res, index, lists) {
+				// console.log('onError', res, index, lists);
+			},
+			onProgress(res, index, lists) {
+				// console.log('onProgress', res, index, lists);
+			},
+			onUploaded(lists) {
+				// console.log('onUploaded', lists);
+			},
+			onListChange(lists) {
+				// console.log('onListChange', lists);
+				this.lists = lists;
+			},
+			beforeRemove(index, lists) {
+				return true;
+			},
+			onChooseFail(e) {
+				// console.log(e);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-demo-wrap {
+		background-color: #FFFFFF;
+		padding: 40rpx 8rpx;
+		margin-left: -14rpx;
+		margin-right: -14rpx;
+	}
+	
+	.u-add-wrap {
+		flex-direction: column;
+		color: $u-content-color;
+		font-size: 28rpx;
+	}
+	
+	/deep/ .slot-btn {
+		width: 329rpx;
+		height: 140rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: rgb(244, 245, 246);
+		border-radius: 10rpx;
+	}
+
+	.slot-btn__hover {
+		background-color: rgb(235, 236, 238);
+	}
+
+	.pre-box {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+
+	.pre-item {
+		flex: 0 0 48.5%;
+		border-radius: 10rpx;
+		height: 140rpx;
+		overflow: hidden;
+		position: relative;
+		margin-bottom: 20rpx;
+	}
+
+	.u-progress {
+		position: absolute;
+		bottom: 10rpx;
+		left: 8rpx;
+		right: 8rpx;
+		z-index: 9;
+		width: auto;
+	}
+
+	.pre-item-image {
+		width: 100%;
+		height: 140rpx;
+	}
+
+	.u-delete-icon {
+		position: absolute;
+		top: 10rpx;
+		right: 10rpx;
+		z-index: 10;
+		background-color: $u-type-error;
+		border-radius: 100rpx;
+		width: 44rpx;
+		height: 44rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

pages/componentsB/waterfall/index.vue

@@ -0,0 +1,224 @@
+<template>
+	<view class="wrap">
+		<u-waterfall v-model="flowList" ref="uWaterfall">
+			<template v-slot:left="{ leftList }">
+				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
+					<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
+					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<view class="demo-title">{{ item.title }}</view>
+					<view class="demo-price">{{ item.price }}元</view>
+					<view class="demo-tag">
+						<view class="demo-tag-owner">自营</view>
+						<view class="demo-tag-text">放心购</view>
+					</view>
+					<view class="demo-shop">{{ item.shop }}</view>
+					<view class="u-close">
+						<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
+					</view>
+				</view>
+			</template>
+			<template v-slot:right="{ rightList }">
+				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
+					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+					<view class="demo-title">{{ item.title }}</view>
+					<view class="demo-price">{{ item.price }}元</view>
+					<view class="demo-tag">
+						<view class="demo-tag-owner">自营</view>
+						<view class="demo-tag-text">放心购</view>
+					</view>
+					<view class="demo-shop">{{ item.shop }}</view>
+					<view class="u-close">
+						<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
+					</view>
+				</view>
+			</template>
+		</u-waterfall>
+		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			loadStatus: 'loadmore',
+			flowList: [],
+			list: [
+				{
+					price: 35,
+					title: '北国风光，千里冰封，万里雪飘',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg'
+				},
+				{
+					price: 75,
+					title: '望长城内外，惟余莽莽',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg'
+				},
+				{
+					price: 385,
+					title: '大河上下，顿失滔滔',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
+				},
+				{
+					price: 784,
+					title: '欲与天公试比高',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg'
+				},
+				{
+					price: 7891,
+					title: '须晴日，看红装素裹，分外妖娆',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg'
+				},
+				{
+					price: 2341,
+					shop: '李白杜甫白居易旗舰店',
+					title: '江山如此多娇，引无数英雄竞折腰',
+					image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg'
+				},
+				{
+					price: 661,
+					shop: '李白杜甫白居易旗舰店',
+					title: '惜秦皇汉武，略输文采',
+					image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg'
+				},
+				{
+					price: 1654,
+					title: '唐宗宋祖，稍逊风骚',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
+				},
+				{
+					price: 1678,
+					title: '一代天骄，成吉思汗',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
+				},
+				{
+					price: 924,
+					title: '只识弯弓射大雕',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
+				},
+				{
+					price: 8243,
+					title: '俱往矣，数风流人物，还看今朝',
+					shop: '李白杜甫白居易旗舰店',
+					image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
+				}
+			]
+		};
+	},
+	onLoad() {
+		this.addRandomData();
+	},
+	onReachBottom() {
+		this.loadStatus = 'loading';
+		// 模拟数据加载
+		setTimeout(() => {
+			this.addRandomData();
+			this.loadStatus = 'loadmore';
+		}, 1000);
+	},
+	methods: {
+		addRandomData() {
+			for (let i = 0; i < 10; i++) {
+				let index = this.$u.random(0, this.list.length - 1);
+				// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
+				let item = JSON.parse(JSON.stringify(this.list[index]));
+				item.id = this.$u.guid();
+				this.flowList.push(item);
+			}
+		},
+		remove(id) {
+			this.$refs.uWaterfall.remove(id);
+		},
+		clear() {
+			this.$refs.uWaterfall.clear();
+		}
+	}
+};
+</script>
+
+<style>
+/* page不能写带scope的style标签中，否则无效 */
+page {
+	background-color: rgb(240, 240, 240);
+}
+</style>
+
+<style lang="scss" scoped>
+.demo-warter {
+	border-radius: 8px;
+	margin: 5px;
+	background-color: #ffffff;
+	padding: 8px;
+	position: relative;
+}
+
+.u-close {
+	position: absolute;
+	top: 32rpx;
+	right: 32rpx;
+}
+
+.demo-img-wrap {
+}
+
+.demo-image {
+	width: 100%;
+	border-radius: 4px;
+}
+
+.demo-title {
+	font-size: 30rpx;
+	margin-top: 5px;
+	color: $u-main-color;
+	word-break: break-all;
+}
+
+.demo-tag {
+	display: flex;
+	margin-top: 5px;
+}
+
+.demo-tag-owner {
+	background-color: $u-type-error;
+	color: #ffffff;
+	display: flex;
+	align-items: center;
+	padding: 4rpx 14rpx;
+	border-radius: 50rpx;
+	font-size: 20rpx;
+	line-height: 1;
+}
+
+.demo-tag-text {
+	border: 1px solid $u-type-primary;
+	color: $u-type-primary;
+	margin-left: 10px;
+	border-radius: 50rpx;
+	line-height: 1;
+	padding: 4rpx 14rpx;
+	display: flex;
+	align-items: center;
+	border-radius: 50rpx;
+	font-size: 20rpx;
+}
+
+.demo-price {
+	font-size: 30rpx;
+	color: $u-type-error;
+	margin-top: 5px;
+}
+
+.demo-shop {
+	font-size: 22rpx;
+	color: $u-tips-color;
+	margin-top: 5px;
+}
+</style>

pages/componentsC/actionSheet/index.vue

@@ -0,0 +1,82 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-button @click="showAction">唤起ActionSheet</u-button>
+				<u-action-sheet :cancel-btn="cancel" :mask-close-able="maskClick" :tips="tips" 
+				@click="click" :list="list" v-model="show" :safe-area-inset-bottom="true"></u-action-sheet>
+			</view> 
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">取消按钮</view>
+				<u-subsection :list="['是', '否']" @change="cancelChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">点击遮罩关闭</view>
+				<u-subsection :list="['是', '否']" @change="maskClickChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					text: '最是人间留不住',
+				}, {
+					text: '朱颜辞镜花辞树',
+					disabled: true
+				}, {
+					text: '正是江南好风景',
+					subText: '春江水暖鸭先知'
+				}, {
+					text: '落花时节又逢君'
+				}],
+				tips: {
+					text: ''
+				},
+				show: false,
+				cancel: true,
+				maskClick: true
+			}
+		},
+		methods: {
+			showAction() {
+				this.show = true;
+			},
+			click(index) {
+				this.$refs.uToast.show({
+					type: 'success',
+					title: '点击了第' + (index + 1) + '项'
+				})
+			},
+			tipsChange(index) {
+				if(index == 0) this.show = true;
+				this.tips.text = index == 0 ? '请谨慎执行您的操作' : ''
+			},
+			cancelChange(index) {
+				this.show = true;
+				this.cancel = index == 0 ? true : false
+			},
+			maskClickChange(index) {
+				if(index == 1) this.cancel = true;
+				this.show = true;
+				this.maskClick = index == 0 ? true : false
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx;
+	}
+</style>

pages/componentsC/alertTips/index.vue

@@ -0,0 +1,90 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-alert-tips @close="close" :closeAble="closeAble" :show="show" @click="click"
+				:type="type" :title="title" :description="description" :showIcon="showIcon"></u-alert-tips>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">左侧图标</view>
+				<u-subsection current="1" :list="['是', '否']" @change="showIconChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">关闭图标</view>
+				<u-subsection current="1" :list="['显示', '隐藏']" @change="closeAbleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主题</view>
+				<u-subsection current="3" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="current" :list="['开启', '关闭']" @change="showChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '大漠孤烟直，长河落日圆',
+				description: "月落乌啼霜满天，江枫渔火对愁眠。姑苏城外寒山寺，夜半钟声到客船。飞流直下三千尺，疑是银河落九天！",
+				show: true,
+				closeAble: false,
+				showIcon: false,
+				type: 'warning',
+			}
+		},
+		computed: {
+			current() {
+				return this.show ? 0 : 1;
+			}
+		},
+		methods: {
+			showIconChange(index) {
+				this.showIcon = index == 0 ? true : false;
+			},
+			showChange(index) {
+				this.show = index == 0 ? true : false;
+			},
+			closeAbleChange(index) {
+				this.closeAble = index == 0 ? true : false;
+			},
+			typeChange(index) {
+				this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning'  : 'info';
+			},
+			close() {
+				this.show = false;
+				this.$refs.uToast.show({
+					type: 'warning',
+					title: '点击关闭按钮'
+				})
+			},
+			click() {
+				this.$refs.uToast.show({
+					type: 'warning',
+					title: '点击内容'
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx;
+	}
+	
+	.item {
+		margin: 30rpx 0;
+	}
+</style>

pages/componentsC/badge/index.vue

@@ -0,0 +1,83 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="u-badge-wrap"><u-badge :is-center="isCenter" :type="type" :count="count" :is-dot="isDot" :offset="offset" :size="size"></u-badge></view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">数值显示</view>
+				<u-subsection current="1" :list="[0, 8, 15, 106, 209]" @change="countChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主题选择</view>
+				<u-subsection current="2" :list="['primary', 'success', 'error', 'warning', 'info']" @change="typeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示点</view>
+				<u-subsection current="1" :list="['是', '否']" @change="isDotChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">尺寸</view>
+				<u-subsection :list="['default', 'mini']" @change="sizeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">位置偏移</view>
+				<u-subsection current="1" :list="['[20, 20]', '[-8, -8]', '[-20, -20]']" @change="offsetChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">中心点与父右上角重合</view>
+				<u-subsection current="1" :list="['是', '否']" @change="isCenterChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			count: 8,
+			type: 'error',
+			isDot: false,
+			offset: [-8, -8],
+			size: 'default',
+			isCenter: false
+		};
+	},
+	methods: {
+		countChange(index) {
+			this.count = index == 0 ? 0 : index == 1 ? 8 : index == 2 ? 15 : index == 3 ? 106 : 209;
+		},
+		typeChange(index) {
+			this.type = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning' : 'info';
+		},
+		sizeChange(index) {
+			this.size = index == 0 ? 'default' : 'mini';
+		},
+		isDotChange(index) {
+			this.isDot = index == 0 ? true : false;
+		},
+		offsetChange(index) {
+			this.offset = index == 0 ? [20, 20] : index == 1 ? [-8, -8] : [-20, -20];
+		},
+		isCenterChange(index) {
+			this.isCenter = index == 0 ? true : false;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.u-badge-wrap {
+	width: 60px;
+	height: 60px;
+	border-radius: 6px;
+	background-color: $u-light-color;
+	position: relative;
+	margin: auto;
+}
+</style>

pages/componentsC/button/index.vue

@@ -0,0 +1,121 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-button @click="btnClick" data-name="3333" :loading="loading" :plain="plain" :shape="shape" :size="size" :ripple="ripple" :hairLine="hairLine" :type="type">山川异域，风月同天</u-button>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主题选择</view>
+				<u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="typeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">尺寸大小</view>
+				<u-subsection :list="['默认', '中等', '迷你']" @change="sizeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">形状</view>
+				<u-subsection :list="['直角', '圆角']" @change="shapeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">镂空</view>
+				<u-subsection :current="1" :list="['是', '否']" @change="plainChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">水波纹(感觉哪里有问题？点击顶部的按钮试试)</view>
+				<u-subsection :current="1" :list="['是', '否']" @change="rippleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">细边框</view>
+				<u-subsection :list="['是', '否']" @change="hairLineChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">加载中</view>
+				<u-subsection :current="1" :list="['是', '否']" @change="loadingChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				hairLine: true,
+				type: 'default',
+				size: 'default',
+				shape: 'square',
+				plain: false,
+				ripple: false,
+				loading: false,
+			}
+		},
+		methods: {
+			typeChange(e) {
+				switch (e) {
+					case 0:
+						this.type = 'default';
+						break;
+					case 1:
+						this.type = 'primary';
+						break;
+					case 2:
+						this.type = 'error';
+						break;
+					case 3:
+						this.type = 'warning';
+						break;
+					case 4:
+						this.type = 'success';
+						break;s
+				}
+			},
+			sizeChange(e) {
+				switch (e) {
+					case 0:
+						this.size = 'default';
+						break;
+					case 1:
+						this.size = 'medium';
+						break;
+					case 2:
+						this.size = 'mini';
+						break;
+				}
+			},
+			shapeChange(e) {
+				this.shape = e == 0 ? 'square' : 'circle';
+			},
+			plainChange(e) {
+				this.plain = e == 0 ? true : false;
+			},
+			rippleChange(e) {
+				this.ripple = e == 0 ? true : false;
+			},
+			hairLineChange(e) {
+				this.hairLine = e == 0 ? true : false;
+			},
+			loadingChange(index) {
+				this.loading = index == 0 ? true : false;
+			},
+			btnClick() {
+				this.$u.toast('按钮被点击')
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.box {
+		padding: 30rpx;
+	}
+
+	.box /deep/ button {
+		margin-bottom: 40rpx;
+	}
+</style>

pages/componentsC/cell/index.vue

@@ -0,0 +1,113 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap" style="padding-left:0;padding-right:0;margin-left: -40rpx;margin-right: -40rpx;">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-cell-group title="读万卷书">
+					<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i ndex="index" @click="click" :hover-class="hoverClass"
+					 :arrow="arrow" :title="title" :icon="icon">
+						<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
+						<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
+					</u-cell-item>
+					<u-cell-item :border-bottom="false" value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
+						<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
+						<u-icon slot="right-icon" size="34" name="calendar"></u-icon>
+						<u-field slot="value"></u-field>
+					</u-cell-item>
+				</u-cell-group>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">更换图标</view>
+				<u-subsection :list="['是', '否']" @change="iconChange"></u-subsection>
+			</view>
+			<!-- 小程序无法动态切换slot -->
+			<!-- #ifndef MP -->
+			<view class="u-config-item">
+				<view class="u-item-title">自定义右侧内容</view>
+				<u-subsection :list="['文字', 'Switch组件', 'Badge组件']" @change="rightSlotChange"></u-subsection>
+			</view>
+			<!-- #endif -->
+			<view class="u-config-item">
+				<view class="u-item-title">描述信息</view>
+				<u-subsection current="1" :list="['是', '否']" @change="lableChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">更换标题</view>
+				<u-subsection :list="['是', '否']" @change="titleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">右侧箭头</view>
+				<u-subsection :list="['是', '否']" @change="arrowChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				icon: 'setting',
+				arrow: true,
+				label: '',
+				title: '青山一道同云雨',
+				rightSlot: true,
+				checked: false,
+			}
+		},
+		computed: {
+			hoverClass() {
+				// 如果右侧是switch步进器组件的话，去掉cell的点击反馈，因为这个时候点击的反馈应该在switch上
+				return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
+			}
+		},
+		methods: {
+			iconChange(index) {
+				this.icon = index == 0 ? 'setting' : 'file-text'
+			},
+			arrowChange(index) {
+				this.arrow = index == 0 ? true : false
+			},
+			lableChange(index) {
+				this.label = index == 0 ? '岂曰无衣，与子同裳' : ''
+			},
+			titleChange(index) {
+				this.title = index == 0 ? '青山一道同云雨' : '明月何曾是两乡'
+			},
+			rightSlotChange(index) {
+				this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
+				if (index == 0) this.arrow = true;
+				else this.arrow = false;
+			},
+			click(index) {
+				// console.log(index);
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.gab {
+		background-color: rgb(245, 245, 245);
+		height: 20rpx;
+	}
+
+	.wrap {
+		height: 100vh;
+		background-color: rgb(241, 241, 241);
+	}
+
+	.box {
+		padding: 30rpx 00rpx;
+		font-size: 28rpx;
+		color: $u-type-info;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+</style>

pages/componentsC/circleProgress/index.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="wrap">
+		<view class="item">
+			<u-circle-progress type="warning" :percent="percent">
+				<view class="u-progress-content">
+					<view class="u-progress-dot"></view>
+					<text class='u-progress-info'>查找中</text>
+				</view>
+			</u-circle-progress>
+			<u-circle-progress type="warning" :width="150" :percent="percent">
+				<view class="u-progress-content">
+					<view class="u-progress-dot"></view>
+					<text class='u-progress-info'>查找中</text>
+				</view>
+			</u-circle-progress>
+		</view>
+		<view class="item">
+			<u-line-progress></u-line-progress>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				percent: 33
+			}
+		},
+		onLoad() {
+			setTimeout(() => {
+				this.percent = 50;
+			}, 1500);
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx;
+	}
+	
+	.u-progress-content {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.u-progress-dot {
+		width: 16rpx;
+		height: 16rpx;
+		border-radius: 50%;
+		background-color: #fb9126;
+	}
+	
+	.u-progress-info {
+		font-size: 28rpx;
+		padding-left: 16rpx;
+		letter-spacing: 2rpx
+	}
+</style>

pages/componentsC/collapse/index.vue

@@ -0,0 +1,142 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap" style="background-color: #ffffff;">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-collapse v-if="key" :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion" @change="change">
+					<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList" :key="index">
+						{{item.body}}
+					</u-collapse-item>
+				</u-collapse>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">手风琴模式</view>
+				<u-subsection :list="['是', '否']" @change="accordionChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">右侧箭头</view>
+				<u-subsection :list="['显示', '隐藏']" @change="arrowChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				itemList: [{
+					head: "赏识在于角度的转换",
+					body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来：闪光的道德、妙异的智慧、优美的人情…… 赏识不是单向的施舍，是智慧与智慧的主动碰撞",
+					show: false,
+				}, {
+					head: "生活中不是缺少美，而是缺少发现美的眼睛",
+					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
+					show: false,
+				}, {
+					head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
+					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美，用它绝对雕不出好的艺术品，总之它被批评为一块不受人赏识的普通石头",
+					show: false,
+				}, {
+					head: "点燃心中的火焰，找回了自信和人生的价值",
+					body: "他随手翻了几页，竟被一篇题名为《童年》的小说所吸引，作者是一个初出茅庐的无名小辈，但屠格涅夫却十分欣赏，钟爱有加",
+					show: false,
+				}, {
+					head: "因为赏识，那块被人不耻的石头变成了雕塑",
+					body: "这个材料反应的就是赏识的问题，赏识是一种理解和信任，包含了肯定与欣赏，也是一种激励和引导，可以使人悔过自新，扬长避短，更健康地成长和进步",
+					show: false,
+				}],
+				accordion: true,
+				arrow: true,
+				hoverClass: 'hover2',
+				itemStyle: {},
+				key: true
+			}
+		},
+		methods: {
+			accordionChange(index) {
+				this.accordion = index == 0 ? true : false;
+			},
+			arrowChange(index) {
+				this.arrow = index == 0 ? true : false;
+				this.changeStatus();
+			},
+			styleChange(index) {
+				if(index == 0) {
+					this.itemStyle = {
+						border: '1px solid rgb(230, 230, 230)',
+						marginTop: '20px',
+						padding: '0 8rpx'
+					}
+				} else {
+					this.itemStyle = {}
+				}
+				this.changeStatus();
+			},
+			change(index) {
+				let str = '';
+				if(Array.isArray(index)) {
+					let arr = index.map(val => {
+						return Number(val) + 1;
+					})
+					index = arr.join(',');
+				} else {
+					index = Number(index) + 1;
+				}
+				this.$refs.uToast.show({
+					title: `点击了第${index}个`,
+					type: 'warning'
+				})
+			},
+			itemChange(e) {
+				console.log(e);
+			},
+			changeStatus() {
+				this.key = false;
+				this.$nextTick(function(){
+					this.key = true;
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.hover1 {
+		background-color: red;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.wrap {
+		// padding: 24rpx;
+	}
+
+	.item {
+		//padding: 0 24rpx;
+	}
+
+	.head {
+		font-size: 30rpx;
+		color: $u-main-color;
+		line-height: 1;
+		padding: 24rpx 24rpx;
+	}
+
+	.body {
+		font-size: 28rpx;
+		color: $u-tips-color;
+		line-height: 1.4;
+		padding: 24rpx;
+	}
+</style>

pages/componentsC/color/index.vue

@@ -0,0 +1,364 @@
+<template>
+	<view class="wrap">
+		<view class="item">
+			<view class="title">
+				主色调
+			</view>
+			<view class="color-box">
+				<view class="color-item" style="background: #2979ff;">
+					<view class="color-title">
+						Primary
+					</view>
+					<view class="color-value">
+						#2979ff
+					</view>
+				</view>
+				<view class="color-item" style="background: #2b85e4;">
+					<view class="color-title">
+						Dark
+					</view>
+					<view class="color-value">
+						#2b85e4
+					</view>
+				</view>
+				<view class="color-item" style="background: #a0cfff;">
+					<view class="color-title">
+						Disabled
+					</view>
+					<view class="color-value">
+						#a0cfff
+					</view>
+				</view>
+				<view class="color-item" style="background: #ecf5ff;color: #909399;">
+					<view class="color-title">
+						Light
+					</view>
+					<view class="color-value">
+						#ecf5ff
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				Error
+			</view>
+			<view class="color-box">
+				<view class="color-item" style="background: #fa3534;">
+					<view class="color-title">
+						Error
+					</view>
+					<view class="color-value">
+						#fa3534
+					</view>
+				</view>
+				<view class="color-item" style="background: #dd6161;">
+					<view class="color-title">
+						Dark
+					</view>
+					<view class="color-value">
+						#dd6161
+					</view>
+				</view>
+				<view class="color-item" style="background: #fab6b6;">
+					<view class="color-title">
+						Disabled
+					</view>
+					<view class="color-value">
+						#fab6b6
+					</view>
+				</view>
+				<view class="color-item" style="background: #fef0f0;color: #909399;">
+					<view class="color-title">
+						Light
+					</view>
+					<view class="color-value">
+						#fef0f0
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				Warning
+			</view>
+			<view class="color-box">
+				<view class="color-item" style="background: #ff9900;">
+					<view class="color-title">
+						Warning
+					</view>
+					<view class="color-value">
+						#ff9900
+					</view>
+				</view>
+				<view class="color-item" style="background: #f29100;">
+					<view class="color-title">
+						Dark
+					</view>
+					<view class="color-value">
+						#f29100
+					</view>
+				</view>
+				<view class="color-item" style="background: #fcbd71;">
+					<view class="color-title">
+						Disabled
+					</view>
+					<view class="color-value">
+						#fcbd71
+					</view>
+				</view>
+				<view class="color-item" style="background: #fdf6ec;color: #909399;">
+					<view class="color-title">
+						Light
+					</view>
+					<view class="color-value">
+						#fdf6ec
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				Info
+			</view>
+			<view class="color-box">
+				<view class="color-item" style="background: #909399;">
+					<view class="color-title">
+						Info
+					</view>
+					<view class="color-value">
+						#909399
+					</view>
+				</view>
+				<view class="color-item" style="background: #82848a;">
+					<view class="color-title">
+						Dark
+					</view>
+					<view class="color-value">
+						#82848a
+					</view>
+				</view>
+				<view class="color-item" style="background: #c8c9cc;">
+					<view class="color-title">
+						Disabled
+					</view>
+					<view class="color-value">
+						#c8c9cc
+					</view>
+				</view>
+				<view class="color-item" style="background: #f4f4f5;color: #909399;">
+					<view class="color-title">
+						Light
+					</view>
+					<view class="color-value">
+						#f4f4f5
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				Success
+			</view>
+			<view class="color-box">
+				<view class="color-item" style="background: #19be6b;">
+					<view class="color-title">
+						Success
+					</view>
+					<view class="color-value">
+						#19be6b
+					</view>
+				</view>
+				<view class="color-item" style="background: #18b566;">
+					<view class="color-title">
+						Dark
+					</view>
+					<view class="color-value">
+						#18b566
+					</view>
+				</view>
+				<view class="color-item" style="background: #71d5a1;">
+					<view class="color-title">
+						Disabled
+					</view>
+					<view class="color-value">
+						#71d5a1
+					</view>
+				</view>
+				<view class="color-item" style="background: #dbf1e1;color: #909399;">
+					<view class="color-title">
+						Light
+					</view>
+					<view class="color-value">
+						#dbf1e1
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				文字颜色
+			</view>
+			<view class="color-box">
+				<view class="color-item" style="background: #303133;">
+					<view class="color-title">
+						主要文字
+					</view>
+					<view class="color-value">
+						#303133
+					</view>
+				</view>
+				<view class="color-item" style="background: #606266;">
+					<view class="color-title">
+						常规文字
+					</view>
+					<view class="color-value">
+						#606266
+					</view>
+				</view>
+				<view class="color-item" style="background: #909399;">
+					<view class="color-title">
+						次要文字
+					</view>
+					<view class="color-value">
+						#909399
+					</view>
+				</view>
+				<view class="color-item" style="background: #c0c4cc;">
+					<view class="color-title">
+						占位文字
+					</view>
+					<view class="color-value">
+						#c0c4cc
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">                                                                                                          
+				边框颜色
+			</view>
+			<view class="color-box">
+				<view class="color-item" style="background: #dcdfe6;color: #909399;">
+					<view class="color-title">
+						一级边框
+					</view>
+					<view class="color-value">
+						#dcdfe6
+					</view>
+				</view>
+				<view class="color-item" style="background: #e4e7ed;color: #909399;">
+					<view class="color-title">
+						二级边框
+					</view>
+					<view class="color-value">
+						#e4e7ed
+					</view>
+				</view>
+				<view class="color-item" style="background: #ebeef5;color: #909399;">
+					<view class="color-title">
+						三级边框
+					</view>
+					<view class="color-value">
+						#ebeef5
+					</view>
+				</view>
+				<view class="color-item" style="background: #f2f6fc;color: #909399;">
+					<view class="color-title">
+						四级边框
+					</view>
+					<view class="color-value">
+						#f2f6fc
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="item">
+			<view class="title">
+				背景颜色
+			</view>
+			<view class="color-box">
+				<view class="color-item" style="background: #f3f4f6;color: #909399;">
+					<view class="color-title">
+						背景颜色
+					</view>
+					<view class="color-value">
+						#f3f4f6
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		onLoad() {
+			getApp().globalData.username = 'test12';
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 18rpx;
+	}
+	
+	.item {
+		margin: 30rpx 0;
+		margin-top: 44rpx;
+		
+		&:first-child {
+			margin-top: 0;
+		}
+		
+		&:last-child {
+			margin-bottom: 0;
+		}
+		
+		.title {
+			font-size: 30rpx;
+			position: relative;
+			line-height: 1;
+			padding-left: 22rpx;
+			
+			&:before {
+				width: 4px;
+				height: 15px;
+				border-radius: 100rpx;
+				background-color: $u-content-color;
+				content: '';
+				position: absolute;
+				left: 6rpx;
+				top: -1px;
+			}
+		}
+		
+		.color-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			color: #fff;
+			text-align: center;
+			margin-top: 20rpx;
+			
+			.color-item {
+				display: flex;
+				flex: 1;
+				margin: 0 8rpx;
+				flex-direction: column;
+				border-radius: 6rpx;
+				padding: 12rpx 0;
+			}
+			
+			
+			.color-title {
+				font-size: 28rpx;
+			}
+			
+			.color-value {
+				font-size: 24rpx;
+			}
+		}
+	}
+</style>

pages/componentsC/countDown/index.vue

@@ -0,0 +1,100 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-count-down class="count-down-demo"  :timestamp="timestamp" :separator="separator" :showBorder="showBorder"
+				:separator-color="separatorColor" :showDays="showDays" :fontSize="fontSize" @change="change" ref="uCountDown"
+				:border-color="borderColor" :color="color" @end="end" bg-color="rgb(250, 250, 250)"></u-count-down>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">调整时间</view>
+				<u-subsection :list="['60', '86400', '983272']" @change="timestampChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">分隔符</view>
+				<u-subsection :list="['英文冒号', '中文名称']" @change="separatorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示天</view>
+				<u-subsection current="1" :list="['是', '否']" @change="showDaysChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">字体大小</view>
+				<u-subsection current="1" :list="['26', '30', '34']" @change="fontSizeChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			timestamp: 60,
+			separator: 'colon',
+			showBorder: false,
+			borderColor: '#303133',
+			color: '#303133',
+			showDays: false,
+			fontSize: 30,
+			separatorColor: '#303133',
+		};
+	},
+	methods: {
+		timestampChange(index) {
+			this.timestamp = index == 0 ? 60 : index == 1 ? 86400 : 983272;
+		},
+		separatorChange(index) {
+			this.separator = index == 0 ? 'colon' : 'zh';
+		},
+		styleChange(index) {
+			if(index == 0) {
+				this.showBorder = true;
+				this.borderColor = this.$u.color['primary'];
+				this.color = this.$u.color['primary'];
+				this.separatorColor = this.$u.color['primary'];
+			} else {
+				this.showBorder = false;
+				this.borderColor = '#303133';
+				this.color = '#303133';
+				this.separatorColor = '#303133';
+			}
+		},
+		showDaysChange(index) {
+			this.showDays = index == 0 ? true : false;
+		},
+		fontSizeChange(index) {
+			this.fontSize = index == 0 ? 26 : index == 1 ? 30 : 34;
+		},
+		end() {
+			this.$refs.uToast.show({
+				title: '倒计时结束',
+				type: 'warning'
+			})
+		},
+		change(timestamp) {
+			// console.log(timestamp);
+		},
+		getSeconds() {
+			// console.log(this.$refs.uCountDown.seconds);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.count-down-demo {
+	justify-content: center;
+}
+</style>

pages/componentsC/countTo/index.vue

@@ -0,0 +1,132 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<view class="u-no-demo-here">如果使用text-align: center对齐，数字滚动期间可能会抖动，见文档说明</view>
+				<view class="count-to-demo">
+					<u-count-to
+						class="count-to"
+						:useEasing="useEasing"
+						ref="uCountTo"
+						:autoplay="autoplay"
+						:startVal="startVal"
+						:endVal="endVal"
+						:duration="duration"
+						:decimals="decimals"
+						:bold="bold"
+						@end="end"
+					></u-count-to>
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="current" :list="['启动', '暂停', '继续', '重置']" @change="statusChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">目标值</view>
+				<u-subsection :list="[608, 5604, 45617]" @change="endValChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">滚动时间</view>
+				<u-subsection current="1" :list="[1000, 2000, 3000]" @change="durationChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">显示小数</view>
+				<u-subsection current="1" :list="['是', '否']" @change="decimalsChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">字体加粗</view>
+				<u-subsection current="1" :list="['是', '否']" @change="boldChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			startVal: 0,
+			endVal: 608,
+			separator: ',',
+			decimals: 0,
+			duration: 2000,
+			autoplay: false,
+			useEasing: true,
+			current: 3,
+			isStop: false, // 如果开没启动前，不允许点击状态选项的"继续"按钮，否则会导致显示NaN
+			bold: false
+		};
+	},
+	methods: {
+		endValChange(index) {
+			this.endVal = index == 0 ? 608 : index == 1 ? 5604 : 45617;
+			this.reset();
+			this.start();
+		},
+		durationChange(index) {
+			this.duration = index == 0 ? 1000 : index == 1 ? 2000 : 3000;
+		},
+		boldChange(index) {
+			this.bold = !!!index;
+		},
+		decimalsChange(index) {
+			this.decimals = index == 0 ? 2 : 0;
+		},
+		statusChange(index) {
+			this.current = index;
+			if (index == 0) {
+				this.start();
+			} else if (index == 1) {
+				this.stop();
+			} else if (index == 2) {
+				this.resume();
+			} else {
+				this.reset();
+			}
+		},
+		end() {
+			this.current = 3;
+			this.$refs.uToast.show({
+				type: 'warning',
+				title: '滚动结束'
+			});
+		},
+		start() {
+			this.current = 0;
+			this.isStop = true;
+			this.$refs.uCountTo.start();
+		},
+		stop() {
+			this.$refs.uCountTo.stop();
+		},
+		resume() {
+			if (!this.isStop) {
+				this.$refs.uToast.show({
+					type: 'error',
+					title: '请开始并暂停后才能继续'
+				});
+				this.$nextTick(() => {
+					this.current = 3;
+				});
+				return;
+			}
+			this.$refs.uCountTo.resume();
+		},
+		reset() {
+			this.$refs.uCountTo.reset();
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.count-to-demo {
+	text-align: center;
+}
+</style>

pages/componentsC/gap/index.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Desc: ---   ----
+ * @Date: 2020-04-22 12:29:21
+ * @LastEditors: 王
+ * @LastEditTime: 2020-04-22 18:33:28
+ -->
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">参数配置</view>
+			<view class="u-config-item">
+				<view class="u-item-title">背景颜色</view>
+				<u-subsection :list="['default', 'primary', 'error', 'warning', 'success']" @change="bgColorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">高度</view>
+				<u-subsection :list="['30', '50', '70']" @change="heightChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">上下外边距</view>
+				<u-subsection :list="['30', '50', '70']" @change="marginChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			height: 30,
+			bgColor: this.$u.color.bgColor,
+			marginTop: 30,
+			marginBottom: 30
+		};
+	},
+	methods: {
+		bgColorChange(index) {
+			let color = index == 0 ? 'default' : index == 1 ? 'primary' : index == 2 ? 'error' : index == 3 ? 'warning' : 'success';
+			this.bgColor = color == 'default' ? this.$u.color['bgColor'] : this.$u.color[color];
+		},
+		heightChange(index) {
+			this.height = index == 0 ? 30 : index == 1 ? 50 : 70;
+		},
+		marginChange(index) {
+			this.marginTop = ['30', '50', '70'][index];
+			this.marginBottom = this.marginTop;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+	padding: 24rpx;
+}
+</style>

pages/componentsC/grid/index.vue

@@ -0,0 +1,180 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-grid :col="col" @click="click" v-if="!isSwiper" :border="border">
+					<u-grid-item name="item1" :index="0" @click="itemClick">
+						<u-badge count="9" :offset="[col == 3 ? 20 : 14, col == 3 ? 30 : 20]"></u-badge>
+						<u-icon name="photo" :size="46"></u-icon>
+						<view class="grid-text">图片</view>
+					</u-grid-item>
+					<u-grid-item :index="1">
+						<u-icon name="lock" :size="46"></u-icon>
+						<view class="grid-text">锁头</view>
+					</u-grid-item>
+					<u-grid-item :index="2">
+						<image src="https://cdn.uviewui.com/uview/grid/hot5.png" :style="{
+							top: col == 3 ? '14rpx' : '8rpx',
+							right: col == 3 ? '40rpx' : '28rpx'
+						}" style="width: 34rpx;height: 34rpx;" class="badge-icon" mode="widthFix"></image>
+						<u-icon name="hourglass" :size="46"></u-icon>
+						<view class="grid-text">沙漏</view>
+					</u-grid-item>
+					<u-grid-item :index="3">
+						<u-icon name="home" :size="46"></u-icon>
+						<view class="grid-text">首页</view>
+					</u-grid-item>
+					<u-grid-item :index="4">
+						<u-icon name="star" :size="46"></u-icon>
+						<view class="grid-text">星星</view>
+					</u-grid-item>
+					<u-grid-item :index="5">
+						<u-icon name="volume-up" :size="46"></u-icon>
+						<view class="grid-text">音量</view>
+					</u-grid-item>
+					<u-grid-item :index="6">
+						<image src="https://cdn.uviewui.com/uview/grid/hot6.png" style="width: 44rpx;height: 44rpx;top:0;right:0;" class="badge-icon"></image>
+						<u-icon name="trash" :size="46"></u-icon>
+						<view class="grid-text">回收站</view>
+					</u-grid-item>
+					<u-grid-item :index="7">
+						<u-icon name="rewind-right" :size="46"></u-icon>
+						<view class="grid-text">快进</view>
+					</u-grid-item>
+					<u-grid-item :index="8">
+						<u-icon name="shopping-cart" :size="46"></u-icon>
+						<view class="grid-text">购物车</view>
+					</u-grid-item>
+				</u-grid>
+				<swiper class="swiper" v-else @change="change">
+					<swiper-item>
+						<u-grid :border="border" :col="col" @click="click" hover-class="hover-class">
+							<u-grid-item v-for="(item, index) in list" :index="index" :key="index">
+								<u-icon :name="item" :size="46"></u-icon>
+								<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
+							</u-grid-item>
+						</u-grid>
+					</swiper-item>
+					<swiper-item>
+						<u-grid :border="border" :col="col" @click="click">
+							<u-grid-item v-for="(item, index) in list" :index="index + 9" :key="index">
+								<u-icon :name="item" :size="46"></u-icon>
+								<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
+							</u-grid-item>
+						</u-grid>
+					</swiper-item>
+					<swiper-item>
+						<u-grid :border="border" :col="col" @click="click">
+							<u-grid-item v-for="(item, index) in list" :index="index + 18" :key="index">
+								<u-icon :name="item" :size="46"></u-icon>
+								<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
+							</u-grid-item>
+						</u-grid>
+					</swiper-item>
+				</swiper>
+				<view class="indicator-dots" v-if="isSwiper">
+					<view class="indicator-dots-item" :class="[current == 0 ? 'indicator-dots-active' : '']">
+					</view>
+					<view class="indicator-dots-item" :class="[current == 1 ? 'indicator-dots-active' : '']">
+					</view>
+					<view class="indicator-dots-item" :class="[current == 2 ? 'indicator-dots-active' : '']">
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否显示边框</view>
+				<u-subsection :list="['是', '否']" @change="borderChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否可滑动</view>
+				<u-subsection current="1" :list="['是', '否']" @change="isSwiperChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">修改列数</view>
+				<u-subsection :list="['3', '4']" @change="colChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
+				isSwiper: false,
+				current: 0,
+				border: true,
+				col: 3
+			};
+		},
+		methods: {
+			isSwiperChange(index) {
+				this.isSwiper = index == 0 ? true : false;
+			},
+			borderChange(index) {
+				this.border = index == 0 ? true : false;
+			},
+			colChange(index) {
+				this.col = index == 0 ? 3 : 4;
+			},
+			click(index) {
+				this.$refs.uToast.show({
+					title: `点击了第${index + 1}宫格`,
+					type: 'warning'
+				})
+			},
+			change(e) {
+				this.current = e.detail.current;
+			},
+			// 针对单个grid-item的事件
+			itemClick(index) {
+				// console.log(index);
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+.grid-text {
+	font-size: 28rpx;
+	margin-top: 4rpx;
+	color: $u-type-info;
+}
+
+.badge-icon {
+	position: absolute;
+	width: 40rpx;
+	height: 40rpx;
+}
+
+.swiper {
+	height: 480rpx;
+}
+
+.indicator-dots {
+	margin-top: 40rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.indicator-dots-item {
+	background-color: $u-tips-color;
+	height: 6px;
+	width: 6px;
+	border-radius: 10px;
+	margin: 0 3px;
+}
+
+.indicator-dots-active {
+	background-color: $u-type-primary;
+}
+</style>

pages/componentsC/layout/index.vue

@@ -0,0 +1,145 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-row :justify="justify" @click="rowClick">
+					<u-col :span="span" :offset="offset" @click="click" stop>
+						<view class="demo-layout bg-purple-dark">
+
+						</view>
+					</u-col>
+					<u-col :span="span" :offset="offset">
+						<view class="demo-layout bg-purple-dark">
+
+						</view>
+					</u-col>
+					<u-col :span="span" :offset="offset">
+						<view class="demo-layout bg-purple-dark">
+
+						</view>
+					</u-col>
+				</u-row>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">每个栅格占用栏数(演示共3个栅格)</view>
+				<u-subsection :current="2" :list="[1, 2, 3, 4]" @change="spanChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">分栏偏移</view>
+				<u-subsection :list="[0, 1, 2, 3]" @change="offsetChange"></u-subsection>
+			</view>
+			<!-- #ifndef MP -->
+			<view class="u-config-item">
+				<view class="u-item-title">水平排列方式(微信小程序无效)</view>
+				<u-subsection :list="['start', 'end', 'around', 'between']" @change="justifyChange"></u-subsection>
+			</view>
+			<!-- #endif -->
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				span: 3,
+				offset: 0,
+				justify: 'start'
+			}
+		},
+		methods: {
+			click() {
+				console.log('col click');
+			},
+			rowClick() {
+				console.log('row click');
+			},
+			spanChange(e) {
+				switch (e) {
+					case 0:
+						this.span = 1;
+						break;
+					case 1:
+						this.span = 2;
+						break;
+					case 2:
+						this.span = 3;
+						break;
+					case 3:
+						this.span = 4;
+						break;
+					case 4:
+						this.span = 5;
+						break;
+				}
+			},
+			offsetChange(e) {
+				switch (e) {
+					case 0:
+						this.offset = 0;
+						break;
+					case 1:
+						this.offset = 1;
+						break;
+					case 2:
+						this.offset = 2;
+						break;
+					case 3:
+						this.offset = 3;
+						break;
+				}
+			},
+			justifyChange(e) {
+				switch (e) {
+					case 0:
+						this.justify = 'start';
+						break;
+					case 1:
+						this.justify = 'end';
+						break;
+					case 2:
+						this.justify = 'around';
+						break;
+					case 3:
+						this.justify = 'between';
+						break;
+				}
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.demo-layout {
+		height: 70rpx;
+		border-radius: 8rpx;
+		margin: 20rpx 0;
+	}
+
+	.bg-purple {
+		background: #d3dce6;
+	}
+
+	.bg-purple-light {
+		background: #e5e9f2;
+	}
+
+	.bg-purple-dark {
+		background: #99a9bf;
+	}
+
+	// H5中，电脑端文档演示时，可能会导致演示块挤出边界，特别处理。
+	// 真实使用环境不会产生此问题
+	/* #ifdef H5 */
+	.u-demo-area /deep/ .u-row {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	/* #endif */
+</style>

pages/componentsC/link/index.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-link :color="color" :font-size="fontSize" :under-line="underLine" :href="href">点此链接，跳转uView官网</u-link>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">下划线</view>
+				<u-subsection :list="['显示', '隐藏']" @change="underLineChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				href: 'https://www.uviewui.com',
+				underLine: true,
+				fontSize: 28,
+				color: '#2979ff'
+			}
+		},
+		methods: {
+			underLineChange(index) {
+				this.underLine = index == 0 ? true : false;
+			},
+			styleChange(index) {
+				if(index == 0) {
+					this.color = this.$u.color['tipsColor'];
+					this.fontSize = 34;
+				} else {
+					this.color = this.$u.color['primary'];
+					this.fontSize = 28;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsC/loadmore/index.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast" />
+				<u-loadmore :status="status" :loadText="loadText"
+				:icon-type="iconType" :is-dot="isDot" @loadmore="loadmore"/>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择</view>
+				<u-subsection :current="current" :list="['加载前', '加载中', '加载后', '没有更多']" @change="statusChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义提示语</view>
+				<u-subsection current="1" :list="['是', '否']" @change="loadTextChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">加载中图标样式</view>
+				<u-subsection :list="['circle', 'flower']" @change="styleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">没有更多时用点替代</view>
+				<u-subsection current="1" :list="['是', '否']" @change="isDotChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				status: 'loadmore',
+				iconType: 'circle',
+				isDot: false,
+				loadText: {
+					loadmore: '点击或上拉加载更多',
+					loading: '正在加载...',
+					nomore: '没有更多了'
+				},
+				current: 0
+			}
+		},
+		onReachBottom() {
+			// 在此请求下一页
+		},
+		methods: {
+			statusChange(index) {
+				this.current = index;
+				this.status = index == 0 ? 'loadmore' : index == 1 ? 'loading' : index == 2 ? 'loadmore' : 'nomore';
+			},
+			loadTextChange(index) {
+				if(index == 0) {
+					this.loadText = {
+						loadmore: '用力往上拉',
+						loading: '正在加载，请喝杯茶...',
+						nomore: '我也是有底线的'
+					}
+				} else {
+					this.loadText = {
+						loadmore: '点击或上拉加载更多',
+						loading: '正在加载...',
+						nomore: '没有更多了'
+					}
+				}
+			},
+			styleChange(index) {
+				this.current = 1;
+				this.statusChange(1);
+				this.iconType = index == 0 ? 'circle' : 'flower';
+			},
+			isDotChange(index) {
+				this.current = 3;
+				this.statusChange(3);
+				this.isDot = index == 0 ? true : false;
+			},
+			// 点击组件，触发加载更多事件(status为'loadmore'状态下才触发)
+			loadmore() {
+				this.$refs.uToast.show({
+					title: '点击触发加载更多',
+					type: 'success'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsC/mask/index.vue

@@ -0,0 +1,89 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<view class="u-no-demo-here">
+					请点击弹出遮罩查看效果
+				</view>
+				<u-mask :show="show" @click="show = false" :zoom="zoom" :duration="duration">
+					<view class="warp" v-if="content">
+						<view class="rect" @tap.stop></view>
+					</view>
+				</u-mask>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="current" :list="['显示', '隐藏']" @change="showChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">缩放效果</view>
+				<u-subsection :list="['是', '否']" @change="zoomChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">内容填充</view>
+				<u-subsection current="1" :list="['是', '否']" @change="contentChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">动画时长(ms)</view>
+				<u-subsection current="1" :list="['100', '300', '800']" @change="durationChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				zoom: true,
+				duration: 300,
+				content: false,
+			}
+		},
+		computed: {
+			current() {
+				return this.show ? 0 : 1;
+			}
+		},
+		methods: {
+			showChange(index) {
+				this.show = index == 0 ? true : false;
+			},
+			zoomChange(index) {
+				this.zoom = index == 0 ? true : false;
+				this.show = true;
+			},
+			durationChange(index) {
+				this.duration = index == 0 ? 100 : index == 1 ? 300 : 800;
+				this.show = true;
+			},
+			contentChange(index) {
+				this.content = index == 0 ? true : false;
+				this.show = true;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.warp {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.rect {
+		width: 120px;
+		height: 120px;
+		background-color: #fff;
+	}
+</style>

pages/componentsC/messageInput/index.vue

@@ -0,0 +1,97 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-message-input :mode="mode" :maxlength="maxlength" :value="value"
+				:breathe="breathe" :bold="bold" @finish="finish" :dot-fill="dotFill"></u-message-input>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择</view>
+				<u-subsection :list="['方框', '下划线', '中划线']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">输入长度</view>
+				<u-subsection :list="[4, 5, 6]" @change="maxLengthChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<!-- #ifdef MP-WEIXIN -->
+				<view class="u-item-title">初始值(为满足演示需要，微信小程序切换会有抖动，非性能问题)</view>
+				<!-- #endif -->
+				<!-- #ifndef MP-WEIXIN -->
+				<view class="u-item-title">初始值</view>
+				<!-- #endif -->
+				<u-subsection :list="['空', '23', '678']" @change="valueChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">呼吸灯效果</view>
+				<u-subsection :list="['是', '否']" @change="breatheChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否加粗</view>
+				<u-subsection :list="['是', '否']" @change="boldChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">点替代输入值</view>
+				<u-subsection current="1" :list="['是', '否']" @change="dotFillChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				mode: 'box',
+				maxlength: 4,
+				value: '', 
+				bold: true,
+				breathe: true,
+				dotFill: false,
+			}
+		},
+		computed: {
+
+		},
+		onLoad() {
+
+		},
+		methods: {
+			modeChange(index) {
+				this.mode = index == 0 ? 'box' : index == 1 ? 'bottomLine' : 'middleLine';
+			},
+			maxLengthChange(index) {
+				this.maxlength = index == 0 ? 4 : index == 1 ? 5 : 6;
+			},
+			valueChange(index) {
+				this.value = index == 0 ? '' : index == 1 ? '23' : '678';
+			},
+			breatheChange(index) {
+				this.breathe = index == 0 ? true : false;
+			},
+			boldChange(index) {
+				this.bold = index == 0 ? true : false;
+			},
+			dotFillChange(index) {
+				this.dotFill = index == 0 ? true : false;
+			},
+			finish(value) {
+				this.$refs.uToast.show({
+					title: '输入完成，值为：' + value,
+					type: 'success'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsC/numberBox/index.vue

@@ -0,0 +1,77 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-number-box v-model="value" :bg-color="bgColor" :color="color" :min="0"
+				:step="step" :disabled="disabled" @change="change" @focus="focus"></u-number-box>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">初始值</view>
+				<u-subsection :list="[1, 5, 18]" @change="valueChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否禁用</view>
+				<u-subsection current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">步进值</view>
+				<u-subsection :list="[1, 3, 5, 8]" @change="stepChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			value: 1,
+			bgColor: "#F2F3F5",
+			color: '#323233',
+			disabled: false,
+			step: 1,
+			
+		};
+	},
+	methods: {
+		valueChange(index) {
+			this.value = index == 0 ? 1 : index == 1 ? 5 : 18;
+		},
+		styleChange(index) {
+			if(index == 0) {
+				this.bgColor = '#ff6d00';
+				this.color = '#fff';
+			} else {
+				this.bgColor = "#F2F3F5";
+				this.color = '#323233';
+			}
+		},
+		disabledChange(index) {
+			this.disabled = index == 0 ? true : false;
+		},
+		stepChange(index) {
+			this.step = index == 0 ? 1 : index == 1 ? 3 : index == 2 ? 5 : 8;
+		},
+		change(e) {
+			//console.log(e.value);
+		},
+		focus() {
+			console.log('focus');
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.u-demo {}
+</style>

pages/componentsC/popup/index.vue

@@ -0,0 +1,103 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-toast ref="uToast"></u-toast>
+				<u-button @click="btnClick">唤起弹窗</u-button>
+				<u-popup border-radius="10" v-model="show" 
+					@close="close" @open="open" :mode="mode" 
+					length="50%" :mask="mask"
+					:closeable="closeable"
+					:close-icon-pos="closeIconPos"
+				>
+					<view v-if="mode == 'center'" style="height: 400rpx">
+						<view class="close-btn">
+							<u-button @click="show = false;" size="medium">关闭弹窗</u-button>
+						</view>
+					</view>
+					<view class="close-btn" v-if="mode != 'center'">
+						<u-button size="medium" @click="show = false;">关闭弹窗</u-button>
+					</view>
+				</u-popup>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">状态</view>
+				<u-subsection :current="show == false ? 1 : 0" :list="['打开', '关闭']" @change="showChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">弹出方向</view>
+				<u-subsection :current="2" :list="['上', '下', '左', '右', '中']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">关闭按钮</view>
+				<u-subsection :list="['显示', '隐藏']" @change="closeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">关闭按钮位置</view>
+				<u-subsection :current="1" :list="['左上角', '右上角', '左下角', '右下角']" @change="closePosChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				mode: 'left',
+				mask: true, // 是否显示遮罩
+				closeable: true,
+				closeIconPos: 'top-right'
+			}
+		},
+		watch: {
+			show(n) {
+				// console.log(n);
+			}
+		},
+		methods: {
+			modeChange(index) {
+				this.mode = index == 0 ? 'top' : index == 1 ? 'bottom' : index == 2 ? 'left' : index == 3 ? 'right' : 'center';
+				this.show = true;
+			},
+			showChange(index) {
+				this.show = index == 0 ? true : false;
+			},
+			closeChange(index) {
+				this.closeable = !index;
+			},
+			closePosChange(index) {
+				this.closeIconPos = ['top-left', 'top-right', 'bottom-left', 'bottom-right'][index];
+			},
+			close() {
+				// console.log('close');
+			},
+			open() {
+				// console.log('open');
+			},
+			btnClick() {
+				this.show = true;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap {
+		padding: 24rpx;
+	}
+	
+	.close-btn {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

pages/componentsC/progress/index.vue

@@ -0,0 +1,102 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-line-progress v-if="mode == 'line'" :percent="percent" :active-color="activeColor" 
+				:striped="striped" :stripedActive="stripedActive"></u-line-progress>
+				<u-circle-progress v-else :percent="percent" :active-color="activeColor" 
+				bg-color="rgb(250, 250, 250)">
+					<view class="u-progress-content">
+						<view class="u-progress-dot"></view>
+						<text class='u-progress-info'>查找中</text>
+					</view>
+				</u-circle-progress>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择</view>
+				<u-subsection :current="current" :list="['线型', '圆型']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">增减</view>
+				<u-subsection :list="['减少30%', '增加30%']" @change="calcChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">自定义样式(线型时有效)</view>
+				<u-subsection current="1" :list="['是', '否']" @change="styleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">动态条纹(线型时有效)</view>
+				<u-subsection current="1" :list="['是', '否']" @change="stripedChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				percent: 50,
+				mode: 'line',
+				activeColor: '#19be6b',
+				striped: false,
+				stripedActive: false,
+				current: 0,
+			}
+		},
+		methods: {
+			modeChange(index) {
+				this.current = index;
+				this.mode = index == 0 ? 'line' : 'circle';
+			},
+			calcChange(index) {
+				this.percent = index == 0 ? (this.percent - 30) : (this.percent + 30);
+				if(this.percent > 100) this.percent = 100;
+				if(this.percent < 0) this.percent = 0;
+			},
+			styleChange(index) {
+				this.activeColor = index == 0 ? this.$u.color['error'] : '#19be6b';
+				if(index == 0) {
+					this.mode = 'line';
+					this.current = 0;
+				}
+			},
+			stripedChange(index) {
+				this.striped = index == 0 ? true : false;
+				this.stripedActive = this.striped;
+				if(index == 0) {
+					this.mode = 'line';
+					this.current = 0;
+				}
+			},
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-progress-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.u-progress-dot {
+		width: 16rpx;
+		height: 16rpx;
+		border-radius: 50%;
+		background-color: #fb9126;
+	}
+	
+	.u-progress-info {
+		font-size: 28rpx;
+		padding-left: 16rpx;
+		letter-spacing: 2rpx
+	}
+</style>

pages/componentsC/section/index.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-section :title="title" :right="right" :bold="bold" :color="color" :show-line="showLine"></u-section>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">更换主标题</view>
+				<u-subsection :current="1" :list="['是', '否']" @change="titleChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">竖条状态</view>
+				<u-subsection :list="['显示', '隐藏']" @change="showLineChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">是否显示右边部分</view>
+				<u-subsection :list="['是', '否']" @change="rightChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主标题粗体</view>
+				<u-subsection :list="['是', '否']" @change="boldChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主标题颜色</view>
+				<u-subsection :list="['默认', '自定义']" @change="colorChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '红豆生南国',
+				bold: true,
+				right: true,
+				color: this.$u.color['mainColor'],
+				showLine: true
+			}
+		},
+		methods: {
+			titleChange(index) {
+				if(index == 0) this.title = '春来发几枝';
+				else  this.title = '红豆生南国';
+			},
+			rightChange(index) {
+				this.right = index == 0 ? true : false;
+			},
+			boldChange(index) {
+				this.bold = index == 0 ? true : false;
+			},
+			colorChange(index) {
+				this.color = index == 0 ? this.$u.color['mainColor'] : this.$u.color['primary'];
+			},
+			showLineChange(index) {
+				this.showLine = !index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsC/subsection/index.vue

@@ -0,0 +1,88 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<u-subsection v-if="change" :bold="bold" :active-color="activeColor" :current="current" :mode="mode" :list="['代付款', '待收货', '待评价']"></u-subsection>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">模式选择(为满足演示需要，切换会有抖动，非性能问题)</view>
+				<u-subsection mode="button" :list="['button', 'subsection']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">Current值</view>
+				<u-subsection mode="button" :list="[0, 1, 2]" @change="currentChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">活动选项字颜色</view>
+				<u-subsection mode="button" :list="['primary', 'success', 'error', 'warning']" @change="colorChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">字体加粗</view>
+				<u-subsection mode="button" :list="['是', '否']" @change="boldChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				mode: 'button',
+				current: 0,
+				activeColor: this.$u.color['warning'],
+				bold: true,
+				change: true,
+			}
+		},
+		methods: {
+			modeChange(e) {
+				switch(e) {
+					case 0:
+						this.mode = 'button';break;
+					case 1:
+						this.mode = 'subsection';break;
+				}
+				this.change = false;
+				this.$nextTick(() => {
+					this.change = true;
+				})
+			},
+			currentChange(e) {
+				this.current = e;
+			},
+			colorChange(e) {
+				let color = 'primary';
+				switch(e) {
+					case 0:
+						color = 'primary';break;
+					case 1:
+						color = 'success';break;
+					case 2:
+						color = 'error';break;
+					case 3:
+						color = 'warning';break;
+				}
+				this.activeColor = this.$u.color[color];
+			},
+			boldChange(e) {
+				switch(e) {
+					case 0:
+						this.bold = true;break;
+					case 1:
+						this.bold = false;break;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/componentsC/test/index.vue

@@ -0,0 +1,3 @@
+<template>
+	<view></view>
+</template>

pages/example/components.config.js

@@ -0,0 +1,389 @@
+
+export default [{
+		groupName: '基础组件',
+		groupName_en: 'Basic components',
+		list: [{
+			path: '/pages/componentsC/color/index',
+			icon: 'color',
+			title: 'Color 色彩',
+			title_en: 'Color',
+		}, {
+			path: '/pages/componentsA/icon/index',
+			icon: 'icon',
+			title: 'Icon 图标',
+			title_en: 'Icon',
+		},{
+			path: '/pages/componentsB/image/index',
+			icon: 'image',
+			title: 'Image 图片',
+			title_en: 'Image',
+		}, {
+			path: '/pages/componentsC/button/index',
+			icon: 'button',
+			title: 'Button 按钮',
+			title_en: 'Button',
+		}, {
+			path: '/pages/componentsC/layout/index',
+			icon: 'layout',
+			title: 'Layout 布局',
+			title_en: 'Layout',
+		}, {
+			path: '/pages/componentsC/cell/index',
+			icon: 'cell',
+			title: 'Cell 单元格',
+			title_en: 'Cell',
+		}, {
+			path: '/pages/componentsC/badge/index',
+			icon: 'badge',
+			title: 'Badge 徽标数',
+			title_en: 'Badge',
+		}, {
+			path: '/pages/componentsA/tag/index',
+			icon: 'tag',
+			title: 'Tag 标签',
+			title_en: 'Tag',
+		}]
+	},
+	{
+		groupName: '表单组件',
+		groupName_en: 'Form components',
+		list: [{
+			path: '/pages/componentsA/form/index',
+			icon: 'form',
+			title: 'Form 表单',
+			title_en: 'Form',
+		}, {
+			path: '/pages/componentsA/calendar/index',
+			icon: 'calendar',
+			title: 'Calendar 日历',
+			title_en: 'Calendar',
+		}, {
+			path: '/pages/componentsA/select/index',
+			icon: 'select',
+			title: 'Select 列选择器',
+			title_en: 'Select',
+		}, {
+			path: '/pages/componentsA/keyboard/index',
+			icon: 'keyboard',
+			title: 'Keyboard 键盘',
+			title_en: 'Keyboard',
+		}, {
+			path: '/pages/componentsB/picker/index',
+			icon: 'picker',
+			title: 'Picker 选择器',
+			title_en: 'Picker',
+		}, {
+			path: '/pages/componentsB/rate/index',
+			icon: 'rate',
+			title: 'Rate 评分',
+			title_en: 'Rate',
+		}, {
+			path: '/pages/componentsB/search/index',
+			icon: 'search',
+			title: 'Search 搜索',
+			title_en: 'Search',
+		}, {
+			path: '/pages/componentsC/numberBox/index',
+			icon: 'numberBox',
+			title: 'NumberBox 步进器',
+			title_en: 'NumberBox',
+		}, {
+			path: '/pages/componentsB/upload/index',
+			icon: 'upload',
+			title: 'Upload 上传',
+			title_en: 'Upload',
+		}, {
+			path: '/pages/componentsA/verificationCode/index',
+			icon: 'verificationCode',
+			title: 'VerificationCode 验证码倒计时',
+			title_en: 'VerificationCode',
+		}, {
+			path: '/pages/componentsA/field/index',
+			icon: 'field',
+			title: 'Field 输入框',
+			title_en: 'Field',
+		}, {
+			path: '/pages/componentsB/checkbox/index',
+			icon: 'checkbox',
+			title: 'Checkbox 复选框',
+			title_en: 'Checkbox',
+		}, {
+			path: '/pages/componentsB/radio/index',
+			icon: 'radio',
+			title: 'Radio 单选框',
+			title_en: 'Radio',
+		}, {
+			path: '/pages/componentsB/switch/index',
+			icon: 'switch',
+			title: 'Switch 开关选择器',
+			title_en: 'Switch',
+		}, {
+			path: '/pages/componentsA/slider/index',
+			icon: 'slider',
+			title: 'Slider 滑动选择器',
+			title_en: 'Slider',
+		}]
+	}, {
+		groupName: '数据组件',
+		groupName_en: 'Data components',
+		list: [{
+			path: '/pages/componentsC/progress/index',
+			icon: 'progress',
+			title: 'Progress 进度条',
+			title_en: 'Progress',
+		}, {
+			path: '/pages/componentsB/table/index',
+			icon: 'table',
+			title: 'Table 表格',
+			title_en: 'Table',
+		}, {
+			path: '/pages/componentsC/countDown/index',
+			icon: 'countDown',
+			title: 'CountDown 倒计时',
+			title_en: 'CountDown',
+		}, {
+			path: '/pages/componentsC/countTo/index',
+			icon: 'countTo',
+			title: 'CountTo 数字滚动',
+			title_en: 'CountTo',
+		}]
+	}, {
+		groupName: '反馈组件',
+		groupName_en: 'Feedback components',
+		list: [{
+			path: '/pages/componentsC/actionSheet/index',
+			icon: 'actionSheet',
+			title: 'ActionSheet 操作菜单',
+			title_en: 'ActionSheet',
+		}, {
+			path: '/pages/componentsC/alertTips/index',
+			icon: 'alertTips',
+			title: 'AlertTips 警告提示',
+			title_en: 'AlertTips',
+		}, {
+			path: '/pages/componentsA/toast/index',
+			icon: 'toast',
+			title: 'Toast 消息提示',
+			title_en: 'Toast',
+		}, {
+			path: '/pages/componentsB/noticeBar/index',
+			icon: 'noticeBar',
+			title: 'NoticeBar 滚动通知',
+			title_en: 'NoticeBar',
+		}, {
+			path: '/pages/componentsA/topTips/index',
+			icon: 'topTips',
+			title: 'TopTips 顶部提示',
+			title_en: 'TopTips',
+		}, {
+			path: '/pages/componentsB/swipeAction/index',
+			icon: 'swipeAction',
+			title: 'SwipeAction 滑动单元格',
+			title_en: 'SwipeAction',
+		}, {
+			path: '/pages/componentsC/collapse/index',
+			icon: 'collapse',
+			title: 'Collapse 折叠面板',
+			title_en: 'Collapse',
+		}, {
+			path: '/pages/componentsC/popup/index',
+			icon: 'popup',
+			title: 'Popup 弹出层',
+			title_en: 'Popup',
+		}, {
+			path: '/pages/componentsA/modal/index',
+			icon: 'modal',
+			title: 'Modal 模态框',
+			title_en: 'Modal',
+		}, {
+			path: '/pages/componentsA/fullScreen/index',
+			icon: 'pressingScreen',
+			title: 'fullScreen 压窗屏',
+			title_en: 'fullScreen',
+		}]
+	}, {
+		groupName: '布局组件',
+		groupName_en: 'Layout components',
+		list: [{
+			path: '/pages/componentsB/line/index',
+			icon: 'line',
+			title: 'Line 线条',
+			title_en: 'Line',
+		}, {
+			path: '/pages/componentsB/card/index',
+			icon: 'card',
+			title: 'Card 卡片',
+			title_en: 'Card',
+		}, {
+			path: '/pages/componentsC/mask/index',
+			icon: 'mask',
+			title: 'Mask 遮罩层',
+			title_en: 'Mask',
+		}, 
+		// #ifndef MP-TOUTIAO
+		{
+			path: '/pages/componentsA/noNetwork/index',
+			icon: 'noNetwork',
+			title: 'NoNetwork 无网络提示',
+			title_en: 'NoNetwork',
+		}, 
+		// #endif
+		{
+			path: '/pages/componentsC/grid/index',
+			icon: 'grid',
+			title: 'Grid 宫格布局',
+			title_en: 'Grid',
+		}, {
+			path: '/pages/componentsB/swiper/index',
+			icon: 'swiper',
+			title: 'Swiper 轮播图',
+			title_en: 'Swiper',
+		}, {
+			path: '/pages/componentsA/timeLine/index',
+			icon: 'timeLine',
+			title: 'TimeLine 时间轴',
+			title_en: 'TimeLine',
+		}, {
+			path: '/pages/componentsB/skeleton/index',
+			icon: 'skeleton',
+			title: 'Skeleton 骨架屏',
+			title_en: 'Skeleton',
+		}, {
+			path: '/pages/componentsB/sticky/index',
+			icon: 'sticky',
+			title: 'Sticky 吸顶',
+			title_en: 'Sticky',
+		}, 
+		// #ifndef MP-TOUTIAO
+		{
+			path: '/pages/componentsB/waterfall/index',
+			icon: 'waterfall',
+			title: 'Waterfall 瀑布流',
+			title_en: 'Waterfall',
+		},
+		// #endif
+		{
+			path: '/pages/componentsB/divider/index',
+			icon: 'divider',
+			title: 'Divider 分割线',
+			title_en: 'Divider',
+		}]
+	}, {
+		groupName: '导航组件',
+		groupName_en: 'Navigation components',
+		list: [{
+			path: '/pages/componentsB/dropdown/index',
+			icon: 'dropdown',
+			title: 'Dropdown 下拉菜单',
+			title_en: 'Dropdown',
+		},{
+			path: '/pages/componentsB/tabbar/index',
+			icon: 'tabbar',
+			title: 'Tabbar 底部导航栏',
+			title_en: 'Tabbar',
+		},{
+			path: '/pages/componentsA/backTop/index',
+			icon: 'backTop',
+			title: 'BackTop 返回顶部',
+			title_en: 'BackTop',
+		},{
+			path: '/pages/componentsA/navbar/index',
+			icon: 'navbar',
+			title: 'Navbar 导航栏',
+			title_en: 'Navbar',
+		}, {
+			path: '/pages/componentsA/tabs/index',
+			icon: 'tabs',
+			title: 'Tabs 标签',
+			title_en: 'Tabs',
+		}, 
+		// #ifndef MP-ALIPAY
+		{
+			path: '/pages/template/order/index',
+			icon: 'tabsSwiper',
+			title: 'TabsSwiper 全屏选项卡',
+			title_en: 'TabsSwiper',
+		},
+		// #endif
+		{
+			path: '/pages/componentsC/subsection/index',
+			icon: 'subsection',
+			title: 'Subsection 分段器',
+			title_en: 'Subsection',
+		}, {
+			path: '/pages/componentsA/indexList/index',
+			icon: 'indexList',
+			title: 'IndexList 索引列表',
+			title_en: 'IndexList',
+		}, {
+			path: '/pages/componentsB/steps/index',
+			icon: 'steps',
+			title: 'Steps 步骤条',
+			title_en: 'Steps',
+		}, {
+			path: '/pages/componentsA/empty/index',
+			icon: 'empty',
+			title: 'Empty 内容为空',
+			title_en: 'Empty',
+		}, {
+			path: '/pages/componentsC/section/index',
+			icon: 'section',
+			title: 'Section 查看更多',
+			title_en: 'Section',
+		}]
+	}, {
+		groupName: '其他组件',
+		groupName_en: 'Other components',
+		list: [{
+			path: '/pages/componentsA/parse/index',
+			icon: 'parse',
+			title: 'Parse 富文本解析器',
+			title_en: 'Parse',
+		},{
+			path: '/pages/componentsC/messageInput/index',
+			icon: 'messageInput',
+			title: 'MessageInput 验证码输入',
+			title_en: 'MessageInput',
+		}, {
+			path: '/pages/componentsA/avatarCropper/index',
+			icon: 'avatarCropper',
+			title: 'AvatarCropper 头像裁剪',
+			title_en: 'AvatarCropper',
+		}, {
+			path: '/pages/componentsC/loadmore/index',
+			icon: 'loadmore', 
+			title: 'Loadmore 加载更多',
+			title_en: 'Loadmore',
+		}, {
+			path: '/pages/componentsB/readMore/index',
+			icon: 'readMore',
+			title: 'ReadMore 展开阅读更多',
+			title_en: 'ReadMore',
+		}, {
+			path: '/pages/componentsA/lazyLoad/index',
+			icon: 'lazyLoad',
+			title: 'LazyLoad 懒加载',
+			title_en: 'LazyLoad',
+		}, {
+			path: '/pages/componentsC/gap/index',
+			icon: 'gap',
+			title: 'Gap 间隔槽',
+			title_en: 'Gap',
+		}, {
+			path: '/pages/componentsA/avatar/index',
+			icon: 'avatar',
+			title: 'Avatar 头像',
+			title_en: 'Avatar',
+		}, {
+			path: '/pages/componentsC/link/index',
+			icon: 'link',
+			title: 'Link 超链接',
+			title_en: 'Link',
+		}, {
+			path: '/pages/componentsB/loading/index',
+			icon: 'loading',
+			title: 'Loading 加载动画',
+			title_en: 'Loading',
+		}]
+	},
+]

pages/example/components.vue

@@ -0,0 +1,88 @@
+<template>
+	<view class="wrap">
+		<page-nav :desc="desc" title="nav.components"></page-nav>
+		<view class="list-wrap">
+			<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list" :key="index">
+				<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
+				 v-for="(item1, index1) in item.list" :key="index1">
+					<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
+				</u-cell-item>
+			</u-cell-group>
+		</view>
+		<u-gap height="70"></u-gap>
+		<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
+	</view>
+</template>
+
+<script>
+	import list from "./components.config.js";
+	import getUrlParams from "../../utils/getUrlParams.js";
+	export default {
+		data() {
+			return {
+				list: list,
+				//desc: '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用。',
+			}
+		},
+		computed: {
+			getIcon() {
+				return path => {
+					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
+				}
+			},
+			desc() {
+				return this.$t('components.desc');
+			}
+		},
+		onShow() {
+			uni.setNavigationBarTitle({
+				title: this.$t('nav.components')
+			});
+			
+			let locationLocaturl = window.location.search;
+			let openId = getUrlParams(locationLocaturl,"openId");
+			if(!this.vuex_hasLogin&&!!openId){
+				this.$u.api.getuseinfo(openId).then(res => {
+					console.log('getuseinfo',res.retBody);
+					this.$u.vuex('vuex_user', res.retBody);
+					this.$u.vuex('vuex_hasLogin', true);
+					this.$u.vuex('vuex_token', res.retBody.token);
+					if(!res.retBody.phone){
+						this.openPage('/pages/template/bindPhoneNumber/bindPhoneNumber')
+					}
+				})				
+			}
+		},
+		created() {
+			
+		},
+		methods: {
+			openPage(path) {
+				this.$u.route({ 
+					url: path
+				})
+			},
+			getGroupTitle(item) {
+				return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
+			},
+			getFieldTitle(item) {
+				return this.$i18n.locale == 'zh' ? item.title : item.title_en
+			}
+		}
+	}
+</script>
+
+<style>
+	/* page {
+		background-color: rgb(240, 242, 244);
+	} */
+</style>
+
+<style lang="scss" scoped>
+	
+	.u-cell-icon {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 8rpx;
+	}
+</style>

pages/example/js.config.js

@@ -0,0 +1,120 @@
+export default [
+	{
+		groupName: '网络',
+		groupName_en: 'Network',
+		list: [
+			{
+				path: 'http',
+				icon: 'http',
+				title: 'Http 请求',
+				title_en: 'Http',
+			}
+		]
+	},
+	{
+		groupName: '全局变量',
+		groupName_en: 'Global variable',
+		list: [
+			{
+				path: 'globalVariable',
+				icon: 'globalVariable',
+				title: 'GlobalVariable 全局变量',
+				title_en: 'GlobalVariable',
+			}
+		]
+	},
+	{
+		groupName: '工具库',
+		groupName_en: 'Tool library',
+		list: [
+			{
+				path: 'debounce',
+				icon: 'debounce',
+				title: 'Throttle | Debounce 节流防抖',
+				title_en: 'Throttle | Debounce',
+			},
+			{
+				path: 'deepMerge',
+				icon: 'deepMerge',
+				title: 'DeepMerge 对象深度合并',
+				title_en: 'DeepMerge',
+			},{
+				path: 'deepClone',
+				icon: 'deepClone',
+				title: 'DeepClone 对象深度克隆',
+				title_en: 'DeepClone',
+			},
+			{
+				path: 'timeFormat',
+				icon: 'timeFormat',
+				title: 'TimeFormat 时间格式化',
+				title_en: 'TimeFormat',
+			},{
+				path: 'timeFrom',
+				icon: 'timeFrom',
+				title: 'TimeFrom 多久之前',
+				title_en: 'TimeFrom',
+			},{
+				path: 'guid',
+				icon: 'guid',
+				title: 'Guid 全局唯一id',
+				title_en: 'Guid',
+			},{
+				path: 'route',
+				icon: 'route',
+				title: 'Route 路由跳转',
+				title_en: 'Route',
+			},{
+				path: 'randomArray',
+				icon: 'randomArray',
+				title: 'RandomArray 数组乱序',
+				title_en: 'RandomArray',
+			},{
+				path: 'colorSwitch',
+				icon: 'colorSwitch',
+				title: 'ColorSwitch 颜色转换',
+				title_en: 'ColorSwitch',
+			},{
+				path: 'color',
+				icon: 'color',
+				title: 'Color 颜色值',
+				title_en: 'Color',
+			},{
+				path: 'queryParams',
+				icon: 'queryParams',
+				title: 'QueryParams 对象转URL参数',
+				title_en: 'QueryParams',
+			},{
+				path: 'test',
+				icon: 'test',
+				title: 'Test 规则校验',
+				title_en: 'Test',
+			},{
+				path: 'md5',
+				icon: 'md5',
+				title: 'Md5 md5加密',
+				title_en: 'Md5',
+			},{
+				path: 'random',
+				icon: 'random',
+				title: 'Random 随机数值',
+				title_en: 'Random',
+			},{
+				path: 'trim',
+				icon: 'trim',
+				title: 'Trim 去除空格',
+				title_en: 'Trim',
+			},{
+				path: 'getRect',
+				icon: 'getRect',
+				title: 'GetRect 节点信息',
+				title_en: 'GetRect',
+			},{
+				path: 'mpShare',
+				icon: 'mpShare',
+				title: 'MpShare 小程序分享',
+				title_en: 'MpShare',
+			}
+		]
+	}
+]

pages/example/js.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="wrap">
+		<page-nav :desc="desc" title="nav.js"></page-nav>
+		<view class="list-wrap">
+			<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list" :key="index">
+				<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
+				 v-for="(item1, index1) in item.list" :key="index1">
+					<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
+				</u-cell-item>
+			</u-cell-group>
+		</view>
+		<u-gap height="70"></u-gap>
+		<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
+	</view>
+</template>
+
+<script>
+	import list from "./js.config.js";
+	export default {
+		data() {
+			return {
+				list: list,
+				// desc: '众多的贴心小工具，是你开发过程中召之即来的利器，让你飞镖在手，百步穿杨'
+			}
+		},
+		computed: {
+			getIcon() {
+				return path => {
+					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
+				}
+			},
+			desc() {
+				return this.$t('js.desc');
+			}
+		},
+		onShow() {
+			uni.setNavigationBarTitle({
+				title: this.$t('nav.js')
+			});
+		},
+		methods: {
+			openPage(path) {
+				this.$u.route({
+					url: '/pages/library/' + path + '/index'
+				})
+			},
+			getGroupTitle(item) {
+				return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
+			},
+			getFieldTitle(item) {
+				return this.$i18n.locale == 'zh' ? item.title : item.title_en
+			}
+		}
+	}
+</script>
+
+<style>
+	/* page {
+		background-color: rgb(240, 242, 244);
+	} */
+</style>
+
+<style lang="scss" scoped>
+	.u-cell-icon {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 8rpx;
+	}
+</style>

pages/example/template.config.js

@@ -0,0 +1,84 @@
+export default [
+	{
+		groupName: '部件',
+		groupName_en: 'Parts',
+		list: [
+			{
+				path: 'coupon',
+				icon: 'coupon',
+				title: 'Coupon 优惠券',
+				title_en: 'Coupon',
+			}
+		]
+	},
+	{
+		groupName: '页面',
+		groupName_en: 'Page',
+		list: [
+			{
+				path: '/pages/template/feedback/feedback',
+				icon: 'wxCenter',
+				title: '反馈',
+				title_en: 'feedback',
+			},
+			{
+				path: '/pages/template/wxCenter/index',
+				icon: 'wxCenter',
+				title: 'WxCenter 仿微信个人中心',
+				title_en: 'WxCenter',
+			},
+			// {
+			// 	path: '/pages/template/douyin/index',
+			// 	icon: 'douyin',
+			// 	title: 'Douyin 仿抖音',
+			// },
+			{
+				path: '/pages/template/keyboardPay/index',
+				icon: 'keyboardPay',
+				title: 'KeyboardPay 自定义键盘支付模板',
+				title_en: 'KeyboardPay',
+			},
+			{
+				path: '/pages/template/mallMenu/index1',
+				icon: 'mall_menu_1',
+				title: 'MallMenu 垂直分类(左右独立)',
+				title_en: 'MallMenu 1',
+			},{
+				path: '/pages/template/mallMenu/index2',
+				icon: 'mall_menu_2',
+				title: 'MallMenu 垂直分类(左右联动)',
+				title_en: 'MallMenu 2',
+			},{
+				path: 'submitBar',
+				icon: 'submitBar',
+				title: 'SubmitBar 提交订单栏',
+				title_en: 'SubmitBar',
+			},{
+				path: 'comment',
+				icon: 'comment',
+				title: 'Comment 评论列表',
+				title_en: 'Comment',
+			},{
+				path: 'order',
+				icon: 'order',
+				title: 'Order 订单列表',
+				title_en: 'Order',
+			},{
+				path: 'login',
+				icon: 'login',
+				title: 'Login 登录界面',
+				title_en: 'Login',
+			},{
+				path: 'address',
+				icon: 'address',
+				title: 'Address 收货地址',
+				title_en: 'Address',
+			},{
+				path: 'citySelect',
+				icon: 'citySelect',
+				title: 'CitySelect 城市选择',
+				title_en: 'CitySelect',
+			}
+		]
+	}
+]

pages/example/template.vue

@@ -0,0 +1,69 @@
+<template>
+	<view class="wrap">
+		<page-nav :desc="desc" title="nav.template"></page-nav>
+		<view class="list-wrap">
+			<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list" :key="index">
+				<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
+				 v-for="(item1, index1) in item.list" :key="index1">
+					<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
+				</u-cell-item>
+			</u-cell-group>
+		</view>
+		<u-gap height="70"></u-gap>
+		<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
+	</view>
+</template>
+
+<script>
+	import list from "./template.config.js";
+	export default {
+		data() {
+			return {
+				list: list,
+				// desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
+			}
+		},
+		computed: {
+			getIcon() {
+				return path => {
+					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
+				}
+			},
+			desc() {
+				return this.$t('template.desc');
+			}
+		},
+		onShow() {
+			uni.setNavigationBarTitle({
+				title: this.$t('nav.template')
+			});
+		},
+		methods: {
+			openPage(path) {
+				this.$u.route({
+					url: path.indexOf('/page') == 0 ? path : '/pages/template/' + path + '/index'
+				})
+			},
+			getGroupTitle(item) {
+				return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
+			},
+			getFieldTitle(item) {
+				return this.$i18n.locale == 'zh' ? item.title : item.title_en
+			}
+		}
+	}
+</script>
+
+<style>
+	/* page {
+		background-color: rgb(240, 242, 244);
+	} */
+</style>
+
+<style lang="scss" scoped>
+	.u-cell-icon {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 8rpx;
+	}
+</style>

pages/library/color/index.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="u-no-demo-here" style="text-align: left;">
+					此处演示为通过JS调用框架内置颜色值，此外还可以通过scss变量调用。
+				</view>
+				<view class="u-demo-result-line" :style="{color: color, backgroundColor: '#ffffff'}">
+					晓镜但愁云鬓改，夜吟应觉月光寒
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">主题</view>
+				<u-subsection :list="['primary', 'success', 'error', 'warning', 'info']" @change="modeChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">常用颜色</view>
+				<u-subsection :list="['主要文字', '常规文字', '次要文字', '占位文字', '边框颜色']" @change="colorChange"></u-subsection>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				color: this.$u.color['primary'],
+			}
+		},
+		methods: {
+			modeChange(index) {
+				let colorName = index == 0 ? 'primary' : index == 1 ? 'success' : index == 2 ? 'error' : index == 3 ? 'warning'  : 'info';
+				this.color = this.$u.color[colorName];
+			},
+			colorChange(index) {
+				this.color = index == 0 ? '#303133' : index == 1 ? '#606266' : index == 2 ? '#909399' : index == 3 ? '#c0c4cc' : '#e4e7ed';
+			},
+			getResult() {
+				this.result = this.$u.trim(this.string, this.pos);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>

pages/library/colorSwitch/index.vue

@@ -0,0 +1,62 @@
+<template>
+	<view class="u-demo">
+		<view class="u-demo-wrap">
+			<view class="u-demo-title">演示效果</view>
+			<view class="u-demo-area">
+				<view class="u-demo-result-line">
+					{{result}}
+				</view>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+			<view class="u-config-title u-border-bottom">
+				参数配置
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">GRB转HEX</view>
+				<u-subsection :list="['rgb(12,57,231)', 'rgb(15,148,32)', 'rgb(91,52,210)']" @change="rgbToHexChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">HEX转GRB</view>
+				<u-subsection :list="['#0edc8a', '#d0a73c', '#3308dd']" @change="hexToRgbChange"></u-subsection>
+			</view>
+			<view class="u-config-item">
+				<view class="u-item-title">颜色渐变(rgb(21,21,21)-rgb(56,56,56)，分10份)</view>
+				<u-button @click="colorGradientChange">执行</u-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				result: null
+			}
+		},
+		onLoad() {
+			this.result = this.$u.rgbToHex('rgb(12,57,231)')
+		},
+		methods: {
+			rgbToHexChange(index) {
+				let color = index == 0 ? 'rgb(12,57,231)' : index == 1 ? 'rgb(15,148,32)' : 'rgb(91,52,210)';
+				this.result = this.$u.rgbToHex(color)
+			},
+			hexToRgbChange(index) {
+				let color = index == 0 ? '#0edc8a' : index == 1 ? '#d0a73c' : '#3308dd';
+				this.result = this.$u.hexToRgb(color)
+			},
+			colorGradientChange(index) { 
+				this.result = JSON.stringify(this.$u.colorGradient('rgb(21,21,21)', 'rgb(56,56,56)', 10))
+			},
+			getResult() {
+				this.result = this.$u.guid(this.length, this.firstU, this.radix);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-demo {}
+</style>