init

.gitignore

@@ -0,0 +1,10 @@
+.hbuilderx/
+.idea/
+/unpackage
+/dist
+/build
+/node_modules
+package-lock.json
+
+*.iml
+.DS_Store

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-2024 uview-plus.jiangruyi.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,87 @@
+<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-plus 3.0 (Beta)</h3>
+<h3 align="center">多平台快速开发的UI框架(fork自uView2.0)</h3>
+
+[![Cloud Studio Template](https://cs-res.codehub.cn/common/assets/icon-badge.svg)](https://club.cloudstudio.net/261753/11943789224931328)
+[![star](https://gitee.com/jry/uview-plus/badge/star.svg?theme=gvp)](https://gitee.com/jry/uview-plus/stargazers)
+[![stars](https://img.shields.io/github/stars/ijry/uview-plus?style=flat-square&logo=GitHub)](https://github.com/ijry/uview-plus)
+[![forks](https://img.shields.io/github/forks/ijry/uview-plus?style=flat-square&logo=GitHub)](https://github.com/ijry/uview-plus)
+[![issues](https://img.shields.io/github/issues/ijry/uview-plus?style=flat-square&logo=GitHub)](https://github.com/ijry/uview-plus/issues)
+[![Website](https://img.shields.io/badge/uview-plus-blue?style=flat-square)](https://ijry.github.io/uview-plus/)
+[![license](https://img.shields.io/github/license/ijry/uview-plus?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License)
+<!-- [![release](https://img.shields.io/github/v/release/ijry/uview-plus?style=flat-square)](https://github.com/ijry/uview-plus/releases) -->
+
+## 说明
+
+因为是2.0移植的3.0，时间有限，有很多细节问题需要完善与修复，个人时间精力有限，可能一个月定期维护几次，希望有能力的一起完善，提交PR。
+
+## 介绍
+
+uview-plus，是[uni-app](https://uniapp.dcloud.io/)全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。
+
+## [官方文档：https://uview-plus.jiangruyi.com/](https://uview-plus.jiangruyi.com/)
+
+## [官方文档（备用）：https://uview-plus.lingyun.net/](https://uview-plus.lingyun.net/)
+
+### [点击加群交流反馈](https://uview-plus.jiangruyi.com/components/addQQGroup.html)
+
+## 特性
+
+- 全面兼容nvue，原生渲染，高性能
+- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
+- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
+- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
+- 众多的常用页面和布局，让您专注逻辑，事半功倍
+- 详尽的文档支持，现代化的演示效果
+- 按需引入，精简打包体积
+
+
+## 预览
+
+您可以通过**微信**扫码，查看最佳的演示效果。
+<br>
+<br>
+![image](https://uview-plus.jiangruyi.com/common/h5_qrcode.png)
+![image](https://uview-plus.jiangruyi.com/common/android_qrcode.png)
+
+
+## 链接
+
+- [官方文档](https://uview-plus.jiangruyi.com/)
+- [更新日志](https://uview-plus.jiangruyi.com/components/changelog.html)
+- [升级指南](https://uview-plus.jiangruyi.com/components/changeGuide.html)
+- [关于我们](https://uview-plus.jiangruyi.com/cooperation/about.html)
+
+## 关于PR
+
+> 我们非常乐意接受各位的优质PR，但在此之前我希望您了解uview-plus是一个需要兼容多个平台的（小程序、h5、ios app、android app）包括nvue页面、vue页面。
+> 所以希望在您修复bug并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢！
+
+## 安装
+
+#### **uni-app插件市场链接** —— [https://ext.dcloud.net.cn/plugin?name=uview-plus](https://ext.dcloud.net.cn/plugin?name=uview-plus)
+
+## 快速上手
+
+请通过[快速上手](https://uview-plus.jiangruyi.com/components/quickstart.html)了解更详细的内容
+
+## 使用方法
+配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
+
+```html
+<template>
+	<up-button text="按钮"></up-button>
+</template>
+```
+
+## 🤝需求外包
+如果你有需求想要实现，可以微信联系【ijiangruyi】。
+
+团队包含专业的项目经理、架构师、前端工程师、后端工程师、测试工程师、运维工程师，可以提供全流程的外包服务。
+
+项目支持各种类型与行业，比如商城、SCRM 系统、OA 系统、物流系统、ERP 系统、CMS 系统、支付系统、IM 聊天、微信公众号、微信小程序等等。
+
+

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,83 @@
+{
+  "name": "uni-preset-vue",
+  "version": "0.0.0",
+  "scripts": {
+    "dev:app": "uni -p app",
+    "dev:app-android": "uni -p app-android",
+    "dev:app-ios": "uni -p app-ios",
+    "dev:custom": "uni -p",
+    "dev": "uni",
+    "dev:h5": "uni",
+    "dev:h5:ssr": "uni --ssr",
+    "dev:mp-alipay": "uni -p mp-alipay",
+    "dev:mp-baidu": "uni -p mp-baidu",
+    "dev:mp-jd": "uni -p mp-jd",
+    "dev:mp-kuaishou": "uni -p mp-kuaishou",
+    "dev:mp-lark": "uni -p mp-lark",
+    "dev:mp-qq": "uni -p mp-qq",
+    "dev:mp-toutiao": "uni -p mp-toutiao",
+    "dev:mp-weixin": "uni -p mp-weixin",
+    "dev:quickapp-webview": "uni -p quickapp-webview",
+    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
+    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
+    "build:app": "uni build -p app",
+    "build:app-android": "uni build -p app-android",
+    "build:app-ios": "uni build -p app-ios",
+    "build:custom": "uni build -p",
+    "build:h5": "uni build",
+    "build:h5:ssr": "uni build --ssr",
+    "build:mp-alipay": "uni build -p mp-alipay",
+    "build:mp-baidu": "uni build -p mp-baidu",
+    "build:mp-jd": "uni build -p mp-jd",
+    "build:mp-kuaishou": "uni build -p mp-kuaishou",
+    "build:mp-lark": "uni build -p mp-lark",
+    "build:mp-qq": "uni build -p mp-qq",
+    "build:mp-toutiao": "uni build -p mp-toutiao",
+    "build:mp-weixin": "uni build -p mp-weixin",
+    "build:quickapp-webview": "uni build -p quickapp-webview",
+    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
+    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@dcloudio/uni-app": "3.0.0-4020920240930001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4020920240930001",
+    "@dcloudio/uni-app-plus": "3.0.0-4020920240930001",
+    "@dcloudio/uni-components": "3.0.0-4020920240930001",
+    "@dcloudio/uni-h5": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-jd": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-lark": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-qq": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-4020920240930001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-4020920240930001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-4020920240930001",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@vue/shared": "^3.4.21",
+    "clipboard": "^2.0.11",
+    "dayjs": "^1.11.8",
+    "vue": "3.5.13",
+    "vue-i18n": "9.14.1",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "3.4.14",
+    "@dcloudio/uni-automator": "3.0.0-4020920240930001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4020920240930001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4020920240930001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4020920240930001",
+    "@vue/runtime-core": "3.5.13",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "^19.0.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "1.63.2",
+    "sass-loader": "10.4.1",
+    "typescript": "^4.9.4",
+    "vite": "5.2.8",
+    "vue-tsc": "^1.0.24"
+  }
+}

src/App.vue

@@ -0,0 +1,20 @@
+<script>
	import { http } from '@/uni_modules/uview-plus'
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+		},
+		onShow: async function() {
+			console.log('App Show')
+			// let res = await http.get('/')
			// console.log(res)
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style lang="scss">
+	/*每个页面公共css */
+	// @import "uview-plus/index.scss";
	@import "@/uni_modules/uview-plus/index.scss";
+	@import "common/demo.scss";
+</style>

src/common/api.js

@@ -0,0 +1,3 @@
+const { http } = uni.$u
+// 获取菜单
+export const fetchMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config)

src/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
+            }
+        ]
+    }
+]

src/common/config.js

@@ -0,0 +1,3 @@
+export default {
+    baseUrl: 'https://uview-plus.lingyun.net'
+}

src/common/demo.scss

@@ -0,0 +1,55 @@
+.u-block {
+	padding: 14px;
+	&__section {
+		margin-bottom:10px;
+	}
+	&__title {
+		margin-top:10px;
+		font-size: 15px;
+		color: $u-content-color;
+		margin-bottom:10px;
+	}
+	&__flex {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+	}
+}
+
+// 使用了cell组件的icon图片样式
+.u-cell-icon {
+	width: 36rpx;
+	height: 36rpx;
+	margin-right: 8rpx;
+}
+
+.u-page {
+	padding: 15px 15px 40px 15px;
+	&__item {
+		flex: 1;
+		// margin-bottom: 23px;
+		&__title {
+			font-size: 14px;
+			color: rgb(143, 156, 162);
+			// margin-bottom: 8px;
+			@include flex;
+		}
+	}
+}
+
+.u-demo-block {
+	flex: 1;
+	margin-bottom: 23px;
+	
+	&__content {
+		@include flex(column);
+	}
+	
+	&__title {
+		font-size: 14px;
+		color: rgb(143, 156, 162);
+		margin-bottom: 8px;
+		@include flex;
+	}
+}
+

src/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-plus',
+	},
+}

src/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-plus',
+	},
+}

src/common/mixin.js

@@ -0,0 +1,7 @@
+export default {
+    data() {
+        return {
+			isWeixin: true
+        }
+    }
+}

src/common/props.js

@@ -0,0 +1,2 @@
+uni.$u.props.gap.bgColor = '#f3f4f6'
+uni.$u.props.gap.height = '10'

src/common/province.js

@@ -0,0 +1 @@
+var provinceData=[{"label":"北京市","value":"11"},{"label":"天津市","value":"12"},{"label":"河北省","value":"13"},{"label":"山西省","value":"14"},{"label":"内蒙古自治区","value":"15"},{"label":"辽宁省","value":"21"},{"label":"吉林省","value":"22"},{"label":"黑龙江省","value":"23"},{"label":"上海市","value":"31"},{"label":"江苏省","value":"32"},{"label":"浙江省","value":"33"},{"label":"安徽省","value":"34"},{"label":"福建省","value":"35"},{"label":"江西省","value":"36"},{"label":"山东省","value":"37"},{"label":"河南省","value":"41"},{"label":"湖北省","value":"42"},{"label":"湖南省","value":"43"},{"label":"广东省","value":"44"},{"label":"广西壮族自治区","value":"45"},{"label":"海南省","value":"46"},{"label":"重庆市","value":"50"},{"label":"四川省","value":"51"},{"label":"贵州省","value":"52"},{"label":"云南省","value":"53"},{"label":"西藏自治区","value":"54"},{"label":"陕西省","value":"61"},{"label":"甘肃省","value":"62"},{"label":"青海省","value":"63"},{"label":"宁夏回族自治区","value":"64"},{"label":"新疆维吾尔自治区","value":"65"},{"label":"台湾","value":"66"},{"label":"香港","value":"67"},{"label":"澳门","value":"68"}];export default provinceData;

src/components/page-nav/page-nav.vue

@@ -0,0 +1,117 @@
+<template>
+	<view class="nav-wrap">
+		<view class="nav-title">
+			<u--image :showLoading="true" src="https://uview-plus.jiangruyi.com/h5/static/uview/common/logo.png" width="70px"
+				height="70px" />
+			<view class="nav-info">
+				<view class="nav-info__title" @tap="jumpToWx">
+					<text class="nav-info__title__text">uview-plus3
+					<!-- #ifdef APP-HARMONY -->
+					鸿蒙
+					<!-- #endif -->
+					</text>
+					<!-- #ifdef MP-WEIXIN -->
+					<!-- uni-app不支持text内部的text组件的tap事件，所以放到外部响应tap -->
+					<text class="nav-info__title__jump">查看演示</text>
+					<!-- #endif -->
+				</view>
+				<text class="nav-slogan">多平台快速开发的UI框架</text>
+			</view>
+		</view>
+		<text class="nav-desc">{{desc}}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			desc: String,
+			title: String,
+		},
+		data() {
+			return {
+				version: uni.$u.config.v
+			}
+		},
+		methods: {
+			jumpToWx() {
+				// #ifdef MP-WEIXIN
+				// uni.navigateToMiniProgram({
+				// 	appId: ''
+				// })
+				// #endif
+			}
+		},
+	}
+</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;
+		justify-content: flex-start;
+	}
+
+	.nav-info {
+		margin-left: 15px;
+		
+		&__title {
+			/* #ifndef APP-NVUE */
+			display: flex;
+			/* #endif */
+			flex-direction: row;
+			align-items: center;
+			
+			&__text {
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				color: $u-main-color;
+				font-size: 25px;
+				font-weight: bold;
+				text-align: left;
+			}
+			
+			&__jump {
+				font-size: 12px;
+				color: $u-primary;
+				font-weight: normal;
+				margin-left: 20px;
+			}
+		}
+	}
+
+	.logo {
+		width: 70px;
+		height: 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;
+		line-height: 20px;
+	}
+</style>

src/env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module 'uview-plus'

src/harmony-configs/AppScope/app.json5

@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.jiangruyi.uviewplus",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name"
+  }
+}

src/harmony-configs/build-profile.json5

@@ -0,0 +1,56 @@
+{
+  "app": {
+    "signingConfigs": [
+      {
+        "name": "default",
+        "type": "HarmonyOS",
+        "material": {
+          "certpath": ".\\config\\default_MyApplication2_EzwP77uxWrWlyr6S3AogE6Gwr4Aig4Zm6MCswL540_4=.cer",
+          "storePassword": "0000001BACB99993AAF9DEE35D1AFC4345A72A4FAFA86DCF6E167DD000A805594A6EBD7542BE5137865FC3",
+          "keyAlias": "debugKey",
+          "keyPassword": "0000001B1D6339C82C275988A697987CCAE13B00C8195EFFBD06AF598ED8019150CD48BB71E6FB06E29963",
+          "profile": ".\\config\\default_MyApplication2_EzwP77uxWrWlyr6S3AogE6Gwr4Aig4Zm6MCswL540_4=.p7b",
+          "signAlg": "SHA256withECDSA",
+          "storeFile": ".\\config\\default_MyApplication2_EzwP77uxWrWlyr6S3AogE6Gwr4Aig4Zm6MCswL540_4=.p12"
+        }
+      }
+    ],
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+        "compatibleSdkVersion": "5.0.0(12)",
+        "runtimeOS": "HarmonyOS",
+      },
+      {
+        "name": "release",
+        "signingConfig": "release",
+        "compatibleSdkVersion": "5.0.0(12)",
+        "runtimeOS": "HarmonyOS",
+      }
+    ],
+    "buildModeSet": [
+      {
+        "name": "debug",
+      },
+      {
+        "name": "release"
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "entry",
+      "srcPath": "./entry",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default",
+            "release"
+          ]
+        }
+      ]
+    }
+  ]
+}

src/harmony-configs/config/default_MyApplication2_EzwP77uxWrWlyr6S3AogE6Gwr4Aig4Zm6MCswL540_4=.cer

@@ -0,0 +1,50 @@
+-----BEGIN CERTIFICATE-----
+MIICGjCCAaGgAwIBAgIIShhpn519jNAwCgYIKoZIzj0EAwMwUzELMAkGA1UEBhMC
+Q04xDzANBgNVBAoMBkh1YXdlaTETMBEGA1UECwwKSHVhd2VpIENCRzEeMBwGA1UE
+AwwVSHVhd2VpIENCRyBSb290IENBIEcyMB4XDTIwMDMxNjAzMDQzOVoXDTQ5MDMx
+NjAzMDQzOVowUzELMAkGA1UEBhMCQ04xDzANBgNVBAoMBkh1YXdlaTETMBEGA1UE
+CwwKSHVhd2VpIENCRzEeMBwGA1UEAwwVSHVhd2VpIENCRyBSb290IENBIEcyMHYw
+EAYHKoZIzj0CAQYFK4EEACIDYgAEWidkGnDSOw3/HE2y2GHl+fpWBIa5S+IlnNrs
+GUvwC1I2QWvtqCHWmwFlFK95zKXiM8s9yV3VVXh7ivN8ZJO3SC5N1TCrvB2lpHMB
+wcz4DA0kgHCMm/wDec6kOHx1xvCRo0IwQDAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0T
+AQH/BAUwAwEB/zAdBgNVHQ4EFgQUo45a9Vq8cYwqaiVyfkiS4pLcIAAwCgYIKoZI
+zj0EAwMDZwAwZAIwMypeB7P0IbY7c6gpWcClhRznOJFj8uavrNu2PIoz9KIqr3jn
+BlBHJs0myI7ntYpEAjBbm8eDMZY5zq5iMZUC6H7UzYSix4Uy1YlsLVV738PtKP9h
+FTjgDHctXJlC5L7+ZDY=
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIDATCCAoigAwIBAgIIXmuDXbWpOB8wCgYIKoZIzj0EAwMwUzELMAkGA1UEBhMC
+Q04xDzANBgNVBAoMBkh1YXdlaTETMBEGA1UECwwKSHVhd2VpIENCRzEeMBwGA1UE
+AwwVSHVhd2VpIENCRyBSb290IENBIEcyMB4XDTIwMDcwOTAyMDQyNFoXDTMwMDcw
+NzAyMDQyNFowYjELMAkGA1UEBgwCQ04xDzANBgNVBAoMBkh1YXdlaTETMBEGA1UE
+CwwKSHVhd2VpIENCRzEtMCsGA1UEAwwkSHVhd2VpIENCRyBEZXZlbG9wZXIgUmVs
+YXRpb25zIENBIEcyMHYwEAYHKoZIzj0CAQYFK4EEACIDYgAE65LdoIZh1hlpZ2gP
+bJ6gPhHsvYSRe22KETgdqeVeYnrbRHI9wsPT6RGYS+pU4mPl6wxzgDMqN6SY/BoZ
+luhkE1PzaHoPoNIWIq0O33hpyKyyYwAacIUEjYurkw1E9r9no4IBGDCCARQwHwYD
+VR0jBBgwFoAUo45a9Vq8cYwqaiVyfkiS4pLcIAAwHQYDVR0OBBYEFNtek7Ij6NDk
+/nF6Zumkc0dbf/NeMEYGA1UdIAQ/MD0wOwYEVR0gADAzMDEGCCsGAQUFBwIBFiVo
+dHRwOi8vY3BraS1jYXdlYi5odWF3ZWkuY29tL2Nwa2kvY3BzMBIGA1UdEwEB/wQI
+MAYBAf8CAQAwDgYDVR0PAQH/BAQDAgEGMGYGA1UdHwRfMF0wW6BZoFeGVWh0dHA6
+Ly9jcGtpLWNhd2ViLmh1YXdlaS5jb20vY3BraS9zZXJ2bGV0L2NybEZpbGVEb3du
+LmNybD9jZXJ0eXBlPTEwJi9yb290X2cyX2NybC5jcmwwCgYIKoZIzj0EAwMDZwAw
+ZAIwWO1X5q2MdfpR1Q237GpUHGbL1C13rGyFg2p3AYo44FpZ2/A9ss0wOHKM4KDl
+ZPqdAjBLkf8NPZy7KVog98+iCTLq35DJ2ZVxkCxknA9YhiHVyXf4HPm4JlT7rW7o
+Q+FzM3c=
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIICwDCCAkegAwIBAgIOY8vC/kOfeJqWj5jSUJ4wCgYIKoZIzj0EAwMwYjELMAkG
+A1UEBgwCQ04xDzANBgNVBAoMBkh1YXdlaTETMBEGA1UECwwKSHVhd2VpIENCRzEt
+MCsGA1UEAwwkSHVhd2VpIENCRyBEZXZlbG9wZXIgUmVsYXRpb25zIENBIEcyMB4X
+DTI0MTAyMjE1MjMwM1oXDTI1MTAyMjE1MjMwM1owcTELMAkGA1UEBhMCQ04xEDAO
+BgNVBAoMB3Vua25vd24xHDAaBgNVBAsMEzE1Mzc5NTU1MDQ2NTgwODU5NTMxMjAw
+BgNVBAMMKXVua25vd24oMTUzNzk1NTUwNDY1ODA4NTk1MylcLERldmVsb3BtZW50
+MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEqByfvKBHOAa5M7bMVQh71ZDvuZsi
+JRBMO/PzfiaRN/DPhc2unFcVbApY22WHmwPrgc+LSIGRkcYdWE/DDh48Q6OB0TCB
+zjAdBgNVHQ4EFgQUo56y9GG4J5ELTl9Jd3WLBsExNB4wDAYDVR0TAQH/BAIwADAf
+BgNVHSMEGDAWgBTbXpOyI+jQ5P5xembppHNHW3/zXjBZBgNVHR8EUjBQME6gTKBK
+hkhodHRwOi8vaDVob3N0aW5nLWRyY24uZGJhbmtjZG4uY24vY2NoNS9jcmwvaGRy
+Y2FnMi9IdWF3ZWlDQkdIRFJHMmNybC5jcmwwDgYDVR0PAQH/BAQDAgeAMBMGA1Ud
+JQQMMAoGCCsGAQUFBwMDMAoGCCqGSM49BAMDA2cAMGQCMD2KOCVvPn2LDKsDTDPY
+wFIVTlqyoF3WK7yHiSNpwzc0NC1idyjWHDQ3MQlB06axkAIwc//edFkZKXAFm3gj
+ALfNbK8iSwAWlNjPwIrMnuPbeMdeD2Kuu/0Lv1PDPULf6xuy
+-----END CERTIFICATE-----

src/harmony-configs/config/default_MyApplication2_EzwP77uxWrWlyr6S3AogE6Gwr4Aig4Zm6MCswL540_4=.csr

@@ -0,0 +1,9 @@
+-----BEGIN NEW CERTIFICATE REQUEST-----
+MIIBNTCB3AIBADBKMQkwBwYDVQQGEwAxCTAHBgNVBAgTADEJMAcGA1UEBxMAMQkw
+BwYDVQQKEwAxCTAHBgNVBAsTADERMA8GA1UEAxMIRGVidWdLZXkwWTATBgcqhkjO
+PQIBBggqhkjOPQMBBwNCAASoHJ+8oEc4BrkztsxVCHvVkO+5myIlEEw78/N+JpE3
+8M+Fza6cVxVsCljbZYebA+uBz4tIgZGRxh1YT8MOHjxDoDAwLgYJKoZIhvcNAQkO
+MSEwHzAdBgNVHQ4EFgQUo56y9GG4J5ELTl9Jd3WLBsExNB4wCgYIKoZIzj0EAwID
+SAAwRQIhAP9DLjs/kzZgn7P7mJVcU4YpaoLfldj+YoNNCGuBXLwNAiBERliTPypt
+/sDAtfZxa3R2y/sd/veYFAwHPiVQc8nPyQ==
+-----END NEW CERTIFICATE REQUEST-----

src/harmony-configs/config/material/ac/8dc967607d5f438c9488817e94b47e06

@@ -0,0 +1 @@
+y'¢IX‡™}檇

src/harmony-configs/config/material/fd/0/1d735dc54ad34567a6d1500712e8c4a0

@@ -0,0 +1 @@
+БQљћ`в����Vф

src/harmony-configs/config/material/fd/2/296b38f690c24a5e95093fb4041fa23c

@@ -0,0 +1 @@
+‡ó‰|lïÉ´’gÁ•á¯I

src/harmony-configs/entry/build-profile.json5

@@ -0,0 +1,28 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "buildOptionSet": [
+    {
+      "name": "release",
+      "arkOptions": {
+        "obfuscation": {
+          "ruleOptions": {
+            "enable": true,
+            "files": [
+              "./obfuscation-rules.txt"
+            ]
+          }
+        }
+      }
+    },
+  ],
+  "targets": [
+    {
+      "name": "default"
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}

src/harmony-configs/entry/obfuscation-rules.txt

@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope

src/harmony-configs/entry/oh-package.json5

@@ -0,0 +1,10 @@
+{
+  "name": "entry",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {}
+}
+

src/harmony-configs/entry/src/main/module.json5

@@ -0,0 +1,81 @@
+{
+  "module": {
+    "name": "entry",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet",
+      "2in1"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ets",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:layered_image",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:startIcon",
+        "startWindowBackground": "$color:start_window_background",
+        "exported": true,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ],
+    "requestPermissions": [
+      {
+        "name": "ohos.permission.INTERNET"
+      },
+      {
+        "name": "ohos.permission.APPROXIMATELY_LOCATION",
+        "reason": "$string:location_tips",
+        "usedScene": {}
+      },
+      {
+        "name": "ohos.permission.LOCATION",
+        "reason": "$string:location_tips",
+        "usedScene": {}
+      },
+      {
+        "name": "ohos.permission.GET_WIFI_INFO",
+        "reason": "$string:get_networkinfo_tips",
+        "usedScene": {
+          "when": "inuse"
+        }
+      },
+      {
+        "name": "ohos.permission.GET_NETWORK_INFO",
+        "reason": "$string:get_wifiinfo_tips",
+        "usedScene": {
+          "when": "inuse"
+        }
+      },
+      {
+        "name": "ohos.permission.MICROPHONE",
+        "reason": "$string:microphone",
+        "usedScene": {
+          "when": "inuse"
+        }
+      },
+      {
+        "name": "ohos.permission.ACCESS_BIOMETRIC",
+        "reason": "$string:access_biometric",
+        "usedScene": {
+          "when": "inuse"
+        }
+      }
+    ]
+  }
+}

src/harmony-configs/oh-package.json5

@@ -0,0 +1,19 @@
+{
+  "modelVersion": "5.0.0",
+  "name": "template",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@ohos/hypium": "1.0.16",
+    "@ohos/hamock": "1.0.0",
+    "@dcloudio/uts-harmony": "./entry/src/main/ets/uts",
+    "@dcloudio/uni-app-harmony": "./entry/src/main/ets/uni-app-harmony",
+    "@dcloudio/uni-app-harmony-framework": "./entry/src/main/resources/rawfile/uni-app"
+  },
+  "dynamicDependencies": {}
+}

src/harmony-configs/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "template",
+  "version": "1.3.7",
+  "description": "",
+  "scripts": {},
+  "author": "",
+  "license": "ISC"
+}

src/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>

src/jsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": [
+                "./*"
+            ]
+        }
+    },
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}

src/main.ts

@@ -0,0 +1,72 @@
+import App from './App'
+
+// vuex
+import store from './store'
+
+// 引入全局uview-plus
+import uviewPlus, { setConfig } from '@/uni_modules/uview-plus'
+
+// i18n部分的配置
+// 引入语言包，注意路径
+import zhHans from '@/common/locales/zh.js';
+import en from '@/common/locales/en.js';
+const messages = {
+	en,
+	'zh-Hans': zhHans,
+}
+let i18nConfig = {
+  locale: uni.getLocale(),// 获取已设置的语言
+  messages
+}
+
+// 引入uView对小程序分享的mixin封装
+import mpShare from '@/uni_modules/uview-plus/libs/mixin/mpShare.js'
+import mixin from './common/mixin'
+  
+// #ifdef VUE3
+import { createSSRApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+const i18n = createI18n(i18nConfig)
+import { initRequest } from './util/request/index'
+
+// 设置uview-plus配置
+setConfig({
+	// 修改$u.config对象的属性
+	config: {
+		// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
+		unit: 'rpx'
+	},
+	// 修改$u.props对象的属性
+	props: {
+		// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
+		alert: {
+			type: 'error'
+		}
+		// 其他组件属性配置
+		// ......
+	}
+})
+export function createApp() {
+  const app = createSSRApp(App)
+  
+  // 引入请求封装
+  initRequest(app)
+
+  app.use(store)
+	.use(i18n)
+	.use(uviewPlus)
+
+  // #ifdef MP
+  app.mixin(mpShare)
+  app.mixin(mixin)
+  // #endif
+
+  return {
+    app
+  }
+}
+// #endif
+
+
+
+

src/manifest.json

@@ -0,0 +1,165 @@
+{
+    "name" : "UviewPlus",
+    "appid" : "__UNI__A3058AD",
+    "description" : "多平台快速开发的UI框架",
+    "versionName" : "3.1.52",
+    "versionCode" : 1,
+    "transformPx" : false,
+    "app-plus" : {
+        "optimization" : {
+            "subPackages" : true
+        },
+        "safearea" : {
+            "bottom" : {
+                "offset" : "none"
+            }
+        },
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        "usingComponents" : true,
+        "nvueCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "modules" : {
+            "Webview-x5" : {}
+        },
+        "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" ],
+                "minSdkVersion" : 21
+            },
+            "ios" : {
+                "idfa" : false,
+                "dSYMs" : false
+            },
+            "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" : "wxf385eefdd03327fd",
+        "setting" : {
+            "urlCheck" : false,
+            "es6" : true,
+            "minified" : true,
+            "postcss" : false
+        },
+        "optimization" : {
+            "subPackages" : true
+        },
+        "mergeVirtualHostAttributes" : true,
+        "lazyCodeLoading" : "requiredComponents",
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true,
+        "component2" : true
+    },
+    "mp-qq" : {
+        "optimization" : {
+            "subPackages" : true
+        },
+        "appid" : "123",
+        "setting" : {
+            "minified" : true,
+            "urlCheck" : false
+        }
+    },
+    "mp-baidu" : {
+        "usingComponents" : true,
+        "appid" : ""
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true,
+        "mergeVirtualHostAttributes" : true,
+        "appid" : ""
+    },
+    "h5" : {
+        "template" : "",
+        "router" : {
+            "mode" : "hash",
+            "base" : "./"
+        },
+        "optimization" : {
+            "treeShaking" : {
+                "enable" : false
+            }
+        },
+        "title" : "uview-plus",
+        "sdkConfigs" : {
+            "maps" : {
+                "qqmap" : {
+                    "key" : ""
+                }
+            }
+        },
+        "domain" : "",
+        "devServer" : {
+            "https" : false,
+            "port" : 5273
+        }
+    },
+    "vueVersion" : "3",
+    "locale" : "auto"
+}

src/pages.json

@@ -0,0 +1,713 @@
+{
+    "condition" : {
+        //模式配置，仅开发期间生效
+        "current" : 0, //当前激活的模式(list 的索引项)
+        "list" : [
+			{
+				"name": "广告", //模式名称
+				"path": "pages/example/ad", //启动页面，必选
+				"query": "scene='id=555563434u5io3uu4u5'" //启动参数，在页面的onLoad函数里面得到
+			}
+		]
+    },
+    "easycom" : {
+        // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
+        "custom" : {
+            // "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
+            // "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
+            // "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
+            "^u--(.*)" : "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
+            "^up-(.*)" : "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
+            "^u-([^-].*)" : "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
+        }
+    },
+    "pages" : [
+        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+        {
+            "path" : "pages/workbench",
+            "style" : {
+                "navigationBarTitleText" : "工作台"
+            }
+        },
+        {
+            "path" : "pages/my",
+            "style" : {
+                "navigationBarTitleText" : "我的"
+            }
+        },
+        // 演示-模板
+        {
+            "path" : "pages/example/template",
+            "style" : {
+                "navigationBarTitleText" : "模板"
+            }
+        },
+        {
+            "path" : "pages/workbench",
+            "style" : {
+                "navigationBarTitleText" : "工作台"
+            }
+        }
+    ],
+    "subPackages" : [
+        {
+            "root" : "pages/componentsA",
+            "pages" : [
+                // 过渡动画
+                {
+                    "path" : "transition/transition",
+                    "style" : {
+                        "navigationBarTitleText" : "过渡动画"
+                    }
+                },
+                {
+                    "path" : "test/test",
+                    "style" : {
+                        "navigationBarTitleText" : "测试"
+                    }
+                },
+                {
+                    "path" : "icon/icon",
+                    "style" : {
+                        "navigationBarTitleText" : "图标"
+                    }
+                },
+                {
+                    "path" : "cell/cell",
+                    "style" : {
+                        "navigationBarTitleText" : "单元格"
+                    }
+                },
+                {
+                    "path" : "line/line",
+                    "style" : {
+                        "navigationBarTitleText" : "线条"
+                    }
+                },
+                {
+                    "path" : "image/image",
+                    "style" : {
+                        "navigationBarTitleText" : "图片"
+                    }
+                },
+                {
+                    "path" : "link/link",
+                    "style" : {
+                        "navigationBarTitleText" : "超链接"
+                    }
+                },
+                {
+                    "path" : "button/button",
+                    "style" : {
+                        "navigationBarTitleText" : "按钮"
+                    }
+                },
+                {
+                    "path" : "loading-icon/loading-icon",
+                    "style" : {
+                        "navigationBarTitleText" : "加载中图标"
+                    }
+                },
+                {
+                    "path" : "overlay/overlay",
+                    "style" : {
+                        "navigationBarTitleText" : "遮罩层",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "loading-page/loading-page",
+                    "style" : {
+                        "navigationBarTitleText" : "加载页",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "popup/popup",
+                    "style" : {
+                        "navigationBarTitleText" : "弹窗",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "swipeAction/swipeAction",
+                    "style" : {
+                        "navigationBarTitleText" : "滑动单元格"
+                    }
+                },
+                {
+                    "path" : "sticky/sticky",
+                    "style" : {
+                        "navigationBarTitleText" : "吸顶"
+                    }
+                },
+                {
+                    "path" : "radio/radio",
+                    "style" : {
+                        "navigationBarTitleText" : "单选框"
+                    }
+                },
+                {
+                    "path" : "checkbox/checkbox",
+                    "style" : {
+                        "navigationBarTitleText" : "复选框"
+                    }
+                },
+                {
+                    "path" : "empty/empty",
+                    "style" : {
+                        "navigationBarTitleText" : "内容为空"
+                    }
+                },
+                {
+                    "path" : "backtop/backtop",
+                    "style" : {
+                        "navigationBarTitleText" : "返回顶部"
+                    }
+                },
+                {
+                    "path" : "divider/divider",
+                    "style" : {
+                        "navigationBarTitleText" : "分割线"
+                    }
+                },
+                {
+                    "path" : "rate/rate",
+                    "style" : {
+                        "navigationBarTitleText" : "评分"
+                    }
+                },
+                {
+                    "path" : "gap/gap",
+                    "style" : {
+                        "navigationBarTitleText" : "间隔槽"
+                    }
+                },
+                {
+                    "path" : "grid/grid",
+                    "style" : {
+                        "navigationBarTitleText" : "宫格"
+                    }
+                },
+                {
+                    "path" : "lazyLoad/lazyLoad",
+                    "style" : {
+                        "navigationBarTitleText" : "图片懒加载"
+                    }
+                }
+            ]
+        },
+        {
+            "root" : "pages/componentsB",
+            "pages" : [
+                {
+                    "path" : "dropdown/dropdown",
+                    "style" : {
+                        "navigationBarTitleText" : "下拉菜单"
+                    }
+                },
+                {
+                    "path" : "actionSheet/actionSheet",
+                    "style" : {
+                        "navigationBarTitleText" : "上拉菜单",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "parse/parse",
+                    "style" : {
+                        "navigationBarTitleText" : "富文本解析器"
+                    }
+                },
+                {
+                    "path" : "parse/jump",
+                    "style" : {
+                        "navigationBarTitleText" : "内部链接"
+                    }
+                },
+                {
+                    "path" : "toast/toast",
+                    "style" : {
+                        "navigationBarTitleText" : "提示消息"
+                    }
+                },
+                {
+                    "path" : "keyboard/keyboard",
+                    "style" : {
+                        "navigationBarTitleText" : "键盘",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "slider/slider",
+                    "style" : {
+                        "navigationBarTitleText" : "滑动选择器"
+                    }
+                },
+                {
+                    "path" : "upload/upload",
+                    "style" : {
+                        "navigationBarTitleText" : "上传"
+                    }
+                },
+                {
+                    "path" : "notify/notify",
+                    "style" : {
+                        "navigationBarTitleText" : "消息提示"
+                    }
+                },
+                {
+                    "path" : "countDown/countDown",
+                    "style" : {
+                        "navigationBarTitleText" : "倒计时"
+                    }
+                },
+                {
+                    "path" : "color/color",
+                    "style" : {
+                        "navigationBarTitleText" : "色彩"
+                    }
+                },
+                {
+                    "path" : "numberBox/numberBox",
+                    "style" : {
+                        "navigationBarTitleText" : "步进器"
+                    }
+                },
+                {
+                    "path" : "countTo/countTo",
+                    "style" : {
+                        "navigationBarTitleText" : "数字滚动"
+                    }
+                },
+                {
+                    "path" : "search/search",
+                    "style" : {
+                        "navigationBarTitleText" : "搜索"
+                    }
+                },
+                {
+                    "path" : "badge/badge",
+                    "style" : {
+                        "navigationBarTitleText" : "徽标数"
+                    }
+                },
+                {
+                    "path" : "tag/tag",
+                    "style" : {
+                        "navigationBarTitleText" : "标签"
+                    }
+                },
+                {
+                    "path" : "alert/alert",
+                    "style" : {
+                        "navigationBarTitleText" : "警告"
+                    }
+                },
+                {
+                    "path" : "switch/switch",
+                    "style" : {
+                        "navigationBarTitleText" : "开关"
+                    }
+                },
+                {
+                    "path" : "collapse/collapse",
+                    "style" : {
+                        "navigationBarTitleText" : "折叠面板"
+                    }
+                },
+                {
+                    "path" : "code/code",
+                    "style" : {
+                        "navigationBarTitleText" : "验证码"
+                    }
+                },
+                {
+                    "path" : "noticeBar/noticeBar",
+                    "style" : {
+                        "navigationBarTitleText" : "滚动通知"
+                    }
+                },
+                {
+                    "path" : "progress/progress",
+                    "style" : {
+                        "navigationBarTitleText" : "进度条"
+                    }
+                },
+                {
+                    "path" : "tabbar/tabbar",
+                    "style" : {
+                        "navigationBarTitleText" : "Tabbar"
+                    }
+                },
+                {
+                    "path" : "tabbar/tabbar2",
+                    "style" : {
+                        "navigationBarTitleText" : "Tabbar-vue"
+                    }
+                },
+                {
+                    "path" : "waterfall/waterfall",
+                    "style" : {
+                        "navigationBarTitleText" : "瀑布流"
+                    }
+                },
+                {
+                    "path" : "card/card",
+                    "style" : {
+                        "navigationBarTitleText" : "卡片"
+                    }
+                }
+            ]
+        },
+        {
+            "root" : "pages/componentsC",
+            "pages" : [
+                {
+                    "path" : "table/table",
+                    "style" : {
+                        "navigationBarTitleText" : "表格"
+                    }
+                },
+                {
+                    "path" : "form/form",
+                    "style" : {
+                        "navigationBarTitleText" : "表单",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "textarea/textarea",
+                    "style" : {
+                        "navigationBarTitleText" : "文本域"
+                    }
+                },
+                {
+                    "path" : "noNetwork/noNetwork",
+                    "style" : {
+                        "navigationBarTitleText" : "无网络提示"
+                    }
+                },
+                {
+                    "path" : "loadmore/loadmore",
+                    "style" : {
+                        "navigationBarTitleText" : "加载更多"
+                    }
+                },
+                {
+                    "path" : "text/text",
+                    "style" : {
+                        "navigationBarTitleText" : "文本"
+                    }
+                },
+                {
+                    "path" : "steps/steps",
+                    "style" : {
+                        "navigationBarTitleText" : "步骤条"
+                    }
+                },
+                {
+                    "path" : "navbar/navbar",
+                    "style" : {
+                        "navigationBarTitleText" : "导航栏",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "skeleton/skeleton",
+                    "style" : {
+                        "navigationBarTitleText" : "骨架屏"
+                    }
+                },
+                {
+                    "path" : "input/input",
+                    "style" : {
+                        "navigationBarTitleText" : "输入框"
+                    }
+                },
+                {
+                    "path" : "album/album",
+                    "style" : {
+                        "navigationBarTitleText" : "相册"
+                    }
+                },
+                {
+                    "path" : "avatar/avatar",
+                    "style" : {
+                        "navigationBarTitleText" : "头像"
+                    }
+                },
+                {
+                    "path" : "readMore/readMore",
+                    "style" : {
+                        "navigationBarTitleText" : "阅读更多"
+                    }
+                },
+                {
+                    "path" : "layout/layout",
+                    "style" : {
+                        "navigationBarTitleText" : "布局"
+                    }
+                },
+                {
+                    "path" : "indexList/indexList",
+                    "style" : {
+                        "navigationBarTitleText" : "索引列表"
+                    }
+                },
+                {
+                    "path" : "indexList/indexList2",
+                    "style" : {
+                        "navigationBarTitleText" : "索引列表(弹窗)"
+                    }
+                },
+                {
+                    "path" : "tooltip/tooltip",
+                    "style" : {
+                        "navigationBarTitleText" : "长按提示"
+                    }
+                },
+                {
+                    "path" : "tabs/tabs",
+                    "style" : {
+                        "navigationBarTitleText" : "标签"
+                    }
+                },
+                {
+                    "path" : "list/list",
+                    "style" : {
+                        "navigationBarTitleText" : "列表"
+                    }
+                },
+                {
+                    "path" : "swiper/swiper",
+                    "style" : {
+                        "navigationBarTitleText" : "轮播"
+                    }
+                },
+                {
+                    "path" : "scrollList/scrollList",
+                    "style" : {
+                        "navigationBarTitleText" : "横向滚动列表"
+                    }
+                },
+                {
+                    "path" : "codeInput/codeInput",
+                    "style" : {
+                        "navigationBarTitleText" : "验证码输入"
+                    }
+                },
+                {
+                    "path" : "modal/modal",
+                    "style" : {
+                        "navigationBarTitleText" : "模态框",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "picker/picker",
+                    "style" : {
+                        "navigationBarTitleText" : "选择器",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "calendar/calendar",
+                    "style" : {
+                        "navigationBarTitleText" : "日历",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "datetimePicker/datetimePicker",
+                    "style" : {
+                        "navigationBarTitleText" : "时间选择",
+                        "navigationStyle" : "custom"
+                    }
+                },
+                {
+                    "path" : "subsection/subsection",
+                    "style" : {
+                        "navigationBarTitleText" : "分段器"
+                    }
+                }
+            ]
+        },
+        {
+            "root" : "pages/componentsD",
+            "pages" : [
+                {
+                    "path" : "qrcode/qrcode",
+                    "style" : {
+                        "navigationBarTitleText" : "二维码"
+                    }
+                },
+                {
+                    "path" : "copy/copy",
+                    "style" : {
+                        "navigationBarTitleText" : "复制"
+                    }
+                },
+                {
+                    "path" : "navbarMini/navbarMini",
+                    "style" : {
+                        "navigationBarTitleText" : "迷你导航"
+                    }
+                },
+                {
+                    "path" : "box/box",
+                    "style" : {
+                        "navigationBarTitleText" : "盒子"
+                    }
+                },
+                {
+                    "path" : "floatButton/floatButton",
+                    "style" : {
+                        "navigationBarTitleText" : "悬浮按钮"
+                    }
+                }
+            ]
+        },
+        {
+            "root" : "pages/template",
+            "pages" : [
+                // wxCenter 仿微信个人中心
+                {
+                    "path" : "wxCenter/index",
+                    "style" : {
+                        "navigationBarTitleText" : "wxCenter 仿微信个人中心",
+                        "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" : "添加用户地址"
+                    }
+                }
+            ]
+        }
+    ],
+    "preloadRule" : {
+        "pages/example/components" : {
+            "network" : "all",
+            "packages" : [ "pages/componentsA", "pages/componentsB" ]
+        }
+    },
+    "globalStyle" : {
+        "navigationBarTextStyle" : "black",
+        "navigationBarTitleText" : "uview-plus",
+        "navigationBarBackgroundColor" : "#FFFFFF",
+        "backgroundColor" : "#FFFFFF"
+    },
+    "tabBar" : {
+        "color" : "#cccccc",
+        "selectedColor" : "#005ce6",
+        "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/components",
+                "iconPath" : "static/uview/example/component.png",
+                "selectedIconPath" : "static/uview/example/component_select.png",
+                "text" : "我的"
+            }
+        ]
+    }
+}

src/pages/componentsA/backtop/backtop.nvue

@@ -0,0 +1,132 @@
+<template>
+	<view
+	    class="u-page"
+	    ref="u-back-top"
+	>
+	<view class="u-demo-block">
+		<text class="u-demo-block__title">自定义backTop(滚动页面即可在右下角看到图标)</text>
+		<view class="u-demo-block__content">
+			<view class="u-page__backTop-item">
+				<up-checkbox-group
+				    placement="column"
+					shape="square"
+				    @change="checkboxChange"
+					v-model="value"
+				>
+					<up-checkbox
+					    :customStyle="{marginBottom: '8px'}"
+					    v-for="(item, index) in checkboxList"
+					    :key="index"
+					    :label="item.name"
+					    :name="item.name"
+					>
+					</up-checkbox>
+				</up-checkbox-group>
+			</view>
+		</view>
+	</view>
+		<up-back-top
+		    :right="backTopData.right"
+		    :customStyle="backTopData.customStyle"
+		    :bottom="backTopData.bottom"
+		    :icon="backTopData.icon"
+		    :mode="backTopData.mode"
+		    :iconStyle="backTopData.iconStyle"
+			:duration="backTopData.duration"
+		    :scrollTop="scrollTop"
+			@click="click"
+		></up-back-top>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: ['自定义图标'],
+				backTopData: {
+					mode: 'circle',
+					icon: 'arrow-upward',
+					bottom: 100,
+					customStyle: {},
+					iconStyle: {},
+					right:20,
+					duration: 300
+				},
+				scrollTop: 0,
+				// 被自定义的样式
+				checkboxList: [{
+						name: '显示方形',
+					},
+					{
+						name: '自定义图标',
+					},
+					{
+						name: '自定义距离',
+					},
+					{
+						name: '自定义样式',
+					},
+					{
+						name:'自定义返回顶部滚动时间',
+					}
+				]
+			}
+		},
+		onLoad() {
+			// 演示中默认勾选了自定义图标
+			this.backTopData.icon = "arrow-up"
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+		},
+		methods: {
+			checkboxChange(n) {
+				if (n.includes('显示方形')) {
+					this.backTopData.mode = 'square'
+				} else {
+					this.backTopData.mode = "circle"
+				}
+				if (n.includes('自定义图标')) {
+					this.backTopData.icon = "arrow-up"
+				} else {
+					this.backTopData.icon = "arrow-upward"
+				}
+				if (n.includes('自定义距离')) {
+					this.backTopData.bottom = 300
+					this.backTopData.right=20
+				} else {
+					this.backTopData.bottom = 100
+				}
+				if (n.includes('自定义样式')) {
+					this.backTopData.customStyle = {
+						backgroundColor: '#2979ff',
+					}
+					this.backTopData.iconStyle = {
+						color: '#ffffff'
+					}
+				} else {
+					this.backTopData.customStyle = {}
+					this.backTopData.iconStyle = {}
+				}
+				if (n.includes('自定义返回顶部滚动时间')) {
+					this.backTopData.duration =1500 
+				} else {
+					this.backTopData.duration =300
+				}
+			},
+			click() {
+				console.log('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		height: 1200px;
+		&__backTop-item{
+			margin-top:10px;
+		}
+	}
+</style>

src/pages/componentsA/button/button.nvue

@@ -0,0 +1,343 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">按钮类型</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__button-item">
+					<up-button
+					    text="默认按钮"
+					    size="normal"
+					    type="info"
+						@click="click"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="成功按钮"
+					    size="normal"
+					    type="success"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="危险按钮"
+					    size="normal"
+					    type="error"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="主要按钮"
+					    size="normal"
+					    type="primary"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="警告按钮"
+					    size="normal"
+					    type="warning"
+					></up-button>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">镂空按钮</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__button-item">
+					<up-button
+					    text="镂空按钮"
+					    size="normal"
+					    type="info"
+					    plain
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="镂空按钮"
+					    size="normal"
+					    type="success"
+					    plain
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="镂空按钮"
+					    size="normal"
+					    type="error"
+					    plain
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="镂空按钮"
+					    size="normal"
+					    type="primary"
+					    plain
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="镂空按钮"
+					    size="normal"
+					    type="warning"
+					    plain
+					></up-button>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">细边按钮</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__button-item">
+					<up-button
+					    text="细边按钮"
+					    size="normal"
+					    type="info"
+					    plain
+					    hairline
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="细边按钮"
+					    size="normal"
+					    type="success"
+					    plain
+					    hairline
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="细边按钮"
+					    size="normal"
+					    type="error"
+					    plain
+					    hairline
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="细边按钮"
+					    size="normal"
+					    type="primary"
+					    plain
+					    hairline
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="细边按钮"
+					    size="normal"
+					    type="warning"
+					    plain
+					    hairline
+					></up-button>
+				</view>
+			</view>
+		</view>
+
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">禁用按钮</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__button-item">
+					<up-button
+					    disabled
+					    text="禁用按钮"
+					    size="normal"
+					    type="info"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    disabled
+					    text="禁用按钮"
+					    size="normal"
+					    type="success"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    disabled
+					    text="禁用按钮"
+					    size="normal"
+					    type="error"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    disabled
+					    text="禁用按钮"
+					    size="normal"
+					    type="primary"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    disabled
+					    text="禁用按钮"
+					    size="normal"
+					    type="warning"
+					></up-button>
+				</view>
+			</view>
+		</view>
+
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">加载中</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__button-item">
+					<up-button
+					    loadingText="加载中"
+					    size="normal"
+						loading
+					    loadingMode="circle"
+					    type="success"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    class="button-layout__item"
+					    loadingText="加载中"
+					    size="normal"
+					    loading
+					    type="error"
+					></up-button>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">按钮图标&按钮形状</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__button-item">
+					<up-button
+					    text="按钮图标"
+					    size="normal"
+					    icon="map"
+					    plain
+					    type="warning"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="按钮图标"
+					    size="normal"
+					    plain
+					    shape="circle"
+					    type="success"
+					></up-button>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__button-item">
+					<up-button
+					    text="渐变色按钮"
+					    size="normal"
+					    color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="渐变色按钮"
+					    size="normal"
+					    color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="青绿色按钮"
+					    size="normal"
+					    color="rgb(10, 185, 156)"
+					></up-button>
+				</view>
+			</view>
+		</view>
+
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义大小</text>
+			<view class="u-demo-block__content" style="padding-bottom: 15px; flex-direction: column;align-items: stretch;flex-wrap: nowrap;">
+				<up-button
+				    text="超大尺寸"
+				    size="large"
+				    type="success"
+				></up-button>
+			</view>
+			<view class="u-demo-block__content">
+				<view class="u-page__button-item">
+					<up-button
+					    text="普通尺寸"
+					    size="normal"
+					    type="error"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    text="小型尺寸"
+					    size="small"
+					    type="primary"
+					></up-button>
+				</view>
+				<view class="u-page__button-item">
+					<up-button
+					    class="button-layout__item"
+					    text="超小尺寸"
+					    size="mini"
+					    type="warning"
+					></up-button>
+				</view>
+			</view>
+		</view>
+		<up-action-sheet
+			v-model:show="show"
+			:actions="[{
+					name: '选项1',
+				},
+				{
+					name: '选项2',
+				}]"
+			:closeOnClickOverlay="false"
+		>
+		</up-action-sheet>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				// type: 'default',
+				// disabled: false
+			}
+		},
+		onLoad() {
+			setTimeout(() => {
+				this.type = 'primary'
+				this.disabled = true
+			}, 2000)
+		},
+		methods: {
+			click() {
+				this.show = true;
+				console.log('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		&__button-item {
+			margin: 0 15px 15px 0;
+		}
+	}
+
+	.u-demo-block__content {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+</style>

src/pages/componentsA/cell/cell.nvue

@@ -0,0 +1,213 @@
+<template>
+	<view class="cell-page">
+		<view class="u-page__item">
+			<text class="u-page__item__title">基础功能</text>
+			<up-cell-group>
+				<up-cell
+				    title="uview-plus"
+				    value="内容"
+				    :isLink="true"
+				></up-cell>
+				<up-cell
+				    title="利剑出鞘,一统江湖"
+				    value="内容"
+				    label="挣脱束缚,向往自由"
+				></up-cell>
+			</up-cell-group>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">自定义图标/图片</text>
+			<up-cell-group>
+				<up-cell
+				    title="单元格"
+				    icon="lock-fill"
+				></up-cell>
+				<up-cell
+				    title="单元格"
+				    icon="https://cdn.uviewui.com/uview/example/tag.png"
+				></up-cell>
+			</up-cell-group>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">自定义大小</text>
+			<up-cell-group>
+				<up-cell
+				    size="large"
+				    title="单元格"
+				    value="内容"
+					isLink
+				></up-cell>
+				<up-cell
+				    size="large"
+				    title="单元格"
+				    value="内容"
+				    label="描述信息"
+				></up-cell>
+			</up-cell-group>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">显示右箭头</text>
+			<up-cell-group>
+				<up-cell
+					required
+				    title="单元格"
+				    value="组件"
+				    isLink
+				></up-cell>
+				<up-cell
+				    title="单元格"
+				    value="工具"
+				    arrow-direction="up"
+				    isLink
+				></up-cell>
+				<up-cell
+				    title="单元格"
+				    value="模板"
+				    arrow-direction="down"
+				    isLink
+				></up-cell>
+			</up-cell-group>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">跳转页面</text>
+			<up-cell-group>
+				<up-cell
+				    title="打开标签页"
+				    isLink
+				    url="/pages/componentsB/tag/tag"
+				></up-cell>
+				<up-cell
+				    title="打开徽标页"
+				    isLink
+				    url="/pages/componentsB/badge/badge"
+				></up-cell>
+			</up-cell-group>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">右侧内容垂直居中</text>
+			<up-cell-group>
+				<up-cell
+					required
+				    title="单元格"
+				    value="内容"
+				    label="描述信息"
+				    center
+				></up-cell>
+			</up-cell-group>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">自定义插槽</text>
+			<up-cell-group>
+				<up-cell value="内容">
+                    <template #title>
+                        <view
+					        class="u-slot-title"
+					    >
+                            <text class="u-cell-text">单元格</text>
+                            <up-tag
+                                text="标签"
+                                plain
+                                size="mini"
+                                type="warning"
+                            >
+                            </up-tag>
+                        </view>
+                    </template>
+				</up-cell>
+				<up-cell
+				    title="单元格"
+					isLink
+				>
+					<template #value>
+						<text
+						    class="u-slot-value"
+						>99</text>
+					</template>
+					<template #right-icon>
+						1
+					</template>
+				</up-cell>
+			</up-cell-group>
+		</view>
+		<up-gap height="30"></up-gap>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {}
+		},
+		methods: {
+			click() {
+				console.log('Cell is clicked.');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.cell-page {
+		padding-bottom: 20px;
+		background-color: #f3f4f6;
+	}
+
+	.cell-box {
+		&__title {
+			font-size: 14px;
+			color: rgb(143, 156, 162);
+			margin: 20px 0px 0px 15px;
+		}
+
+		&__block {
+			// background-color: #fff;
+			margin-top: 10px;
+		}
+	}
+
+	.u-page {
+		padding: 0;
+		&__item {
+			margin-bottom: 10px;
+
+			&__title {
+				color: $u-tips-color;
+				padding: 10px 15px;
+				margin-bottom: 0px;
+				font-size: 15px;
+
+				&__slot-title {
+					color: $u-primary;
+					font-size: 14px;
+				}
+			}
+
+			:deep(.u-cell-group) {
+				background-color: #fff;
+			}
+		}
+	}
+
+	.u-slot-title {
+		@include flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.u-cell-text {
+		font-size: 15px;
+		line-height: 22px;
+		color: #303133;
+		margin-right: 5px;
+	}
+
+	.u-slot-value {
+		line-height: 17px;
+		text-align: center;
+		font-size: 10px;
+		padding: 0 5px;
+		height: 17px;
+		color: #FFFFFF;
+		border-radius: 100px;
+		background-color: #f56c6c;		/* #ifndef APP-NVUE */		margin-left: auto;		/* #endif */
+	}
+</style>

src/pages/componentsA/checkbox/checkbox.nvue

@@ -0,0 +1,330 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案例</text>
+			<text class="u-block__title">苹果、香蕉和橙子哪个最甜？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__checkbox-item">
+					<up-checkbox-group
+						v-model="checkboxValue1"
+						placement="column"
+						@change="checkboxChange"
+					>
+						<up-checkbox
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in checkboxList1"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-checkbox>
+					</up-checkbox-group>
+				</view>
+			</view>
+		</view>
		<view class="u-demo-block">
			<text class="u-demo-block__title">单独使用checkbox</text>
			<text class="u-block__title">是否同意用户协议？</text>
			<view class="u-demo-block__content">
				<view class="u-page__checkbox-item">
					<up-checkbox
						:customStyle="{marginBottom: '8px'}"
						label="同意用户协议与隐私条款"
						name="agree"
+						usedAlone
						v-model:checked="aloneChecked"
					>
					</up-checkbox>
					<up-button type="primary" size="small" style="width: 120px;"
						@click="changeAloneChecked" text="切换">{{aloneChecked}}</up-button>
				</view>
			</view>
		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义形状</text>
+			<text class="u-block__title">中国四大名著是？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__checkbox-item">
+					<up-checkbox-group
+						v-model="checkboxValue2"
+						placement="column"
+						@change="checkboxChange"
+						shape="square"
+					>
+						<up-checkbox
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in checkboxList2"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-checkbox>
+					</up-checkbox-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否禁用</text>
+			<text class="u-block__title">下面什么东西不能吃？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__checkbox-item">
+					<up-checkbox-group
+						v-model="checkboxValue3"
+						placement="column"
+						@change="checkboxChange"
+					>
+						<up-checkbox
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in checkboxList3"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+							:disabled="index===0"
+						>
+						</up-checkbox>
+					</up-checkbox-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否禁止点击提示语选中复选框</text>
+			<text class="u-block__title">北宋四大家是谁？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__checkbox-item">
+					<up-checkbox-group
+						v-model="checkboxValue4"
+						placement="column"
+						@change="checkboxChange"
+						:labelDisabled="true"
+					>
+						<up-checkbox
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in checkboxList4"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-checkbox>
+					</up-checkbox-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色</text>
+			<text class="u-block__title">哪个颜色最好看？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__checkbox-item">
+					<up-checkbox-group
+						v-model="checkboxValue5"
+						placement="column"
+						@change="checkboxChange"
+						activeColor="#19be6b"
+					>
+						<up-checkbox
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in checkboxList5"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-checkbox>
+					</up-checkbox-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">横向排列形式</text>
+			<text class="u-block__title">什么东西不能飞？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__checkbox-item">
+					<up-checkbox-group
+						v-model="checkboxValue6"
+						@change="checkboxChange"
+					>
+						<up-checkbox
+							:customStyle="{marginRight: '16px'}"
+							v-for="(item, index) in checkboxList6"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-checkbox>
+					</up-checkbox-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">横向两端排列形式</text>
+			<text class="u-block__title">什么东西不能吃？</text>
+			<view>
+				<view class="u-page__checkbox-item">
+					<up-checkbox-group
+						v-model="checkboxValue7"
+						@change="checkboxChange"
+						:borderBottom="true"
+						placement="column"
+						iconPlacement="right"
+					>
+						<up-checkbox
+							:customStyle="{marginBottom: '16px'}"
+							v-for="(item, index) in checkboxList7"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-checkbox>
+					</up-checkbox-group>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 基本案列数据
+				checkboxList1: [{
+						name: '苹果',
+						disabled: false
+					},
+					{
+						name: '香蕉',
+						disabled: false
+					},
+					{
+						name: '橙子',
+						disabled: false
+					}
+				],
				aloneChecked: false,
+				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
+				checkboxValue1: ['苹果', '橙子'],
+
+				// 自定义形状数据
+				checkboxList2: [{
+						name: '西游记',
+						disabled: false
+					},
+					{
+						name: '红楼梦',
+						disabled: false
+					},
+					{
+						name: '三国演义',
+						disabled: false
+					},
+					{
+						name: '水浒传',
+						disabled: false
+					}
+				],
+				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
+				checkboxValue2: ['西游记', '红楼梦', '三国演义', '水浒传'],
+
+				// 是否禁用数据
+				checkboxList3: [{
+						name: '冬瓜',
+						disabled: false
+					},
+					{
+						name: '西瓜',
+						disabled: false
+					},
+					{
+						name: '黄瓜',
+						disabled: false
+					},
+					{
+						name: '傻瓜',
+						disabled: false
+					}
+				],
+				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
+				checkboxValue3: ['傻瓜'],
+
+				// 是否禁止点击提示语选中复选框数据
+				checkboxList4: [{
+						name: '黄庭坚',
+						disabled: false
+					},
+					{
+						name: '欧阳修',
+						disabled: false
+					},
+					{
+						name: '苏小宝',
+						disabled: false
+					},
+					{
+						name: '王安石',
+						disabled: false
+					}
+				],
+				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
+				checkboxValue4: ['黄庭坚', '欧阳修', '王安石'],
+
+				//自定义颜色数据
+				checkboxList5: [{
+						name: '红色',
+						disabled: false
+					},
+					{
+						name: '黄色',
+						disabled: false
+					},
+					{
+						name: '绿色',
+						disabled: false
+					},
+					{
+						name: '蓝色',
+						disabled: false
+					}
+				],
+				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
+				checkboxValue5: ['绿色'],
+
+				//横向排列形式数据
+				checkboxList6: [{
+						name: '小鸟',
+						disabled: false
+					},
+					{
+						name: '游艇',
+						disabled: false
+					},
+					{
+						name: '轮船',
+						disabled: false
+					},
+					{
+						name: '飞机',
+						disabled: false
+					}
+				],
+				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
+				checkboxValue6: ['游艇', '轮船'],
+
+				//横向两端排列形式
+				checkboxList7: [{
+						name: '汽车',
+						disabled: false
+					},
+					{
+						name: '蒸汽机',
+						disabled: false
+					},
+					{
+						name: '猪肉',
+						disabled: false
+					},
+					{
+						name: '抄手',
+						disabled: false
+					}
+				],
+				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
+				checkboxValue7: ['汽车', '蒸汽机'],
+			}
+
+		},
+		watch: {
+			checkboxValue1(newValue, oldValue) {
+				// console.log('v-model', newValue);
+			}
+		},
+		methods: {
+			checkboxChange(n) {
+				// console.log('change', n);
+			},
			changeAloneChecked() {
				this.aloneChecked = !this.aloneChecked;
			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {}
+</style>

src/pages/componentsA/divider/divider.nvue

@@ -0,0 +1,82 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案例</text>
+			<view>
+				<up-divider text="分割线"></up-divider>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否虚线</text>
+			<view>
+			<up-divider
+			    text="分割线"
+			    :dashed="true"
+			></up-divider>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否细线</text>
+			<view>
+			<up-divider
+			    text="分割线"
+			    :hairline="true"
+			></up-divider>
+			</view>
+		</view>
+ <view class="u-demo-block">
+			<text class="u-demo-block__title">是否以点代替文字</text>
+			<view>
+			<up-divider
+			    text="分割线"
+			    :dot="true"
+			></up-divider>
+			</view>
+		</view>
+ <view class="u-demo-block">
+			<text class="u-demo-block__title">文本内容靠左</text>
+			<view>
+		<up-divider
+		    text="分割线"
+		    textPosition="left"
+		></up-divider>
+			</view>
+		</view>
+ <view class="u-demo-block">
+			<text class="u-demo-block__title">文本内容靠右</text>
+			<view>
+		<up-divider
+		    text="分割线"
+		    textPosition="right"
+		></up-divider>
+			</view>
+		</view>
+ <view class="u-demo-block">
+			<text class="u-demo-block__title">自定义文本颜色</text>
+			<view>
+		<up-divider
+		    text="分割线"
+		    textColor="#2979ff"
+			lineColor="#2979ff"
+		></up-divider>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-divider {}
+</style>

src/pages/componentsA/empty/empty.nvue

@@ -0,0 +1,144 @@
+<template>
+	<view class="u-page">
+		<view class="u-page__top-box">
+			<text class="u-demo-block__title">演示效果</text>
+		</view>
+		<up-empty
+			:mode="mode"
+			:icon="imgList[mode]"
+		>
+			<up-button
+				size="small"
+				type="primary"
+				:style="{marginTop:10+'px'}"
+				v-if="mode=='car'"
+				text="查看更多商品"
+			>
+			</up-button>
+		</up-empty>
+		<div class="empty-select">
+			<up-cell
+				:titleStyle="{fontWeight: 500}"
+				@click="openImg(item.imgName)"
+				:title="item.title"
+				v-for="(item, index) in list"
+				:key="index"
+				isLink
+			>
+				<template #icon>
+					<image
+						class="u-cell-icon"
+						:src="item.iconUrl"
+						mode="widthFix"
+					></image>
+				</template>
+			</up-cell>
+		</div>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			// 如果使用这些图片，请勿直接引入cdn.uviewui.com的资源，因为此资源路径随时会有变动
+			// 变动后，您将会访问图片失败，如有需要，您可以将这些图片上传到自己的oss或者服务器再使用
+			const baseUrl = 'http://cdn.uviewui.com/uview/empty/'
+			return {
+				mode: 'car',
+				imgList: {
+					car: baseUrl + 'car.png',
+					address: baseUrl + 'address.png',
+					comment: baseUrl + 'comment.png',
+					coupon: baseUrl + 'coupon.png',
+					data: baseUrl + 'data.png',
+					history: baseUrl + 'history.png',
+					list: baseUrl + 'list.png',
+					message: baseUrl + 'message.png',
+					news: baseUrl + 'news.png',
+					order: baseUrl + 'order.png',
+					page: baseUrl + 'page.png',
+					permission: baseUrl + 'permission.png',
+					search: baseUrl + 'search.png',
+					wifi: baseUrl + 'wifi.png',
+				},
+				list: [{
+						imgName: 'car',
+						title: '购物车为空(同时传入slot)',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/car.png'
+					},
+					{
+						imgName: 'data',
+						title: '数据为空',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/data.png'
+					}, {
+						imgName: 'comment',
+						title: '评论为空',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/comment.png'
+					}, {
+						imgName: 'coupon',
+						title: '没有优惠券',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/coupon.png'
+					}, {
+						imgName: 'history',
+						title: '无历史记录',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/history.png'
+					}, {
+						imgName: 'list',
+						title: '列表为空',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/list.png'
+					}, {
+						imgName: 'message',
+						title: '消息列表为空',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/message.png'
+					}, {
+						imgName: 'news',
+						title: '无新闻列表',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/news.png'
+					}, {
+						imgName: 'order',
+						title: '订单为空',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/order.png'
+					}, {
+						imgName: 'page',
+						title: '页面不存在',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/page.png'
+					}, {
+						imgName: 'permission',
+						title: '无权限',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/permission.png'
+					}, {
+						imgName: 'search',
+						title: '没有搜索结果',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/search.png'
+					}, {
+						imgName: 'wifi',
+						title: '没有WiFi',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/empty/wifi.png'
+					},
+				]
+
+			}
+		},
+		methods: {
+			//点击改变图片
+			openImg(imgName) {
+				// this.mode = this.imgList[imgName]
+				this.mode = imgName;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 40rpx 0px;
+
+		&__top-box {
+			padding-left: 40rpx;
+		}
+	}
+
+	.empty-select {
+		margin-top: 10px;
+	}
+</style>

src/pages/componentsA/gap/gap.nvue

@@ -0,0 +1,42 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案列</text>
+			<view class="u-page__gap-item">
+				<up-gap bgColor="#f3f4f6"></up-gap>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色</text>
+			<view class="u-page__gap-item">
+				<up-gap bgColor="#2979ff"></up-gap>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义高度</text>
+			<view class="u-page__gap-item">
+				<up-gap bgColor="#f3f4f6" height="40"></up-gap>
+			</view>
+		</view>	
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义上下边距</text>
+			<view class="u-page__gap-item">
+			<up-gap
+				bgColor="#f3f4f6"
+			    marginTop="20"
+			    marginBottom="20"
+			></up-gap>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+
+	}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/componentsA/grid/grid.nvue

@@ -0,0 +1,196 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案例</text>
+			<view>
+				<up-grid
+					:border="false"
+					@click="click"
+					align="center"
+				>
+					<up-grid-item
+						v-for="(baseListItem,baseListIndex) in baseList"
+						@click="click('test')"
+						:key="baseListIndex"
+					>
+						<up-icon
+							:customStyle="{paddingTop:20+'rpx'}"
+							:name="baseListItem.name"
+							:size="22"
+						></up-icon>
+						<text class="grid-text">{{baseListItem.title}}</text>
+					</up-grid-item>
+				</up-grid>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">显示边框</text>
+			<view>
+				<up-grid :border="true">
+					<up-grid-item
+						v-for="(listItem,listIndex) in list"
+						:key="listIndex"
+						customStyle="padding-top: 10px; padding-bottom: 10px" 
+					>
+						<up-icon
+							:customStyle="{paddingTop:20+'rpx'}"
+							:name="listItem.name"
+							:size="22"
+						></up-icon>
+						<text class="grid-text">{{listItem.title}}</text>
+					</up-grid-item>
+				</up-grid>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">绑定点击事件&自定义列数</text>
+			<view>
+				<up-grid
+					:border="false"
+					col="4"
+				>
+					<up-grid-item
+						v-for="(listItem,listIndex) in list"
+						:key="listIndex"
+						customStyle="padding-top: 10px; padding-bottom: 10px"
+					>
+						<up-icon
+							:customStyle="{paddingTop:20+'rpx'}"
+							:name="listItem.name"
+							:size="22"
+						></up-icon>
+						<text class="grid-text">{{listItem.title}}</text>
+					</up-grid-item>
+				</up-grid>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">可滑动</text>
+			<view>
+				<swiper
+					:indicator-dots="true"
+					class="swiper"
+				>
+					<swiper-item>
+						<up-grid :border="true">
+							<up-grid-item
+								v-for="(item, index) in swiperList"
+								:index="index"
+								:key="index"
+							>
+								<up-icon
+									:customStyle="{paddingTop:20+'rpx'}"
+									:name="item"
+									:size="22"
+								></up-icon>
+								<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
+							</up-grid-item>
+						</up-grid>
+					</swiper-item>
+					<swiper-item>
+						<up-grid :border="true">
+							<up-grid-item
+								v-for="(item, index) in swiperList"
+								:index="index + 9"
+								:key="index"
+							>
+								<up-icon
+									:customStyle="{paddingTop:20+'rpx'}"
+									:name="item"
+									:size="22"
+								></up-icon>
+								<text class="grid-text">{{ '宫格' + (index + 1) }}</text>
+							</up-grid-item>
+						</up-grid>
+					</swiper-item>
+					<swiper-item>
+						<up-grid :border="true">
+							<up-grid-item
+								v-for="(item, index) in swiperList"
+								:index="index + 18"
+								:key="index"
+							>
+								<up-icon
+									:customStyle="{paddingTop:20+'rpx'}"
+									:name="item"
+									:size="22"
+								></up-icon>
+								<text class="grid-text">{{ "宫格" + (index + 1) }}</text>
+							</up-grid-item>
+						</up-grid>
+					</swiper-item>
+				</swiper>
+			</view>
+		</view>
+		<up-toast ref="uToastRef" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				baseList: [{
+						name: 'photo',
+						title: '图片'
+					},
+					{
+						name: 'lock',
+						title: '锁头'
+					},
+					// {
+					// 	name: 'star',
+					// 	title: '星星'
+					// },
+				],
+				list: [{
+						name: 'photo',
+						title: '图片'
+					},
+					{
+						name: 'lock',
+						title: '锁头'
+					},
+					{
+						name: 'star',
+						title: '星星'
+					},
+					{
+						name: 'hourglass',
+						title: '沙漏'
+					},
+					{
+						name: 'home',
+						title: '首页'
+					},
+					{
+						name: 'volume',
+						title: '音量'
+					},
+				],
+				swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
+			}
+		},
+		methods: {
+			click(name) {
+				console.log(name)
+				this.$refs.uToastRef.success(`点击了第${name}个`)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.swiper {
+		height: 220px;
+	}
+
+	.grid-text {
+		font-size: 14px;
+		color: #909399;
+		padding: 10rpx 0 20rpx 0rpx;
+		/* #ifndef APP-PLUS */
+		box-sizing: border-box;
+		/* #endif */
+	}
+</style>

src/pages/componentsA/icon/icon.nvue

@@ -0,0 +1,669 @@
+<template>
+	<view class="u-page">
+		<view class="u-border-left u-border-top u-page__grid">
+			<view
+			    @tap="selectIcon(item.name)"
+			    class="u-page__grid__item u-border-bottom u-border-right"
+			    v-for="(item, index) in iconList"
+			    :key="index"
+			>
+				<view class="u-page__grid__item__icon">
+					<up-icon
+						stop
+					    :name="item.name"
+					    size="30"
+					    color="#909399"
+						@click="test"
+					></up-icon>
+				</view>
+				<text class="u-page__grid__item__text">{{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'
+					},
+					{
+						name: 'volume-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: '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: 'share-square'
+					},
+				]
+			};
+		},
+		methods: {
+			test() {
+				console.log('test')
+			},
+			selectIcon(name) {
+				// #ifdef H5
+				return uni.$u.toast('H5暂不支持复制');
+				// #endif
+				uni.setClipboardData({
+					data: name,
+					success: () => {
+
+					}
+				});
+				uni.hideToast()
+				uni.$u.toast('图标名称已复制');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 14rpx;
+
+		&__grid {
+			@include flex(row);
+			flex-wrap: wrap;
+
+			&__item {
+				@include flex(column);
+				align-items: center;
+				justify-content: center;
+				height: 240rpx;
+				width: 240rpx;
+				padding: 0 5px;
+				
+				&__icon {
+					height: 130rpx;
+					/* #ifndef APP-NVUE */
+					display: flex;
+					/* #endif */
+					flex-direction: row;
+					align-items: flex-end;
+				}
+				
+				&__text {
+					color: $u-tips-color;
+					/* #ifndef APP-NVUE */
+					word-wrap: break-word;
+					word-break: break-all;
+					/* #endif */
+					font-size: 14px;
+					height: 110rpx;
+				}
+			}
+		}
+	}
+</style>

src/pages/componentsA/image/image.nvue

@@ -0,0 +1,99 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案例</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__image-item">
+					 <up-image
+					     :showLoading="true"
+					     :src="src"
+					     width="80px"
+					     height="80px"
+						 @click="click"
+					 ></up-image>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义形状</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__image-item">
+					<up-image
+					    shape="circle"
+					    :src="src"
+					    width="80px"
+					    height="80px"
+					></up-image>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义圆角</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__image-item">
+					<up-image
+					    radius="4"
+					    :src="src"
+					    width="80px"
+					    height="80px"
+					></up-image>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">图片模式(widthFix)</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__image-item">
+					<up-image
+					    :src="src"
+					    width="80px"
+					    height="80px"
+						mode="widthFix"
+					></up-image>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义图片加载插槽</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__image-item">
+					<up-image
+					    :src="src1"
+					    width="80px"
+					    height="80px"
+						mode="widthFix"
+					>
+						<template v-slot:loading>
+							<up-loading-icon color="red"></up-loading-icon>
+						</template>
+					</up-image>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
+				src1:''
+			}
+		},
+		onLoad() {
+			setTimeout(()=>{
+				this.src1 = this.src
+			},3000)
+		},
+		methods: {
+			click() {
+				console.log('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	 
+</style>

src/pages/componentsA/lazyLoad/lazyLoad.nvue

@@ -0,0 +1,258 @@
+<template>
+    <view class="wrap">
+        <view class="item-warp">
+            <view class="item" v-for="(item, index) in list" :key="index">
+                <up-lazy-load threshold="-450" height="100px" img-mode="aspectFill" border-radius="10" :image="item.src"
+                    :index="index" @statusChange="statusChange" @clickImg="clickImg"></up-lazy-load>
+            </view>
+        </view>
+        <up-loadmore :status="status" @loadmore="getData"></up-loadmore>
+    </view>
+</template>
+
+<script>
+    import {
+        random
+    } from '@/uni_modules/uview-plus';
+    export default {
+        data() {
+            return {
+                list: [],
+                status: 'loadmore',
+                data: [{
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        // 这里会加载失败，显示错误的占位图
+                        src: "error.jpg",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        // 这里会加载失败，显示错误的占位图
+                        src: "error.jpg",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.pngg",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        // 这里会加载失败，显示错误的占位图
+                        src: "error.jpg",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        // 这里会加载失败，显示错误的占位图
+                        src: "error.jpg",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper3.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper1.png",
+                    },
+                    {
+                        src: "https://uview-plus.jiangruyi.com/uview/swiper/swiper2.png",
+                    },
+                    {
+                        // 这里会加载失败，显示错误的占位图
+                        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 = 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: flex;
+		flex-direction: column;
+    }
+
+    .item-warp {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .item-warp .item {
+        width: 700rpx;
+        height: 200rpx;
+        margin-bottom: 20rpx;
+        border-radius: 10rpx;
+        overflow: hidden;
+    }
+</style>

src/pages/componentsA/line/line.nvue

@@ -0,0 +1,74 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案例</text>
+				<view class="u-page__line-item">
+					<up-line></up-line>
+				</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色</text>
+				<view class="u-page__line-item">
+					<up-line color="#2979ff"></up-line>
+				</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义长度</text>
+				<view class="u-page__line-item">
+					<up-line length="200"></up-line>
+				</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义方向</text>
+				<view class="u-page__line-item">
+					<up-line
+					    length="30"
+					    color="#2979ff"
+					    direction="col"
+					></up-line>
+				</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否显示1px粗线条</text>
+				<view class="u-page__line-item">
+					<up-line :hairline="false"></up-line>
+				</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">线条与上下左右元素的间距</text>
+				<view class="u-page__line-item">
+						<up-line margin="20"></up-line>
+				</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否虚线</text>
+				<view class="u-page__line-item">
+					<up-line
+					    color="#2979ff"
+					    :dashed="true"
+					></up-line>
+				</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+.u-page{
+	&__line-item{
+		 margin-top:5px;
+	}
+}
+</style>

src/pages/componentsA/link/link.nvue

@@ -0,0 +1,75 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案例</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__link-item">
+					<up-link
+					    href="https://uview-plus.jiangruyi.com/"
+					    text="打开uview-plus文档"
+						@click="click"
+					></up-link>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">显示下划线</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__link-item">
+					<up-link
+					    href="https://uview-plus.jiangruyi.com/"
+					    :underLine="true"
+					    text="Go to uview-plus doc"
+					></up-link>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__link-item">
+					<up-link
+					    href="https://uview-plus.jiangruyi.com/"
+					    lineColor="#19be6b"
+					    color="#19be6b"
+					    text="打开uview-plus文档"
+					></up-link>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义链接内容</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__link-item">
+					<up-link
+					    href="https://uniapp.dcloud.io/"
+					    text="打开uni-app文档"
+					></up-link>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			click() {
+				console.log('click');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		&__link-item {
+			margin-top: 5px;
+		}
+	}
+</style>

src/pages/componentsA/loading-icon/loading-icon.nvue

@@ -0,0 +1,79 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案列</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__loading-item">
+					<up-loading-icon></up-loading-icon>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">半圆loading</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__loading-item">
+					<up-loading-icon mode="semicircle"></up-loading-icon>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">圆形loading</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__loading-item">
+					<up-loading-icon mode="circle"></up-loading-icon>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义动画</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__loading-item">
+					<up-loading-icon mode="circle" timingFunction="linear"></up-loading-icon>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__loading-item">
+					<up-loading-icon color="#19be6b"></up-loading-icon>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义文字</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__loading-item">
+					<up-loading-icon
+					    :vertical="true"
+					    text="加载中"
+					></up-loading-icon>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		&__loading-item {
+			margin-top: 5px;
+		}
+	}
+
+	.u-demo-block__content {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+</style>

src/pages/componentsA/loading-page/loading-page.nvue

@@ -0,0 +1,133 @@
+<template>
+	<view class="u-page">
+		<up-navbar
+			title="加载页"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar>
+		<up-gap
+		    bgColor="#fff"
+		    height="20"
+		></up-gap>
+		<up-cell-group>
+			<up-cell
+			    :titleStyle="{fontWeight: 500}"
+			    @click="openLoadingPage(index)"
+			    :title="item.title"
+			    v-for="(item, index) in list"
+			    :key="index"
+			    isLink
+			>
+				<template #icon>
+					<image
+						class="u-cell-icon"
+						:src="item.iconUrl"
+						mode="widthFix"
+					></image>
+				</template>
+			</up-cell>
+		</up-cell-group>
+		<up-loading-page
+		    :loadingText="loadingPageData.loadingText"
+		    :image="loadingPageData.image"
+			:iconSize="loadingPageData.iconSize"
+		    :loadingMode="loadingPageData.loadingMode"
+		    :bgColor="loadingPageData.bgColor"
+		    :loading="loading"
+		    :color="loadingPageData.color"
+		    :loadingColor="loadingPageData.loadingColor"
+		>
+		</up-loading-page>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				loading: false,
+				loadingPageData: {
+					// 自定义提示内容
+					loadingText: '',
+					// 自定义图片
+					image: '',
+					// 自定义加载动画模式
+					loadingMode: '',
+					// 自定义背景色
+					bgColor: '#ffffff',
+				},
+				list: [{
+						title: '自定义提示内容',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/promptContent.png',
+					},
+					{
+						title: '自定义图片',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customPicture.png',
+					},
+					{
+						title: '自定义加载动画模式',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customMode.png',
+					},
+					{
+						title: '自定义背景色',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/loading-page/customBgColor.png',
+
+					},
+				]
+			}
+		},
+		methods: {
+			navigateBack() {
+				uni.navigateBack()
+			},
+			openLoadingPage(indexNum) {
+				this.loadingPageData = {
+					loadingText: '',
+					image: '',
+					loadingMode: '',
+					bgColor: '#ffffff',
+					iconSize: 28
+				}
+				if (indexNum == 0) {
+					//自定义提示内容
+					this.loadingPageData.loadingMode = 'semicircle'
+					this.loadingPageData.loadingText = "Hello uview-plus"
+					this.loadingPageData.color = '#C8C8C8'
+					this.loadingPageData.loadingColor = '#C8C8C8'
+				} else if (indexNum == 1) {
+					// 自定义图片
+					this.loadingPageData.image = "/static/uview/common/logo.png"
+					this.loadingPageData.loadingText = "uview-plus"
+					this.loadingPageData.iconSize = 40
+					this.loadingPageData.color = '#C8C8C8'
+					this.loadingPageData.loadingColor = '#C8C8C8'
+				} else if (indexNum == 2) {
+					// 自定义加载动画模式
+					this.loadingPageData.loadingMode = 'circle'
+					this.loadingPageData.loadingText = "uview-plus"
+					this.loadingPageData.color = '#C8C8C8'
+					this.loadingPageData.loadingColor = '#C8C8C8'
+				} else if (indexNum == 3) {
+					// 自定义背景色
+					this.loadingPageData.loadingMode = 'spinner'
+					this.loadingPageData.bgColor = 'rgba(0, 0, 0, 0.3)'
+					this.loadingPageData.loadingText = "uview-plus"
+					this.loadingPageData.color = '#eee'
+					this.loadingPageData.loadingColor = '#ddd'
+				}
+				this.loading = true
+				setTimeout(() => {
+					this.loading = false
+				}, 2000)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+</style>

src/pages/componentsA/overlay/overlay.nvue

@@ -0,0 +1,104 @@
+<template>
+	<view class="u-page">
+		<up-navbar
+			title="遮罩层"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar>
+		<up-cell
+			:titleStyle="{fontWeight: 500}"
+			@click="openMask(index)"
+			:title="item.title"
+			v-for="(item, index) in list"
+			:key="index"
+			isLink
+		>
+			<template #icon>
+				<image
+					class="u-cell-icon"
+					:src="item.iconUrl"
+					mode="widthFix"
+				></image>
+			</template>
+		</up-cell>
+		<up-overlay
+			:show="show"
+			@click="show = !show"
+		></up-overlay>
+
+		<up-overlay
+			:show="showSlot"
+			@click="showSlot = !showSlot"
+		>
+			<view class="overlay-wrap">
+				<view class="overlay-wrap__box"></view>
+			</view>
+		</up-overlay>
+		<up-overlay
+			opacity=".85"
+			:show="showOpcatiy"
+			@click="showOpcatiy = !showOpcatiy"
+		>
+		</up-overlay>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				showSlot: false,
+				showOpcatiy: false,
+				list: [{
+						title: '基本案列',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/baseCases.png'
+					},
+					{
+						title: '嵌入内容',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/embeddedContent.png'
+					},
+					{
+						title: '设置透明度',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/overlay/setTransparency.png'
+					},
+				]
+			}
+		},
+		methods: {
+			openMask(indexNum) {
+				if (indexNum == 0) {
+					this.show = !this.show;
+				} else if (indexNum == 1) {
+					this.showSlot = !this.showSlot
+				} else if (indexNum == 2) {
+					this.showOpcatiy = !this.showOpcatiy
+				}
+			},
+			navigateBack() {
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+
+	.overlay-wrap {
+		@include flex;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+
+		&__box {
+			width: 200rpx;
+			height: 200rpx;
+			background-color: #70e1f5;
+		}
+	}
+</style>

src/pages/componentsA/popup/popup.nvue

@@ -0,0 +1,192 @@
+<template>
+	<view>
+		<up-navbar
+			title="弹窗"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar>
+		<up-gap
+			height="20"
+			bgColor="#fff"
+		></up-gap>
+		<up-cell-group>
+			<up-cell
+				:titleStyle="{fontWeight: 500}"
+				@click="openPopup(item.popupData)"
+				:title="item.title"
+				v-for="(item, index) in list"
+				:key="index"
+				isLink
+			>
+				<template #icon>
+					<image
+						class="u-cell-icon"
+						:src="item.iconUrl"
+						mode="widthFix"
+					></image>
+				</template>
+			</up-cell>
+		</up-cell-group>
+		<up-popup
+			:safeAreaInsetBottom="true"
+			:safeAreaInsetTop="true"
+			:mode="popupData.mode"
+			:show="show"
+			:round="popupData.round"
+			:overlay="popupData.overlay"
+			:borderRadius="popupData.borderRadius"
+			:closeable="popupData.closeable"
+			:closeOnClickOverlay="popupData.closeOnClickOverlay"
+			@close="close"
+			@open="open"
+		>
+			<view
+				class="u-popup-slot"
+				:style="{
+					width: ['bottom', 'top'].includes(popupData.mode) ? '750rpx' : '200px',
+					marginTop: ['left', 'right'].includes(popupData.mode) ? '480rpx' : '0',
+				}"
+			>
+				<view style="height: 12vh;overflow-y: scroll;margin-bottom: 10px;">
+					<view v-for="i in 30">
+						列表滚动{[i]}
+					</view>
+				</view>
+				<view>
+					<up-button
+						type="success"
+						text="点我关闭"
+						customStyle="width: 200rpx"
+						size="small"
+						@click="show = !show"
+					></up-button>
+				</view>
+			</view>
+		</up-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				popupData: {
+					overlay: true,
+					mode: 'bottom',
+					borderRadius: '',
+					closeable: true,
+					closeOnClickOverlay: true
+				},
+				list: [{
+						popupData: {
+							overlay: true,
+							mode: 'top',
+							closeOnClickOverlay: true
+						},
+						title: '顶部弹出',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeTop.png'
+					},
+					{
+						popupData: {
+							overlay: true,
+							mode: 'right',
+							closeOnClickOverlay: true
+						},
+						title: '右侧弹出',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png'
+					},
+					{
+						popupData: {
+							overlay: true,
+							mode: 'bottom',
+							closeOnClickOverlay: true
+						},
+						title: '底部弹出',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeBottom.png'
+					},
+					{
+						popupData: {
+							overlay: true,
+							mode: 'left',
+							closeOnClickOverlay: true
+						},
+						title: '左侧弹出',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeLeft.png'
+					},
+					{
+						popupData: {
+							overlay: true,
+							mode: 'center',
+							round: 10,
+							closeOnClickOverlay: true
+						},
+						title: '居中弹出',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeCenter.png'
+					},
+					{
+						popupData: {
+							overlay: true,
+							mode: 'bottom',
+							round: 10,
+							closeOnClickOverlay: true
+						},
+						title: '显示圆角',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showRadis.png'
+					},
+					{
+						popupData: {
+							overlay: true,
+							mode: 'bottom',
+							closeable: false,
+							closeOnClickOverlay: false
+						},
+						title: '禁止点击遮罩关闭',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/noClose.png'
+					},
+					{
+						popupData: {
+							overlay: true,
+							mode: 'bottom',
+							closeable: true,
+							closeOnClickOverlay: true
+						},
+						title: '显示关闭按钮',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/showCloseBtn.png'
+					}
+				]
+			}
+		},
+		methods: {
+			openPopup(popupData) {
+				this.popupData = popupData
+				uni.$u.sleep().then(() => {
+					this.show = !this.show
+				})
+			},
+			navigateBack() {
+				uni.navigateBack()
+			},
+			open() {
+				// console.log('open');
+			},
+			close() {
+				this.show = false
+				// console.log('close');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-popup-slot {
+		width: 200px;
+		height: 150px;
+		@include flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+</style>

src/pages/componentsA/radio/radio.nvue

@@ -0,0 +1,332 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案例</text>
+			<text class="u-block__title">苹果、香蕉和橙子哪个最甜？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__radio-item">
+					<up-radio-group
+						v-model="radiovalue1"
+						placement="column"
+						@change="groupChange"
+					>
+						<up-radio
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in radiolist1"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+							@change="radioChange"
+						>
+						</up-radio>
+					</up-radio-group>
+				</view>
+				{{radiovalue1}}
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义形状</text>
+			<text class="u-block__title">王者荣耀谁最帅？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__radio-item">
+					<up-radio-group
+						v-model="radiovalue2"
+						placement="column"
+						shape="square"
+					>
+						<up-radio
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in radiolist2"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-radio>
+					</up-radio-group>
+				</view>
+				{{radiovalue2}}
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否禁用</text>
+			<text class="u-block__title">苹果、香蕉和菠萝哪个最甜？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__radio-item">
+					<up-radio-group
+						v-model="radiovalue3"
+						placement="column"
+					>
+						<up-radio
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in radiolist3"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+							:disabled="!index"
+						>
+						</up-radio>
+					</up-radio-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">纵向排列</text>
+			<text class="u-block__title">狙击枪用哪个倍镜最好？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__radio-item">
+					<up-radio-group
+						v-model="radiovalue4"
+						placement="column"
+						:labelDisabled="true"
+					>
+						<up-radio
+							:customStyle="{marginBottom:'8px'}"
+							v-for="(item, index) in radiolist4"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-radio>
+					</up-radio-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色？</text>
+			<text class="u-block__title">你比较喜欢下面哪个颜色？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__radio-item">
+					<up-radio-group
+						v-model="radiovalue5"
+						placement="column"
+						activeColor="#19be6b"
+					>
+						<up-radio
+							:customStyle="{marginBottom: '8px'}"
+							v-for="(item, index) in radiolist5"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-radio>
+					</up-radio-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">横向排列形式？</text>
+			<text class="u-block__title">王者荣耀哪个英雄最美？</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__radio-item">
+					<up-radio-group
+						v-model="radiovalue6"
+						placement="row"
+					>
+						<up-radio
+							:customStyle="{marginRight: '16px'}"
+							v-for="(item, index) in radiolist6"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-radio>
+					</up-radio-group>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">横向两端排列形式？</text>
+			<text class="u-block__title">你觉得阿木木可爱吗？</text>
+			<view>
+				<view class="u-page__radio-item">
+					<up-radio-group
+						v-model="radiovalue7"
+						:borderBottom="true"
+						placement="column"
+						iconPlacement="right"
+					>
+						<up-radio
+							:customStyle="{marginBottom: '16px'}"
+							v-for="(item, index) in radiolist7"
+							:key="index"
+							:label="item.name"
+							:name="item.name"
+						>
+						</up-radio>
+					</up-radio-group>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 基本案列数据
+				radiolist1: [{
+						name: '苹果',
+						disabled: false
+					},
+					{
+						name: '香蕉',
+						disabled: false
+					},
+					{
+						name: '橙子',
+						disabled: false
+					}, {
+						name: '榴莲',
+						disabled: false
+					}
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				radiovalue1: '苹果',
+
+				// 自定义形状数据
+				radiolist2: [{
+						name: '李白',
+						disabled: false
+					},
+					{
+						name: '韩信',
+						disabled: false
+					},
+					{
+						name: '马可波罗',
+						disabled: false
+					}, {
+						name: '百里守约',
+						disabled: false
+					}
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				radiovalue2: '李白',
+
+				// 是否禁用数据
+				radiolist3: [{
+						name: '苹果',
+						disabled: false
+					},
+					{
+						name: '香蕉',
+						disabled: false
+					},
+					{
+						name: '菠萝',
+						disabled: false
+					}
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				radiovalue3: '苹果',
+
+				// 是否禁止点击提示语选中单选框数据
+				radiolist4: [{
+						name: '3倍镜',
+						disabled: false
+					},
+					{
+						name: '4倍镜',
+						disabled: false
+					},
+					{
+						name: '6倍镜',
+						disabled: false
+					},
+					{
+						name: '8倍镜',
+						disabled: false
+					}
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				radiovalue4: '6倍镜',
+
+				//自定义颜色数据
+				radiolist5: [{
+						name: '红色',
+						disabled: false
+					},
+					{
+						name: '绿色',
+						disabled: false
+					},
+					{
+						name: '蓝色',
+						disabled: false
+					},
+					{
+						name: '黄色',
+						disabled: false
+					}
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				radiovalue5: '绿色',
+
+				//横向排列形式数据
+				radiolist6: [{
+						name: '妲己',
+						disabled: false
+					},
+					{
+						name: '虞姬',
+						disabled: false
+					},
+					{
+						name: '不知火舞',
+						disabled: false
+					},
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				radiovalue6: '妲己',
+
+				//横向两端排列形式数据
+				radiolist7: [{
+						name: '可爱',
+						disabled: false
+					},
+					{
+						name: '一般',
+						disabled: false
+					},
+					{
+						name: '不可爱',
+						disabled: false
+					},
+				],
+				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
+				radiovalue7: '可爱',
+			}
+		},
+		watch: {
+			radiovalue1(newValue, oldValue) {
+				console.log('v-model', newValue);
+			}
+		},
+		methods: {
+			groupChange(n) {
+				console.log('groupChange', n);
+			},
+			radioChange(n) {
+				console.log('radioChange', n);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		&__style {
+			font-size: 16px;
+			color: rgb(96, 98, 102);
+			margin-bottom: 20rpx;
+			font-weight: bold;
+		}
+
+		&__title {
+			font-size: 16px;
+			color: rgb(96, 98, 102);
+			margin-bottom: 20rpx;
+		}
+	}
+</style>

src/pages/componentsA/rate/rate.nvue

@@ -0,0 +1,146 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基本案例</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-rate size="20"></up-rate>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义选中星星数量</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item flex">
+					<up-rate
+						size="20"
+						v-model="value"
+						@change="change"
+					></up-rate>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义星星大小</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-rate size="30" count="4"></up-rate>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否禁用评分</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__rate-item">
+					<up-rate size="20" disabled></up-rate>
+				</view>
+			</view>
+		</view>
+    <view class="u-demo-block">
+      <text class="u-demo-block__title">是否只读评分</text>
+      <view class="u-demo-block__content">
+        <view class="u-page__rate-item">
+          <up-rate size="20" readonly></up-rate>
+        </view>
+      </view>
+    </view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义选中星星颜色</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__rate-item">
+					<up-rate
+						size="20"
+						v-model="activeColorValue"
+						activeColor="#2979ff"
+					></up-rate>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义未选中星星颜色</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__rate-item">
+					<up-rate
+						size="20"
+						v-model="value1"
+						inactiveColor="#2979ff"
+					></up-rate>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">禁止触摸选择</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__rate-item">
+					<up-rate size="20" :touchable="false"></up-rate>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">允许触摸选择</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__rate-item">
+					<up-rate size="20" :touchable="true"></up-rate>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">是否允许半星</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__rate-item">
+					<up-rate
+						size="20"
+						v-model="HalfValue"
+						:allowHalf="true"
+						@change="change"
+					></up-rate>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义选中的图标</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__rate-item">
+					<up-rate
+						size="20"
+						v-model="activeIconValue"
+						inactiveIcon="heart"
+						activeIcon="heart-fill"
+					></up-rate>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//自定义星星的个数
+				value: 3,
+				value1: 2,
+				// 自定义选择星星颜色个数
+				activeColorValue: 3,
+				// 是否允许半星的个数
+				HalfValue: 3.5,
+				// 自定义图标星星个数
+				activeIconValue: 3,
+			}
+		},
+		watch: {
+			value(newValue, oldValue) {
+				// console.log(newValue);
+			}
+		},
+		methods: {
+			change(e) {
+				// console.log('change', e);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-page {}
+</style>

src/pages/componentsA/sticky/sticky.nvue

@@ -0,0 +1,57 @@
+<template>
+	<view class="u-page">
+		<!-- <up-navbar
+			title="吸顶"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar> -->
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础使用</text>
+			<up-text
+				type="content"
+				text="滚动页面,即可看到下方的按钮会吸顶。"
+			></up-text>
+			<!-- #ifdef APP-NVUE -->
+			<up-text
+				type="warning"
+				text="目前由于nvue的bug,设置sticky的top值无效。"
+			></up-text>
+			<!-- #endif -->
+		</view>
+		<up-sticky>
+			<up-button
+				text="吸顶按钮"
+				type="success"
+			></up-button>
+		</up-sticky>
+		<up-gap
+			bgColor="#fff"
+			height="1500px"
+		></up-gap>
+		<up-divider text="已到底部"></up-divider>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		mixins: [uni.$u.mixin],
+		methods: {
+			navigateBack() {
+				uni.navigateBack()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		
+	}
+</style>

src/pages/componentsA/swipeAction/swipeAction.nvue

@@ -0,0 +1,232 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">演示案例</text>
+			<view class="u-page__swipe-action-item">
+				<up-swipe-action>
+					<up-swipe-action-item
+						v-if="show1"
+						:closeOnClick="false"
+						v-model:show="swshow1"
+						:options="options1"
+						@click="click"
+					>
+						<view class="swipe-action u-border-top u-border-bottom">
+							<view class="swipe-action__content">
+								<text class="swipe-action__content__text">基础使用</text>
+							</view>
+						</view>
+					</up-swipe-action-item>
+				</up-swipe-action>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">按钮组</text>
+			<view class="u-page__swipe-action-item">
+				<up-swipe-action>
+					<up-swipe-action-item closeOnClick :options="options2">
+						<view class="swipe-action u-border-top u-border-bottom">
+							<view class="swipe-action__content">
+								<text class="swipe-action__content__text">两个按钮并列</text>
+							</view>
+						</view>
+					</up-swipe-action-item>
+				</up-swipe-action>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">带图标</text>
+			<view class="u-page__swipe-action-item">
+				<up-swipe-action>
+					<up-swipe-action-item :options="options3">
+						<view class="swipe-action u-border-top u-border-bottom">
+							<view class="swipe-action__content">
+								<text class="swipe-action__content__text">自定义图标</text>
+							</view>
+						</view>
+					</up-swipe-action-item>
+				</up-swipe-action>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">组合使用</text>
+			<view class="u-page__swipe-action-item">
+				<up-swipe-action>
+					<up-swipe-action-item
+						:options="item.options"
+						v-for="(item, index) in options4"
+						:disabled="item.disabled"
+						:key="index"
+					>
+						<view
+							class="swipe-action u-border-top"
+							:class="[index === options4.length - 1 && 'u-border-bottom']"
+						>
+							<view class="swipe-action__content">
+								<text class="swipe-action__content__text">{{ item.text }}</text>
+							</view>
+						</view>
+					</up-swipe-action-item>
+				</up-swipe-action>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义按钮形状</text>
+			<view class="u-page__swipe-action-item">
+				<up-swipe-action>
+					<up-swipe-action-item :options="options5">
+						<view class="swipe-action u-border-top u-border-bottom">
+							<view class="swipe-action__content">
+								<text class="swipe-action__content__text">圆形按钮</text>
+							</view>
+						</view>
+					</up-swipe-action-item>
+				</up-swipe-action>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				swshow1: true,
+				show1: true,
+				moveX: 0,
+				showText: '当前状态：关',
+				showStatus: false,
+				options1: [{
+					text: '删除',
+					style: {
+						backgroundColor: '#f56c6c'
+					}
+				}],
+				options2: [{
+					text: '收藏',
+					style: {
+						backgroundColor: '#3c9cff'
+					}
+				}, {
+					text: '删除',
+					style: {
+						backgroundColor: '#f56c6c'
+					}
+				}],
+				options3: [{
+					text: '收藏',
+					icon: 'star-fill',
+					iconSize: '20',
+					style: {
+						backgroundColor: '#f9ae3d'
+					}
+				}],
+				options4: [{
+					text: '禁用状态',
+					disabled: true,
+					options: [{
+							text: '置顶',
+							style: {
+								backgroundColor: '#3c9cff',
+							}
+						},
+						{
+							text: '取消',
+							style: {
+								backgroundColor: '#f9ae3d',
+							}
+						},
+					],
+				}, {
+					text: '正常状态',
+					disabled: false,
+					options: [{
+							text: '置顶',
+							style: {
+								backgroundColor: '#3c9cff',
+							}
+						},
+						{
+							text: '取消',
+							style: {
+								backgroundColor: '#f9ae3d',
+							}
+						},
+					],
+				}, {
+					text: '自动关闭',
+					disabled: false,
+					options: [{
+							text: '置顶',
+							style: {
+								backgroundColor: '#3c9cff',
+							}
+						},
+						{
+							text: '取消',
+							style: {
+								backgroundColor: '#f9ae3d',
+							}
+						},
+					],
+				}],
+				options5: [{
+					icon: 'trash-fill',
+					style: {
+						backgroundColor: '#f56c6c',
+						width: '40px',
+						height: '40px',
+						borderRadius: '100px',
+						margin: '0 6px'
+					}
+				}, {
+					icon: 'heart-fill',
+					style: {
+						backgroundColor: '#5ac725',
+						width: '40px',
+						height: '40px',
+						borderRadius: '100px',
+						margin: '0 6px'
+					}
+				}]
+			}
+		},
+		methods: {
+			click(index, cb) {
+				console.log('click', index);
+				uni.showModal({
+					title: '温馨提示',
+					content: '确定要删除吗？',
+					success: res => {
+						if (res.confirm) {
+							this.swshow1 = false
+							this.show1 = false
+						}
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+
+	.u-demo-block__title {
+		padding: 10px 0 2px 15px;
+	}
+
+	.swipe-action {
+		&__content {
+			padding: 25rpx 0;
+
+			&__text {
+				font-size: 15px;
+				color: $u-main-color;
+				padding-left: 30rpx;
+			}
+		}
+	}
+</style>

src/pages/componentsA/test/test.vue

@@ -0,0 +1,33 @@
+<template>
+	<view>
+		<up-list style="height: 500px; background-color: red;">
+			<up-list-item>
+				<up-image src="https://img2020.cnblogs.com/blog/35695/202112/35695-20211222112522991-1769312387.jpg"></up-image>
+			</up-list-item>
+			<up-list-item>
+				<up-image src="https://img2020.cnblogs.com/blog/35695/202112/35695-20211222112522991-1769312387.jpg"></up-image>
+			</up-list-item>
+			<up-list-item>
+				<up-image src="https://img2020.cnblogs.com/blog/35695/202112/35695-20211222112522991-1769312387.jpg"></up-image>
+			</up-list-item>
+			<up-list-item>
+				<up-image src="https://img2020.cnblogs.com/blog/35695/202112/35695-20211222112522991-1769312387.jpg"></up-image>
+			</up-list-item>
+			<up-list-item>
+				<up-image src="https://img2020.cnblogs.com/blog/35695/202112/35695-20211222112522991-1769312387.jpg"></up-image>
+			</up-list-item>
+			<up-list-item>
+				<up-image src="https://img2020.cnblogs.com/blog/35695/202112/35695-20211222112522991-1769312387.jpg"></up-image>
+			</up-list-item>
+			<up-list-item>
+				<up-image src="https://img2020.cnblogs.com/blog/35695/202112/35695-20211222112522991-1769312387.jpg"></up-image>
+			</up-list-item>
+		</up-list>
+	</view>
+</template>
+
+<script>
+	export default {
+		
+	}
+</script>

src/pages/componentsA/transition/transition.nvue

@@ -0,0 +1,165 @@
+<template>
+    <view class="u-page">
+        <up-gap height="20" bgColor="#fff"></up-gap>
+        <up-cell-group border>
+            <up-cell
+                :titleStyle="{ fontWeight: 500 }"
+                @click="openTransition(item.mode)"
+                :title="item.title"
+                v-for="(item, index) in list"
+                :key="index"
+                clickable
+            >
+				<template #icon>
+					<image
+					    class="u-cell-icon"
+					    :src="item.iconUrl"
+					    mode="widthFix"
+					></image>
+				</template>
+            </up-cell>
+            <up-transition
+                :mode="mode"
+                :show="show"
+                :custom-style="style"
+                @click="click"
+                @beforeEnter="beforeEnter"
+                @enter="enter"
+                @afterEnter="afterEnter"
+                @beforeLeave="beforeLeave"
+                @leave="leave"
+                @afterLeave="afterLeave"
+            >
+                <view class="transition"></view>
+            </up-transition>
+        </up-cell-group>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            mode: "",
+            show: false,
+            style: {
+                position: "fixed",
+                top: `${uni.$u.sys().windowHeight / 2 - 50}px`,
+                left: `${uni.$u.sys().windowWidth / 2 - 50}px`,
+                width: "120px",
+                height: "120px",
+                backgroundColor: "#1989fa",
+            },
+            list: [
+                {
+                    mode: "fade",
+                    title: "淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fade.png",
+                },
+                {
+                    mode: "fade-up",
+                    title: "上滑淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeUp.png",
+                },
+                {
+                    mode: "zoom",
+                    title: "缩放",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/zoom.png",
+                },
+                {
+                    mode: "fade-zoom",
+                    title: "缩放淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeZoom.png",
+                },
+                {
+                    mode: "fade-down",
+                    title: "下滑淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeDown.png",
+                },
+                {
+                    mode: "fade-left",
+                    title: "左滑淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeLeft.png",
+                },
+                {
+                    mode: "fade-right",
+                    title: "右滑淡入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/fadeRight.png",
+                },
+                {
+                    mode: "slide-up",
+                    title: "上滑进入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/slideUp.png",
+                },
+                {
+                    mode: "slide-down",
+                    title: "下滑进入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/slideDown.png",
+                },
+                {
+                    mode: "slide-left",
+                    title: "左滑进入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/slideLeft.png",
+                },
+                {
+                    mode: "slide-right",
+                    title: "右滑进入",
+                    iconUrl:
+                        "https://cdn.uviewui.com/uview/demo/transition/slideRight.png",
+                },
+            ],
+        };
+    },
+    mixins: [uni.$u.mixin],
+    methods: {
+        openTransition(mode) {
+            this.mode = mode;
+            this.show = true;
+            setTimeout(() => {
+                this.show = false;
+            }, 1500);
+        },
+        click() {
+            // console.log("click");
+        },
+        beforeEnter() {
+            // console.log("beforeEnter");
+        },
+        enter() {
+            // console.log("enter");
+        },
+        afterEnter() {
+            // console.log("afterEnter");
+        },
+        beforeLeave() {
+            // console.log("beforeLeave");
+        },
+        leave() {
+            // console.log("leave");
+        },
+        afterLeave() {
+            // console.log("afterLeave");
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.u-page {
+    padding: 0;
+}
+
+.transition {
+    background-color: $u-primary;
+}
+</style>

src/pages/componentsB/actionSheet/actionSheet.nvue

@@ -0,0 +1,220 @@
+<template>
+	<view class="u-page">
+		<up-navbar
+			title="上拉菜单"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar>
+		<up-cell-group>
+			<up-cell
+				@click="openSheet(index)"
+				:title="item.title"
+				v-for="(item, index) in list"
+				:key="index"
+				isLink
+			>
+				<template #icon>
+					<image
+						slot=""
+						class="u-cell-icon"
+						:src="item.iconUrl"
+						mode="widthFix"
+					></image>
+				</template>
+			</up-cell>
+		</up-cell-group>
+		<up-action-sheet
+			:show="show0"
+			@close="close"
+			@select="select"
+			:actions="actions0"
+			:closeOnClickOverlay="false"
+		>
+		</up-action-sheet>
+		<up-action-sheet
+			:show="show1"
+			@close="show1 = false"
+			:actions="actions1"
+		>
+		</up-action-sheet>
+		<up-action-sheet
+			:show="show2"
+			@close="show2 = false"
+			:actions="actions2"
+			cancelText="取消"
+		>
+		</up-action-sheet>
+		<up-action-sheet
+			:show="show3"
+			@close="show3 = false"
+			:actions="actions3"
+			description="这是一段描述文本,字号偏小,颜色偏淡"
+		>
+		</up-action-sheet>
+		<up-action-sheet
+			:show="show4"
+			@close="show4 = false"
+			title="标题位置"
+			:round="10"
+		>
+			<text style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px;">这是一段通过slot传入的内容,您可以在此自定义操作面板</text>
+		</up-action-sheet>
+		<up-action-sheet
+			:show="show5"
+			@close="show5 = false"
+			title="微信开放能力"
+			:actions="actions5"
+			@getuserinfo="getuserinfo"
+		></up-action-sheet>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				show0: false,
+				show1: false,
+				show2: false,
+				show3: false,
+				show4: false,
+				show5: false,
+				actions0: [{
+						name: '选项1',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项3',
+						subname: '描述文本'
+					},
+				],
+				actions1: [{
+						name: '选项1',
+					},
+					{
+						loading: true
+					},
+					{
+						name: '选项被禁用',
+						disabled: true
+					},
+				],
+				actions2: [{
+						name: '选项1',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项3',
+					},
+				],
+				actions3: [{
+						name: '选项1',
+					},
+					{
+						name: '选项2',
+					},
+					{
+						name: '选项3',
+					},
+				],
+				actions5: [{
+					name: '获取用户信息',
+					openType: 'getUserInfo',
+					color: uni.$u.color['success']
+				}],
+				list: [{
+						title: '普通使用',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/custom.png'
+
+					},
+					{
+						title: '设置状态',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/status.png'
+					},
+					{
+						title: '显示取消按钮',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/cancel.png'
+					},
+					{
+						title: '描述内容',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/desc.png'
+					},
+					{
+						title: '显示标题(显示圆角)',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/title.png'
+					},
+					{
+						title: '微信开放能力',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/actionSheet/open.png'
+					}
+				]
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			// 点击cell，判断显示哪个功能
+			openSheet(index) {
+				// #ifndef MP
+				if (index === 5) return uni.$u.toast('请在微信内预览')
+				// #endif
+				this[`show${index}`] = true
+			},
+			getuserinfo(res) {
+				uni.$u.toast(`用户名：${res.userInfo.nickName}`)
+			},
+			navigateBack() {
+				uni.navigateBack()
+			},
+			close() {
+				console.log('close');
+				this['show0'] = false
+			},
+			select(e) {
+				console.log('select', e);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+</style>

src/pages/componentsB/alert/alert.nvue

@@ -0,0 +1,146 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础功能</text>
+			<view class="u-demo-block__content">
+				<view class="u-alert-item">
+					<up-alert
+					    description="山不在于高，有了神仙就出名"
+					    type="warning"
+					></up-alert>
+				</view>
+				<view class="u-alert-item">
+					<up-alert
+					    description="水不在深，有龙则灵"
+					    type="primary"
+					></up-alert>
+				</view>
+				<view class="u-alert-item">
+					<up-alert
+					    description="斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青"
+					    type="error"
+					></up-alert>
+				</view>
+				<view class="u-alert-item">
+					<up-alert
+					    description="谈笑有鸿儒，往来无白丁"
+					    type="info"
+					></up-alert>
+				</view>
+				<view class="u-alert-item">
+					<up-alert
+					    description="可以调素琴，阅金经"
+					    type="success"
+					></up-alert>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">深浅色</text>
+			<view class="u-demo-block__content">
+				<view class="u-alert-item">
+					<up-alert
+					    description="无丝竹之乱耳，无案牍之劳形"
+					    type="warning"
+					></up-alert>
+				</view>
+				<view class="u-alert-item">
+					<up-alert
+					    description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有"
+					    type="warning"
+					    effect="dark"
+					></up-alert>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">显示图标</text>
+			<view class="u-demo-block__content">
+				<view class="u-alert-item">
+					<up-alert
+					    description="六王毕，四海一；蜀山兀，阿房出"
+					    type="error"
+					    showIcon
+					></up-alert>
+				</view>
+				<view class="u-alert-item">
+					<up-alert
+					    description="覆压三百余里，隔离天日。骊山北构而西折，直走咸阳，二川溶溶，流入宫墙"
+					    type="error"
+					    effect="dark"
+					    showIcon
+					></up-alert>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">可关闭</text>
+			<view class="u-demo-block__content">
+				<view class="u-alert-item">
+					<up-alert
+					    description="五步一楼，十步一阁；廊腰缦回，檐牙高啄；各抱地势，钩心斗角"
+					    type="success"
+					    showIcon
+					    closable
+					></up-alert>
+				</view>
+				<view class="u-alert-item">
+					<up-alert
+					    description="盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落"
+					    type="success"
+					    effect="dark"
+					    closable
+					    showIcon
+					></up-alert>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">带标题</text>
+			<view class="u-demo-block__content">
+				<view class="u-alert-item">
+					<up-alert
+					    title="妃嫔媵嫱，王子皇孙，辞楼下殿"
+					    description="长桥卧波，未云何龙？复道行空，不霁何虹"
+					    type="info"
+					    showIcon
+					    closable
+					></up-alert>
+				</view>
+				<view class="u-alert-item">
+					<up-alert
+					    title="辇来于秦，朝歌夜弦，为秦宫人。明星荧荧，开妆镜也"
+					    description="高低冥迷，不知西东。歌台暖响，春光融融；舞殿冷袖，风雨凄凄。一日之内，一宫之间，而气候不齐"
+					    type="info"
+					    effect="dark"
+					    closable
+					    showIcon
+					></up-alert>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				description: '',
+				title: ''
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-alert-item {
+		flex: 1;
+		margin-bottom: 10px;
+	}
+
+	.u-demo-block__content {
+		flex-direction: column !important;
+		align-items: stretch;
+	}
+</style>

src/pages/componentsB/badge/badge.nvue

@@ -0,0 +1,163 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">直角边形状</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="1500"
+						shape="horn"
+					></up-badge>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">徽标数显示方式</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="5132"
+						numberType="ellipsis"
+					></up-badge>
+				</view>
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="1011"
+						numberType="overflow"
+					></up-badge>
+				</view>
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="1500"
+						numberType="limit"
+					></up-badge>
+				</view>
+
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="45187"
+						numberType="limit"
+					></up-badge>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">显示圆点</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="1011"
+						numberType="overflow"
+						isDot
+					>
+					</up-badge>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义主题</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="9"
+						type="error"
+					>
+					</up-badge>
+				</view>
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="9"
+						type="warning"
+					>
+					</up-badge>
+				</view>
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="9"
+						type="success"
+					>
+					</up-badge>
+				</view>
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="9"
+						type="primary"
+					>
+					</up-badge>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">反转色</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="9"
+						type="error"
+						inverted
+					>
+					</up-badge>
+				</view>
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="1532"
+						inverted
+						type="warning"
+					>
+					</up-badge>
+				</view>
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="12"
+						inverted
+						type="success"
+					>
+					</up-badge>
+				</view>
+				<view class="u-page__tag-item">
+					<up-badge
+						:value="999"
+						inverted
+						type="primary"
+					>
+					</up-badge>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.box {
+		justify-content: space-between;
+	}
+
+	.u-page__tag-item {
+		margin-right: 40px;
+		margin-top: 10px;
+	}
+
+	.badge-box {
+		width: 45px;
+		height: 45px;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		border-bottom-left-radius: 3px;
+		border-bottom-right-radius: 3px;
+		background-color: #E6E6E6;
+	}
+
+	.u-demo-block__content {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+</style>

src/pages/componentsB/card/card.vue

@@ -0,0 +1,115 @@
+<template>
+	<view>
+		<view class="u-card-wrap">
+			<up-card @click="click" @head-click="headClick" :title="title"
+				:sub-title="subTitle" :thumb="thumb" :padding="padding" :border="border">
+				<template #body>
+					<view>
+						<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://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.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>
+				</template>
+				<template #foot>
+					<view>
+						<up-icon name="chat-fill" size="16" color="" label="30评论"></up-icon>
+					</view>
+				</template>
+			</up-card>
+		</view>
+		<view class="u-demo">
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">参数配置</text>
+			</view>
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">左上角图标</text>
+			    <view class="u-demo-block__content">
+					<up-subsection :list="['显示', '隐藏']" @change="thumbChange"></up-subsection>
+			    </view>
+			</view>
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">内边距</text>
+			    <view class="u-demo-block__content">
+					<up-subsection current="1" :list="['10', '15', '20']" @change="paddingChange"></up-subsection>
+			    </view>
+			</view>
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">底部</text>
+			    <view class="u-demo-block__content">
+					<up-subsection :list="['显示', '隐藏']" @change="bottomChange"></up-subsection>
+			    </view>
+			</view>
+			<view class="u-demo-block">
+			    <text class="u-demo-block__title">外边框</text>
+			    <view class="u-demo-block__content">
+					<up-subsection :list="['显示', '隐藏']" @change="borderChange"></up-subsection>
+			    </view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: '素胚勾勒出青花，笔锋浓转淡',
+				subTitle: '2023-05-15',
+				thumb: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
+				padding: 15,
+				bottomSlot: true,
+				border: true
+			}
+		},
+		methods: {
+			thumbChange(index) {
+				this.thumb = index == 0 ? 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg' : '';
+			},
+			paddingChange(index) {
+				this.padding = [10, 15, 20][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: 20px;
+	}
+	
+	.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>

src/pages/componentsB/code/code.nvue

@@ -0,0 +1,157 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础功能</text>
+			<view class="u-demo-block__content">
+				<up-code
+				    ref="uCode"
+				    @change="codeChange"
+				    seconds="20"
+					change-text="XS获取"
+					@start="disabled1 = true"
+					@end="disabled1 = false"
+				></up-code>
+				<up-button
+				    @tap="getCode"
+				    :text="tips"
+				    type="success"
+					size="small"
+					:disabled="disabled1"
+				></up-button>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">保持倒计时(开始后，左上角返退出此页面再进入，会发现倒计时还在继续)</text>
+			<view class="u-demo-block__content">
+				<up-code
+				    ref="uCode1"
+				    @change="codeChange1"
+				    keep-running
+				    change-text="倒计时XS"
+					@start="disabled2 = true"
+					@end="disabled2 = false"
+				></up-code>
+				<up-button
+					type="primary"
+				    @tap="getCode1"
+				    :text="tips1"
+					size="small"
+					:disabled="disabled2"
+				></up-button>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">文本样式</text>
+			<view class="u-demo-block__content">
+				<up-code
+				    ref="uCode2"
+				    @change="codeChange2"
+				    keep-running
+					start-text="点我获取验证码"
+				></up-code>
+				<text
+				    @tap="getCode2"
+				    :text="tips2"
+					class="u-page__code-text"
+				>{{tips2}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tips: '',
+				// 此为错误定义，见下方说明
+				// refCode: null,
+				tips1: '',
+				tips2: '',
+				disabled1: false,
+				disabled2: false,
+				disabled3: false
+			}
+		},
+		onReady() {
+			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
+			// 造成循环引用而报错，如果你想这样做，请在onReady或者onLoad生命周期中定义，如下
+			// this.refCode = this.$refs.uCode;
+		},
+		methods: {
+			codeChange(text) {
+				this.tips = text;
+			},
+			codeChange1(text) {
+				this.tips1 = text;
+			},
+			codeChange2(text) {
+				this.tips2 = text;
+			},
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 2000);
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+			getCode1() {
+				if (this.$refs.uCode1.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode1.start();
+					}, 2000);
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+			getCode2() {
+				if (this.$refs.uCode2.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode2.start();
+					}, 2000);
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		&__code-text {
+			color: $u-primary;
+			font-size: 15px;
+		}
+	}
+	
+	.u-demo-block__content {
+		@include flex;
+	}
+</style>

src/pages/componentsB/collapse/collapse.nvue

@@ -0,0 +1,139 @@
+<template>
+	<view class="u-page">
+		<view class="u-page__item">
+			<text class="u-page__item__title">基础功能</text>
+			<up-collapse @change="change" @close="close" @open="open">
+				<up-collapse-item title="文档指南" name="Docs guide">
+					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
+				</up-collapse-item>
+				<up-collapse-item title="组件全面" name="Variety components">
+					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+				</up-collapse-item>
+				<up-collapse-item title="众多利器" name="Numerous tools" :showRight="false">
+					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
+				</up-collapse-item>
+			</up-collapse>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">展开和禁用</text>
+			<up-collapse :value="['2']">
+				<up-collapse-item title="文档指南">
+					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
+				</up-collapse-item>
+				<up-collapse-item disabled title="组件全面">
+					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+				</up-collapse-item>
+				<up-collapse-item name="2" title="众多利器">
+					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
+				</up-collapse-item>
+			</up-collapse>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">手风琴模式</text>
+			<up-collapse accordion>
+				<up-collapse-item title="文档指南">
+					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
+				</up-collapse-item>
+				<up-collapse-item title="组件全面">
+					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+				</up-collapse-item>
+				<up-collapse-item title="众多利器">
+					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
+				</up-collapse-item>
+			</up-collapse>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">移除下划线</text>
+			<up-collapse accordion :border="false">
+				<up-collapse-item title="文档指南">
+					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
+				</up-collapse-item>
+				<up-collapse-item title="组件全面">
+					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+				</up-collapse-item>
+				<up-collapse-item title="众多利器">
+					<text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
+				</up-collapse-item>
+			</up-collapse>
+		</view>
+		<!-- 微信小程序不支持，因为微信中不支持 <slot #title slot="title" />的写法 -->
+		<view class="u-page__item">
+			<text class="u-page__item__title">自定义标题和内容</text>
+			<up-collapse accordion>
+				<up-collapse-item>
+					<template #title>
+						<text class="u-page__item__title__slot-title">文档指南</text>
+					</template>
+					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
+				</up-collapse-item>
+				<!-- <up-collapse-item
+					:isLink="false"
+				>
+					<template #title>
+						<text class="u-page__item__title__slot-title">文档指南</text>
+					</template>
+					<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
+				</up-collapse-item> -->
+				<up-collapse-item title="组件全面">
+					<template v-slot:icon>
+						<up-icon name="tags-fill" size="20"></up-icon>
+					</template>
+					<text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
+				</up-collapse-item>
+				<up-collapse-item title="众多利器" icon="tags-fill">
+					<template v-slot:right-icon>
+						<text class="u-page__item__title__slot-title">10</text>
+					</template>
+					<text
+						class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
+				</up-collapse-item>
+			</up-collapse>
+		</view>
+		<up-gap height="50"></up-gap>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		},
+		methods: {
+			open(e) {
+				// console.log('open', e)
+			},
+			close(e) {
+				// console.log('close', e)
+			},
+			change(e) {
+				// console.log('change', e)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+
+		&__item {
+
+			&__title {
+				color: $u-tips-color;
+				background-color: $u-bg-color;
+				padding: 15px;
+				font-size: 15px;
+
+				&__slot-title {
+					color: $u-primary;
+					font-size: 14px;
+				}
+			}
+		}
+	}
+
+	.u-collapse-content {
+		color: $u-tips-color;
+		font-size: 14px;
+	}
+</style>

src/pages/componentsB/color/color.nvue

@@ -0,0 +1,291 @@
+<template>
+	<view class="u-page">
+		<view class="u-page__item">
+			<text class="u-page__item__title" style="margin-top: 0;">主色调</text>
+			<view class="u-page__item__color-box">
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #3c9cff;"
+				>
+					<text class="u-page__item__color-box__item__title">Primary</text>
+					<text class="u-page__item__color-box__item__value">#3c9cff</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #398ade;"
+				>
+					<text class="u-page__item__color-box__item__title">Dark</text>
+					<text class="u-page__item__color-box__item__value">#398ade</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #9acafc;"
+				>
+					<text class="u-page__item__color-box__item__title">Disabled</text>
+					<text class="u-page__item__color-box__item__value">#9acafc</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #ecf5ff;"
+				>
+					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
+					<text class="u-page__item__color-box__item__value u-tips-color">#ecf5ff</text>
+				</view>
+			</view>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">Error</text>
+			<view class="u-page__item__color-box">
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #f56c6c;"
+				>
+					<text class="u-page__item__color-box__item__title">Error</text>
+					<text class="u-page__item__color-box__item__value">#f56c6c</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #e45656;"
+				>
+					<text class="u-page__item__color-box__item__title">Dark</text>
+					<text class="u-page__item__color-box__item__value">#e45656</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #f7b2b2;"
+				>
+					<text class="u-page__item__color-box__item__title">Disabled</text>
+					<text class="u-page__item__color-box__item__value">#f7b2b2</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #fef0f0;"
+				>
+					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
+					<text class="u-page__item__color-box__item__value u-tips-color">#fef0f0</text>
+				</view>
+			</view>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">Warning</text>
+			<view class="u-page__item__color-box">
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #f9ae3d;"
+				>
+					<text class="u-page__item__color-box__item__title">Warning</text>
+					<text class="u-page__item__color-box__item__value">#f9ae3d</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #f1a532;"
+				>
+					<text class="u-page__item__color-box__item__title">Dark</text>
+					<text class="u-page__item__color-box__item__value">#f1a532</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #f9d39b;"
+				>
+					<text class="u-page__item__color-box__item__title">Disabled</text>
+					<text class="u-page__item__color-box__item__value">#f9d39b</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #fdf6ec;"
+				>
+					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
+					<text class="u-page__item__color-box__item__value u-tips-color">#fdf6ec</text>
+				</view>
+			</view>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">Info</text>
+			<view class="u-page__item__color-box">
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #909399;"
+				>
+					<text class="u-page__item__color-box__item__title">Info</text>
+					<text class="u-page__item__color-box__item__value">#909399</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #767a82;"
+				>
+					<text class="u-page__item__color-box__item__title">Dark</text>
+					<text class="u-page__item__color-box__item__value">#767a82</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #c4c6c9;"
+				>
+					<text class="u-page__item__color-box__item__title">Disabled</text>
+					<text class="u-page__item__color-box__item__value">#c4c6c9</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #f4f4f5;"
+				>
+					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
+					<text class="u-page__item__color-box__item__value u-tips-color">#f4f4f5</text>
+				</view>
+			</view>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">Success</text>
+			<view class="u-page__item__color-box">
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #5ac725;"
+				>
+					<text class="u-page__item__color-box__item__title">Success</text>
+					<text class="u-page__item__color-box__item__value">#5ac725</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #53c21d;"
+				>
+					<text class="u-page__item__color-box__item__title">Dark</text>
+					<text class="u-page__item__color-box__item__value">#53c21d</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #a9e08f;"
+				>
+					<text class="u-page__item__color-box__item__title">Disabled</text>
+					<text class="u-page__item__color-box__item__value">#a9e08f</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #f5fff0;"
+				>
+					<text class="u-page__item__color-box__item__title u-tips-color">Light</text>
+					<text class="u-page__item__color-box__item__value u-tips-color">#f5fff0</text>
+				</view>
+			</view>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">文字颜色</text>
+			<view class="u-page__item__color-box">
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #303133;"
+				>
+					<text class="u-page__item__color-box__item__title">主要文字</text>
+					<text class="u-page__item__color-box__item__value">#303133</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #606266;"
+				>
+					<text class="u-page__item__color-box__item__title">常规文字</text>
+					<text class="u-page__item__color-box__item__value">#606266</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #909399;"
+				>
+					<text class="u-page__item__color-box__item__title">次要文字</text>
+					<text class="u-page__item__color-box__item__value">#909399</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #c0c4cc;"
+				>
+					<text class="u-page__item__color-box__item__title">占位文字</text>
+					<text class="u-page__item__color-box__item__value">#c0c4cc</text>
+				</view>
+			</view>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">边框颜色</text>
+			<view class="u-page__item__color-box">
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #9a9998;"
+				>
+					<text class="u-page__item__color-box__item__title ">一级边框</text>
+					<text class="u-page__item__color-box__item__value ">#9a9998</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #b4b3b1;"
+				>
+					<text class="u-page__item__color-box__item__title ">二级边框</text>
+					<text class="u-page__item__color-box__item__value ">#b4b3b1</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #ceccca;"
+				>
+					<text class="u-page__item__color-box__item__title ">三级边框</text>
+					<text class="u-page__item__color-box__item__value ">#ceccca</text>
+				</view>
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #e7e6e4;"
+				>
+					<text class="u-page__item__color-box__item__title u-tips-color">四级边框</text>
+					<text class="u-page__item__color-box__item__value u-tips-color">#e7e6e4</text>
+				</view>
+			</view>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">背景颜色</text>
+			<view class="u-page__item__color-box">
+				<view
+				    class="u-page__item__color-box__item"
+				    style="background-color: #f3f4f6;"
+				>
+					<text class="u-page__item__color-box__item__title u-tips-color">背景颜色</text>
+					<text class="u-page__item__color-box__item__value u-tips-color">#f3f4f6</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<style lang="scss">
+	.u-page {
+		padding: 15px;
+
+		&__item {
+
+			&__title {
+				font-size: 15px;
+				color: $u-content-color;
+				margin-top: 16px;
+				margin-bottom: 4px;
+			}
+
+			&__color-box {
+				@include flex;
+				justify-content: space-between;
+
+				&__item {
+					width: 160rpx;
+					@include flex(column);
+					align-items: center;
+					justify-content: center;
+					padding: 5px 0;
+					border-radius: 3px;
+
+					&__title {
+						font-size: 13px;
+						color: #fff;
+					}
+
+					&__value {
+						font-size: 14px;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+
+	.u-tips-color {
+		color: $u-tips-color;
+	}
+</style>

src/pages/componentsB/countDown/countDown.nvue

@@ -0,0 +1,239 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础用法</text>
+			<view class="u-demo-block__content">
+				<up-count-down
+				    :time="30 * 60 * 60 * 1000"
+				    format="HH:mm:ss"
+				    autoStart
+				    millisecond
+					@finish="finish"
+				>
+				</up-count-down>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义格式</text>
+			<view class="u-demo-block__content">
+				<up-count-down
+				    :time="30 * 60 * 60 * 1000"
+				    format="DD:HH:mm:ss"
+				    autoStart
+				    millisecond
+				    @change="onChange"
+				>
+					<view class="time">
+						<text class="time__item">{{ timeData.days }}&nbsp;天</text>
+						<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
+						<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
+						<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
+					</view>
+				</up-count-down>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">毫秒级渲染</text>
+			<view class="u-demo-block__content">
+				<up-count-down
+				    :time="30 * 60 * 60 * 1000"
+				    format="HH:mm:ss:SSS"
+				    autoStart
+				    millisecond
+				>
+				</up-count-down>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义样式</text>
+			<view class="u-demo-block__content">
+				<up-count-down
+				    :time="30 * 60 * 60 * 1000"
+				    format="HH:mm:ss"
+				    autoStart
+				    millisecond
+				    @change="onChange"
+				>
+					<view class="time">
+						<view class="time__custom">
+							<text class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}</text>
+						</view>
+						<text class="time__doc">:</text>
+						<view class="time__custom">
+							<text class="time__custom__item">{{ timeData.minutes }}</text>
+						</view>
+						<text class="time__doc">:</text>
+						<view class="time__custom">
+							<text class="time__custom__item">{{ timeData.seconds }}</text>
+						</view>
+					</view>
+				</up-count-down>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">手动控制</text>
+			<view class="u-demo-block__content">
+				<up-count-down
+				    ref="countDown"
+				    :time="3* 1000"
+				    format="ss:SSS"
+				    :autoStart="false"
+				    millisecond
+				>
+				</up-count-down>
+			</view>
+			<up-grid
+			    :border="true"
+			    :customStyle="{marginTop:10+'px'}"
+			>
+				<up-grid-item @click="reset">
+					<view class="count-down__grid-item">
+						<up-icon
+						    name="reload"
+						    :size="22"
+						></up-icon>
+						<text class="count-down__grid-item__grid-text">重置</text>
+					</view>
+				</up-grid-item>
+				<up-grid-item @click="start">
+					<view class="count-down__grid-item">
+						<view class="count-down__grid-item__circle">
+							<up-icon
+							    color="#fff"
+							    name="play-right-fill"
+							    :size="22"
+							></up-icon>
+						</view>
+						<text class="count-down__grid-item__grid-text">开始</text>
+					</view>
+				</up-grid-item>
+				<up-grid-item @click="pause">
+					<view class="count-down__grid-item">
+						<up-icon
+						    name="pause-circle"
+						    :size="22"
+						></up-icon>
+						<text class="count-down__grid-item__grid-text">暂停</text>
+					</view>
+				</up-grid-item>
+			</up-grid>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				timeData: {},
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			//开始
+			start() {
+				this.$refs.countDown.start();
+			},
+			// 暂停
+			pause() {
+				this.$refs.countDown.pause();
+			},
+			// 重置
+			reset() {
+				this.$refs.countDown.reset();
+			},
+			onChange(e) {
+				this.timeData = e
+			},
+			finish() {
+				console.log('finish');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		
+	}
+
+	.time {
+		@include flex;
+		align-items: center;
+
+		&__custom {
+			margin-top: 4px;
+			width: 22px;
+			height: 22px;
+			background-color: $u-primary;
+			border-radius: 4px;
+			/* #ifndef APP-NVUE */
+			display: flex;
+			/* #endif */
+			justify-content: center;
+			align-items: center;
+
+			&__item {
+				color: #fff;
+				font-size: 12px;
+				text-align: center;
+			}
+		}
+
+		&__doc {
+			color: $u-primary;
+			padding: 0px 4px;
+		}
+
+		&__item {
+			color: #606266;
+			font-size: 15px;
+			margin-right: 4px;
+		}
+	}
+
+	.u-view {
+		padding: 40px 20px 0px 20px;
+
+		&__title {
+			font-size: 14px;
+			color: rgb(143, 156, 162);
+			margin-bottom: 10px;
+		}
+	}
+
+	// 手动控制的btn样式
+	.count-down {
+		&__grid-item {
+			width: 70px;
+			height: 70px;
+			@include flex;
+			justify-content: center;
+			align-items: center;
+
+			&__circle {
+				width: 32px;
+				height: 32px;
+				border-radius: 32px;
+				background-color: $u-primary;
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				justify-content: center;
+				align-items: center;
+				box-shadow: 1px 1px 4px rgba(155, 191, 255, .7);
+			}
+
+			&__grid-text {
+				font-size: 14px;
+				color: #909399;
+				/* #ifndef APP-PLUS */
+				box-sizing: border-box;
+				/* #endif */
+				margin-left: 6px;
+			}
+		}
+	}
+</style>

src/pages/componentsB/countTo/countTo.nvue

@@ -0,0 +1,176 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础功能</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-count-to
+						:endVal="value"
+						@end="end"
+					></up-count-to>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">倒计数</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-count-to :startVal="startVal1"></up-count-to>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">显示小数位</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-count-to
+						:startVal="startVal2"
+						:endVal="endVal"
+						:decimals="decimals"
+					></up-count-to>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">千分位分隔符</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-count-to
+						:startVal="startVal3"
+						:endVal="endVal2"
+						separator=","
+						:decimals="decimals"
+					></up-count-to>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义控制</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-count-to
+						ref="uCountTo"
+						:endVal="endVal3"
+						:autoplay="autoplay"
+					></up-count-to>
+				</view>
+			</view>
+			<view class="u-demo-block__content">
+				<view
+					class=""
+					style="flex: 1;"
+				>
+					<up-grid
+						border
+						align="center"
+						customStyle="margin-top: 20px;margin-bottom: 20"
+					>
+						<up-grid-item @click="start">
+							<view class="u-grid-slot">
+								<view class="u-grid-slot__circle">
+									<text class="u-grid-slot__circle__text">开始</text>
+								</view>
+							</view>
+						</up-grid-item>
+						<up-grid-item @click="paused">
+							<view class="u-grid-slot">
+								<view class="u-grid-slot__circle">
+									<text class="u-grid-slot__circle__text">暂停</text>
+								</view>
+							</view>
+						</up-grid-item>
+						<up-grid-item @click="resume">
+							<view class="u-grid-slot">
+								<view class="u-grid-slot__circle">
+									<text class="u-grid-slot__circle__text">继续</text>
+								</view>
+							</view>
+						</up-grid-item>
+					</up-grid>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-count-to
+						:endVal="value"
+						color="#909399"
+						:fontSize="fontSize"
+						:bold="true"
+					></up-count-to>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: 3000,
+				startVal1: 300,
+				startVal2: 100.00,
+				endVal: 10.55,
+				decimals: 2,
+				startVal3: 2000,
+				endVal2: 1542,
+				endVal3: 3000,
+				autoplay: false,
+				color: '#FF0000',
+				fontSize: 40,
+			}
+		},
+		onLoad() {
+			// setTimeout(() => {
+			// 	this.value = 3000
+			// }, 3000)
+		},
+		methods: {
+			start() {
+				this.$refs.uCountTo.start();
+			},
+			paused() {
+				this.$refs.uCountTo.stop()
+			},
+			resume() {
+				this.$refs.uCountTo.resume()
+			},
+			end() {
+				console.log('end');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-demo-block__content {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+
+	.u-grid-slot {
+		border-radius: 100px;
+		border-color: #dbfbdb;
+		border-width: 2px;
+		@include flex;
+
+		&__circle {
+			width: 50px;
+			height: 50px;
+			background-color: #dbfbdb;
+			border-radius: 100px;
+			justify-content: center;
+			align-items: center;
+			margin: 2px;
+
+			&__text {
+				color: rgb(25, 190, 107);
+				font-size: 13px;
+			}
+		}
+	}
+</style>

src/pages/componentsB/dropdown/dropdown.nvue

@@ -0,0 +1,173 @@
+<template>
+	<view class="u-page">
+		<view class="u-m-p-50">
+			<view class="u-demo-area u-flex u-row-center">
+				<up-dropdown :close-on-click-mask="mask" ref="uDropdownRef" :activeColor="activeColor" :borderBottom="borderBottom">
+					<up-dropdown-item @change="change" v-model="value1" title="距离" :options="options1"></up-dropdown-item>
+					<up-dropdown-item @change="change" v-model="value2" title="温度" :options="options2"></up-dropdown-item>
+					<up-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>
+							<up-button type="primary" @click="closeDropdown">确定</up-button>
+						</view>
+					</up-dropdown-item>
+				</up-dropdown>
+			</view>
+		</view>
+		<view class="u-config-wrap">
+            <view class="u-demo-block">
+                <text class="u-demo-block__title">参数配置</text>
+            </view>
+            <view class="u-demo-block">
+                <text class="u-demo-block__title">下边框</text>
+                <view class="u-demo-block__content">
+                    <up-subsection current="1" :list="['有', '无']" @change="borderChange"></up-subsection>
+                </view>
+            </view>
+			<view class="u-demo-block">
+                <text class="u-demo-block__title">激活颜色</text>
+                <view class="u-demo-block__content">
+                    <up-subsection :list="['#2979ff', '#ff9900', '#19be6b']" @change="activeColorChange"></up-subsection>
+                </view>
+            </view>
+            <view class="u-demo-block">
+                <text class="u-demo-block__title">遮罩是否可点击</text>
+                <view class="u-demo-block__content">
+                    <up-subsection :list="['是', '否']" @change="maskChange"></up-subsection>
+                </view>
+            </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.uDropdownRef.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: 20px;
+	}
+	
+	.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-primary;
+				color: $u-primary;
+				padding: 8rpx 40rpx;
+				border-radius: 100rpx;
+				margin-top: 30rpx;
+			}
+			
+			.active {
+				color: #FFFFFF;
+				background-color: $u-primary;
+			}
+		}
+	}
+</style>

src/pages/componentsB/keyboard/keyboard.nvue

@@ -0,0 +1,132 @@
+<template>
+	<view class="u-page">
+		<up-navbar
+			title="键盘"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar>
+		<up-gap height="20" bgColor="#fff"></up-gap>
+		<up-cell-group>
+			<up-cell
+			    :titleStyle="{fontWeight: 500}"
+			    @click="openKeyboard(index)"
+			    :title="item.title"
+			    v-for="(item, index) in list"
+			    :key="index"
+			    isLink
+			>
+				<template #icon>
+					<image
+						class="u-cell-icon"
+						:src="item.iconUrl"
+						mode="widthFix"
+					></image>
+				</template>
+			</up-cell>
+		</up-cell-group>
+		<up-keyboard
+		    :mode="keyData.mode"
+		    :dotDisabled="keyData.dotDisabled"
+		    :random='keyData.random'
+		    :show="show"
+		    @close="close"
+			@cancel="cancel"
+			@confirm="confirm"
+			@change="change"
+			@backspace="backspace"
+		></up-keyboard>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				input: '',
+				keyData: {
+					mode: '',
+					dotDisabled: false,
+					random: false,
+				},
+				list: [{
+						title: '车牌号键盘',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/car.png'
+					},
+					{
+						title: '数字键盘',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/number.png'
+					},
+					{
+						title: '身份证键盘',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/IdCard.png'
+					},
+					{
+						title: '隐藏键盘"."符号',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/dot.png'
+					},
+					{
+						title: '打乱键盘按键的顺序',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/order.png'
+					},
+				],
+				show: false
+			}
+		},
+		methods: {
+			navigateBack() {
+				uni.navigateBack();
+			},
+			// 点击展示不同的键盘
+			openKeyboard(indexNum) {
+				this.keyData = {
+					mode: '',
+					dotDisabled: false,
+					random: false,
+				}
+				if (indexNum == 0) {
+					this.keyData.mode = ''
+				} else if (indexNum == 1) {
+					this.keyData.mode = 'number'
+				} else if (indexNum == 2) {
+					this.keyData.mode = 'card'
+				} else if (indexNum == 3) {
+					this.keyData.mode = 'number'
+					this.keyData.dotDisabled = true
+				} else if (indexNum == 4) {
+					this.keyData.mode = 'number'
+					this.keyData.random = true
+				}
+				this.input = ''
+				this.show = true
+			},
+			change(e) {
+				// console.log('change');
+				this.input += e
+			},
+			close() {
+				// console.log('close');
+				this.show = false
+			},
+			cancel() {
+				// console.log('cancel');
+				this.show = false
+			},
+			confirm() {
+				// console.log('confirm');
+				this.show = false
+			},
+			backspace() {
+				this.input = this.input.slice(0, -1)
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+</style>

src/pages/componentsB/noticeBar/noticeBar.nvue

@@ -0,0 +1,104 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础功能</text>
+			<view class="u-demo-block__content">
+				<up-notice-bar
+				    :text="text1"
+				></up-notice-bar>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">可关闭</text>
+			<view class="u-demo-block__content">
+				<up-notice-bar
+				    :text="text5"
+					mode="closable"
+				></up-notice-bar>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义横向滚动速度</text>
+			<view class="u-demo-block__content">
+				<up-notice-bar
+				    :text="text2"
+					speed="250"
+					mode="closable"
+				></up-notice-bar>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">可跳转(点击右箭头)</text>
+			<view class="u-demo-block__content">
+				<up-notice-bar
+				    :text="text3"
+					mode="link"
+					url="/pages/componentsB/tag/tag"
+				></up-notice-bar>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">横向步进滚动</text>
+			<view class="u-demo-block__content">
+				<up-notice-bar
+				    :text="text4"
+					:step="true"
+					@click="click"
+				></up-notice-bar>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">纵向滚动</text>
+			<view class="u-demo-block__content">
+				<up-notice-bar
+				    :text="text4"
+					direction="column"
+					@click="click"
+				></up-notice-bar>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义样式</text>
+			<view class="u-demo-block__content">
+				<up-notice-bar
+				    :text="text1"
+					color="#ffffff"
+					bgColor="#f56c6c"
+				></up-notice-bar>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				text1: 'uview-plus众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
+				text2: 'uview-plus众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨',
+				text3: 'uview-plus收集众多的常用页面和布局，减少开发者的重复工作，让您专注逻辑，事半功倍',
+				text4: [
+					'寒雨连江夜入吴',
+					'平明送客楚山孤',
+					'洛阳亲友如相问',
+					'一片冰心在玉壶'
+				],
+				text5: '涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川'
+			}
+		},
+		onLoad() {
+			
+		},
+		methods: {
+			click(e) {
+				console.log(e)
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-demo-block__content {
+		@include flex(column);
+	}
+</style>

src/pages/componentsB/notify/notify.nvue

@@ -0,0 +1,147 @@
+<template>
+	<view class="u-page">
+		<up-gap
+			height="30"
+			bgColor="#fff"
+		></up-gap>
+		<up-cell-group>
+			<up-cell
+				:titleStyle="{fontWeight: 500}"
+				@click="openNotify(item.notifyData)"
+				:title="item.title"
+				v-for="(item, index) in list"
+				:key="index"
+				isLink
+			>
+				<template #icon>
+					<image
+						class="u-cell-icon"
+						:src="item.iconUrl"
+						mode="widthFix"
+					></image>
+				</template>
+			</up-cell>
+		</up-cell-group>
+		<up-notify ref="uNotify"></up-notify>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				notifyData: {
+					message: 'notify顶部提示',
+					type: 'primary',
+					color: '#ffffff',
+					bgColor: '',
+					fontSize: 15,
+					duration: 3000,
+				},
+				list: [{
+						notifyData: {
+							message: 'notify顶部提示',
+							type: 'primary',
+							color: '#ffffff',
+							bgColor: '',
+							fontSize: 15,
+							duration: 3000
+						},
+						title: '主要通知',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/main.png'
+					}, {
+						notifyData: {
+							message: 'notify顶部提示',
+							type: 'success',
+							color: '#ffffff',
+							bgColor: '',
+							fontSize: 15,
+							duration: 3000,
+							safeAreaInsetTop: false
+						},
+						title: '成功通知',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/success.png'
+					}, {
+						notifyData: {
+							message: 'notify顶部提示',
+							type: 'error',
+							color: '#ffffff',
+							bgColor: '',
+							fontSize: 14,
+							duration: 3000,
+							safeAreaInsetTop: false
+						},
+						title: '危险通知',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/error.png'
+					}, {
+						notifyData: {
+							message: 'notify顶部提示',
+							type: 'warning',
+							color: '#ffffff',
+							bgColor: '',
+							fontSize: 15,
+							duration: 3000,
+							safeAreaInsetTop: false
+						},
+						title: '警告通知',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/warning.png'
+					},
+					{
+						notifyData: {
+							message: 'notify顶部提示',
+							color: '#fff',
+							bgColor: '#000',
+							fontSize: 15,
+							duration: 3000,
+							safeAreaInsetTop: false
+						},
+						title: '自定义样式',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customStyle.png'
+					},
+					{
+						notifyData: {
+							message: 'notify顶部提示',
+							type: 'primary',
+							color: '#ffffff',
+							bgColor: '',
+							fontSize: 15,
+							duration: 6000,
+							safeAreaInsetTop: false
+						},
+						title: '自定义时间',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customTime.png'
+					},
+					{
+						notifyData: {
+							message: 'notify顶部提示',
+							color: '#fff',
+							bgColor: '',
+							fontSize: 15,
+							duration: 3000,
+							safeAreaInsetTop: true
+						},
+						title: '插入状态栏高度',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/height.png'
+					}
+				]
+			}
+		},
+		onLoad() {},
+		methods: {
+			openNotify(params) {
+				this.$refs.uNotify.show({
+					...params
+				})
+				// 也可以通过主题形式调用，如：
+				// this.$refs.uNotify.primary('Primary主题')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+</style>

src/pages/componentsB/numberBox/numberBox.nvue

@@ -0,0 +1,264 @@
+<template>
+	<view class="">
+		<up-cell-group :border="true">
+			<up-cell
+			    :border="true"
+			    title="基础用法"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+					    v-model="value1"
+					    step="1"
+					    @change="change"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="步长设置"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value2"
+						:step="step1"
+						@change="change"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="限制输入范围"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value3"
+						step="1"
+						:min="min1"
+						:max="max1"
+						@change="change"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="限制输入整数"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value4"
+						step="1"
+						integer
+						@change="change"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="禁用状态"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value5"
+						step="1"
+						:disabled="true"
+						@change="change"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="禁用输入框"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value6"
+						step="1"
+						:disabledInput="true"
+						@change="change"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="禁用长按"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value7"
+						step="1"
+						:longPress="false"
+						@change="change"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="固定小数位数"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value8"
+						step="0.2"
+						decimalLength="1"
+						@change="change"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="异步变更"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value9"
+						step="1"
+						:asyncChange="asyncChange"
+						@change="myAsyncChange"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="自定义大小颜色样式"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value10"
+						step="1"
+						:color="color"
+						:buttonSize="buttonSize"
+						:bgColor="bgColor"
+						@change="change"
+						iconStyle="color: #fff"
+					>
+					</up-number-box>
+				</template>
+			</up-cell>
+			<up-cell
+			    :border="true"
+			    title="自定义(为0时减少按钮会消失)"
+			>
+				<template v-slot:right-icon>
+					<up-number-box
+						v-model="value11"
+						step="1"
+						:min="0"
+						:showMinus="value11 > 0"
+					>
+						<template v-slot:minus>
+							<view
+								class="minus"
+							>
+								<up-icon
+									name="minus"
+									size="12"
+								></up-icon>
+							</view>
+						</template>
+						<template v-slot:input>
+							<text
+								style="width: 50px;text-align: center;"
+								class="input"
+							>{{value11}}</text>
+						</template>
+						<template v-slot:plus>
+							<view
+								class="plus"
+							>
+								<up-icon
+									name="plus"
+									color="#FFFFFF"
+									size="12"
+								></up-icon>
+							</view>
+						</template>
+					</up-number-box>
+				</template>
+			</up-cell>
+		</up-cell-group>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1: 3,
+				value2: 3,
+				value3: 3,
+				value4: 3,
+				value5: 3,
+				value6: 3,
+				value7: 3,
+				value8: 3.1,
+				value9: 3,
+				value10: 3,
+				value11: 3,
+				step1: 2,
+				min1: 5,
+				max1: 8,
+				asyncChange: true,
+				color: '#FFFFFF',
+				buttonSize: 36,
+				bgColor: '#2979ff'
+			}
+		},
+		methods: {
+			change(e) {
+				console.log('change', e);
+			},
+			myAsyncChange(e) {
+				this.asyncChange = false
+				uni.showLoading({
+					title: '正在加载'
+				})
+				setTimeout(() => {
+					uni.hideLoading()
+					this.value9 = e
+					this.asyncChange = true
+				}, 3000)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.minus {
+		width: 22px;
+		height: 22px;
+		border-width: 1px;
+		border-color: #E6E6E6;
+		border-top-left-radius: 100px;
+		border-top-right-radius: 100px;
+		border-bottom-left-radius: 100px;
+		border-bottom-right-radius: 100px;
+		@include flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.input {
+		padding: 0 10px;
+	}
+
+	.plus {
+		width: 22px;
+		height: 22px;
+		background-color: #FF0000;
+		border-radius: 50%;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+	}
+</style>

src/pages/componentsB/parse/content.js

@@ -0,0 +1,203 @@
+/**
+ * @fileoverview 用于测试的 html 内容
+ */
+export default `<title>富文本示例</title>
+<div>
+  <section style="text-align: center; margin: 0px auto;">
+    <section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
+      <span style="font-size: 18px; color: #595959;">表格</span>
+    </section>
+  </section>
+  <section style="margin-top: 1.5em;">
+    <table width="100%" cellspacing="0" cellpadding="5">
+      <thead>
+        <tr>
+          <th>标题 1</th>
+          <th>标题 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td align="center">内容 1</td>
+          <td align="center">内容 2</td>
+        </tr>
+        <tr style="background-color: #f6f8fa;">
+          <td align="center">内容 3</td>
+          <td align="center"><a>链接</a></td>    
+        </tr>
+        <tr>
+          <td align="center">内容 5</td>
+          <td align="center">内容 6</td>
+        </tr>
+      </tbody>
+    </table>
+    <div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">普通表格</div>
+  </section>
+  <section style="margin-top: 1.5em;">
+    <table width="500px" cellspacing="0" cellpadding="5">
+      <thead>
+        <tr>
+          <th>标题 1</th>
+          <th>标题 2</th>
+          <th>标题 3</th>
+          <th>标题 4</th>
+          <th>标题 5</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td align="center">内容 1</td>
+          <td align="center">内容 2</td>
+          <td align="center">内容 3</td>
+          <td align="center">内容 4</td>
+          <td align="center">内容 5</td>
+        </tr>
+        <tr style="background-color: #f6f8fa;">
+          <td align="center"><a>链接</a></td>
+          <td align="center">内容 7</td>
+          <td align="center">内容 8</td>
+          <td align="center">内容 9</td>
+          <td align="center">内容 10</td>
+        </tr>
+        <tr>
+          <td align="center">内容 11</td>
+          <td align="center">内容 12</td>
+          <td align="center">内容 13</td>
+          <td align="center">内容 14</td>
+          <td align="center">内容 15</td>
+        </tr>
+      </tbody>
+    </table>
+    <div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">长表格，可以单独横向滚动</div>
+  </section>
+  <section style="margin-top: 1.5em;">
+    <table width="100%" cellspacing="0" cellpadding="5">
+      <thead>
+        <tr>
+          <th align="center">标题 1</th>
+          <th align="center">标题 2</th>
+          <th align="center">标题 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td align="center" colspan="2">内容 1</td>
+          <td align="center" rowspan="2">内容 2</td>
+        </tr>
+        <tr>
+          <td align="center" rowspan="2">内容 3</td>
+          <td align="center">内容 4</td>
+        </tr>
+        <tr>
+          <td align="center" colspan="2">内容 5</td>
+        </tr>
+        <tr>
+          <td align="center">内容 6</td>
+          <td align="center">内容 7</td>
+          <td align="center"><a>链接</a></td>
+        </tr>
+      </tbody>
+    </table>
+    <div style="font-size: 12px; color: gray; text-align: center; margin-top: 5px;">含有合并单元格的表格</div>
+  </section>
+  <section id="list" style="text-align: center; margin: 0px auto; margin-top: 2em">
+    <section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
+      <span style="font-size: 18px; color: #595959;">列表</span>
+    </section>
+  </section>
+  <section style="margin-top: 1.5em;">
+    <ol style="margin-bottom: 1.5em;">
+      <li>这是第一条列表项</li>
+      <li>这是第二条列表项</li>
+      <li>这是第三条 <a>链接</a></li>
+    </ol>
+    <ol type="A" style="margin-bottom: 1.5em;">
+      <li>这是第一条列表项</li>
+      <li>这是第二条列表项</li>
+      <li>这是第三条 <a>链接</a></li>
+    </ol>
+    <ol type="I" style="margin-bottom: 1.5em;">
+      <li>这是第一条列表项</li>
+      <li>这是第二条列表项</li>
+      <li>这是第三条 <a>链接</a></li>
+    </ol>
+    <ul>
+      <li>第一级无序列表</li>
+      <li>第一级无序列表
+        <ul>
+          <li>第二级无序列表</li>
+          <li>第二级无序列表
+            <ul>
+              <li>第三级无序列表</li>
+              <li>第三级 <a>链接</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>    
+  </section>
+  <section style="text-align: center; margin: 0px auto; margin-top: 2em">
+    <section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
+      <span style="font-size: 18px; color: #595959;">文本</span>
+    </section>
+  </section>
+  <section style="margin-top: 1.5em;">
+    <p style="margin-bottom: 1em;">
+      <ruby>
+        拼<rp>(</rp><rt>pin</rt><rp>)</rp>
+        音<rp>(</rp><rt>yin</rt><rp>)</rp>
+      </ruby>
+      &nbsp;&nbsp;<i>斜体</i>
+      &nbsp;&nbsp;<b>粗体</b>
+      &nbsp;&nbsp;上标<sup>1</sup>
+      &nbsp;&nbsp;下标<sub>2</sub>
+    </p>
+    <p style="margin-bottom: 1em;">
+      <span style="text-decoration: overline;">上划线</span>
+      &nbsp;&nbsp;<s>中划线</s>
+      &nbsp;&nbsp;<u>下划线</u>
+    </p>
+    <p>
+      <big>大一号</big>
+      &nbsp;&nbsp;<span>正常</span>
+      &nbsp;&nbsp;<small>小一号</small>
+    </p>
+    <h2 style="margin-top: 0.5em;">大标题</h2>
+    <h3 style="margin-top: 0.5em;">中标题</h3>
+    <h4 style="margin-top: 0.5em;">小标题</h4>
+  </section>
+  <section style="text-align: center; margin: 0px auto; margin-top: 2em">
+    <section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
+      <span style="font-size: 18px; color: #595959;">链接</span>
+    </section>
+  </section>
+  <section style="margin-top: 1.5em; text-align: center;">
+    <a href="#">跳转到顶部</a>&nbsp;&nbsp;&nbsp;<a href="#list">跳转到列表</a>
+    <div style="font-size: 12px; color: gray; margin-top: 5px;">锚点链接，将滚动到对应位置</div>
+  </section>
+  <section style="margin-top: 1.5em; text-align: center;">
+    <a href="https://github.com/jin-yufeng/mp-html">外部链接</a>
+    <div style="font-size: 12px; color: gray; margin-top: 5px;">外部链接，将复制链接</div>
+  </section>
+  <section style="margin-top: 1.5em; text-align: center;">
+    <a href="/pages/componentsB/parse/jump">内部链接</a>
+    <div style="font-size: 12px; color: gray; margin-top: 5px;">内部链接，将跳转页面</div>
+  </section>
+  <section style="text-align: center; margin: 0px auto; margin-top: 2em">
+    <section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
+      <span style="font-size: 18px; color: #595959;">图片</span>
+    </section>
+  </section>
+  <section style="margin-top: 1.5em; text-align: center;">
+    <img src="/demo-thumb.jpg?sign=91b3e495d16f96a0df3d263c9ff95821&t=1609059235" original-src="/demo.jpg?sign=af7082bed28711177bd952dbab67373e&t=1609059255">
+    <div style="font-size: 12px; color: gray; margin-top: 5px;">点击预览高清图</div>
+  </section>
+  <section style="margin-top: 1.5em; text-align: center;">
+    <svg width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;">
+      <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
+        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/>
+      </path>
+    </svg>
+    <div style="font-size: 12px; color: gray; margin-top: 5px;">svg 动画</div>
+  </section>
+</div>`

src/pages/componentsB/parse/jump.vue

@@ -0,0 +1,12 @@
+<template>
+  <view>
+    跳转测试页面
+  </view>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style>
+</style>

src/pages/componentsB/parse/parse.nvue

@@ -0,0 +1,52 @@
+<template>
+	<view class="u-content">
+		<up-parse container-style="padding: 20px" :content="content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo" lazy-load scroll-table selectable use-anchor :tag-style="tagStyle" @load="load" @ready="ready" @imgTap="imgTap" @linkTap="linkTap" />
+	</view>
+</template>
+
+<script>
+	// const content = import('./content')
+	import parseContent from './content';
+	export default {
+		data() {
+			return {
+				content: '',
+				tagStyle: {
+					table: 'box-sizing: border-box; border-top: 1px solid #dfe2e5; border-left: 1px solid #dfe2e5;',
+					th: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;',
+					td: 'border-right: 1px solid #dfe2e5; border-bottom: 1px solid #dfe2e5;',
+					li: 'margin: 5px 0;'
+				}
+			}
+		},
+		onLoad() {
+			// 模拟网络请求
+			setTimeout(() => {
+				this.content = parseContent
+			}, 200)
+		},
+		methods: {
+			load() {
+				// dom 结构加载完毕时触发
+			},
+			ready() {
+				// 渲染完毕时触发
+			},
+			imgTap() {
+				// 图片被点击时触发
+			},
+			linkTap() {
+				// 链接被点击时触发
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-content {
+		padding: 24rpx;
+		font-size: 32rpx;
+		color: $u-content-color;
+		line-height: 1.6;
+	}
+</style>

src/pages/componentsB/progress/progress.nvue

@@ -0,0 +1,155 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础功能</text>
+			<view class="u-demo-block__content">
+				<up-line-progress :percentage="percentage1">
+				</up-line-progress>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">不显示百分比</text>
+			<view class="u-demo-block__content">
+				<up-line-progress
+				    :showText="false"
+				    :percentage="percentage2"
+				>
+				</up-line-progress>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义高度</text>
+			<view class="u-demo-block__content">
+				<up-line-progress
+				    height="8"
+				    :showText="false"
+				    :percentage="percentage3"
+				>
+				</up-line-progress>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色</text>
+			<view class="u-demo-block__content">
+				<up-line-progress
+				    height="8"
+				    :showText="false"
+				    :percentage="percentage4"
+				    activeColor="#3c9cff"
+				    inactiveColor="#f3f4f6"
+				>
+				</up-line-progress>
+			</view>
+		</view>
+		<view
+		    class="u-demo-block"
+		    v-if="!androidNvue"
+		>
+			<text class="u-demo-block__title">自定义样式(不支持安卓环境的nvue)</text>
+			<view class="u-demo-block__content">
+				<up-line-progress
+				    height="8"
+				    :showText="false"
+				    :percentage="percentage5"
+				    activeColor="#3c9cff"
+				    inactiveColor="#f3f4f6"
+				>
+					<text class="u-percentage-slot">{{percentage4}}%</text>
+				</up-line-progress>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">手动加减</text>
+			<view class="u-demo-block__content">
+				<up-line-progress
+				    height="8"
+				    :showText="false"
+				    :percentage="percentage6"
+				    activeColor="#3c9cff"
+				    inactiveColor="#f3f4f6"
+				>
+				</up-line-progress>
+				<view class="button-group">
+					<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('minus')">
+						<text class="button-group__circle__text">减少</text>
+					</view>
+					<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('plus')">
+						<text class="button-group__circle__text">增加</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				androidNvue: false,
+				percentage1: 30,
+				percentage2: 40,
+				percentage3: 50,
+				percentage4: 60,
+				percentage5: 70,
+				percentage6: 50,
+			}
+		},
+		onLoad() {
+			// #ifdef APP-NVUE
+			this.androidNvue = uni.$u.os() === 'android'
+			// #endif
+			uni.$u.sleep(2500).then(() => {
+				this.percentage1 = 120
+			})
+		},
+		methods: {
+			computedWidth(type) {
+				if(type === 'plus') {
+					this.percentage6 = uni.$u.range(0, 100, this.percentage6 + 10)
+				} else {
+					this.percentage6 = uni.$u.range(0, 100, this.percentage6 - 10)
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-page {}
+
+	.u-percentage-slot {
+		padding: 1px 5px;
+		background-color: $u-warning;
+		color: #fff;
+		border-radius: 100px;
+		font-size: 10px;
+		margin-right: -5px;
+	}
+
+	.u-demo-block__content {
+		flex-direction: column !important;
+		flex-wrap: nowrap;
+		align-items: stretch;
+	}
+	
+	.button-group {
+		@include flex;
+		justify-content: center;
+		
+		&__circle {
+			width: 50px;
+			height: 50px;
+			background-color: #dbfbdb;
+			border-radius: 100px;
+			justify-content: center;
+			align-items: center;
+			margin: 30px 30px;
+		
+			&__text {
+				color: rgb(25, 190, 107);
+				font-size: 13px;
+			}
+		}
+	}
+</style>

src/pages/componentsB/search/search.nvue

@@ -0,0 +1,219 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础功能</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value1"
+						:show-action="false"
+						@change="change"
+					></up-search>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">设置初始值</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value2"
+						:show-action="false"
+					></up-search>
+					{{value2}}
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">搜索框形状</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value3"
+						:show-action="false"
+						shape="round"
+					></up-search>
+				</view>
+			</view>
+			<view class="u-demo-block__content m-t-10">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value4"
+						:show-action="false"
+						shape="square"
+					></up-search>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">右侧控件</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-search v-model="value5"></up-search>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">禁用输入框</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-search
+						placeholder="输入框被禁用,可以监听点击事件进行跳转"
+						disabled
+						:show-action="false"
+					></up-search>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">点击左侧图标</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value6"
+						:show-action="false"
+						@clickIcon="clickIcon"
+					></up-search>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">搜索框内容水平对齐</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value7"
+						:show-action="false"
+						input-align="left"
+					></up-search>
+				</view>
+			</view>
+			<view class="u-demo-block__content m-t-10">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value8"
+						:show-action="false"
+						input-align="center"
+					></up-search>
+				</view>
+			</view>
+			<view class="u-demo-block__content m-t-10">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value9"
+						:show-action="false"
+						input-align="right"
+					></up-search>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value10"
+						:show-action="false"
+						borderColor="rgb(230, 230, 230)"
+						bgColor="#fff"
+					></up-search>
+				</view>
+			</view>
+			<view class="u-demo-block__content m-t-10">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value11"
+						:show-action="false"
+						search-icon-color="#FF0000"
+					></up-search>
+				</view>
+			</view>
+			<view class="u-demo-block__content m-t-10">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value12"
+						:show-action="false"
+						placeholder-color="#FF0000"
+					></up-search>
+				</view>
+			</view>
+			<view class="u-demo-block__content m-t-10">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value13"
+						:show-action="false"
+						color="#FF0000"
+					></up-search>
+				</view>
+			</view>
+			<view class="u-demo-block__content m-t-10">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value14"
+						label="手机"
+						:show-action="false"
+					>
+					</up-search>
+				</view>
+			</view>
+			<view class="u-demo-block__content m-t-10">
+				<view class="u-page__tag-item">
+					<up-search
+						v-model="value15"
+						search-icon="scan"
+						:show-action="false"
+					>
+					</up-search>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1: '',
+				value2: '天山雪莲',
+				value3: '',
+				value4: '',
+				value5: '',
+				value6: '',
+				value7: '',
+				value8: '',
+				value9: '',
+				value10: '',
+				value11: '',
+				value12: '',
+				value13: '',
+				value14: '',
+				value15: ''
+			}
+		},
+		watch: {
+			value1(newValue, oldValue) {
+				// console.log('value1', newValue);
+			}
+		},
+		methods: {
+			change(e) {
+				console.log(e);
+			},
+			clickIcon() {
+				uni.$u.toast('点击了左侧图标')
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page__tag-item {
+		@include flex(column);
+		flex: 1
+	}
+
+	.m-t-10 {
+		margin-top: 10px;
+	}
+</style>

src/pages/componentsB/switch/switch.nvue

@@ -0,0 +1,179 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础功能</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value1"
+						@change="change"
+					></up-switch>
+					{{value1}}
+				</view>
+				<view class="u-page__tag-item">
+					<up-switch v-model="value2"></up-switch>
+					{{value2}}
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">加载中</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value3"
+						loading
+					></up-switch>
+				</view>
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value4"
+						loading
+					></up-switch>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">禁用状态</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value5"
+						disabled
+					></up-switch>
+				</view>
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value6"
+						disabled
+					></up-switch>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义尺寸</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value7"
+						size="28"
+					></up-switch>
+				</view>
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value8"
+						size="20"
+					></up-switch>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义颜色</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value9"
+						activeColor="#f56c6c"
+						loading
+					></up-switch>
+				</view>
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value10"
+						activeColor="#5ac725"
+						loading
+					></up-switch>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义样式</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-switch
+						:space="2"
+						v-model="value11"
+						activeColor="#f56c6c"
+						inactiveColor="rgb(230, 230, 230)"
+					></up-switch>
+				</view>
+				<view class="u-page__tag-item">
+					<up-switch
+						space="2"
+						v-model="value12"
+						activeColor="#f9ae3d"
+						inactiveColor="rgb(230, 230, 230)"
+					></up-switch>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">异步控制</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-switch
+						v-model="value13"
+						asyncChange
+						@change="asyncChange"
+					></up-switch>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1: false,
+				value2: true,
+				value3: false,
+				value4: true,
+				value5: false,
+				value6: true,
+				value7: false,
+				value8: true,
+				value9: true,
+				value10: true,
+				value11: false,
+				value12: true,
+				value13: true,
+			}
+		},
+		watch: {
+			value1(newValue, oldValue) {
+				console.log('v-model', newValue);
+			}
+		},
+		methods: {
+			change(e) {
+				console.log('change', e);
+			},
+			asyncChange(e) {
+				uni.showModal({
+					content: e ? '确定要打开吗' : '确定要关闭吗',
+					success: (res) => {
+						if (res.confirm) {
+							this.value13 = e
+						}
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		&__tag-item {
+			margin-right: 30px;
+		}
+	}
+
+	.u-demo-block__content {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+</style>

src/pages/componentsB/tabbar/tabbar.nvue

@@ -0,0 +1,281 @@
+<template>
+	<view class="u-page">
+		<view class="u-page__item">
+			<text class="u-page__item__title">基础功能</text>
+			<up-tabbar
+			    :value="value1"
+			    @change="change1"
+			    :fixed="false"
+			    :placeholder="false"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item
+					text="首页"
+					icon="home"
+					@click="click1"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="放映厅"
+					icon="photo"
+					@click="click1"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="直播"
+					icon="play-right"
+					@click="click1"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="我的"
+					icon="account"
+					@click="click1"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">显示徽标</text>
+			<up-tabbar
+			    :value="value2"
+			    :placeholder="false"
+			    @change="name => value2 = name"
+			    :fixed="false"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item
+				    text="首页"
+				    icon="home"
+				    dot
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				    badge="3"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">匹配标签的名称</text>
+			<up-tabbar
+			    :placeholder="false"
+			    :value="value3"
+			    @change="name => value3 = name"
+			    :fixed="false"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item
+				    text="首页"
+				    icon="home"
+				    name="home"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				    name="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				    name="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    name="account"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">自定义图标/颜色</text>
+			<up-tabbar
+			    :value="value4"
+			    @change="name => value4 = name"
+			    :fixed="false"
+			    :placeholder="false"
+			    activeColor="#d81e06"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item text="首页">
+					<template v-slot:active-icon>
+						<image
+						    class="u-page__item__slot-icon"
+						    src="https://cdn.uviewui.com/uview/common/bell-selected.png"
+						></image>
+					</template>
+					<template v-slot:inactive-icon>
+						<image
+							class="u-page__item__slot-icon"
+							src="https://cdn.uviewui.com/uview/common/bell.png"
+						></image>
+					</template>
+				</up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">拦截切换事件(点击第二个标签)</text>
+			<up-tabbar
+			    :value="value5"
+			    :fixed="false"
+				@change="change5"
+			    :safeAreaInsetBottom="false"
+			    :placeholder="false"
+			>
+				<up-tabbar-item
+				    text="首页"
+				    icon="home"
+				>
+				</up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">去除上边框</text>
+			<up-tabbar
+			    :value="value7"
+			    :placeholder="false"
+				:border="false"
+			    @change="name => value7 = name"
+			    :fixed="false"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item
+				    text="首页"
+				    icon="home"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">固定在底部(固定在屏幕最下方)</text>
+			<up-gap height="150"></up-gap>
+			<up-tabbar
+			    :value="value6"
+			    @change="name => value6 = name"
+			    :fixed="true"
+				:placeholder="true"
+			    :safeAreaInsetBottom="true"
+			>
+				<up-tabbar-item
+					@click="goNext"
+					text="首页"
+					icon="home"
+				>
+				</up-tabbar-item>
+				<up-tabbar-item
+					text="放映厅"
+					icon="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="直播"
+					icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="我的"
+					icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1: 0,
+				value2: 1,
+				value3: 'play-right',
+				value4: 0,
+				value5: 0,
+				value6: 0,
+				value7: 3
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			change5(name) {
+				if (name === 1) return uni.$u.toast('请您先登录')
+				else this.value5 = name
+			},
+			change1(e) {
+				this.value1 = e
+				console.log('change1', e);
+			},
+			click1(e) {
+				console.log('click1', e);
+			},
+			goNext() {
+				uni.navigateTo({
+					url: 'tabbar2'
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+		&__item {
+
+			&__title {
+				color: $u-tips-color;
+				background-color: $u-bg-color;
+				padding: 15px 15px 5px 15px;
+				font-size: 15px;
+
+				&__slot-title {
+					color: $u-primary;
+					font-size: 14px;
+				}
+			}
+
+			&__slot-icon {
+				width: 17px;
+				height: 17px;
+			}
+		}
+	}
+</style>

src/pages/componentsB/tabbar/tabbar2.vue

@@ -0,0 +1,275 @@
+<template>
+	<view class="u-page">
+		<view class="u-page__item">
+			<text class="u-page__item__title">基础功能</text>
+			<up-tabbar
+			    :value="value1"
+			    @change="change1"
+			    :fixed="false"
+			    :placeholder="false"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item
+					text="首页"
+					icon="home"
+					@click="click1"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="放映厅"
+					icon="photo"
+					@click="click1"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="直播"
+					icon="play-right"
+					@click="click1"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="我的"
+					icon="account"
+					@click="click1"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">显示徽标</text>
+			<up-tabbar
+			    :value="value2"
+			    :placeholder="false"
+			    @change="name => value2 = name"
+			    :fixed="false"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item
+				    text="首页"
+				    icon="home"
+				    dot
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				    badge="3"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">匹配标签的名称</text>
+			<up-tabbar
+			    :placeholder="false"
+			    :value="value3"
+			    @change="name => value3 = name"
+			    :fixed="false"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item
+				    text="首页"
+				    icon="home"
+				    name="home"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				    name="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				    name="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    name="account"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">自定义图标/颜色</text>
+			<up-tabbar
+			    :value="value4"
+			    @change="name => value4 = name"
+			    :fixed="false"
+			    :placeholder="false"
+			    activeColor="#d81e06"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item text="首页">
+					<template v-slot:active-icon>
+						<image
+						    class="u-page__item__slot-icon"
+						    src="https://cdn.uviewui.com/uview/common/bell-selected.png"
+						></image>
+					</template>
+					<template v-slot:inactive-icon>
+						<image
+							class="u-page__item__slot-icon"
+							src="https://cdn.uviewui.com/uview/common/bell.png"
+						></image>
+					</template>
+				</up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">拦截切换事件(点击第二个标签)</text>
+			<up-tabbar
+			    :value="value5"
+			    :fixed="false"
+				@change="change5"
+			    :safeAreaInsetBottom="false"
+			    :placeholder="false"
+			>
+				<up-tabbar-item
+				    text="首页"
+				    icon="home"
+				>
+				</up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">去除上边框</text>
+			<up-tabbar
+			    :value="value7"
+			    :placeholder="false"
+				:border="false"
+			    @change="name => value7 = name"
+			    :fixed="false"
+			    :safeAreaInsetBottom="false"
+			>
+				<up-tabbar-item
+				    text="首页"
+				    icon="home"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="放映厅"
+				    icon="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="直播"
+				    icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+				    text="我的"
+				    icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">固定在底部(固定在屏幕最下方)</text>
+			<up-gap height="150"></up-gap>
+			<up-tabbar
+			    :value="value6"
+			    @change="name => value6 = name"
+			    :fixed="true"
+				:placeholder="true"
+			    :safeAreaInsetBottom="true"
+			>
+				<up-tabbar-item
+					text="首页"
+					icon="home"
+				>
+				</up-tabbar-item>
+				<up-tabbar-item
+					text="放映厅"
+					icon="photo"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="直播"
+					icon="play-right"
+				></up-tabbar-item>
+				<up-tabbar-item
+					text="我的"
+					icon="account"
+				></up-tabbar-item>
+			</up-tabbar>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1: 0,
+				value2: 1,
+				value3: 'play-right',
+				value4: 0,
+				value5: 0,
+				value6: 0,
+				value7: 3
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			change5(name) {
+				if (name === 1) return uni.$u.toast('请您先登录')
+				else this.value5 = name
+			},
+			change1(e) {
+				this.value1 = e
+				console.log('change1', e);
+			},
+			click1(e) {
+				console.log('click1', e);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+		&__item {
+
+			&__title {
+				color: $u-tips-color;
+				background-color: $u-bg-color;
+				padding: 15px 15px 5px 15px;
+				font-size: 15px;
+
+				&__slot-title {
+					color: $u-primary;
+					font-size: 14px;
+				}
+			}
+
+			&__slot-icon {
+				width: 17px;
+				height: 17px;
+			}
+		}
+	}
+</style>

src/pages/componentsB/tag/tag.nvue

@@ -0,0 +1,335 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础功能</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    plain
+					    size="mini"
+					    type="warning"
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义主题</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-tag text="标签">
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="warning"
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="success"
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="error"
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">圆形标签</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    plain
+						shape="circle"
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="warning"
+						shape="circle"
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">镂空标签</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    plain
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="warning"
+					    plain
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="success"
+					    plain
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="error"
+					    plain
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">镂空带背景色</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    plain
+					    plainFill
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="warning"
+					    plain
+					    plainFill
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="success"
+					    plain
+					    plainFill
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="error"
+					    plain
+					    plainFill
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义尺寸</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    plain
+					    size="mini"
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="warning"
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="success"
+					    plain
+					    size="large"
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">可关闭标签</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    size="mini"
+					    closable
+					    :show="close1"
+					    @close="close1 = false"
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="warning"
+					    closable
+						:show="close2"
+					    @close="close2 = false"
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="success"
+					    plain
+					    size="large"
+					    closable
+						:show="close3"
+					    @close="close3 = false"
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">带图片和图标</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    size="mini"
+					    icon="map"
+					    plain
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="warning"
+					    icon="tags-fill"
+					>
+					</up-tag>
+				</view>
+				<view class="u-page__tag-item">
+					<up-tag
+					    text="标签"
+					    type="success"
+					    plain
+					    size="large"
+					    icon="https://cdn.uviewui.com/uview/example/tag.png"
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">单选标签</text>
+			<view class="u-demo-block__content">
+				<view
+				    class="u-page__tag-item"
+				    v-for="(item, index) in radios"
+				    :key="index"
+				>
+					<up-tag
+					    :text="`选项${index + 1}`"
+					    :plain="!item.checked"
+					    type="warning"
+					    :name="index"
+					    @click="radioClick"
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">多选标签</text>
+			<view class="u-demo-block__content">
+				<view
+				    class="u-page__tag-item"
+				    v-for="(item, index) in checkboxs"
+				    :key="index"
+				>
+					<up-tag
+					    :text="`选项${index + 1}`"
+					    :plain="!item.checked"
+					    type="warning"
+					    :name="index"
+					    @click="checkboxClick"
+					>
+					</up-tag>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				close1: true,
+				close2: true,
+				close3: true,
+				radios: [{
+						checked: true
+					},
+					{
+						checked: false
+					},
+					{
+						checked: false
+					}
+				],
+				checkboxs: [{
+						checked: true
+					},
+					{
+						checked: false
+					},
+					{
+						checked: false
+					}
+				]
+			}
+		},
+		methods: {
+			radioClick(name) {
+				this.radios.map((item, index) => {
+					item.checked = index === name ? true : false
+				})
+			},
+			checkboxClick(name) {
+				this.checkboxs[name].checked = !this.checkboxs[name].checked
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page__tag-item {
+		margin-right: 20px;
+	}
+
+	.u-demo-block__content {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+</style>

src/pages/componentsB/toast/toast.nvue

@@ -0,0 +1,129 @@
+<template>
+	<view class="u-page">
+		<up-gap
+			height="30"
+			bgColor="#fff"
+		></up-gap>
+		<up-toast ref="uToastRef"></up-toast>
+		<up-cell-group title-bg-color="rgb(243, 244, 246)">
+			<up-cell
+				:titleStyle="{fontWeight: 500}"
+				:title="item.title"
+				v-for="(item, index) in list"
+				:key="index"
+				isLink
+				:icon="item.iconUrl"
+				@click="showToast(item)"
+			>
+				<template #icon>
+					<!-- <image
+						class="u-cell-icon"
+						:src="getIcon(item.icon)"
+						mode="widthFix"
+					></image> -->
+				</template>
+			</up-cell>
+		</up-cell-group>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				list: [{
+						type: 'default',
+						title: '默认主题',
+						message: "锦瑟无端五十弦",
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
+					},
+					{
+						type: 'error',
+						icon: false,
+						title: '失败主题(不带图标)',
+						message: "一弦一柱思华年",
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
+					},
+					{
+						type: 'success',
+						title: '成功主题(带图标)',
+						message: "庄生晓梦迷蝴蝶",
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
+					},
+					{
+						type: 'warning',
+						position: "top",
+						title: '位置偏移上方',
+						message: "望帝春心托杜鹃",
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png'
+					},
+					{
+						type: 'loading',
+						title: '正在加载',
+						message: "正在加载",
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
+					},
+					{
+						type: 'default',
+						title: '结束后跳转标签页',
+						message: "此情可待成追忆",
+						url: '/pages/componentsB/tag/tag',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
+					},
+					{
+						type: 'default',
+						title: '其它icon图标',
+						icon: 'photo',
+						message: "只是当时已惘然",
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
+					},
+					{
+						type: 'default',
+						title: '自定义图片图标',
+						icon: 'https://cdn.uviewui.com/uview/demo/toast/jump.png',
+						message: "只是当时已惘然",
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
+					}
+				],
+			}
+		},
+		computed: {
+			getIcon() {
+				return path => {
+					return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
+				}
+			}, 
+		},
+		methods: {
+			showToast(params) {
+				this.$refs.uToastRef.show({
+					...params,
+					overlay: true,
+					complete() {
+						params.url && uni.navigateTo({
+							url: params.url
+						})
+					}
+				})
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+
+	.u-cell-icon {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 8rpx;
+	}
+
+	.u-cell-group__title__text {
+		font-weight: bold;
+	}
+</style>

src/pages/componentsB/upload/upload.nvue

@@ -0,0 +1,185 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础用法</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__upload-item">
+				<up-upload
+				    :fileList="fileList1"
+					useBeforeRead
+					@beforeRead="beforeRead"
+				    @afterRead="afterRead"
+				    @delete="deletePic"
+				    name="1"
+				    multiple
+				    :maxCount="10"
+				></up-upload>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">上传视频</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__upload-item">
+				<up-upload
+				    :fileList="fileList2"
+				    @afterRead="afterRead"
+				    @delete="deletePic"
+				    name="2"
+				    multiple
+				    :maxCount="10"
+				    accept="video"
+				></up-upload>
+				</view>
+			</view>
+		</view>
+			<view class="u-demo-block">
+			<text class="u-demo-block__title">文件预览</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__upload-item">
+				<up-upload
+				    :fileList="fileList3"
+				    @afterRead="afterRead"
+				    @delete="deletePic"
+				    name="3"
+				    multiple
+				    :maxCount="10"
+				    :previewFullImage="true"
+				></up-upload>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">隐藏上传按钮</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__upload-item">
+				<up-upload
+				    :fileList="fileList4"
+				    @afterRead="afterRead"
+				    @delete="deletePic"
+				    name="4"
+				    multiple
+				    :maxCount="2"
+				></up-upload>
+				</view>
+			</view>
+		</view>
+			<view class="u-demo-block">
+			<text class="u-demo-block__title">限制上传数量</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__upload-item">
+				<up-upload
+				    :fileList="fileList5"
+				    @afterRead="afterRead"
+				    @delete="deletePic"
+				    name="5"
+				    multiple
+				    :maxCount="3"
+				></up-upload>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">自定义上传样式</text>
+			<view class="u-demo-block__content">
+				<view class="u-page__upload-item">
+					<up-upload
+						:fileList="fileList6"
+						@afterRead="afterRead"
+						@delete="deletePic"
+						name="6"
+						multiple
+						:maxCount="1"
+						width="250"
+						height="150"
+					>
+						<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix" style="width: 250px;height: 150px;"></image>
+					</up-upload>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				fileList1: [],
+				fileList2: [],
+				fileList3: [{
+					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+				}],
+				fileList4: [{
+						url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+					},
+					{
+						url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+					}
+				],
+				fileList5: [],
+				fileList6: [],
+				fileList7: []
+			}
+		},
+		onLoad() {
+		},
+		methods: {
+			// 删除图片
+			deletePic(event) {
+				this[`fileList${event.name}`].splice(event.index, 1)
+			},
+			beforeRead() {
+				console.log('beforeRead')
+			},
+			// 新增图片
+			async afterRead(event) {
+				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+				let lists = [].concat(event.file)
+				let fileListLen = this[`fileList${event.name}`].length
+				lists.map((item) => {
+					this[`fileList${event.name}`].push({
+						...item,
+						status: 'uploading',
+						message: '上传中'
+					})
+				})
+				for (let i = 0; i < lists.length; i++) {
+					const result = await this.uploadFilePromise(lists[i].url)
+					let item = this[`fileList${event.name}`][fileListLen]
+					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
+						status: 'success',
+						message: '',
+						url: result
+					}))
+					fileListLen++
+				}
+			},
+			uploadFilePromise(url) {
+				return new Promise((resolve, reject) => {
+					let a = uni.uploadFile({
+						url: 'http://www.example.com/upload', // 仅为示例，非真实的接口地址
+						filePath: url,
+						name: 'file',
+						formData: {
+							user: 'test'
+						},
+						success: (res) => {
+							setTimeout(() => {
+								resolve(res.data.data)
+							}, 1000)
+						}
+					});
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		&__upload-item{
+			margin-top:5px;
+		}
+	}
+</style>

src/pages/componentsB/waterfall/waterfall.nvue

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

src/pages/componentsC/album/album.nvue

@@ -0,0 +1,306 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础使用</text>
+			<view class="u-demo-block__content">
+				<view class="album">
+					<view class="album__avatar">
+						<image
+						    src="/static/uview/common/logo.png"
+						    mode=""
+						    style="width: 32px;height: 32px;"
+						></image>
+					</view>
+					<view class="album__content">
+						<up-text
+						    text="uview-plus"
+						    type="primary"
+						    bold
+						    size="17"
+						></up-text>
+						<up-text
+						    margin="0 0 8px 0"
+						    text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+						></up-text>
+						<up-album @click="testStop"
+						    :urls="urls1"
+						    keyName="src2"
+						></up-album>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">多图模式</text>
+			<view class="u-demo-block__content">
+				<view class="album">
+					<view class="album__avatar">
+						<image
+						    src="/static/uview/common/logo.png"
+						    mode=""
+						    style="width: 32px;height: 32px;"
+						></image>
+					</view>
+					<view class="album__content">
+						<up-text
+						    text="uview-plus"
+						    type="primary"
+						    bold
+						    size="17"
+						></up-text>
+						<up-text
+						    margin="0 0 8px 0"
+						    text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+						></up-text>
+						<up-album :urls="urls2"></up-album>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">图文对齐</text>
+			<view class="u-demo-block__content">
+				<view class="album">
+					<view class="album__avatar">
+						<image
+						    src="/static/uview/common/logo.png"
+						    mode=""
+						    style="width: 32px;height: 32px;"
+						></image>
+					</view>
+					<view class="album__content">
+						<up-text
+						    text="uview-plus"
+						    type="primary"
+						    bold
+						    size="17"
+						></up-text>
+						<view :style="{
+							marginBottom: '8px',
+							width: albumWidth + 'px'
+						}">
+							<up-text
+							    text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+							    :customStyle="{
+									width: albumWidth + 'px'
+								}"
+							></up-text>
+						</view>
+						<up-album
+						    :urls="urls2"
+						    @albumWidth="width => albumWidth = width"
+						    multipleSize="68"
+						></up-album>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">更改裁剪模式</text>
+			<view class="u-demo-block__content">
+				<view class="album">
+					<view class="album__avatar">
+						<image
+						    src="/static/uview/common/logo.png"
+						    mode=""
+						    style="width: 32px;height: 32px;"
+						></image>
+					</view>
+					<view class="album__content">
+						<up-text
+						    text="uview-plus"
+						    type="primary"
+						    bold
+						    size="17"
+						></up-text>
+						<up-text
+						    margin="0 0 8px 0"
+						    text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+						></up-text>
+						<up-album
+						    :urls="urls3"
+						    rowCount="2"
+						    maxCount="4"
+						    multipleMode="scaleToFill"
+						></up-album>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">更改图片大小</text>
+			<view class="u-demo-block__content">
+				<view class="album">
+					<view class="album__avatar">
+						<image
+						    src="/static/uview/common/logo.png"
+						    mode=""
+						    style="width: 32px;height: 32px;"
+						></image>
+					</view>
+					<view class="album__content">
+						<up-text
+						    text="uview-plus"
+						    type="primary"
+						    bold
+						    size="17"
+						></up-text>
+						<up-text
+						    margin="0 0 8px 0"
+						    text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+						></up-text>
+						<up-album
+						    :urls="urls4"
+						    rowCount="2"
+						    maxCount="4"
+						    multipleSize="50"
+						></up-album>
+					</view>
+				</view>
+			</view>
+		</view>
+        <view class="u-demo-block">
+            <text class="u-demo-block__title">自定义圆角</text>
+            <view class="u-demo-block__content">
+                <view class="album">
+                    <view class="album__avatar">
+                        <image
+                            src="/static/uview/common/logo.png"
+                            mode=""
+                            style="width: 32px;height: 32px;"
+                        ></image>
+                    </view>
+                    <view class="album__content">
+                        <up-text
+                            text="uview-plus"
+                            type="primary"
+                            bold
+                            size="17"
+                        ></up-text>
+                        <up-text
+                            margin="0 0 8px 0"
+                            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+                        ></up-text>
+                        <up-album :urls="urls2" radius="10"></up-album>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="u-demo-block">
+            <text class="u-demo-block__title">自定义形状</text>
+            <view class="u-demo-block__content">
+                <view class="album">
+                    <view class="album__avatar">
+                        <image
+                            src="/static/uview/common/logo.png"
+                            mode=""
+                            style="width: 32px;height: 32px;"
+                        ></image>
+                    </view>
+                    <view class="album__content">
+                        <up-text
+                            text="uview-plus"
+                            type="primary"
+                            bold
+                            size="17"
+                        ></up-text>
+                        <up-text
+                            margin="0 0 8px 0"
+                            text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
+                        ></up-text>
+                        <up-album :urls="urls2" shape="circle"></up-album>
+                    </view>
+                </view>
+            </view>
+        </view>
+		<view class="u-demo-block">
+		    <text class="u-demo-block__title">自适应自动换行</text>
+		    <view class="u-demo-block__content">
+		        <view class="album">
+		            <view class="album__avatar">
+		                <image
+		                    src="/static/uview/common/logo.png"
+		                    mode=""
+		                    style="width: 32px;height: 32px;"
+		                ></image>
+		            </view>
+		            <view class="album__content">
+		                <up-text
+		                    text="uview-plus"
+		                    type="primary"
+		                    bold
+		                    size="17"
+		                ></up-text>
+		                <up-text
+		                    margin="0 0 8px 0"
+		                    text="每行占满自动换行(不受rowCount限制)"
+		                ></up-text>
+		                <up-album :urls="urls2" :max-count="9" autoWrap></up-album>
+		            </view>
+		        </view>
+		    </view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				albumWidth: 0,
+				urls1: [{
+					src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
+				}],
+				urls2: [
+					'https://cdn.uviewui.com/uview/album/1.jpg',
+					'https://cdn.uviewui.com/uview/album/2.jpg',
+					'https://cdn.uviewui.com/uview/album/3.jpg',
+					'https://cdn.uviewui.com/uview/album/4.jpg',
+					'https://cdn.uviewui.com/uview/album/5.jpg',
+					'https://cdn.uviewui.com/uview/album/6.jpg',
+					'https://cdn.uviewui.com/uview/album/7.jpg',
+					'https://cdn.uviewui.com/uview/album/8.jpg',
+					'https://cdn.uviewui.com/uview/album/9.jpg',
+					'https://cdn.uviewui.com/uview/album/10.jpg',
+				],
+				urls3: [
+					'https://cdn.uviewui.com/uview/album/5.jpg',
+					'https://cdn.uviewui.com/uview/album/6.jpg',
+					'https://cdn.uviewui.com/uview/album/7.jpg',
+					'https://cdn.uviewui.com/uview/album/8.jpg',
+				],
+				urls4: [
+					'https://cdn.uviewui.com/uview/album/7.jpg',
+					'https://cdn.uviewui.com/uview/album/8.jpg',
+					'https://cdn.uviewui.com/uview/album/9.jpg',
+					'https://cdn.uviewui.com/uview/album/10.jpg',
+				]
+			}
+		},
+		methods: {
+			testStop() {
+				uni.showToast({
+					title: 'test'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.album {
+		@include flex;
+		align-items: flex-start;
+
+		&__avatar {
+			background-color: $u-bg-color;
+			padding: 5px;
+			border-radius: 3px;
+		}
+
+		&__content {
+			margin-left: 10px;
+			flex: 1;
+		}
+	}
+</style>

src/pages/componentsC/avatar/avatar.nvue

@@ -0,0 +1,182 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础演示</text>
+			<view class="u-demo-block__content">
+				<up-avatar :src="src1"></up-avatar>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">头像形状</text>
+			<view class="u-demo-block__content">
+				<view class="u-avatar-item">
+					<up-avatar
+						:src="src2"
+						shape="circle"
+						@click="click"
+					></up-avatar>
+				</view>
+				<view class="u-avatar-item">
+					<up-avatar
+						:src="src3"
+						shape="square"
+					></up-avatar>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">头像尺寸</text>
+			<view class="u-demo-block__content">
+				<view class="u-avatar-item">
+					<up-avatar
+						:src="src4"
+						size="30"
+					></up-avatar>
+				</view>
+				<view class="u-avatar-item">
+					<up-avatar
+						:src="src5"
+						size="40"
+					></up-avatar>
+				</view>
+				<view class="u-avatar-item">
+					<up-avatar
+						:src="src6"
+						size="50"
+					></up-avatar>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">图标头像</text>
+			<view class="u-demo-block__content">
+				<view class="u-avatar-item">
+					<up-avatar
+						icon="red-packet-fill"
+						fontSize="22"
+					></up-avatar>
+				</view>
+				<view class="u-avatar-item">
+					<up-avatar
+						icon="star-fill"
+						fontSize="22"
+					></up-avatar>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">文字头像(自动背景色)</text>
+			<view class="u-demo-block__content">
+				<view class="u-avatar-item">
+					<up-avatar
+						text="U"
+						fontSize="20"
+						randomBgColor
+						:colorIndex="0"
+					></up-avatar>
+				</view>
+				<view class="u-avatar-item">
+					<up-avatar
+						text="邓"
+						fontSize="18"
+						randomBgColor
+					></up-avatar>
+				</view>
+				<view class="u-avatar-item">
+					<up-avatar
+						text="张"
+						fontSize="18"
+						randomBgColor
+					></up-avatar>
+				</view>
+				<view class="u-avatar-item">
+					<up-avatar
+						text="王"
+						fontSize="18"
+						randomBgColor
+					></up-avatar>
+				</view>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">图片加载失败(显示默认头像)</text>
+			<view class="u-demo-block__content">
+				<up-avatar :src="src7"></up-avatar>
+			</view>
+		</view>
+		<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">小程序开放能力</text>
+			<view class="u-demo-block__content">
+				<view class="u-avatar-item">
+					<up-avatar
+						mpAvatar
+						size="60"
+					></up-avatar>
+				</view>
+			</view>
+		</view>
+		<!-- #endif -->
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">头像组</text>
+			<view class="u-demo-block__content">
+				<up-avatar-group
+					:urls="urls"
+					size="35"
+					gap="0.4"
+				></up-avatar-group>
+			</view>
+			<view class="u-demo-block__content" style="margin-top: 20px">
+				<up-avatar-group
+					:urls="urls"
+					size="35"
+					gap="0.6"
+				></up-avatar-group>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				src1: './static/uview/album/1.jpg',
+				src2: './static/uview/album/2.jpg',
+				src3: './static/uview/album/3.jpg',
+				src4: './static/uview/album/4.jpg',
+				src5: './static/uview/album/5.jpg',
+				src6: './static/uview/album/6.jpg',
+				src7: './static/uview/album/noExist.jpg',
+				urls: [
+					'./static/uview/album/1.jpg',
+					'./static/uview/album/2.jpg',
+					'./static/uview/album/3.jpg',
+					'./static/uview/album/4.jpg',
+					'./static/uview/album/7.jpg',
+					'./static/uview/album/6.jpg',
+					'./static/uview/album/5.jpg'
+				]
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			click(name) {
+				console.log('click', name);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-demo-block__content {
+		@include flex;
+		align-items: center;
+	}
+
+	.u-avatar-item {
+		margin-right: 30px;
+	}
+</style>

src/pages/componentsC/calendar/calendar.nvue

@@ -0,0 +1,217 @@
+<template>
+	<view class="u-page">
+		<up-navbar
+			title="日历"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar>
+		<up-cell-group>
+			<up-cell
+				@click="showCalendar(index)"
+				:title="item.title"
+				v-for="(item, index) in list"
+				:key="index"
+				:label="values[index]"
+				isLink
+			>
+				<template #icon>
+					<image
+						class="u-cell-icon"
+						:src="item.iconUrl"
+						mode="widthFix"
+					></image>
+				</template>
+			</up-cell>
+		</up-cell-group>
+		<up-calendar
+			:show="show1"
+			defaultDate="2022-02-15"
+			@confirm="confirm"
+			@close="close"
+		></up-calendar>
+		<up-calendar
+			:show="show2"
+			mode="multiple"
+			:defaultDate="['2022-03-01']"
+			@confirm="confirm"
+			@close="close"
+		></up-calendar>
+		<up-calendar
+			:show="show3"
+			mode="range"
+			@confirm="confirm"
+			@close="close"
+		></up-calendar>
+		<up-calendar
+			:show="show4"
+			mode="range"
+			@confirm="confirm"
+			@close="close"
+			color="#f56c6c"
+			:defaultDate="customThemeDefaultDate"
+		></up-calendar>
+		<up-calendar
+			:show="show5"
+			mode="range"
+			@confirm="confirm"
+			@close="close"
+			:defaultDate="customTextDefaultDate"
+			startText="住店"
+			endText="离店"
+			confirmDisabledText="请选择离店日期"
+			:formatter="formatter"
+		></up-calendar>
+		<up-calendar
+			:show="show6"
+			@confirm="confirm"
+			@close="close"
+			:maxDate="maxDate"
+		></up-calendar>
+		<up-calendar
+			:show="show7"
+			@confirm="confirm"
+			@close="close"
+			showLunar
+		></up-calendar>
+		<up-calendar
+			:show="show8"
+			@confirm="confirm"
+			@close="close"
+			mode="multiple"
+			:defaultDate="defaultDateMultiple"
+		></up-calendar>
+		<up-calendar
+			:show="show9"
+			@confirm="confirm"
+			@close="close"
+			:minDate="minDate"
+			maxDate="2023-07-05"
+			defaultDate="2022-09-09"
+		></up-calendar>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			const d = new Date()
+			const year = d.getFullYear()
+			let month = d.getMonth() + 1
+			month = month < 10 ? `0${month}` : month
+			const date = d.getDate()
+			return {
+				index: 0,
+				show1: false,
+				show2: false,
+				show3: false,
+				show4: false,
+				show5: false,
+				show6: false,
+				show7: false,
+				show8: false,
+				show9: false,
+				values: ['','','','','','','',''],
+				customThemeDefaultDate: [`${year}-${month}-${date}`, `${year}-${month}-${date + 5}`], 
+				customTextDefaultDate: [`${year}-${month}-${date}`],
+				minDate: `2022-08-09`,
+				maxDate: `${year}-${month}-${date + 10}`,
+				defaultDateMultiple: [`${year}-${month}-${date}`, `${year}-${month}-${date + 1}`, `${year}-${month}-${date + 2}`],
+				list: [{
+						title: '单个日期',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/7.png'
+					},
+					{
+						title: '多个日期',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/8.png'
+					},
+					{
+						title: '日期范围',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/9.png'
+					},
+					{
+						title: '自定义主题颜色',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/15.png'
+					},{
+						title: '自定义文案',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/14.png'
+					},{
+						title: '日期最大范围',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/13.png'
+					},{
+						title: '显示农历',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/5.png'
+					},{
+						title: '默认日期',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png'
+					},{
+						title: '日期最小范围',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/calendar/10.png'
+					}
+				]
+			}
+		},
+		methods: {
+			showCalendar(index) {
+				this.index = index + 1
+				this[`show${index + 1}`] = true
+			},
+			navigateBack() {
+				uni.navigateBack();
+			},
+			confirm(e) {
+				this[`show${this.index}`] = false
+				console.log(e);
+				switch(this.index - 1) {
+					case 0:
+						this.values[this.index - 1] = e[0];
+						break;
+					case 1:
+						e.forEach((value, index) => {
+							index === 0 ? this.values[this.index - 1] = value : this.values[this.index - 1] += ';' + value
+						})
+						break;
+					case 2:
+						this.values[this.index - 1] = e[0] + '~' + e[e.length - 1];
+						break;
+					case 3:
+						this.values[this.index - 1] = e[0] + '~' + e[e.length - 1];
+						break;
+					case 4:
+						this.values[this.index - 1] = e[0] + '~' + e[e.length - 1];
+						break;
+					case 5:
+						this.values[this.index - 1] = e[0];
+						break;
+					case 6:
+						this.values[this.index - 1] = e[0];
+						break;
+					case 7:
+						e.forEach((value, index) => {
+							index === 0 ? this.values[this.index - 1] = value : this.values[this.index - 1] += ';' + value
+						})
+						break;
+				}
+			},
+			close() {
+				this[`show${this.index}`] = false
+			},
+			formatter(day) {
+				const d = new Date()
+				let month = d.getMonth() + 1
+				const date = d.getDate()
+				if(day.month == month && day.day == date + 3) {
+					day.bottomInfo = '有优惠'
+					day.dot = true
+				}
+				return day
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+</style>

src/pages/componentsC/codeInput/codeInput.nvue

@@ -0,0 +1,153 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础使用</text>
+			<view class="u-demo-block__content">
+				<up-code-input
+					v-model="value1"
+					:maxlength="4"
+					@change="change"
+					@finish="finish"
+				></up-code-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">横线模式</text>
+			<view class="u-demo-block__content">
+				<up-code-input
+					v-model="value2"
+					mode="line"
+					:maxlength="4"
+					:bold="true"
+				></up-code-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">设置长度</text>
+			<view class="u-demo-block__content">
+				<up-code-input
+					v-model="value3"
+					:maxlength="6"
+				></up-code-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">设置间距</text>
+			<view class="u-demo-block__content">
+				<up-code-input
+					v-model="value4"
+					mode="box"
+					:space="0"
+					:maxlength="4"
+				></up-code-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">细边框</text>
+			<view class="u-demo-block__content">
+				<up-code-input
+					v-model="value5"
+					mode="box"
+					:space="0"
+					:maxlength="4"
+					hairline
+				></up-code-input>
+			</view>
+			<view
+				class="u-demo-block__content"
+				style="margin-top: 10px;"
+			>
+				<up-code-input
+					v-model="value6"
+					mode="line"
+					:space="10"
+					:maxlength="4"
+					hairline
+				></up-code-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">调整颜色</text>
+			<view class="u-demo-block__content">
+				<up-code-input
+					v-model="value7"
+					mode="box"
+					:space="0"
+					:maxlength="4"
+					hairline
+					color="#f56c6c"
+					borderColor="#f56c6c"
+				></up-code-input>
+				<view class="u-demo-block__content" style="margin-top: 10px;">
+					<up-code-input
+						v-model="value10"
+						mode="line"
+						size="30"
+						:maxlength="4"
+						hairline
+						color="#3c9cff"
+						borderColor="#3c9cff"
+					></up-code-input>
+				</view>
+
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">点模式</text>
+			<view class="u-demo-block__content">
+				<up-code-input
+					v-model="value8"
+					mode="box"
+					dot
+					:space="0"
+					:maxlength="4"
+					hairline
+				></up-code-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">预置内容</text>
+			<view class="u-demo-block__content">
+				<up-code-input
+					v-model="value9"
+					mode="box"
+					:space="0"
+					:maxlength="4"
+					hairline
+					fontSize="17"
+				></up-code-input>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value1: '',
+				value2: '',
+				value3: '',
+				value4: '',
+				value5: '',
+				value6: '',
+				value7: '',
+				value8: '',
+				value9: '123',
+				value10: '34'
+			}
+		},
+		methods: {
+			change(e) {
+				console.log('change', e);
+			},
+			finish(e) {
+				console.log('finish', e);
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/componentsC/datetimePicker/datetimePicker.nvue

@@ -0,0 +1,248 @@
+<template>
+	<view class="u-page">
+		<up-navbar
+			title="datetimePicker 时间日期选择器"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar>
+		<view class="u-demo-block__content" style="padding: 0 15px;">
+			<up-form
+				class="u-demo-block__content"
+				labelPosition="left"
+				ref="form1"
+			>
+				<up-form-item
+					label="姓名"
+					prop="userInfo.name"
+					borderBottom
+					ref="item1"
+				>
+					<up-input
+					></up-input>
+				</up-form-item>
+				<up-form-item borderBottom label="日期">
+					<up-datetime-picker
+						hasInput
+						placeholder="请选择日期"
+						mode="datetime"
+						:modelValue="1714266792000"
+						>
+					</up-datetime-picker>
+				</up-form-item>
+			</up-form>
+		</view>
+		<up-cell-group>
+			<up-cell
+				@click="showDatetimePicker(index)"
+				:title="item.title"
+				v-for="(item, index) in list"
+				:key="index"
+				isLink
+			>
+				<template #icon>
+					<image
+						class="u-cell-icon"
+						:src="item.iconUrl"
+						mode="widthFix"
+					></image>
+				</template>
+			</up-cell>
+		</up-cell-group>
+		<up-datetime-picker
+			:show="show1"
+			v-model="value1"
+			mode="datetime"
+			closeOnClickOverlay
+			@confirm="confirm"
+			@cancel="cancel"
+			@change="change"
+			@close="close"
+		>
+			<template #toolbar-right>
+				右侧
+			</template>
+		</up-datetime-picker>
+		<up-datetime-picker
+			:show="show2"
+			v-model="value2"
+			mode="date"
+			closeOnClickOverlay
+			@confirm="confirm"
+			@cancel="cancel"
+			@change="change"
+			@close="close"
+		></up-datetime-picker>
+		<up-datetime-picker
+			:show="show3"
+			v-model="value3"
+			mode="year-month"
+			closeOnClickOverlay
+			@confirm="confirm"
+			@cancel="cancel"
+			@change="change"
+			@close="close"
+		></up-datetime-picker>
+		<up-datetime-picker
+			:show="show4"
+			v-model="value4"
+			mode="time"
+			closeOnClickOverlay
+			@confirm="confirm"
+			@cancel="cancel"
+			@change="change"
+			@close="close"
+		></up-datetime-picker>
+		<up-datetime-picker
+			:show="show5"
+			v-model="value5"
+			:filter="filter"
+			mode="date"
+			closeOnClickOverlay
+			@confirm="confirm"
+			@cancel="cancel"
+			@change="change"
+			@close="close"
+		></up-datetime-picker>
+		<up-datetime-picker
+			:show="show6"
+			v-model="value6"
+			mode="date"
+			:formatter="formatter"
+			closeOnClickOverlay
+			@confirm="confirm"
+			@cancel="cancel"
+			@change="change"
+			@close="close"
+		></up-datetime-picker>
+		<up-datetime-picker
+			:show="show7"
+			v-model="value7"
+			mode="datetime"
+			:minDate="875635200"
+			:maxDate="1786778555000"
+			closeOnClickOverlay
+			@confirm="confirm"
+			@cancel="cancel"
+			@change="change"
+			@close="close"
+		></up-datetime-picker>
+	</view>
+</template>
+<script>
+	export default {
+		data() {
+			const d = new Date()
+			const year = d.getFullYear()
+			let month = uni.$u.padZero(d.getMonth() + 1)
+			const date = d.getDate()
+			return {
+				current: 0,
+				value1: Number(new Date()),
+				value2: Number(new Date()),
+				value3: Number(new Date()),
+				value4: '05:28',
+				value5: Number(new Date()),
+				value6: Number(new Date()),
+				value7: Number(new Date()),
+				show1: false,
+				show2: false,
+				show3: false,
+				show4: false,
+				show5: false,
+				show6: false,
+				show7: false,
+				list: [{
+						title: '完整日期时间',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/6.png'
+					},
+					{
+						title: '年月日',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/4.png'
+					},
+					{
+						title: '年月',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/3.png'
+					},
+					{
+						title: '时间',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/5.png'
+					}, {
+						title: '过滤器(保留偶数年)',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/2.png'
+					}, {
+						title: '格式化',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/1.png'
+					}, {
+						title: '限制最大最小值',
+						iconUrl: 'https://cdn.uviewui.com/uview/demo/datetime-picker/7.png'
+					}
+				]
+			}
+		},
+		methods: {
+			close() {
+				this[`show${this.current}`] = false
+			},
+			cancel() {
+				this[`show${this.current}`] = false
+			},
+			confirm(e) {
+				this[`show${this.current}`] = false
+				this.result(e.value, e.mode)
+			},
+			change(e) {
+				// console.log('change', e)
+			},
+			navigateBack() {
+				uni.navigateBack()
+			},
+			filter(mode, options) {
+				if (mode === 'year') {
+					return options.filter((option) => option % 2 === 0);
+				}
+
+				return options;
+			},
+			showDatetimePicker(index) {
+				this.current = index + 1
+				this[`show${index + 1}`] = true
+			},
+			result(time, mode) {
+				const timeFormat = uni.$u.timeFormat,
+					toast = uni.$u.toast
+				switch (mode) {
+					case 'datetime':
+						return toast(timeFormat(time, 'yyyy-mm-dd hh:MM'))
+					case 'date':
+						return toast(timeFormat(time, 'yyyy-mm-dd'))
+					case 'year-month':
+						return toast(timeFormat(time, 'yyyy-mm'))
+					case 'time':
+						return toast(time)
+					default:
+						return ''
+				}
+			},
+			formatter(type, value) {
+				if (type === 'year') {
+					return `${value}年`
+				}
+				if (type === 'month') {
+					return `${value}月`
+				}
+				if (type === 'day') {
+					return `${value}日`
+				}
+				return value
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	.u-page {
+		padding: 0;
+	}
+</style>

src/pages/componentsC/form/form.nvue

@@ -0,0 +1,484 @@
+<template>
+	<view class="u-page">
+		<up-navbar
+			title="表单"
+			@leftClick="navigateBack"
+			safeAreaInsetTop
+			fixed
+			placeholder
+		></up-navbar>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础使用</text>
+			<view class="u-demo-block__content">
+				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
+				<up-form
+					labelPosition="left"
+					:model="model1"
+					ref="form1"
+				>
+					<up-form-item
+						label="姓名"
+						prop="userInfo.name"
+						borderBottom
+						ref="item1"
+					>
+						<up-input
+							v-model="model1.userInfo.name"
+							border="none"
+							placeholder="姓名,只能为中文"
+						></up-input>
+					</up-form-item>
+					<up-form-item
+						label="性别"
+						prop="userInfo.sex"
+						borderBottom
+						@click="showSex = true; hideKeyboard()"
+						ref="item1"
+					>
+						<view @click.self="showSex = true; hideKeyboard()">
+							<up-input
+								v-model="model1.userInfo.sex"
+								disabled
+								disabledColor="#ffffff"
+								placeholder="请选择性别"
+								border="none"
+							></up-input>
+						</view>
+						<template #right>
+							<up-icon
+								name="arrow-right"
+							></up-icon>
+						</template>
+					</up-form-item>
+					<up-form-item
+						label="年龄"
+						prop="userInfo.age"
+						borderBottom
+						ref="item1"
+						:rules="[{
+							type: 'string',
+							required: true,
+							message: '请填写年龄',
+							trigger: ['blur', 'change']
+						}]"
+					>
+						<up-input
+							placeholder="请输入内容"
+							border="surround"
+							type="number"
+							v-model="model1.userInfo.age"
+							clearable
+						></up-input>
+					</up-form-item>
+					<up-form-item
+						label="水果"
+						prop="radiovalue1"
+						borderBottom
+						ref="item2"
+					>
+						<up-radio-group v-model="model1.radiovalue1">
+							<up-radio
+								:customStyle="{marginRight: '16px'}"
+								v-for="(item, index) in radiolist1"
+								:key="index"
+								:label="item.name"
+								:name="item.name"
+							>
+							</up-radio>
+						</up-radio-group>
+					</up-form-item>
+					<up-form-item
+						label="兴趣爱好"
+						prop="checkboxValue1"
+						borderBottom
+						labelWidth="80"
+						ref="item3"
+					>
+						<up-checkbox-group
+							v-model="model1.checkboxValue1"
+							shape="square"
+							@change="change"
+						>
+							<up-checkbox
+								:customStyle="{marginRight: '16px'}"
+								v-for="(item, index) in checkboxList1"
+								:key="index"
+								:label="item.name"
+								:name="item.name"
+							>
+							</up-checkbox>
+						</up-checkbox-group>
+					</up-form-item>
+					<up-form-item
+						label="简介"
+						prop="intro"
+						borderBottom
+						ref="item3"
+					>
+						<up-textarea
+							placeholder="不低于3个字"
+							v-model="model1.intro"
+							count
+						></up-textarea>
+					</up-form-item>
+					<up-form-item
+						label="住店时间"
+						prop="hotel"
+						labelWidth="80"
+						borderBottom
+						@click="showCalendar = true; hideKeyboard()"
+					>
+						<up-input
+							v-model="model1.hotel"
+							disabled
+							disabledColor="#ffffff"
+							placeholder="请选择住店和离店时间"
+							border="none"
+						></up-input>
+						<template #right>
+							<up-icon
+								name="arrow-right"
+							></up-icon>
+						</template>
+					</up-form-item>
+					<up-form-item
+						label="验证码"
+						prop="code"
+						labelWidth="80"
+						borderBottom
+					>
+						<up-input
+							v-model="model1.code"
+							border="none"
+							placeholder="请填写验证码"
+						></up-input>
+						<up-button
+							#right
+							@tap="getCode"
+							:text="tips"
+							type="success"
+							size="mini"
+							style="flex: 0.5;"
+							:disabled="disabled1"
+						></up-button>
+					</up-form-item>
+					<up-form-item
+						label="生日"
+						prop="userInfo.birthday"
+						borderBottom
+						@click="showBirthday = true; hideKeyboard()"
+						ref="item1"
+					>
+						<up-input
+							v-model="model1.userInfo.birthday"
+							disabled
+							disabledColor="#ffffff"
+							placeholder="请选择生日"
+							border="none"
+						></up-input>
+						<template #right>
+							<up-icon
+								name="arrow-right"
+							></up-icon>
+						</template>
+					</up-form-item>
+				</up-form>
+				<up-button
+					type="primary"
+					text="提交"
+					customStyle="margin-top: 50px"
+					@click="submit"
+				></up-button>
+				<up-button
+					type="error"
+					text="重置"
+					customStyle="margin-top: 10px"
+					@click="reset"
+				></up-button>
+				<up-action-sheet
+					:show="showSex"
+					:actions="actions"
+					title="请选择性别"
+					description="如果选择保密会报错"
+					@close="showSex = false"
+					@select="sexSelect"
+				>
+				</up-action-sheet>
+				<up-calendar
+					:show="showCalendar"
+					mode="range"
+					@confirm="calendarConfirm"
+					@close="calendarClose"
+					startText="住店"
+					endText="离店"
+					confirmDisabledText="请选择离店日期"
+					:formatter="formatter"
+				></up-calendar>
+				<up-code
+					ref="uCode"
+					@change="codeChange"
+					seconds="20"
+					@start="disabled1 = true"
+					@end="disabled1 = false"
+				></up-code>
+				<up-datetime-picker
+					:show="showBirthday"
+					:value="birthday"
+					mode="date"
+					closeOnClickOverlay
+					@confirm="birthdayConfirm"
+					@cancel="birthdayClose"
+					@close="birthdayClose"
+				></up-datetime-picker>
+			</view>
+		</view>
+	</view>
+</template>
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import type { UniFormRef } from '@/uni_modules/uview-plus/types'
+	const form1 = ref<UniFormRef|null>(null)
+</script>
+<script lang="ts">
+	export default {
+		data() {
+			return {
+				fileList1: [],
+				disabled1: false,
+				tips: '',
+				value: '',
+				showCalendar: false,
+				showBirthday: false,
+				model1: {
+					userInfo: {
+						name: '楼兰',
+						sex: '',
+						age: 0,
+						birthday: ''
+					},
+					radiovalue1: '苹果',
+					checkboxValue1: [],
+					intro: '',
+					code: ''
+				},
+				showSex: false,
+				birthday: Number(new Date()),
+				actions: [{
+						name: '男',
+					},
+					{
+						name: '女',
+					},
+					{
+						name: '保密',
+					},
+				],
+				rules: {
+					'userInfo.name': [{
+						type: 'string',
+						required: true,
+						message: '请填写姓名',
+						trigger: ['blur', 'change']
+					},
+					{
+						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
+						validator: (rule, value, callback) => {
+							// 调用uview-plus自带的js验证规则，详见：https://uview-plus.jiangruyi.com/js/test.html
+							return uni.$u.test.chinese(value);
+						},
+						message: "姓名必须为中文",
+						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
+						trigger: ["change", "blur"],
+					},
+					{
+						asyncValidator: (rule, value, callback) => {
+							setTimeout(() => {
+								callback('异步规则');
+							}, 1000)
+						},
+						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
+						trigger: ["change", "blur"],
+					 } ,
+					],
+					code: {
+						type: 'string',
+						required: true,
+						len: 4,
+						message: '请填写4位验证码',
+						trigger: ['blur']
+					},
+					'userInfo.sex': {
+						type: 'string',
+						max: 1,
+						required: true,
+						message: '请选择男或女',
+						trigger: ['blur', 'change']
+					},
+					radiovalue1: {
+						type: 'string',
+						min: 1,
+						max: 2,
+						message: '橙子有毒',
+						trigger: ['change']
+					},
+					checkboxValue1: {
+						type: 'array',
+						min: 2,
+						required: true,
+						message: '不能太宅，至少选两项',
+						trigger: ['change']
+					},
+					intro: {
+						type: 'string',
+						min: 3,
+						required: true,
+						message: '不低于3个字',
+						trigger: ['change']
+					},
+					hotel: {
+						type: 'string',
+						min: 2,
+						required: true,
+						message: '请选择住店时间',
+						trigger: ['change']
+					},
+					'userInfo.birthday': {
+						type: 'string',
+						required: true,
+						message: '请选择生日',
+						trigger: ['change']
+					},
+				},
+				radiolist1: [{
+						name: '苹果',
+						disabled: false
+					},
+					{
+						name: '香蕉',
+						disabled: false
+					},
+					{
+						name: '毒橙子',
+						disabled: false
+					}
+				],
+				checkboxList1: [{
+						name: '羽毛球',
+						disabled: false
+					},
+					{
+						name: '跑步',
+						disabled: false
+					},
+					{
+						name: '爬山',
+						disabled: false
+					}
+				]
+			}
+		},
+		onReady() {
+			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
+			this.$refs.form1.setRules(this.rules)
+		},
+		methods: {
+			afterRead(event) {
+				this.fileList1.push({
+					url: event.file,
+					status: 'uploading',
+					message: '上传中'
+				})
+			},
+			groupChange(n) {
+				// console.log('groupChange', n);
+			},
+			radioChange(n) {
+				// console.log('radioChange', n);
+			},
+			navigateBack() {
+				uni.navigateBack()
+			},
+			sexSelect(e) {
+				this.model1.userInfo.sex = e.name
+				this.$refs.form1.validateField('userInfo.sex')
+			},
+			change(e) {
+				// console.log(e);
+			},
+			formatter(day) {
+				const d = new Date()
+				let month = d.getMonth() + 1
+				const date = d.getDate()
+				if (day.month == month && day.day == date + 3) {
+					day.bottomInfo = '有优惠'
+					day.dot = true
+				}
+				return day
+			},
+			calendarConfirm(e) {
+				this.showCalendar = false
+				this.model1.hotel = `${e[0]} / ${e[e.length - 1]}`
+				this.$refs.form1.validateField('hotel')
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 2000);
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+			calendarClose() {
+				this.showCalendar = false
+				this.$refs.form1.validateField('hotel')
+			},
+			birthdayClose() {
+				this.showBirthday = false
+				this.$refs.form1.validateField('userInfo.birthday')
+			},
+			birthdayConfirm(e) {
+				this.showBirthday = false
+				this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
+				this.$refs.form1.validateField('userInfo.birthday')
+			},
+			submit() {
+				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
+				this.$refs.form1.validate().then(res => {
+					uni.$u.toast('校验通过')
+				}).catch(errors => {
+					console.log(errors)
+					uni.$u.toast('校验失败')
+				})
+			},
+			reset() {
+				const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
+				'hotel', 'code', 'userInfo.birthday']
+				this.$refs.form1.resetFields()
+				this.$refs.form1.clearValidate()
+				setTimeout(()=>{
+					this.$refs.form1.clearValidate(validateList)
+					// 或者使用 this.$refs.form1.clearValidate()
+				},10)
+			},
+			hideKeyboard() {
+				uni.hideKeyboard()
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+
+</style>

src/pages/componentsC/indexList/indexList.nvue

@@ -0,0 +1,137 @@
+<template>
+	<up-index-list :indexList="indexList">
+		<template #header>
+			<view class="list">
+				<view class="list__item" @click="goNext">
+					<up-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></up-avatar>
+					<text class="list__item__user-name">新的朋友</text>
+				</view>
+				<up-line></up-line>
+				<view class="list__item">
+					<up-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></up-avatar>
+					<text class="list__item__user-name">标签</text>
+				</view>
+				<up-line></up-line>
+				<view class="list__item">
+					<up-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></up-avatar>
+					<text class="list__item__user-name">朋友圈</text>
+				</view>
+				<up-line></up-line>
+				<view class="list__item">
+					<up-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></up-avatar>
+					<text class="list__item__user-name">QQ</text>
+				</view>
+				<up-line></up-line>
+			</view>
+		</template>
+		<template :key="index" v-for="(item, index) in itemArr">
+			<!-- #ifdef APP-NVUE -->
+			<up-index-anchor :text="indexList[index]"></up-index-anchor>
+			<!-- #endif -->
+			<up-index-item>
+				<!-- #ifndef APP-NVUE -->
+				<up-index-anchor :text="indexList[index]"></up-index-anchor>
+				<!-- #endif -->
+				<view class="list" v-for="(item1, index1) in item" :key="index1">
+					<view class="list__item">
+						<image class="list__item__avatar" :src="item1.url"></image>
+						<text class="list__item__user-name">{{item1.name}}</text>
+					</view>
+					<up-line></up-line>
+				</view>
+			</up-index-item>
+		</template>
+		<template #footer>
+			<view class="u-safe-area-inset--bottom">
+				<text class="list__footer">共305位好友</text>
+			</view>
+		</template>
+	</up-index-list>
+</template>
+
+<script>
+	const indexList = () => {
+		const indexList = []
+		const charCodeOfA = 'A'.charCodeAt(0)
+		indexList.push("↑")
+		indexList.push("☆")
+		for (let i = 0; i < 16; i++) {
+			indexList.push(String.fromCharCode(charCodeOfA + i))
+		}
+		indexList.push('#')
+		return indexList
+	}
+	export default {
+		data() {
+			return {
+				indexList: indexList(),
+				urls: [
+					'./static/uview/album/1.jpg',
+					'./static/uview/album/2.jpg',
+					'./static/uview/album/3.jpg',
+					'./static/uview/album/4.jpg',
+					'./static/uview/album/5.jpg',
+					'./static/uview/album/6.jpg',
+					'./static/uview/album/7.jpg',
+					'./static/uview/album/8.jpg',
+					'./static/uview/album/9.jpg',
+					'./static/uview/album/10.jpg',
+				],
+				names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
+					"曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
+				]
+			}
+		},
+		computed: {
+			itemArr() {
+				return this.indexList.map(item => {
+					const arr = []
+					for (let i = 0; i < 10; i++) {
+						arr.push({
+							name: this.names[uni.$u.random(0, this.names.length - 1)],
+							url: this.urls[uni.$u.random(0, this.urls.length - 1)]
+						})
+					}
+					return arr
+				})
+			}
+		},
+		methods: {
+			goNext() {
+				uni.navigateTo({
+					url: 'indexList2'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.list {
+		
+		&__item {
+			@include flex;
+			padding: 6px 12px;
+			align-items: center;
+			
+			&__avatar {
+				height: 35px;
+				width: 35px;
+				border-radius: 3px;
+			}
+			
+			&__user-name {
+				font-size: 16px;
+				margin-left: 10px;
+				color: $u-main-color;
+			}
+		}
+		
+		&__footer {
+			color: $u-tips-color;
+			font-size: 14px;
+			text-align: center;
+			margin: 15px 0;
+		}
+	}
+</style>

src/pages/componentsC/indexList/indexList2.nvue

@@ -0,0 +1,139 @@
+<template>
+	<up-button type="primary" size="small" style="width: 120px;"
+		@click="show = true">打开弹窗</up-button>
+	<!-- 因为up-popup默认带有安全底部需要取消。 -->
+	<up-popup v-model:show="show" :safeAreaInsetBottom="false">
+		<view v-if="show">
+			<up-index-list style="height: 600px;"
+				:indexList="indexList">
+				<template #header>
+					<view class="list">
+						<view class="list__item">
+							<up-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></up-avatar>
+							<text class="list__item__user-name">新的朋友</text>
+						</view>
+						<up-line></up-line>
+						<view class="list__item">
+							<up-avatar shape="square" size="35" icon="tags-fill" fontSize="26" randomBgColor></up-avatar>
+							<text class="list__item__user-name">标签</text>
+						</view>
+						<up-line></up-line>
+						<view class="list__item">
+							<up-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></up-avatar>
+							<text class="list__item__user-name">朋友圈</text>
+						</view>
+						<up-line></up-line>
+						<view class="list__item">
+							<up-avatar shape="square" size="35" icon="qq-fill" fontSize="26" randomBgColor></up-avatar>
+							<text class="list__item__user-name">QQ</text>
+						</view>
+						<up-line></up-line>
+					</view>
+				</template>
+				<template :key="index" v-for="(item, index) in itemArr">
+					<!-- #ifdef APP-NVUE -->
+					<up-index-anchor :text="indexList[index]"></up-index-anchor>
+					<!-- #endif -->
+					<up-index-item>
+						<!-- #ifndef APP-NVUE -->
+						<up-index-anchor :text="indexList[index]"></up-index-anchor>
+						<!-- #endif -->
+						<view class="list" v-for="(item1, index1) in item" :key="index1">
+							<view class="list__item">
+								<image class="list__item__avatar" :src="item1.url"></image>
+								<text class="list__item__user-name">{{item1.name}}</text>
+							</view>
+							<up-line></up-line>
+						</view>
+					</up-index-item>
+				</template>
+				<template #footer>
+					<view class="u-safe-area-inset--bottom">
+						<text class="list__footer">共305位好友</text>
+					</view>
+				</template>
+			</up-index-list>
+		</view>
+	</up-popup>
+</template>
+
+<script>
+	const indexList = () => {
+		const indexList = []
+		const charCodeOfA = 'A'.charCodeAt(0)
+		indexList.push("↑")
+		indexList.push("☆")
+		for (let i = 0; i < 10; i++) {
+			indexList.push(String.fromCharCode(charCodeOfA + i))
+		}
+		indexList.push('#')
+		return indexList
+	}
+	export default {
+		data() {
+			return {
+				show: false,
+				indexList: indexList(),
+				urls: [
+					'./static/uview/album/1.jpg',
+					'./static/uview/album/2.jpg',
+					'./static/uview/album/3.jpg',
+					'./static/uview/album/4.jpg',
+					'./static/uview/album/5.jpg',
+					'./static/uview/album/6.jpg',
+					'./static/uview/album/7.jpg',
+					'./static/uview/album/8.jpg',
+					'./static/uview/album/9.jpg',
+					'./static/uview/album/10.jpg',
+				],
+				names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
+					"曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
+				]
+			}
+		},
+		computed: {
+			itemArr() {
+				return this.indexList.map(item => {
+					const arr = []
+					for (let i = 0; i < 10; i++) {
+						arr.push({
+							name: this.names[uni.$u.random(0, this.names.length - 1)],
+							url: this.urls[uni.$u.random(0, this.urls.length - 1)]
+						})
+					}
+					return arr
+				})
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.list {
+		
+		&__item {
+			@include flex;
+			padding: 6px 12px;
+			align-items: center;
+			
+			&__avatar {
+				height: 35px;
+				width: 35px;
+				border-radius: 3px;
+			}
+			
+			&__user-name {
+				font-size: 16px;
+				margin-left: 10px;
+				color: $u-main-color;
+			}
+		}
+		
+		&__footer {
+			color: $u-tips-color;
+			font-size: 14px;
+			text-align: center;
+			margin: 15px 0;
+		}
+	}
+</style>

src/pages/componentsC/input/input.nvue

@@ -0,0 +1,221 @@
+<template>
+	<view class="u-page">
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">基础使用</text>
+			<view class="u-demo-block__content">
+				<up-input
+					placeholder="请输入内容"
+					border="surround"
+					v-model="value"
+					@change="change"
+					confirmType="search"
+					@confirm="handleSearch"
+				></up-input>
+				<up-button @click="value = Math.random().toString()"
+					style="margin-top: 10px;">变化</up-button>
+				{{value}}
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">可清空内容</text>
+			<view class="u-demo-block__content">
+				<up-input
+					placeholder="请输入内容"
+					border="surround"
+					clearable
+				></up-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">数字键盘</text>
+			<view class="u-demo-block__content">
+				<up-input
+					placeholder="请输入内容"
+					border="surround"
+					type="number"
+					v-model="inputNumber"
+					clearable
+				></up-input>
+				{{ inputNumber }}
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">密码类型</text>
+			<view class="u-demo-block__content">
+				<up-input
+					placeholder="请输入内容"
+					border="surround"
+					password
+					clearable
+					v-model="inputPassword"
+				></up-input>
+				{{inputPassword}}
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">显示下划线</text>
+			<view class="u-demo-block__content">
+				<up-input
+					placeholder="请输入内容"
+					border="bottom"
+					clearable
+				></up-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">禁用状态</text>
+			<view class="u-demo-block__content">
+				<up-input
+					placeholder="禁用状态"
+					border="surround"
+					disabled
+				></up-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">圆形</text>
+			<view class="u-demo-block__content">
+				<up-input
+					placeholder="请输入内容"
+					border="surround"
+					shape="circle"
+				></up-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">前后图标</text>
+			<view class="u-demo-block__content">
+				<up-input
+					placeholder="前置图标"
+					prefixIcon="search"
+					prefixIconStyle="font-size: 22px;color: #909399"
+				></up-input>
+			</view>
+			<view
+				class="u-demo-block__content"
+				style="margin-top: 15px;"
+			>
+				<up-input
+					placeholder="后置图标"
+					suffixIcon="map-fill"
+					suffixIconStyle="color: #909399"
+				></up-input>
+			</view>
+		</view>
+		<view class="u-demo-block">
+			<text class="u-demo-block__title">前后插槽</text>
+			<view class="u-demo-block__content">
+				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
+				<!-- #ifndef APP-NVUE -->
+				<up-input placeholder="前置插槽">
+					<!-- #endif -->
+					<!-- #ifdef APP-NVUE -->
+					<up-input placeholder="前置插槽">
+						<!-- #endif -->
+						<template #prefix>
+							<up-text
+								text="http://"
+								margin="0 3px 0 0"
+								type="tips"
+							></up-text>
+						</template>
+						<!-- #ifndef APP-NVUE -->
+				</up-input>
+				<!-- #endif -->
+				<!-- #ifdef APP-NVUE -->
+				</up-input>
+				<!-- #endif -->
+			</view>
+			<view
+				class="u-demo-block__content"
+				style="margin-top: 15px;"
+			>
+				<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
+				<!-- #ifndef APP-NVUE -->
+				<up-input placeholder="后置插槽">
+					<!-- #endif -->
+					<!-- #ifdef APP-NVUE -->
+					<up-input placeholder="后置插槽">
+						<!-- #endif -->
+						<template #suffix>
+							<up-code
+								ref="uCode"
+								@change="codeChange"
+								seconds="20"
+								changeText="X秒重新获取哈哈哈"
+							></up-code>
+							<up-button
+								@tap="getCode"
+								:text="tips"
+								type="success"
+								size="mini"
+							></up-button>
+						</template>
+						<!-- #ifndef APP-NVUE -->
+				</up-input>
+				<!-- #endif -->
+				<!-- #ifdef APP-NVUE -->
+				</up-input>
+				<!-- #endif -->
+			</view>
+		</view>
+		<up-gap
+			bgColor="#fff"
+			height="50"
+		></up-gap>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tips: '',
+				value: '',
+				inputNumber: '',
+				inputPassword: '123456'
+			}
+		},
+		watch: {
+			value(newValue, oldValue) {
+				// console.log('v-model', newValue);
+			},
+			inputNumber(newValue) {
+				// console.log('v-model', newValue);
+			}
+		},
+		methods: {
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 2000);
+				} else {
+					uni.$u.toast('倒计时结束后再发送');
+				}
+			},
+			change(e) {
+				console.log('change', e);
+			},
+			handleSearch(e) {
+				uni.$u.toast('@confirm触发');
+				console.log('change', e);
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>