commit 8cdba749829d959db7471dd238ce0d34e55f9d42 Author: yuantao Date: Tue Sep 23 12:37:15 2025 +0800 Initial commit diff --git a/.env b/.env new file mode 100644 index 0000000..2969d73 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +VITE_BASE_URL='' #接口地址 +VITE_ASSETSURL='https://cdn.vrupup.com/s/1598/assets/' #资源地址 \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e34df52 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +unpackage +/dist +node_modules \ No newline at end of file diff --git a/.nvmdrc b/.nvmdrc new file mode 100644 index 0000000..54954dc --- /dev/null +++ b/.nvmdrc @@ -0,0 +1 @@ +20.0.0 \ No newline at end of file diff --git a/App.vue b/App.vue new file mode 100644 index 0000000..1744608 --- /dev/null +++ b/App.vue @@ -0,0 +1,16 @@ + + diff --git a/IFLOW.md b/IFLOW.md new file mode 100644 index 0000000..5fd4d1d --- /dev/null +++ b/IFLOW.md @@ -0,0 +1,87 @@ +# 项目概述 + +这是一个基于 UniApp + Vue3 + uView-Plus 的微信小程序项目模板。它提供了一个基础的项目结构和一些常用的工具函数，方便快速开发微信小程序。 + +## 技术栈 + +* **UniApp**: 跨平台开发框架，用于构建微信小程序。 +* **Vue3**: 渐进式 JavaScript 框架，用于构建用户界面。 +* **uView-Plus**: 基于 UniApp 的 UI 组件库。 +* **z-paging**: 一个用于处理分页加载的组件库。 + +## 目录结构 + +``` +. +├── api/ # 接口相关 +│ └── request.js # 请求封装 +├── common/ # 公共资源 +│ ├── styles/ # 全局样式 +│ └── utils/ # 工具函数 +├── components/ # 公共组件 +│ └── z-paging/ # z-paging 组件库 +├── lib/ # 第三方库 +│ └── luch-request/ # luch-request 网络请求库 +├── uview-plus/ # uView-Plus 组件库 +├── mixins/ # Vue 混入 +├── pages/ # 主包页面 +├── subPages/ # 分包页面 +├── App.vue # 应用入口 +├── main.js # 主入口文件 +├── pages.json # 页面配置 +├── manifest.json # 应用配置 +└── uni.scss # 全局样式变量 +``` + +# 开发环境与运行 + +## 环境要求 + +* Node.js (版本信息在 `.nvmdrc` 文件中指定) +* npm 或 yarn + +## 安装依赖 + +```bash +npm install +``` + +## 运行项目 + +由于这是一个 UniApp 项目，通常需要使用 HBuilderX 或其他支持 UniApp 的 IDE 来运行和调试。具体的运行命令取决于你的开发环境。 + +## 构建项目 + +同样，构建项目也需要使用 HBuilderX 或相应的 CLI 工具。 + +# 代码规范与开发约定 + +## 样式 + +* 全局样式文件位于 `common/styles/` 目录下，包括 `common.css` 和 `normal.scss`。 +* 样式规范应遵循项目中已有的风格。 + +## 工具函数 (tool.js) + +`common/utils/tool.js` 文件提供了一系列常用的工具函数： + +* **提示与加载**: `alert`, `loading`, `hideLoading` +* **页面跳转**: `navigateTo`, `redirectTo`, `reLaunch`, `switchTab`, `navigateBack` +* **本地存储**: `storage`, `removeStorage`, `getStorageInfo` +* **其他功能**: `copy` (复制文本), `saveImageToPhotos` (保存图片), `requestPayment` (微信支付), `upload` (文件上传) + +## 网络请求 + +* 网络请求使用 `lib/luch-request` 库进行封装。 +* 全局配置在 `api/request.js` 中定义，包括基础URL、请求头、SSL验证等。 +* 包含请求和响应拦截器，用于处理通用逻辑（如错误提示、鉴权等）。 + +## 组件 + +* 项目集成了 `uView-Plus` 和 `z-paging` 两个组件库。 +* 自定义组件应放在 `components/` 目录下。 + +## 页面 + +* 页面配置在 `pages.json` 中管理。 +* 主包页面放在 `pages/` 目录下，分包页面放在 `subPages/` 目录下。 \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..03deccc --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ +# Ŀģʹ˵ + +ģǻ UniApp + Vue3 + uView-Plus СĿģ壬һЩõá͹ߺ + +## Ŀ¼ṹ + + ``` +api/ # ӿ + modules/ # ģ黯 API + request.js # +common/ # Դ + styles/ # ȫʽ + utils/ # ߺ +components/ # +uview-plus/ # uView-Plus +lib/ # +mixins/ # Vue +pages/ # ҳ +subPages/ # ְҳ +wxcomponents/ # ΢ԭ +App.vue # Ӧ +main.js # ļ +pages.json # ҳ +manifest.json # Ӧ +uni.scss # ȫʽ +``` + +## ʹ÷ + +1. ģĿ¼ƵĿĿ¼ +2. Ҫ޸ package.json еĿƺ +3. ʹ npm install װ +4. Ҫ޸ pages.json еҳ +5. ʼ¹ + +## Ҫ + +### Ҫ +- **dotenv** - ע + +### ʽ + +- common.css: ȫֻʽ +- normal.scss: õ SCSS + +### ߺ (tool.js) + +- alert: ʾ +- loading/hideLoading: ʾ/ؼʾ +- ҳתط: navigateTo, redirectTo, reLaunch, switchTab, navigateBack +- ػ: storage, removeStorage, getStorageInfo +- copy: ı +- saveImageToPhotos: ͼƬ +- requestPayment: ΢֧ +- upload: ļϴ + +### + +- App.vue: ȫʽͻ +- main.js: Vue Ӧóʼȫֲ +- pages.json: ҳ·ɺʹ +- uni.scss: ȫʽ + +## ע + +1. ʵĿ +2. Ŀ޸Ļչߺ +3. ɸҪ޸Ļ滻 +4. ʽļɸĿƹ淶е diff --git a/api/request.js b/api/request.js new file mode 100644 index 0000000..3174fdc --- /dev/null +++ b/api/request.js @@ -0,0 +1,41 @@ +import Request from '@/lib/luch-request/index.js' +import tool from '@/common/utils/tool.js' + +const baseUrl = import.meta.env.VITE_BASE_URL +const http = new Request() + +/* 设置全局配置 */ +http.setConfig(config => { + config.header = { ...config.header } + config.sslVerify = false + config.baseURL = baseUrl + return config +}) + +http.interceptors.request.use( + async config => { + config.header = { ...config.header } + return config + }, + config => { + return Promise.reject(config) + } +) + +http.interceptors.response.use(response => { + if (response.statusCode == 500 || response.statusCode == 404 || response.statusCode == 403) { + console.error(response) + return tool.alert('网络错误，请稍后重试') + } + + if (response.statusCode == 401 || response.data.code == 401) { + } + + if (response.statusCode == 200) { + return Promise.resolve(response) + } else { + return Promise.reject(response) + } +}) + +export default http diff --git a/common/styles/common.css b/common/styles/common.css new file mode 100644 index 0000000..7f09de3 --- /dev/null +++ b/common/styles/common.css @@ -0,0 +1,617 @@ +view, +text { + color: #333; + font-size: 24rpx; + box-sizing: border-box; +} + +/* 2. 主背景色 */ +.main-bg-color { + background-color: #fff; +} + +/* 3. 主文字色 */ +.main-color { + color: #005097; +} + +.main-border-color { + border-color: #646464; +} + +.w100 { + width: 100%; +} + +.h100 { + height: 100vw; +} + +button { + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; +} + +button::after { + border: none; +} +.flex-sp { + display: flex; + align-items: center; + justify-content: space-between; +} + +.tag { + padding: 6rpx 20rpx; + font-feature-settings: 'liga' off, 'clig' off; + font-family: 'Source Han Sans CN'; + font-size: 26rpx; +} + +.tag1 { + background: #d9ebff; + color: #005097; +} + +.tag2 { + background: #ffefd9; + color: #972300; +} + +.tag3 { + background: #ffe4d9; + color: #970000; +} + +.tag4 { + background: #d9ffea; + color: #00972d; +} +/************************************************************ +** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 ** +** 否则页面将无法正常显示 ** +************************************************************/ + +html { + font-size: 16px; +} + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +view, +image, +text { + box-sizing: border-box; + flex-shrink: 0; +} + +#app { + width: 100vw; + height: 100vh; +} + +.code-fun-flex-row { + display: flex; + flex-direction: row; +} + +.code-fun-flex-col { + display: flex; + flex-direction: column; +} + +.code-fun-justify-start { + justify-content: flex-start; +} + +.code-fun-justify-end { + justify-content: flex-end; +} + +.code-fun-justify-center { + justify-content: center; +} + +.code-fun-justify-between { + justify-content: space-between; +} + +.code-fun-justify-around { + justify-content: space-around; +} + +.code-fun-justify-evenly { + justify-content: space-evenly; +} + +.code-fun-items-start { + align-items: flex-start; +} + +.code-fun-items-end { + align-items: flex-end; +} + +.code-fun-items-center { + align-items: center; +} + +.code-fun-items-baseline { + align-items: baseline; +} + +.code-fun-items-stretch { + align-items: stretch; +} + +.code-fun-self-start { + align-self: flex-start; +} + +.code-fun-self-end { + align-self: flex-end; +} + +.code-fun-self-center { + align-self: center; +} + +.code-fun-self-baseline { + align-self: baseline; +} + +.code-fun-self-stretch { + align-self: stretch; +} + +.code-fun-flex-1 { + flex: 1 1 0%; +} + +.code-fun-flex-auto { + flex: 1 1 auto; +} + +.code-fun-grow { + flex-grow: 1; +} + +.code-fun-grow-0 { + flex-grow: 0; +} + +.code-fun-shrink { + flex-shrink: 1; +} + +.code-fun-shrink-0 { + flex-shrink: 0; +} + +.code-fun-relative { + position: relative; +} + +.code-fun-ml-2 { + margin-left: 4rpx; +} + +.code-fun-mt-2 { + margin-top: 4rpx; +} + +.code-fun-ml-4 { + margin-left: 8rpx; +} + +.code-fun-mt-4 { + margin-top: 8rpx; +} + +.code-fun-ml-6 { + margin-left: 12rpx; +} + +.code-fun-mt-6 { + margin-top: 12rpx; +} + +.code-fun-ml-8 { + margin-left: 16rpx; +} + +.code-fun-mt-8 { + margin-top: 16rpx; +} + +.code-fun-ml-10 { + margin-left: 20rpx; +} + +.code-fun-mt-10 { + margin-top: 20rpx; +} + +.code-fun-ml-12 { + margin-left: 24rpx; +} + +.code-fun-mt-12 { + margin-top: 24rpx; +} + +.code-fun-ml-14 { + margin-left: 28rpx; +} + +.code-fun-mt-14 { + margin-top: 28rpx; +} + +.code-fun-ml-16 { + margin-left: 32rpx; +} + +.code-fun-mt-16 { + margin-top: 32rpx; +} + +.code-fun-ml-18 { + margin-left: 36rpx; +} + +.code-fun-mt-18 { + margin-top: 36rpx; +} + +.code-fun-ml-20 { + margin-left: 40rpx; +} + +.code-fun-mt-20 { + margin-top: 40rpx; +} + +.code-fun-ml-22 { + margin-left: 44rpx; +} + +.code-fun-mt-22 { + margin-top: 44rpx; +} + +.code-fun-ml-24 { + margin-left: 48rpx; +} + +.code-fun-mt-24 { + margin-top: 48rpx; +} + +.code-fun-ml-26 { + margin-left: 52rpx; +} + +.code-fun-mt-26 { + margin-top: 52rpx; +} + +.code-fun-ml-28 { + margin-left: 56rpx; +} + +.code-fun-mt-28 { + margin-top: 56rpx; +} + +.code-fun-ml-30 { + margin-left: 60rpx; +} + +.code-fun-mt-30 { + margin-top: 60rpx; +} + +.code-fun-ml-32 { + margin-left: 64rpx; +} + +.code-fun-mt-32 { + margin-top: 64rpx; +} + +.code-fun-ml-34 { + margin-left: 68rpx; +} + +.code-fun-mt-34 { + margin-top: 68rpx; +} + +.code-fun-ml-36 { + margin-left: 72rpx; +} + +.code-fun-mt-36 { + margin-top: 72rpx; +} + +.code-fun-ml-38 { + margin-left: 76rpx; +} + +.code-fun-mt-38 { + margin-top: 76rpx; +} + +.code-fun-ml-40 { + margin-left: 80rpx; +} + +.code-fun-mt-40 { + margin-top: 80rpx; +} + +.code-fun-ml-42 { + margin-left: 84rpx; +} + +.code-fun-mt-42 { + margin-top: 84rpx; +} + +.code-fun-ml-44 { + margin-left: 88rpx; +} + +.code-fun-mt-44 { + margin-top: 88rpx; +} + +.code-fun-ml-46 { + margin-left: 92rpx; +} + +.code-fun-mt-46 { + margin-top: 92rpx; +} + +.code-fun-ml-48 { + margin-left: 96rpx; +} + +.code-fun-mt-48 { + margin-top: 96rpx; +} + +.code-fun-ml-50 { + margin-left: 100rpx; +} + +.code-fun-mt-50 { + margin-top: 100rpx; +} + +.code-fun-ml-52 { + margin-left: 104rpx; +} + +.code-fun-mt-52 { + margin-top: 104rpx; +} + +.code-fun-ml-54 { + margin-left: 108rpx; +} + +.code-fun-mt-54 { + margin-top: 108rpx; +} + +.code-fun-ml-56 { + margin-left: 112rpx; +} + +.code-fun-mt-56 { + margin-top: 112rpx; +} + +.code-fun-ml-58 { + margin-left: 116rpx; +} + +.code-fun-mt-58 { + margin-top: 116rpx; +} + +.code-fun-ml-60 { + margin-left: 120rpx; +} + +.code-fun-mt-60 { + margin-top: 120rpx; +} + +.code-fun-ml-62 { + margin-left: 124rpx; +} + +.code-fun-mt-62 { + margin-top: 124rpx; +} + +.code-fun-ml-64 { + margin-left: 128rpx; +} + +.code-fun-mt-64 { + margin-top: 128rpx; +} + +.code-fun-ml-66 { + margin-left: 132rpx; +} + +.code-fun-mt-66 { + margin-top: 132rpx; +} + +.code-fun-ml-68 { + margin-left: 136rpx; +} + +.code-fun-mt-68 { + margin-top: 136rpx; +} + +.code-fun-ml-70 { + margin-left: 140rpx; +} + +.code-fun-mt-70 { + margin-top: 140rpx; +} + +.code-fun-ml-72 { + margin-left: 144rpx; +} + +.code-fun-mt-72 { + margin-top: 144rpx; +} + +.code-fun-ml-74 { + margin-left: 148rpx; +} + +.code-fun-mt-74 { + margin-top: 148rpx; +} + +.code-fun-ml-76 { + margin-left: 152rpx; +} + +.code-fun-mt-76 { + margin-top: 152rpx; +} + +.code-fun-ml-78 { + margin-left: 156rpx; +} + +.code-fun-mt-78 { + margin-top: 156rpx; +} + +.code-fun-ml-80 { + margin-left: 160rpx; +} + +.code-fun-mt-80 { + margin-top: 160rpx; +} + +.code-fun-ml-82 { + margin-left: 164rpx; +} + +.code-fun-mt-82 { + margin-top: 164rpx; +} + +.code-fun-ml-84 { + margin-left: 168rpx; +} + +.code-fun-mt-84 { + margin-top: 168rpx; +} + +.code-fun-ml-86 { + margin-left: 172rpx; +} + +.code-fun-mt-86 { + margin-top: 172rpx; +} + +.code-fun-ml-88 { + margin-left: 176rpx; +} + +.code-fun-mt-88 { + margin-top: 176rpx; +} + +.code-fun-ml-90 { + margin-left: 180rpx; +} + +.code-fun-mt-90 { + margin-top: 180rpx; +} + +.code-fun-ml-92 { + margin-left: 184rpx; +} + +.code-fun-mt-92 { + margin-top: 184rpx; +} + +.code-fun-ml-94 { + margin-left: 188rpx; +} + +.code-fun-mt-94 { + margin-top: 188rpx; +} + +.code-fun-ml-96 { + margin-left: 192rpx; +} + +.code-fun-mt-96 { + margin-top: 192rpx; +} + +.code-fun-ml-98 { + margin-left: 196rpx; +} + +.code-fun-mt-98 { + margin-top: 196rpx; +} + +.code-fun-ml-100 { + margin-left: 200rpx; +} + +.code-fun-mt-100 { + margin-top: 200rpx; +} +.head { + width: 750rpx; + height: 372rpx; + flex-shrink: 0; + position: absolute; + top: 0; + left: 0; + background: linear-gradient(180deg, #d4eaff 0%, #fff 65.32%); +} +.container { + width: 100vw; + height: 100vh; + background-image: linear-gradient(to bottom, #dff0ff 8%, white 15%); + overflow: hidden; +} diff --git a/common/styles/normal.scss b/common/styles/normal.scss new file mode 100644 index 0000000..c898b59 --- /dev/null +++ b/common/styles/normal.scss @@ -0,0 +1,397 @@ +.underline-text { + text-decoration: underline; + text-underline-offset: 4rpx; /* 调整这个值可以改变下划线距离文字的间距 */ +} +/* flex 布局 */ +.flex { + /* #ifndef APP-PLUS-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; +} + +[class*='-container'] [class*='flex-'] { + display: flex; +} + +[class*='-container'] [class*='-bet'] { + justify-content: space-between; +} + +[class*='-container'] [class*='-cen'] { + justify-content: center; +} + +[class*='-container'] [class*='-aro'] { + justify-content: space-around; +} + +[class*='-container'] [class*='-eve'] { + justify-content: space-evenly; +} + +[class*='-container'] [class*='-jfend'] { + justify-content: flex-end; +} + +[class*='-container'] [class*='-ali'] { + align-items: center; +} + +[class*='-container'] [class*='-bas'] { + align-items: baseline; +} + +[class*='-container'] [class*='-end'] { + align-items: end; +} + +[class*='-container'] [class*='-col'] { + flex-direction: column; +} + +[class*='-container'] [class*='-row'] { + flex-direction: row; +} + +[class*='-container'] [class*='-rowre'] { + flex-direction: row-reverse; +} + +[class*='-container'] [class*='-wra'] { + flex-wrap: wrap; +} +[class*='-container'] [class*='-end'] { + justify-content: flex-end; + align-items: flex-end; +} + +// 定义内外边距，历遍1-80 +@for $i from 0 through 10 { + .flex-#{$i} { + flex: $i; + } +} + +/* #ifndef APP-PLUS-NVUE */ +.flex-shrink { + flex-shrink: 0; +} + +/* #endif */ + +// 定义内外边距，历遍1-80 +@for $i from 0 through 40 { + // 只要双数和能被5除尽的数 + @if $i % 2==0 or $i % 5==0 { + // 得出：u-margin-30或者u-m-30 + .w-#{$i} { + width: calc($i * 1%) !important; + } + .p-x-#{$i} { + padding-left: $i + rpx !important; + padding-right: $i + rpx !important; + } + + .p-y-#{$i} { + padding-top: $i + rpx !important; + padding-bottom: $i + rpx !important; + } + + .m-x-#{$i} { + margin-left: $i + rpx !important; + margin-right: $i + rpx !important; + } + + .m-y-#{$i} { + margin-top: $i + rpx !important; + margin-bottom: $i + rpx !important; + } + + .m-#{$i} { + margin-left: $i + rpx !important; + margin-right: $i + rpx !important; + margin-top: $i + rpx !important; + margin-bottom: $i + rpx !important; + } + + .p-#{$i} { + padding-left: $i + rpx !important; + padding-right: $i + rpx !important; + padding-top: $i + rpx !important; + padding-bottom: $i + rpx !important; + } + + .m-l-#{$i} { + margin-left: $i + rpx !important; + } + + .m-t-#{$i} { + margin-top: $i + rpx !important; + } + + .m-r-#{$i} { + margin-right: $i + rpx !important; + } + + .m-b-#{$i} { + margin-bottom: $i + rpx !important; + } + + .p-l-#{$i} { + padding-left: $i + rpx !important; + } + + .p-t-#{$i} { + padding-top: $i + rpx !important; + } + + .p-r-#{$i} { + padding-right: $i + rpx !important; + } + + .p-b-#{$i} { + padding-bottom: $i + rpx !important; + } + + .l-p-#{$i} { + letter-spacing: $i + rpx !important; + } + + .z-i-#{$i} { + z-index: $i; + } + + .l-h-#{$i} { + line-height: $i + rpx !important; + } + .r-#{$i} { + right: $i + rpx !important; + } + .l-#{$i} { + left: $i + rpx !important; + } + + .t-#{$i} { + top: $i + rpx !important; + } + .b-#{$i} { + bottom: $i + rpx !important; + } + } +} + +// 定义字体大小 +// @for $i from 9 to 18 { +// .font-#{$i} { +// font-size: $i + px; +// } +// } +// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体 +@for $i from 9 through 60 { + .font-#{$i} { + font-size: $i + rpx !important; + } +} + +// 圆角 +@for $i from 4 through 60 { + .rounded-#{$i} { + border-radius: $i + rpx; + } +} + +// 定义中文字体(rpx)间距 +@for $i from 2 through 10 { + .l-p-#{$i} { + letter-spacing: $i + rpx; + } + .over-line-#{$i} { + width: 100%; + height: calc($i * 1em + 0.5em); + display: -webkit-box; + text-overflow: ellipsis; + -webkit-line-clamp: $i; + overflow: hidden; + -webkit-box-orient: vertical; + } +} + +/* 内容溢出 */ +.overflow-hidden { + overflow: hidden; +} + +/* 文字缩进 */ +/* #ifndef APP-PLUS-NVUE */ +.text-indent { + text-indent: 2; +} + +/* #endif */ +/* 文字划线 */ +.text-through { + text-decoration: line-through; +} + +/* 文字对齐 */ +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +/* 文字换行溢出处理 */ +.text-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.text-ellipsis-2 { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; //多行在这里修改数字即可 + overflow: hidden; + /* autoprefixer: ignore next */ + -webkit-box-orient: vertical; +} + +/* 文字粗细和斜体 */ +.font-weight-light { + font-weight: 300; +} + +/*细*/ +.font-weight-lighter { + font-weight: 100; +} + +/*更细*/ +.font-weight-normal { + font-weight: 400; +} + +/*正常*/ +.font-weight-middle { + font-weight: 500; +} + +/*正常*/ +.font-weight-middles { + font-weight: 600; +} + +/*正常*/ +.font-weight-bold { + font-weight: 700; +} + +/*粗*/ +.font-weight-bolder { + font-weight: bold; +} + +/*更粗*/ +.font-italic { + font-style: italic; +} + +/*斜体*/ + +/* 文字颜色 */ +.text-body { + color: #333333; +} +// 边框 +.border { + border-width: 2rpx; + border-style: solid; + border-color: #ececec; +} + +.border-top { + border-top-width: 2rpx; + border-top-style: solid; + border-top-color: #ececec; +} + +.border-right { + border-right-width: 2rpx; + border-right-style: solid; + border-right-color: #ececec; +} + +.border-bottom { + border-bottom-width: 2rpx; + border-bottom-style: solid; + border-bottom-color: #9f9f9f; +} + +.border-left { + border-left-width: 2rpx; + border-left-style: solid; + border-left-color: #ececec; +} + +/* 定位 */ +.position-relative { + position: relative; +} + +.position-absolute { + position: absolute; +} + +.position-fixed { + position: fixed; +} + +/* 定位 - 固定顶部 */ +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} + +/* 定位 - 固定底部 */ +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; +} + +.top-0 { + top: 0; +} + +.left-0 { + left: 0; +} + +.right-0 { + right: 0; +} + +.bottom-0 { + bottom: 0; +} + +.font-family-B { + font-family: 'OPPOSans-B' !important; +} + +:deep(.u-empty) { + height: 500rpx; +} diff --git a/common/utils/tool.js b/common/utils/tool.js new file mode 100644 index 0000000..bba7c3b --- /dev/null +++ b/common/utils/tool.js @@ -0,0 +1,362 @@ +const baseUrl = import.meta.env.BASE_URL + +/** + * 工具类 - 提供常用的工具方法 + * @class Tool + */ +class Tool { + constructor() { + // 图标类型映射 + this.ICON_TYPES = { + NONE: 0, + SUCCESS: 1, + LOADING: 2, + } + + // 字体加载状态缓存 + this.loadedFonts = new Set() + } + + /** + * 文字轻提示 + * @param {string} str 提示文字 + * @param {number} [icon=0] 提示icon (0: none, 1: success, 2: loading) + * @param {number} [duration=1500] 提示时间(毫秒) + */ + alert(str, icon = this.ICON_TYPES.NONE, duration = 1500) { + return new Promise((resolve, reject) => { + if (!str && str !== 0) { + console.warn('alert方法需要提供提示文字') + return + } + + const iconMap = { + [this.ICON_TYPES.NONE]: 'none', + [this.ICON_TYPES.SUCCESS]: 'success', + [this.ICON_TYPES.LOADING]: 'loading', + } + + uni.showToast({ + title: String(str), + icon: iconMap[icon] || 'none', + mask: true, + duration, + success: () => { + setTimeout(resolve, duration) + }, + fail: reject, + }) + }) + } + + /** + * 显示loading加载 + * @param {string} [title=' '] 加载文案 + * @param {boolean} [mask=true] 是否显示遮罩 + */ + loading(title = ' ', mask = true) { + uni.showLoading({ title, mask }) + } + + /** + * 关闭loading提示框 + */ + hideLoading() { + uni.hideLoading() + } + + /** + * 统一处理URL格式，确保以/开头 + * @param {string} url 页面地址 + * @returns {string} 格式化后的URL + * @private + */ + _formatUrl(url) { + if (!url || typeof url !== 'string') { + throw new Error('URL必须是字符串') + } + + return url.startsWith('/') ? url : `/${url}` + } + + /** + * 可返回跳转（导航到新页面） + * @param {string} url 页面地址 + */ + navigateTo(url) { + const formattedUrl = this._formatUrl(url) + + uni.navigateTo({ + url: formattedUrl, + fail: err => { + console.warn('navigateTo失败，尝试switchTab:', err) + uni.switchTab({ url: formattedUrl }) + }, + }) + } + + /** + * 不可返回跳转（重定向到新页面） + * @param {string} url 页面地址 + */ + redirectTo(url) { + uni.redirectTo({ url: this._formatUrl(url) }) + } + + /** + * 清除页面栈跳转（重新启动到新页面） + * @param {string} url 页面地址 + */ + reLaunch(url) { + uni.reLaunch({ url: this._formatUrl(url) }) + } + + /** + * 跳转tabBar页 + * @param {string} url 页面地址 + */ + switchTab(url) { + uni.switchTab({ url: this._formatUrl(url) }) + } + + /** + * 返回上一页面或指定页面 + * @param {number} [delta=1] 返回的页面数 + * @param {string} [fallbackUrl='/pages/index/index'] 无上一页时的回退地址 + */ + navigateBack(delta = 1, fallbackUrl = '/pages/index/index') { + const pages = getCurrentPages() + + if (pages.length <= 1) { + console.warn('无上一页，使用回退地址') + uni.reLaunch({ url: fallbackUrl }) + } else { + uni.navigateBack({ delta }) + } + } + + /** + * 操作本地缓存 + * @param {string} key 缓存键值 + * @param {any} [value] 缓存数据，不传则为读取 + * @returns {any|undefined} 读取操作时返回数据 + */ + storage(key, value) { + if (typeof key !== 'string') { + throw new Error('key必须是字符串') + } + + // 设置操作 + if (value !== undefined && value !== null) { + uni.setStorageSync(key, value) + return + } + + // 读取操作 + if (key !== '#') { + return uni.getStorageSync(key) + } + + // 特殊操作 + if (key === '#') { + uni.clearStorageSync() + } + } + + /** + * 删除指定缓存 + * @param {string} key 要删除的缓存键 + */ + removeStorage(key) { + if (typeof key !== 'string') { + throw new Error('key必须是字符串') + } + + uni.removeStorageSync(key) + } + + /** + * 获取缓存信息 + * @returns {Object} 缓存信息 + */ + getStorageInfo() { + return uni.getStorageInfoSync() + } + + /** + * 复制文本到剪贴板 + * @param {string} data 要复制的文本 + * @returns {Promise} 复制是否成功 + */ + async copy(data) { + if (!data && data !== 0) { + this.alert('暂无内容') + return false + } + + try { + await new Promise((resolve, reject) => { + uni.setClipboardData({ + data: String(data), + success: resolve, + fail: reject, + }) + }) + + this.alert('复制成功') + return true + } catch (error) { + console.error('复制失败:', error) + this.alert('复制失败，请重试') + return false + } + } + + /** + * 导入外部字体 + * @param {string} fontName 字体文件名（不含路径） + * @returns {Promise} 字体加载是否成功 + */ + async loadFont(fontName) { + if (!fontName || typeof fontName !== 'string') { + throw new Error('字体名称必须是字符串') + } + + // 检查是否已加载过 + if (this.loadedFonts.has(fontName)) { + return true + } + + try { + const fontFamily = fontName.replace(/\.[^/.]+$/, '') // 移除文件扩展名 + + await new Promise((resolve, reject) => { + uni.loadFontFace({ + family: fontFamily, + source: `url(${config.ASSETSURL}${fontName})`, + global: true, + success: resolve, + fail: reject, + }) + }) + + this.loadedFonts.add(fontName) + return true + } catch (error) { + console.error(`字体加载失败: ${fontName}`, error) + return false + } + } + + /** + * 保存图片到相册 + * @param {string} url 图片URL + * @returns {Promise} 保存是否成功 + */ + async saveImageToPhotos(url) { + if (!url) { + this.alert('图片地址不能为空') + return false + } + + try { + // 检查权限 + const { authSetting } = await new Promise((resolve, reject) => { + uni.getSetting({ + success: resolve, + fail: reject, + }) + }) + + if (!authSetting['scope.writePhotosAlbum']) { + // 请求权限 + await new Promise((resolve, reject) => { + uni.authorize({ + scope: 'scope.writePhotosAlbum', + success: resolve, + fail: reject, + }) + }) + } + + // 获取图片信息 + const { path } = await new Promise((resolve, reject) => { + uni.getImageInfo({ + src: url, + success: resolve, + fail: reject, + }) + }) + + // 保存到相册 + await new Promise((resolve, reject) => { + uni.saveImageToPhotosAlbum({ + filePath: path, + success: resolve, + fail: reject, + }) + }) + + this.alert('已保存到相册') + return true + } catch (error) { + console.error('保存图片失败:', error) + + if (error.errMsg && error.errMsg.includes('auth')) { + // 权限相关错误 + await new Promise(resolve => { + uni.showModal({ + title: '保存失败', + content: '请开启访问手机相册权限', + showCancel: false, + success: resolve, + }) + }) + + uni.openSetting() + } else { + this.alert('保存失败，请重试') + } + + return false + } + } + + /** + * 微信支付 + * @param {Object} paymentData 支付参数 + * @returns {Promise} 支付结果 + */ + requestPayment(paymentData) { + return new Promise((resolve, reject) => { + uni.requestPayment({ + provider: 'wxpay', + ...paymentData, + success: resolve, + fail: reject, + }) + }) + } + upload(filePath) { + return new Promise((resolve, reject) => { + uni.uploadFile({ + url: `${baseUrl}file/upload`, + fileType: 'image', + header: { + Authorization: `Bearer ${this.storage('token')}`, + }, + filePath, + name: 'file', + success: ({ data }) => { + resolve(JSON.parse(data)) + }, + fail: error => { + reject(error) + }, + }) + }) + } +} + +// 创建单例并导出 +export default new Tool() diff --git a/components/z-paging/changelog.md b/components/z-paging/changelog.md new file mode 100644 index 0000000..9ed7f97 --- /dev/null +++ b/components/z-paging/changelog.md @@ -0,0 +1,41 @@ +## 2.8.6（2025-03-17） +1.`新增` 聊天记录模式流式输出（类似chatGPT回答）演示demo。 +2.`新增` z-paging及其公共子组件支持`HBuilderX`代码文档提示。 +3.`新增` props：`virtual-in-swiper-slot`，用以解决vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在`swiper-item`中存在的无法获取slot插入的cell高度进而导致虚拟列表失败的问题。 +4.`新增` `@scrolltolower`和@`scrolltoupper`支持nvue。 +5.`修复` 由`v2.8.1`引出的方法`scrollIntoViewById`在微信小程序+vue3中无效的问题。 +6.`修复` 由`v2.8.1`引出的在子组件内使用z-paging虚拟列表无效的问题。 +7.`修复` 在微信小程序中基础库版本较高时`wx.getSystemInfoSync is deprecated`警告。 +8.`优化` 提升下拉刷新在鸿蒙Next中的性能。 +9.`优化` `@scrolltolower`和`@scrolltoupper`在倒置的聊天记录模式下的触发逻辑。 +10.`优化` 其他细节调整。 +## 2.8.5（2025-02-09） +1.`新增` 方法`scrollToX`，支持控制x轴滚动到指定位置。 +2.`修复` 快手小程序中报错`await isn't allowed in non-async function`的问题。 +3.`修复` 在iOS+nvue中，设置了`:loading-more-enabled="false"`后，调用`scrollToBottom`无法滚动到底部的问题。 +4.`修复` 在支付宝小程序+页面滚动中，数据为空时空数据图未居中的问题。 +5.`优化` fetch types修改。 +## 2.8.4（2024-12-02） +1.`修复` 在虚拟列表+vue2中，顶部占位采用transformY方案；在虚拟列表+vue3中，顶部占位采用view占位方案。以解决在vue2+微信小程序+安卓+兼容模式中，可能出现的虚拟列表闪动的问题。 +2.`修复` 在列表渲染时（尤其是在虚拟列表中）偶现的【点击加载更多】闪现的问题。 +3.`优化` 统一在RefresherStatus枚举中Loading取值。 +4.`优化` `defaultPageNo`&`defaultPageSize`修改为只允许number类型。 +5.`优化` 提升兼容性&细节优化。 +## 2.8.3（2024-11-27） +1.`修复` `doInsertVirtualListItem`插入数据无效的问题。 +2.`优化` 提升兼容性&细节优化。 +## 2.8.2（2024-11-25） +1.`优化` types中`ZPagingRef`和`ZPagingInstance`支持泛型。 +## 2.8.1（2024-11-24） +1.`新增` 完整的`props`、`slots`、`methods`、`events`的typescript types声明，可在ts中获得绝佳的代码提示体验。 +2.`新增` `virtual-cell-id-prefix`：虚拟列表cell id的前缀，适用于一个页面有多个虚拟列表的情况，用以区分不同虚拟列表cell的id。 +3.`修复` 在vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若`z-paging`在`swiper-item`标签内的情况下存在的无法获取slot插入的cell高度的问题。 +4.`修复` 在虚拟列表中分页数据小于1页时插入新数据，虚拟列表未生效的问题。 +5.`修复` 在虚拟列表中调用`refresh`时，cell的index计算不正确的问题。 +6.`修复` 在快手小程序中内容较少或空数据时`z-paging`未能铺满全屏的问题。 +7.`优化` `events`中的参数涉及枚举的部分，统一由之前的number类型修改为string类型，展示更直观！涉及的events：`@query`中的`from`参数；`@refresherStatusChange`中的`status`参数；`@loadingStatusChange`中的`status`参数；`slot=refresher`中的`refresherStatus`参数；`slot=chatLoading`中的`loadingMoreStatus`参数。更新版本请特别留意！ +## 2.8.0（2024-10-21） +1.`新增` 全面支持鸿蒙Next。 +2.`修复` 设置了`refresher-complete-delay`后，在下拉刷新期间调用reload导致的无法再次下拉刷新的问题。 +3.`优化` 废弃虚拟列表transformY顶部占位方案，修改为空view占位。解决因使用旧方案导致的vue3中可能出现的虚拟列表闪动问题。提升虚拟列表的兼容性。 + diff --git a/components/z-paging/components/z-paging-cell/z-paging-cell.vue b/components/z-paging/components/z-paging-cell/z-paging-cell.vue new file mode 100644 index 0000000..374794e --- /dev/null +++ b/components/z-paging/components/z-paging-cell/z-paging-cell.vue @@ -0,0 +1,47 @@ + + + + + + + + + + diff --git a/components/z-paging/components/z-paging-empty-view/z-paging-empty-view.vue b/components/z-paging/components/z-paging-empty-view/z-paging-empty-view.vue new file mode 100644 index 0000000..81bd1aa --- /dev/null +++ b/components/z-paging/components/z-paging-empty-view/z-paging-empty-view.vue @@ -0,0 +1,209 @@ + + + + + + + + + + + diff --git a/components/z-paging/components/z-paging-swiper-item/z-paging-swiper-item.vue b/components/z-paging/components/z-paging-swiper-item/z-paging-swiper-item.vue new file mode 100644 index 0000000..b3945ad --- /dev/null +++ b/components/z-paging/components/z-paging-swiper-item/z-paging-swiper-item.vue @@ -0,0 +1,160 @@ + + + + + + + + + + + diff --git a/components/z-paging/components/z-paging-swiper/z-paging-swiper.vue b/components/z-paging/components/z-paging-swiper/z-paging-swiper.vue new file mode 100644 index 0000000..e842961 --- /dev/null +++ b/components/z-paging/components/z-paging-swiper/z-paging-swiper.vue @@ -0,0 +1,176 @@ + + + + + + + + + + + diff --git a/components/z-paging/components/z-paging/components/z-paging-load-more.vue b/components/z-paging/components/z-paging/components/z-paging-load-more.vue new file mode 100644 index 0000000..7d8a374 --- /dev/null +++ b/components/z-paging/components/z-paging/components/z-paging-load-more.vue @@ -0,0 +1,182 @@ + + + + + diff --git a/components/z-paging/components/z-paging/components/z-paging-refresh.vue b/components/z-paging/components/z-paging/components/z-paging-refresh.vue new file mode 100644 index 0000000..864bbb7 --- /dev/null +++ b/components/z-paging/components/z-paging/components/z-paging-refresh.vue @@ -0,0 +1,214 @@ + + + + + diff --git a/components/z-paging/components/z-paging/config/index.js b/components/z-paging/components/z-paging/config/index.js new file mode 100644 index 0000000..794be28 --- /dev/null +++ b/components/z-paging/components/z-paging/config/index.js @@ -0,0 +1,3 @@ +// z-paging全局配置文件，注意避免更新时此文件被覆盖，若被覆盖，可在此文件中右键->点击本地历史记录，找回覆盖前的配置 + +export default {} \ No newline at end of file diff --git a/components/z-paging/components/z-paging/css/z-paging-main.css b/components/z-paging/components/z-paging/css/z-paging-main.css new file mode 100644 index 0000000..76a1789 --- /dev/null +++ b/components/z-paging/components/z-paging/css/z-paging-main.css @@ -0,0 +1,241 @@ +/* [z-paging]公共css*/ + +.z-paging-content { + position: relative; + flex-direction: column; + /* #ifndef APP-NVUE */ + overflow: hidden; + /* #endif */ +} + +.z-paging-content-full { + /* #ifndef APP-NVUE */ + display: flex; + width: 100%; + height: 100%; + /* #endif */ +} + +.z-paging-content-fixed, .zp-loading-fixed { + position: fixed; + /* #ifndef APP-NVUE */ + height: auto; + width: auto; + /* #endif */ + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.zp-f2-content { + width: 100%; + position: fixed; + top: 0; + left: 0; + background-color: white; +} + +.zp-page-top, .zp-page-bottom { + /* #ifndef APP-NVUE */ + width: auto; + /* #endif */ + position: fixed; + left: 0; + right: 0; + z-index: 999; +} + +.zp-page-left, .zp-page-right { + /* #ifndef APP-NVUE */ + height: 100%; + /* #endif */ +} + +.zp-scroll-view-super { + flex: 1; + overflow: hidden; + position: relative; +} + +.zp-view-super { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; +} + +.zp-scroll-view-container, .zp-scroll-view { + position: relative; + /* #ifndef APP-NVUE */ + height: 100%; + width: 100%; + /* #endif */ +} + +.zp-absoulte { + /* #ifndef APP-NVUE */ + position: absolute; + top: 0; + width: auto; + /* #endif */ +} + +.zp-scroll-view-absolute { + position: absolute; + top: 0; + left: 0; +} + +/* #ifndef APP-NVUE */ +.zp-scroll-view-hide-scrollbar ::-webkit-scrollbar { + display: none; + -webkit-appearance: none; + width: 0 !important; + height: 0 !important; + background: transparent; +} +/* #endif */ + +.zp-paging-touch-view { + width: 100%; + height: 100%; + position: relative; +} + +.zp-fixed-bac-view { + position: absolute; + width: 100%; + top: 0; + left: 0; + height: 200px; +} + +.zp-paging-main { + height: 100%; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; +} + +.zp-paging-container { + flex: 1; + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; +} + +.zp-chat-record-loading-custom-image { + width: 35rpx; + height: 35rpx; + /* #ifndef APP-NVUE */ + animation: loading-flower 1s linear infinite; + /* #endif */ +} + +.zp-page-bottom-keyboard-placeholder-animate { + transition-property: height; + transition-duration: 0.15s; + /* #ifndef APP-NVUE */ + will-change: height; + /* #endif */ +} + +.zp-custom-refresher-container { + overflow: hidden; +} + +.zp-custom-refresher-refresh { + /* #ifndef APP-NVUE */ + display: block; + /* #endif */ +} + +.zp-back-to-top { + z-index: 999; + position: absolute; + bottom: 0rpx; + transition-duration: .3s; + transition-property: opacity; +} +.zp-back-to-top-rpx { + width: 76rpx; + height: 76rpx; + bottom: 0rpx; + right: 25rpx; +} +.zp-back-to-top-px { + width: 38px; + height: 38px; + bottom: 0px; + right: 13px; +} + +.zp-back-to-top-show { + opacity: 1; +} + +.zp-back-to-top-hide { + opacity: 0; +} + +.zp-back-to-top-img { + /* #ifndef APP-NVUE */ + width: 100%; + height: 100%; + /* #endif */ + /* #ifdef APP-NVUE */ + flex: 1; + /* #endif */ + z-index: 999; +} + +.zp-back-to-top-img-inversion { + transform: rotate(180deg); +} + +.zp-empty-view { + /* #ifdef APP-NVUE */ + height: 100%; + /* #endif */ + flex: 1; +} + +.zp-empty-view-center { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: column; + align-items: center; + justify-content: center; +} + +.zp-loading-fixed { + z-index: 9999; +} + +.zp-safe-area-inset-bottom { + position: absolute; + /* #ifndef APP-PLUS */ + height: env(safe-area-inset-bottom); + /* #endif */ +} + +.zp-n-refresh-container { + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + justify-content: center; + width: 750rpx; +} + +.zp-n-list-container{ + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex-direction: row; + flex: 1; +} diff --git a/components/z-paging/components/z-paging/css/z-paging-static.css b/components/z-paging/components/z-paging/css/z-paging-static.css new file mode 100644 index 0000000..50e4059 --- /dev/null +++ b/components/z-paging/components/z-paging/css/z-paging-static.css @@ -0,0 +1,50 @@ +/* [z-paging]公用的静态css资源 */ + +.zp-line-loading-image { + /* #ifndef APP-NVUE */ + animation: loading-flower 1s steps(12) infinite; + /* #endif */ + color: #666666; +} +.zp-line-loading-image-rpx { + margin-right: 8rpx; + width: 34rpx; + height: 34rpx; +} +.zp-line-loading-image-px { + margin-right: 4px; + width: 17px; + height: 17px; +} + +.zp-loading-image-ios-rpx { + width: 40rpx; + height: 40rpx; +} +.zp-loading-image-ios-px { + width: 20px; + height: 20px; +} + +.zp-loading-image-android-rpx { + width: 34rpx; + height: 34rpx; +} +.zp-loading-image-android-px { + width: 17px; + height: 17px; +} + +/* #ifndef APP-NVUE */ +@keyframes loading-flower { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(1turn); + transform: rotate(1turn); + } +} +/* #endif */ + diff --git a/components/z-paging/components/z-paging/i18n/en.json b/components/z-paging/components/z-paging/i18n/en.json new file mode 100644 index 0000000..cb0a88c --- /dev/null +++ b/components/z-paging/components/z-paging/i18n/en.json @@ -0,0 +1,23 @@ +{ + "zp.refresher.default": "Pull down to refresh", + "zp.refresher.pulling": "Release to refresh", + "zp.refresher.refreshing": "Refreshing...", + "zp.refresher.complete": "Refresh succeeded", + "zp.refresher.f2": "Refresh to enter 2f", + + "zp.loadingMore.default": "Click to load more", + "zp.loadingMore.loading": "Loading...", + "zp.loadingMore.noMore": "No more data", + "zp.loadingMore.fail": "Load failed,click to reload", + + "zp.emptyView.title": "No data", + "zp.emptyView.reload": "Reload", + "zp.emptyView.error": "Sorry,load failed", + + "zp.refresherUpdateTime.title": "Last update: ", + "zp.refresherUpdateTime.none": "None", + "zp.refresherUpdateTime.today": "Today", + "zp.refresherUpdateTime.yesterday": "Yesterday", + + "zp.systemLoading.title": "Loading..." +} diff --git a/components/z-paging/components/z-paging/i18n/index.js b/components/z-paging/components/z-paging/i18n/index.js new file mode 100644 index 0000000..d2afd08 --- /dev/null +++ b/components/z-paging/components/z-paging/i18n/index.js @@ -0,0 +1,8 @@ +import en from './en.json' +import zhHans from './zh-Hans.json' +import zhHant from './zh-Hant.json' +export default { + en, + 'zh-Hans': zhHans, + 'zh-Hant': zhHant +} diff --git a/components/z-paging/components/z-paging/i18n/zh-Hans.json b/components/z-paging/components/z-paging/i18n/zh-Hans.json new file mode 100644 index 0000000..65a71d9 --- /dev/null +++ b/components/z-paging/components/z-paging/i18n/zh-Hans.json @@ -0,0 +1,23 @@ +{ + "zp.refresher.default": "继续下拉刷新", + "zp.refresher.pulling": "松开立即刷新", + "zp.refresher.refreshing": "正在刷新...", + "zp.refresher.complete": "刷新成功", + "zp.refresher.f2": "松手进入二楼", + + "zp.loadingMore.default": "点击加载更多", + "zp.loadingMore.loading": "正在加载...", + "zp.loadingMore.noMore": "没有更多了", + "zp.loadingMore.fail": "加载失败，点击重新加载", + + "zp.emptyView.title": "没有数据哦~", + "zp.emptyView.reload": "重新加载", + "zp.emptyView.error": "很抱歉，加载失败", + + "zp.refresherUpdateTime.title": "最后更新：", + "zp.refresherUpdateTime.none": "无", + "zp.refresherUpdateTime.today": "今天", + "zp.refresherUpdateTime.yesterday": "昨天", + + "zp.systemLoading.title": "加载中..." +} diff --git a/components/z-paging/components/z-paging/i18n/zh-Hant.json b/components/z-paging/components/z-paging/i18n/zh-Hant.json new file mode 100644 index 0000000..c8adca9 --- /dev/null +++ b/components/z-paging/components/z-paging/i18n/zh-Hant.json @@ -0,0 +1,23 @@ +{ + "zp.refresher.default": "繼續下拉重繪", + "zp.refresher.pulling": "鬆開立即重繪", + "zp.refresher.refreshing": "正在重繪...", + "zp.refresher.complete": "重繪成功", + "zp.refresher.f2": "鬆手進入二樓", + + "zp.loadingMore.default": "點擊加載更多", + "zp.loadingMore.loading": "正在加載...", + "zp.loadingMore.noMore": "沒有更多了", + "zp.loadingMore.fail": "加載失敗，點擊重新加載", + + "zp.emptyView.title": "沒有數據哦~", + "zp.emptyView.reload": "重新加載", + "zp.emptyView.error": "很抱歉，加載失敗", + + "zp.refresherUpdateTime.title": "最後更新：", + "zp.refresherUpdateTime.none": "無", + "zp.refresherUpdateTime.today": "今天", + "zp.refresherUpdateTime.yesterday": "昨天", + + "zp.systemLoading.title": "加載中..." +} diff --git a/components/z-paging/components/z-paging/js/hooks/useZPaging.js b/components/z-paging/components/z-paging/js/hooks/useZPaging.js new file mode 100644 index 0000000..46f799e --- /dev/null +++ b/components/z-paging/components/z-paging/js/hooks/useZPaging.js @@ -0,0 +1,25 @@ +// [z-paging]useZPaging hooks + +import { onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'; + +function useZPaging(paging) { + const cPaging = !!paging ? paging.value || paging : null; + + onPullDownRefresh(() => { + if (!cPaging || !cPaging.value) return; + cPaging.value.reload().catch(() => {}); + }) + + onPageScroll(e => { + if (!cPaging || !cPaging.value) return; + cPaging.value.updatePageScrollTop(e.scrollTop); + e.scrollTop < 10 && cPaging.value.doChatRecordLoadMore(); + }) + + onReachBottom(() => { + if (!cPaging || !cPaging.value) return; + cPaging.value.pageReachBottom(); + }) +} + +export default useZPaging \ No newline at end of file diff --git a/components/z-paging/components/z-paging/js/hooks/useZPagingComp.js b/components/z-paging/components/z-paging/js/hooks/useZPagingComp.js new file mode 100644 index 0000000..f281bc2 --- /dev/null +++ b/components/z-paging/components/z-paging/js/hooks/useZPagingComp.js @@ -0,0 +1,25 @@ +// [z-paging]useZPagingComp hooks + +function useZPagingComp(paging) { + const cPaging = !!paging ? paging.value || paging : null; + + const reload = () => { + if (!cPaging || !cPaging.value) return; + cPaging.value.reload().catch(() => {}); + } + const updatePageScrollTop = scrollTop => { + if (!cPaging || !cPaging.value) return; + cPaging.value.updatePageScrollTop(scrollTop); + } + const doChatRecordLoadMore = () => { + if (!cPaging || !cPaging.value) return; + cPaging.value.doChatRecordLoadMore(); + } + const pageReachBottom = () => { + if (!cPaging || !cPaging.value) return; + cPaging.value.pageReachBottom(); + } + return { reload, updatePageScrollTop, doChatRecordLoadMore, pageReachBottom }; +} + +export default useZPagingComp \ No newline at end of file diff --git a/components/z-paging/components/z-paging/js/modules/back-to-top.js b/components/z-paging/components/z-paging/js/modules/back-to-top.js new file mode 100644 index 0000000..3f6f597 --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/back-to-top.js @@ -0,0 +1,125 @@ +// [z-paging]点击返回顶部view模块 +import u from '.././z-paging-utils' + +export default { + props: { + // 自动显示点击返回顶部按钮，默认为否 + autoShowBackToTop: { + type: Boolean, + default: u.gc('autoShowBackToTop', false) + }, + // 点击返回顶部按钮显示/隐藏的阈值(滚动距离)，单位为px，默认为400rpx + backToTopThreshold: { + type: [Number, String], + default: u.gc('backToTopThreshold', '400rpx') + }, + // 点击返回顶部按钮的自定义图片地址，默认使用z-paging内置的图片 + backToTopImg: { + type: String, + default: u.gc('backToTopImg', '') + }, + // 点击返回顶部按钮返回到顶部时是否展示过渡动画，默认为是 + backToTopWithAnimate: { + type: Boolean, + default: u.gc('backToTopWithAnimate', true) + }, + // 点击返回顶部按钮与底部的距离，注意添加单位px或rpx，默认为160rpx + backToTopBottom: { + type: [Number, String], + default: u.gc('backToTopBottom', '160rpx') + }, + // 点击返回顶部按钮的自定义样式 + backToTopStyle: { + type: Object, + default: u.gc('backToTopStyle', {}), + }, + // iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向，默认为是 + enableBackToTop: { + type: Boolean, + default: u.gc('enableBackToTop', true) + }, + }, + data() { + return { + // 点击返回顶部的class + backToTopClass: 'zp-back-to-top zp-back-to-top-hide', + // 上次点击返回顶部的时间 + lastBackToTopShowTime: 0, + // 点击返回顶部显示的class是否在展示中，使得按钮展示/隐藏过度效果更自然 + showBackToTopClass: false, + } + }, + computed: { + backToTopThresholdUnitConverted() { + return u.addUnit(this.backToTopThreshold, this.unit); + }, + backToTopBottomUnitConverted() { + return u.addUnit(this.backToTopBottom, this.unit); + }, + finalEnableBackToTop() { + return this.usePageScroll ? false : this.enableBackToTop; + }, + finalBackToTopThreshold() { + return u.convertToPx(this.backToTopThresholdUnitConverted); + }, + finalBackToTopStyle() { + const backToTopStyle = this.backToTopStyle; + if (!backToTopStyle.bottom) { + backToTopStyle.bottom = this.windowBottom + u.convertToPx(this.backToTopBottomUnitConverted) + 'px'; + } + if(!backToTopStyle.position){ + backToTopStyle.position = this.usePageScroll ? 'fixed': 'absolute'; + } + return backToTopStyle; + }, + finalBackToTopClass() { + return `${this.backToTopClass} zp-back-to-top-${this.unit}`; + } + }, + methods: { + // 点击了返回顶部 + _backToTopClick() { + let callbacked = false; + this.$emit('backToTopClick', toTop => { + (toTop === undefined || toTop === true) && this._handleToTop(); + callbacked = true; + }); + // 如果用户没有禁止默认的返回顶部事件，则触发滚动到顶部 + this.$nextTick(() => { + !callbacked && this._handleToTop(); + }) + }, + // 处理滚动到顶部（聊天记录模式中为滚动到底部） + _handleToTop() { + !this.backToTopWithAnimate && this._checkShouldShowBackToTop(0); + !this.useChatRecordMode ? this.scrollToTop(this.backToTopWithAnimate) : this.scrollToBottom(this.backToTopWithAnimate); + }, + // 判断是否要显示返回顶部按钮 + _checkShouldShowBackToTop(scrollTop) { + if (!this.autoShowBackToTop) { + this.showBackToTopClass = false; + return; + } + if (scrollTop > this.finalBackToTopThreshold) { + if (!this.showBackToTopClass) { + // 记录当前点击返回顶部按钮显示的class生效了 + this.showBackToTopClass = true; + this.lastBackToTopShowTime = new Date().getTime(); + // 当滚动到需要展示返回顶部的阈值内，则延迟300毫秒展示返回到顶部按钮 + u.delay(() => { + this.backToTopClass = 'zp-back-to-top zp-back-to-top-show'; + }, 300) + } + } else { + // 如果当前点击返回顶部按钮显示的class是生效状态并且滚动小于触发阈值，则隐藏返回顶部按钮 + if (this.showBackToTopClass) { + this.backToTopClass = 'zp-back-to-top zp-back-to-top-hide'; + u.delay(() => { + this.showBackToTopClass = false; + }, new Date().getTime() - this.lastBackToTopShowTime < 500 ? 0 : 300) + } + } + }, + } +} + diff --git a/components/z-paging/components/z-paging/js/modules/chat-record-mode.js b/components/z-paging/components/z-paging/js/modules/chat-record-mode.js new file mode 100644 index 0000000..261daad --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/chat-record-mode.js @@ -0,0 +1,149 @@ +// [z-paging]聊天记录模式模块 +import u from '.././z-paging-utils' + +export default { + props: { + // 使用聊天记录模式，默认为否 + useChatRecordMode: { + type: Boolean, + default: u.gc('useChatRecordMode', false) + }, + // 使用聊天记录模式时滚动到顶部后，列表垂直移动偏移距离。默认0rpx。单位px（暂时无效） + chatRecordMoreOffset: { + type: [Number, String], + default: u.gc('chatRecordMoreOffset', '0rpx') + }, + // 使用聊天记录模式时是否自动隐藏键盘：在用户触摸列表时候自动隐藏键盘，默认为是 + autoHideKeyboardWhenChat: { + type: Boolean, + default: u.gc('autoHideKeyboardWhenChat', true) + }, + // 使用聊天记录模式中键盘弹出时是否自动调整slot="bottom"高度，默认为是 + autoAdjustPositionWhenChat: { + type: Boolean, + default: u.gc('autoAdjustPositionWhenChat', true) + }, + // 使用聊天记录模式中键盘弹出时占位高度偏移距离。默认0rpx。单位px + chatAdjustPositionOffset: { + type: [Number, String], + default: u.gc('chatAdjustPositionOffset', '0rpx') + }, + // 使用聊天记录模式中键盘弹出时是否自动滚动到底部，默认为否 + autoToBottomWhenChat: { + type: Boolean, + default: u.gc('autoToBottomWhenChat', false) + }, + // 使用聊天记录模式中reload时是否显示chatLoading，默认为否 + showChatLoadingWhenReload: { + type: Boolean, + default: u.gc('showChatLoadingWhenReload', false) + }, + // 在聊天记录模式中滑动到顶部状态为默认状态时，以加载中的状态展示，默认为是。若设置为否，则默认会显示【点击加载更多】，然后才会显示loading + chatLoadingMoreDefaultAsLoading: { + type: Boolean, + default: u.gc('chatLoadingMoreDefaultAsLoading', true) + }, + }, + data() { + return { + // 键盘高度 + keyboardHeight: 0, + // 键盘高度是否未改变，此时占位高度变化不需要动画效果 + isKeyboardHeightChanged: false, + } + }, + computed: { + finalChatRecordMoreOffset() { + return u.convertToPx(this.chatRecordMoreOffset); + }, + finalChatAdjustPositionOffset() { + return u.convertToPx(this.chatAdjustPositionOffset); + }, + // 聊天记录模式旋转180度style + chatRecordRotateStyle() { + let cellStyle; + // 在vue中，直接将列表倒置，因此在vue的cell中，也直接写style="transform: scaleY(-1)"转回来即可。 + // #ifndef APP-NVUE + cellStyle = this.useChatRecordMode ? { transform: 'scaleY(-1)' } : {}; + // #endif + + // 在nvue中，需要考虑数据量不满一页的情况，因为nvue中的list无法通过flex-end修改不满一页的起始位置，会导致不满一页时列表数据从底部开始，因此需要特别判断 + // 当数据不满一屏的时候，不进行列表倒置 + // #ifdef APP-NVUE + cellStyle = this.useChatRecordMode ? { transform: this.isFirstPageAndNoMore ? 'scaleY(1)' : 'scaleY(-1)' } : {}; + // #endif + + this.$emit('update:cellStyle', cellStyle); + this.$emit('cellStyleChange', cellStyle); + + // 在聊天记录模式中，如果列表没有倒置并且当前是第一页，则需要自动滚动到最底部 + this.$nextTick(() => { + if (this.isFirstPage && this.isChatRecordModeAndNotInversion) { + this.$nextTick(() => { + // 这里多次触发滚动到底部是为了避免在某些情况下，即使是在nextTick但是cell未渲染完毕导致滚动到底部位置不正确的问题 + this._scrollToBottom(false); + u.delay(() => { + this._scrollToBottom(false); + u.delay(() => { + this._scrollToBottom(false); + }, 50) + }, 50) + }) + } + }) + return cellStyle; + }, + // 是否是聊天记录列表并且有配置transform + isChatRecordModeHasTransform() { + return this.useChatRecordMode && this.chatRecordRotateStyle && this.chatRecordRotateStyle.transform; + }, + // 是否是聊天记录列表并且列表未倒置 + isChatRecordModeAndNotInversion() { + return this.isChatRecordModeHasTransform && this.chatRecordRotateStyle.transform === 'scaleY(1)'; + }, + // 是否是聊天记录列表并且列表倒置 + isChatRecordModeAndInversion() { + return this.isChatRecordModeHasTransform && this.chatRecordRotateStyle.transform === 'scaleY(-1)'; + }, + // 最终的聊天记录模式中底部安全区域的高度，如果开启了底部安全区域并且键盘未弹出，则添加底部区域高度 + chatRecordModeSafeAreaBottom() { + return this.safeAreaInsetBottom && !this.keyboardHeight ? this.safeAreaBottom : 0; + } + }, + mounted() { + // 监听键盘高度变化（H5、百度小程序、抖音小程序、飞书小程序不支持） + // #ifndef H5 || MP-BAIDU || MP-TOUTIAO + if (this.useChatRecordMode) { + uni.onKeyboardHeightChange(this._handleKeyboardHeightChange); + } + // #endif + }, + methods: { + // 添加聊天记录 + addChatRecordData(data, toBottom = true, toBottomWithAnimate = true) { + if (!this.useChatRecordMode) return; + this.isTotalChangeFromAddData = true; + this.addDataFromTop(data, toBottom, toBottomWithAnimate); + }, + // 手动触发滚动到顶部加载更多，聊天记录模式时有效 + doChatRecordLoadMore() { + this.useChatRecordMode && this._onLoadingMore('click'); + }, + // 处理键盘高度变化 + _handleKeyboardHeightChange(res) { + this.$emit('keyboardHeightChange', res); + if (this.autoAdjustPositionWhenChat) { + this.isKeyboardHeightChanged = true; + this.keyboardHeight = res.height > 0 ? res.height + this.finalChatAdjustPositionOffset : res.height; + } + if (this.autoToBottomWhenChat && this.keyboardHeight > 0) { + u.delay(() => { + this.scrollToBottom(false); + u.delay(() => { + this.scrollToBottom(false); + }) + }) + } + } + } +} diff --git a/components/z-paging/components/z-paging/js/modules/common-layout.js b/components/z-paging/components/z-paging/js/modules/common-layout.js new file mode 100644 index 0000000..43306a4 --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/common-layout.js @@ -0,0 +1,152 @@ +// [z-paging]通用布局相关模块 +import u from '.././z-paging-utils' + +// #ifdef APP-NVUE +const weexDom = weex.requireModule('dom'); +// #endif + +export default { + data() { + return { + systemInfo: null, + cssSafeAreaInsetBottom: -1, + isReadyDestroy: false, + } + }, + computed: { + // 顶部可用距离 + windowTop() { + if (!this.systemInfo) return 0; + // 暂时修复vue3中隐藏系统导航栏后windowTop获取不正确的问题，具体bug详见https://ask.dcloud.net.cn/question/141634 + // 感谢litangyu！！https://github.com/SmileZXLee/uni-z-paging/issues/25 + // #ifdef VUE3 && H5 + const pageHeadNode = document.getElementsByTagName("uni-page-head"); + if (!pageHeadNode.length) return 0; + // #endif + return this.systemInfo.windowTop || 0; + }, + // 底部安全区域高度 + safeAreaBottom() { + if (!this.systemInfo) return 0; + let safeAreaBottom = 0; + // #ifdef APP-PLUS + safeAreaBottom = this.systemInfo.safeAreaInsets.bottom || 0 ; + // #endif + // #ifndef APP-PLUS + safeAreaBottom = Math.max(this.cssSafeAreaInsetBottom, 0); + // #endif + return safeAreaBottom; + }, + // 是否是比较老的webview，在一些老的webview中，需要进行一些特殊处理 + isOldWebView() { + // #ifndef APP-NVUE || MP-KUAISHOU + try { + const systemInfos = u.getSystemInfoSync(true).system.split(' '); + const deviceType = systemInfos[0]; + const version = parseInt(systemInfos[1]); + if ((deviceType === 'iOS' && version <= 10) || (deviceType === 'Android' && version <= 6)) { + return true; + } + } catch(e) { + return false; + } + // #endif + return false; + }, + // 当前组件的$slots，兼容不同平台 + zSlots() { + // #ifdef VUE2 + + // #ifdef MP-ALIPAY + return this.$slots; + // #endif + + return this.$scopedSlots || this.$slots; + // #endif + + return this.$slots; + }, + }, + beforeDestroy() { + this.isReadyDestroy = true; + }, + // #ifdef VUE3 + unmounted() { + this.isReadyDestroy = true; + }, + // #endif + methods: { + // 更新fixed模式下z-paging的布局 + updateFixedLayout() { + this.fixed && this.$nextTick(() => { + this.systemInfo = u.getSystemInfoSync(); + }) + }, + // 获取节点尺寸 + _getNodeClientRect(select, inDom = true, scrollOffset = false) { + if (this.isReadyDestroy) { + return Promise.resolve(false); + }; + // nvue中获取节点信息 + // #ifdef APP-NVUE + select = select.replace(/[.|#]/g, ''); + const ref = this.$refs[select]; + return new Promise((resolve, reject) => { + if (ref) { + weexDom.getComponentRect(ref, option => { + resolve(option && option.result ? [option.size] : false); + }) + } else { + resolve(false); + } + }); + return; + // #endif + + // vue中获取节点信息 + //#ifdef MP-ALIPAY + inDom = false; + //#endif + + /* + inDom可能是true、false，也可能是具体的dom节点 + 如果inDom不为false，则使用uni.createSelectorQuery().in()进行查询，如果inDom为true，则in中的是this，否则in中的为具体的dom + 如果inDom为false，则使用uni.createSelectorQuery()进行查询 + */ + let res = !!inDom ? uni.createSelectorQuery().in(inDom === true ? this : inDom) : uni.createSelectorQuery(); + scrollOffset ? res.select(select).scrollOffset() : res.select(select).boundingClientRect(); + return new Promise((resolve, reject) => { + res.exec(data => { + resolve((data && data != '' && data != undefined && data.length) ? data : false); + }); + }); + }, + // 获取slot="left"和slot="right"宽度并且更新布局 + _updateLeftAndRightWidth(targetStyle, parentNodePrefix) { + this.$nextTick(() => { + let delayTime = 0; + // #ifdef MP-BAIDU + delayTime = 10; + // #endif + setTimeout(() => { + ['left','right'].map(position => { + this._getNodeClientRect(`.${parentNodePrefix}-${position}`).then(res => { + this.$set(targetStyle, position, res ? res[0].width + 'px' : '0px'); + }); + }) + }, delayTime) + }) + }, + // 通过获取css设置的底部安全区域占位view高度设置bottom距离（直接通过systemInfo在部分平台上无法获取到底部安全区域） + _getCssSafeAreaInsetBottom(success) { + this._getNodeClientRect('.zp-safe-area-inset-bottom').then(res => { + this.cssSafeAreaInsetBottom = res ? res[0].height : -1; + res && success && success(); + }); + }, + // 同步获取系统信息，兼容不同平台（供z-paging-swiper使用） + _getSystemInfoSync(useCache = false) { + return u.getSystemInfoSync(useCache); + } + } +} diff --git a/components/z-paging/components/z-paging/js/modules/data-handle.js b/components/z-paging/components/z-paging/js/modules/data-handle.js new file mode 100644 index 0000000..877537f --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/data-handle.js @@ -0,0 +1,736 @@ +// [z-paging]数据处理模块 +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import Enum from '.././z-paging-enum' +import interceptor from '../z-paging-interceptor' + +export default { + props: { + // 自定义初始的pageNo，默认为1 + defaultPageNo: { + type: Number, + default: u.gc('defaultPageNo', 1), + observer: function(newVal) { + this.pageNo = newVal; + }, + }, + // 自定义pageSize，默认为10 + defaultPageSize: { + type: Number, + default: u.gc('defaultPageSize', 10), + validator: (value) => { + if (value <= 0) u.consoleErr('default-page-size必须大于0！'); + return value > 0; + } + }, + // 为保证数据一致，设置当前tab切换时的标识key，并在complete中传递相同key，若二者不一致，则complete将不会生效 + dataKey: { + type: [Number, String, Object], + default: u.gc('dataKey', null), + }, + // 使用缓存，若开启将自动缓存第一页的数据，默认为否。请注意，因考虑到切换tab时不同tab数据不同的情况，默认仅会缓存组件首次加载时第一次请求到的数据，后续的下拉刷新操作不会更新缓存。 + useCache: { + type: Boolean, + default: u.gc('useCache', false) + }, + // 使用缓存时缓存的key，用于区分不同列表的缓存数据，useCache为true时必须设置，否则缓存无效 + cacheKey: { + type: String, + default: u.gc('cacheKey', null) + }, + // 缓存模式，默认仅会缓存组件首次加载时第一次请求到的数据，可设置为always，即代表总是缓存，每次列表刷新(下拉刷新、调用reload等)都会更新缓存 + cacheMode: { + type: String, + default: u.gc('cacheMode', Enum.CacheMode.Default) + }, + // 自动注入的list名，可自动修改父view(包含ref="paging")中对应name的list值 + autowireListName: { + type: String, + default: u.gc('autowireListName', '') + }, + // 自动注入的query名，可自动调用父view(包含ref="paging")中的query方法 + autowireQueryName: { + type: String, + default: u.gc('autowireQueryName', '') + }, + // 获取分页数据Function，功能与@query类似。若设置了fetch则@query将不再触发 + fetch: { + type: Function, + default: null + }, + // fetch的附加参数，fetch配置后有效 + fetchParams: { + type: Object, + default: u.gc('fetchParams', null) + }, + // z-paging mounted后自动调用reload方法(mounted后自动调用接口)，默认为是 + auto: { + type: Boolean, + default: u.gc('auto', true) + }, + // 用户下拉刷新时是否触发reload方法，默认为是 + reloadWhenRefresh: { + type: Boolean, + default: u.gc('reloadWhenRefresh', true) + }, + // reload时自动滚动到顶部，默认为是 + autoScrollToTopWhenReload: { + type: Boolean, + default: u.gc('autoScrollToTopWhenReload', true) + }, + // reload时立即自动清空原list，默认为是，若立即自动清空，则在reload之后、请求回调之前页面是空白的 + autoCleanListWhenReload: { + type: Boolean, + default: u.gc('autoCleanListWhenReload', true) + }, + // 列表刷新时自动显示下拉刷新view，默认为否 + showRefresherWhenReload: { + type: Boolean, + default: u.gc('showRefresherWhenReload', false) + }, + // 列表刷新时自动显示加载更多view，且为加载中状态，默认为否 + showLoadingMoreWhenReload: { + type: Boolean, + default: u.gc('showLoadingMoreWhenReload', false) + }, + // 组件created时立即触发reload(可解决一些情况下先看到页面再看到loading的问题)，auto为true时有效。为否时将在mounted+nextTick后触发reload，默认为否 + createdReload: { + type: Boolean, + default: u.gc('createdReload', false) + }, + // 本地分页时上拉加载更多延迟时间，单位为毫秒，默认200毫秒 + localPagingLoadingTime: { + type: [Number, String], + default: u.gc('localPagingLoadingTime', 200) + }, + // 自动拼接complete中传过来的数组(使用聊天记录模式时无效) + concat: { + type: Boolean, + default: u.gc('concat', true) + }, + // 请求失败是否触发reject，默认为是 + callNetworkReject: { + type: Boolean, + default: u.gc('callNetworkReject', true) + }, + // 父组件v-model所绑定的list的值 + value: { + type: Array, + default: function() { + return []; + } + }, + // #ifdef VUE3 + modelValue: { + type: Array, + default: function() { + return []; + } + } + // #endif + }, + data (){ + return { + currentData: [], + totalData: [], + realTotalData: [], + totalLocalPagingList: [], + dataPromiseResultMap: { + reload: null, + complete: null, + localPaging: null + }, + isSettingCacheList: false, + pageNo: 1, + currentRefreshPageSize: 0, + isLocalPaging: false, + isAddedData: false, + isTotalChangeFromAddData: false, + privateConcat: true, + myParentQuery: -1, + firstPageLoaded: false, + pagingLoaded: false, + loaded: false, + isUserReload: true, + fromEmptyViewReload: false, + queryFrom: '', + listRendering: false, + isHandlingRefreshToPage: false, + isFirstPageAndNoMore: false, + totalDataChangeThrow: true + } + }, + computed: { + pageSize() { + return this.defaultPageSize; + }, + finalConcat() { + return this.concat && this.privateConcat; + }, + finalUseCache() { + if (this.useCache && !this.cacheKey) { + u.consoleErr('use-cache为true时，必须设置cache-key，否则缓存无效！'); + } + return this.useCache && !!this.cacheKey; + }, + finalCacheKey() { + return this.cacheKey ? `${c.cachePrefixKey}-${this.cacheKey}` : null; + }, + isFirstPage() { + return this.pageNo === this.defaultPageNo; + } + }, + watch: { + totalData(newVal, oldVal) { + this._totalDataChange(newVal, oldVal, this.totalDataChangeThrow); + this.totalDataChangeThrow = true; + }, + currentData(newVal, oldVal) { + this._currentDataChange(newVal, oldVal); + }, + useChatRecordMode(newVal, oldVal) { + if (newVal) { + this.nLoadingMoreFixedHeight = false; + } + }, + value: { + handler(newVal) { + // 当v-model绑定的数据源被更改时，此时数据源改变不emit input事件，避免循环调用 + if (newVal !== this.totalData) { + this.totalDataChangeThrow = false; + this.totalData = newVal; + } + }, + immediate: true + }, + // #ifdef VUE3 + modelValue: { + handler(newVal) { + // 当v-model绑定的数据源被更改时，此时数据源改变不emit input事件，避免循环调用 + if (newVal !== this.totalData) { + this.totalDataChangeThrow = false; + this.totalData = newVal; + } + }, + immediate: true + } + // #endif + }, + methods: { + // 请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging处理，第一个参数为请求结果数组，第二个参数为是否成功(默认为是） + complete(data, success = true) { + this.customNoMore = -1; + return this.addData(data, success); + }, + //【保证数据一致】请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging处理，第一个参数为请求结果数组，第二个参数为dataKey，需与:data-key绑定的一致，第三个参数为是否成功(默认为是） + completeByKey(data, dataKey = null, success = true) { + if (dataKey !== null && this.dataKey !== null && dataKey !== this.dataKey) { + this.isFirstPage && this.endRefresh(); + return new Promise(resolve => resolve()); + } + this.customNoMore = -1; + return this.addData(data, success); + }, + //【通过total判断是否有更多数据】请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging处理，第一个参数为请求结果数组，第二个参数为total(列表总数)，第三个参数为是否成功(默认为是） + completeByTotal(data, total, success = true) { + if (total == 'undefined') { + this.customNoMore = -1; + } else { + const dataTypeRes = this._checkDataType(data, success, false); + data = dataTypeRes.data; + success = dataTypeRes.success; + if (total >= 0 && success) { + return new Promise((resolve, reject) => { + this.$nextTick(() => { + let nomore = false; + const realTotalDataCount = this.pageNo == this.defaultPageNo ? 0 : this.realTotalData.length; + const dataLength = this.privateConcat ? data.length : 0; + let exceedCount = realTotalDataCount + dataLength - total; + // 没有更多数据了 + if (exceedCount >= 0) { + nomore = true; + // 仅截取total内部分的数据 + exceedCount = this.defaultPageSize - exceedCount; + if (this.privateConcat && exceedCount > 0 && exceedCount < data.length) { + data = data.splice(0, exceedCount); + } + } + this.completeByNoMore(data, nomore, success).then(res => resolve(res)).catch(() => reject()); + }) + }); + } + } + return this.addData(data, success); + }, + //【自行判断是否有更多数据】请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging处理，第一个参数为请求结果数组，第二个参数为是否没有更多数据，第三个参数为是否成功(默认是是） + completeByNoMore(data, nomore, success = true) { + if (nomore != 'undefined') { + this.customNoMore = nomore == true ? 1 : 0; + } + return this.addData(data, success); + }, + // 请求结束且请求失败时调用，支持传入请求失败原因 + completeByError(errorMsg) { + this.customerEmptyViewErrorText = errorMsg; + return this.complete(false); + }, + // 与上方complete方法功能一致，新版本中设置服务端回调数组请使用complete方法 + addData(data, success = true) { + if (!this.fromCompleteEmit) { + this.disabledCompleteEmit = true; + this.fromCompleteEmit = false; + } + const currentTimeStamp = u.getTime(); + const disTime = currentTimeStamp - this.requestTimeStamp; + let minDelay = this.minDelay; + if (this.isFirstPage && this.finalShowRefresherWhenReload) { + minDelay = Math.max(400, minDelay); + } + const addDataDalay = (this.requestTimeStamp > 0 && disTime < minDelay) ? minDelay - disTime : 0; + this.$nextTick(() => { + u.delay(() => { + this._addData(data, success, false); + }, this.delay > 0 ? this.delay : addDataDalay) + }) + + return new Promise((resolve, reject) => { + this.dataPromiseResultMap.complete = { resolve, reject }; + }); + }, + // 从顶部添加数据，不会影响分页的pageNo和pageSize + addDataFromTop(data, toTop = true, toTopWithAnimate = true) { + // 数据是否拼接到顶部，如果是聊天记录模式并且列表没有倒置，则应该拼接在底部 + let addFromTop = !this.isChatRecordModeAndNotInversion; + data = Object.prototype.toString.call(data) !== '[object Array]' ? [data] : (addFromTop ? data.reverse() : data); + // #ifndef APP-NVUE + this.finalUseVirtualList && this._setCellIndex(data, 'top') + // #endif + + this.totalData = addFromTop ? [...data, ...this.totalData] : [...this.totalData, ...data]; + if (toTop) { + u.delay(() => this.useChatRecordMode ? this.scrollToBottom(toTopWithAnimate) : this.scrollToTop(toTopWithAnimate)); + } + }, + // 重新设置列表数据，调用此方法不会影响pageNo和pageSize，也不会触发请求。适用场景：当需要删除列表中某一项时，将删除对应项后的数组通过此方法传递给z-paging。(当出现类似的需要修改列表数组的场景时，请使用此方法，请勿直接修改page中:list.sync绑定的数组) + resetTotalData(data) { + this.isTotalChangeFromAddData = true; + data = Object.prototype.toString.call(data) !== '[object Array]' ? [data] : data; + this.totalData = data; + }, + // 设置本地分页数据，请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging作分页处理（若调用了此方法，则上拉加载更多时内部会自动分页，不会触发@query所绑定的事件） + setLocalPaging(data, success = true) { + this.isLocalPaging = true; + this.$nextTick(() => { + this._addData(data, success, true); + }) + return new Promise((resolve, reject) => { + this.dataPromiseResultMap.localPaging = { resolve, reject }; + }); + }, + // 重新加载分页数据，pageNo会恢复为默认值，相当于下拉刷新的效果(animate为true时会展示下拉刷新动画，默认为false) + reload(animate = this.showRefresherWhenReload) { + if (animate) { + this.privateShowRefresherWhenReload = animate; + this.isUserPullDown = true; + } + if (!this.showLoadingMoreWhenReload) { + this.listRendering = true; + } + this.$nextTick(() => { + this._preReload(animate, false); + }) + return new Promise((resolve, reject) => { + this.dataPromiseResultMap.reload = { resolve, reject }; + }); + }, + // 刷新列表数据，pageNo和pageSize不会重置，列表数据会重新从服务端获取。必须保证@query绑定的方法中的pageNo和pageSize和传给服务端的一致 + refresh() { + return this._handleRefreshWithDisPageNo(this.pageNo - this.defaultPageNo + 1); + }, + // 刷新列表数据至指定页，例如pageNo=5时则代表刷新列表至第5页，此时pageNo会变为5，列表会展示前5页的数据。必须保证@query绑定的方法中的pageNo和pageSize和传给服务端的一致 + refreshToPage(pageNo) { + this.isHandlingRefreshToPage = true; + return this._handleRefreshWithDisPageNo(pageNo + this.defaultPageNo - 1); + }, + // 手动更新列表缓存数据，将自动截取v-model绑定的list中的前pageSize条覆盖缓存，请确保在list数据更新到预期结果后再调用此方法 + updateCache() { + if (this.finalUseCache && this.totalData.length) { + this._saveLocalCache(this.totalData.slice(0, Math.min(this.totalData.length, this.pageSize))); + } + }, + // 清空分页数据 + clean() { + this._reload(true); + this._addData([], true, false); + }, + // 清空分页数据 + clear() { + this.clean(); + }, + // reload之前的一些处理 + _preReload(animate = this.showRefresherWhenReload, isFromMounted = true, retryCount = 0) { + const showRefresher = this.finalRefresherEnabled && this.useCustomRefresher; + // #ifndef APP-NVUE + // 如果获取slot="refresher"高度失败，则不触发reload，直到获取slot="refresher"高度成功 + if (this.customRefresherHeight === -1 && showRefresher) { + u.delay(() => { + retryCount ++; + // 如果重试次数是10的倍数(也就是每500毫秒)，尝试重新获取一下slot="refresher"高度 + // 此举是为了解决在某些特殊情况下，z-paging组件mounted了，但是未展示在用户面前，（比如在tabbar页面中，未切换到对应tabbar但是通过代码让z-paging展示了，此时控制台会报Error: Not Found：Page，因为这时候去获取dom节点信息获取不到） + // 当用户在某个时刻让此z-paging展示在面前时，即可顺利获取到slot="refresher"高度，递归停止 + if (retryCount % 10 === 0) { + this._updateCustomRefresherHeight(); + } + this._preReload(animate, isFromMounted, retryCount); + }, c.delayTime / 2); + return; + } + // #endif + this.isUserReload = true; + this.loadingType = Enum.LoadingType.Refresher; + if (animate) { + this.privateShowRefresherWhenReload = animate; + // #ifndef APP-NVUE + if (this.useCustomRefresher) { + this._doRefresherRefreshAnimate(); + } else { + this.refresherTriggered = true; + } + // #endif + // #ifdef APP-NVUE + this.refresherStatus = Enum.Refresher.Loading; + this.refresherRevealStackCount ++; + u.delay(() => { + this._getNodeClientRect('zp-n-refresh-container', false).then((node) => { + if (node) { + let nodeHeight = node[0].height; + this.nShowRefresherReveal = true; + this.nShowRefresherRevealHeight = nodeHeight; + u.delay(() => { + this._nDoRefresherEndAnimation(0, -nodeHeight, false, false); + u.delay(() => { + this._nDoRefresherEndAnimation(nodeHeight, 0); + }, 10) + }, 10) + } + this._reload(false, isFromMounted); + this._doRefresherLoad(false); + }); + }, this.pagingLoaded ? 10 : 100) + return; + // #endif + } else { + this._refresherEnd(false, false, false, false); + } + this._reload(false, isFromMounted); + }, + // 重新加载分页数据 + _reload(isClean = false, isFromMounted = false, isUserPullDown = false) { + this.isAddedData = false; + this.insideOfPaging = -1; + this.cacheScrollNodeHeight = -1; + this.pageNo = this.defaultPageNo; + this._cleanRefresherEndTimeout(); + !this.privateShowRefresherWhenReload && !isClean && this._startLoading(true); + this.firstPageLoaded = true; + this.isTotalChangeFromAddData = false; + if (!this.isSettingCacheList) { + this.totalData = []; + } + if (!isClean) { + this._emitQuery(this.pageNo, this.defaultPageSize, isUserPullDown ? Enum.QueryFrom.UserPullDown : Enum.QueryFrom.Reload); + let delay = 0; + // #ifdef MP-TOUTIAO + delay = 5; + // #endif + u.delay(this._callMyParentQuery, delay); + if (!isFromMounted && this.autoScrollToTopWhenReload) { + let checkedNRefresherLoading = true; + // #ifdef APP-NVUE + checkedNRefresherLoading = !this.nRefresherLoading; + // #endif + checkedNRefresherLoading && this._scrollToTop(false); + } + } + // #ifdef APP-NVUE + this.$nextTick(() => { + this.nShowBottom = this.realTotalData.length > 0; + }) + // #endif + }, + // 处理服务端返回的数组 + _addData(data, success, isLocal) { + this.isAddedData = true; + this.fromEmptyViewReload = false; + this.isTotalChangeFromAddData = true; + this.refresherTriggered = false; + this._endSystemLoadingAndRefresh(); + const tempIsUserPullDown = this.isUserPullDown; + if (this.showRefresherUpdateTime && this.isFirstPage) { + u.setRefesrherTime(u.getTime(), this.refresherUpdateTimeKey); + this.$refs.refresh && this.$refs.refresh.updateTime(); + } + if (!isLocal && tempIsUserPullDown && this.isFirstPage) { + this.isUserPullDown = false; + } + this.listRendering = true; + this.$nextTick(() => { + u.delay(() => this.listRendering = false); + }) + let dataTypeRes = this._checkDataType(data, success, isLocal); + data = dataTypeRes.data; + success = dataTypeRes.success; + let delayTime = c.delayTime; + if (this.useChatRecordMode) delayTime = 0; + this.loadingForNow = false; + u.delay(() => { + this.pagingLoaded = true; + this.$nextTick(()=>{ + !isLocal && this._refresherEnd(delayTime > 0, true, tempIsUserPullDown); + }) + }) + if (this.isFirstPage) { + this.isLoadFailed = !success; + this.$emit('isLoadFailedChange', this.isLoadFailed); + if (this.finalUseCache && success && (this.cacheMode === Enum.CacheMode.Always ? true : this.isSettingCacheList)) { + this._saveLocalCache(data); + } + } + this.isSettingCacheList = false; + if (success) { + if (!(this.privateConcat === false && !this.isHandlingRefreshToPage && this.loadingStatus === Enum.More.NoMore)) { + this.loadingStatus = Enum.More.Default; + } + if (isLocal) { + // 如果当前是本地分页，则必然是由setLocalPaging方法触发，此时直接本地加载第一页数据即可。后续本地分页加载更多方法由滚动到底部加载更多事件处理 + this.totalLocalPagingList = data; + const localPageNo = this.defaultPageNo; + const localPageSize = this.queryFrom !== Enum.QueryFrom.Refresh ? this.defaultPageSize : this.currentRefreshPageSize; + this._localPagingQueryList(localPageNo, localPageSize, 0, res => { + u.delay(() => { + this.completeByTotal(res, this.totalLocalPagingList.length);; + }, 0) + }) + } else { + // 如果当前不是本地分页，则按照正常分页逻辑进行数据处理&emit数据 + let dataChangeDelayTime = 0; + // #ifdef APP-NVUE + if (this.privateShowRefresherWhenReload && this.finalNvueListIs === 'waterfall') { + dataChangeDelayTime = 150; + } + // #endif + u.delay(() => { + this._currentDataChange(data, this.currentData); + this._callDataPromise(true, this.totalData); + }, dataChangeDelayTime) + } + if (this.isHandlingRefreshToPage) { + this.isHandlingRefreshToPage = false; + this.pageNo = this.defaultPageNo + Math.ceil(data.length / this.pageSize) - 1; + if (data.length % this.pageSize !== 0) { + this.customNoMore = 1; + } + } + } else { + this._currentDataChange(data, this.currentData); + this._callDataPromise(false); + this.loadingStatus = Enum.More.Fail; + this.isHandlingRefreshToPage = false; + if (this.loadingType === Enum.LoadingType.LoadMore) { + this.pageNo --; + } + } + }, + // 所有数据改变时调用 + _totalDataChange(newVal, oldVal, eventThrow=true) { + if ((!this.isUserReload || !this.autoCleanListWhenReload) && this.firstPageLoaded && !newVal.length && oldVal.length) { + return; + } + this._doCheckScrollViewShouldFullHeight(newVal); + if(!this.realTotalData.length && !newVal.length){ + eventThrow = false; + } + this.realTotalData = newVal; + // emit列表更新事件 + if (eventThrow) { + this.$emit('input', newVal); + // #ifdef VUE3 + this.$emit('update:modelValue', newVal); + // #endif + this.$emit('update:list', newVal); + this.$emit('listChange', newVal); + this._callMyParentList(newVal); + } + this.firstPageLoaded = false; + this.isTotalChangeFromAddData = false; + this.$nextTick(() => { + u.delay(()=>{ + // emit z-paging内容区域高度改变事件 + this._getNodeClientRect('.zp-paging-container-content').then(res => { + res && this.$emit('contentHeightChanged', res[0].height); + }); + }, c.delayTime * (this.isIos ? 1 : 3)) + // #ifdef APP-NVUE + // 在nvue中延时600毫秒展示底部加载更多，避免底部加载更多太早加载闪一下的问题 + u.delay(() => { + this.nShowBottom = true; + }, c.delayTime * 6, 'nShowBottomDelay'); + // #endif + }) + }, + // 当前数据改变时调用 + _currentDataChange(newVal, oldVal) { + newVal = [...newVal]; + // #ifndef APP-NVUE + this.finalUseVirtualList && this._setCellIndex(newVal, 'bottom'); + // #endif + if (this.isFirstPage && this.finalConcat) { + this.totalData = []; + } + // customNoMore：-1代表交由z-paging自行判断；1代表没有更多了；0代表还有更多数据 + if (this.customNoMore !== -1) { + // 如果customNoMore等于1 或者 customNoMore不是0并且新增数组长度为0(也就是不是明确的还有更多数据并且新增的数组长度为0)，则没有更多数据了 + if (this.customNoMore === 1 || (this.customNoMore !== 0 && !newVal.length)) { + this.loadingStatus = Enum.More.NoMore; + } + } else { + // 如果新增的数据数组长度为0 或者 新增的数组长度小于默认的pageSize，则没有更多数据了 + if (!newVal.length || (newVal.length && newVal.length < this.defaultPageSize)) { + this.loadingStatus = Enum.More.NoMore; + } + } + if (!this.totalData.length) { + // #ifdef APP-NVUE + // 如果在聊天记录模式+nvue中，并且数据不满一页时需要将列表倒序，因为此时没有将列表旋转180度，数组中第0条数据应当在最底下显示 + if (this.useChatRecordMode && this.finalConcat && this.isFirstPage && this.loadingStatus === Enum.More.NoMore) { + newVal.reverse(); + } + // #endif + this.totalData = newVal; + } else { + if (this.finalConcat) { + const currentScrollTop = this.oldScrollTop; + this.totalData = [...this.totalData, ...newVal]; + // 此处是为了解决在微信小程序中，在某些情况下滚动到底部加载更多后滚动位置直接变为最底部的问题，因此需要通过代码强制滚动回加载更多前的位置 + // #ifdef MP-WEIXIN + if (!this.isIos && !this.refresherOnly && !this.usePageScroll && newVal.length) { + this.loadingMoreTimeStamp = u.getTime(); + this.$nextTick(() => { + this.scrollToY(currentScrollTop); + }) + } + // #endif + } else { + this.totalData = newVal; + } + } + this.privateConcat = true; + }, + // 根据pageNo处理refresh操作 + _handleRefreshWithDisPageNo(pageNo) { + if (!this.isHandlingRefreshToPage && !this.realTotalData.length) return this.reload(); + if (pageNo >= 1) { + this.loading = true; + this.privateConcat = false; + const totalPageSize = pageNo * this.pageSize; + this.currentRefreshPageSize = totalPageSize; + // 如果调用refresh时是本地分页，则在组件内部自己处理分页逻辑，不emit query相关事件 + if (this.isLocalPaging && this.isHandlingRefreshToPage) { + this._localPagingQueryList(this.defaultPageNo, totalPageSize, 0, res => { + this.complete(res); + }) + } else { + // emit query相关事件 + this._emitQuery(this.defaultPageNo, totalPageSize, Enum.QueryFrom.Refresh); + this._callMyParentQuery(this.defaultPageNo, totalPageSize); + } + } + return new Promise((resolve, reject) => { + this.dataPromiseResultMap.reload = { resolve, reject }; + }); + }, + // 本地分页请求 + _localPagingQueryList(pageNo, pageSize, localPagingLoadingTime, callback) { + pageNo = Math.max(1, pageNo); + pageSize = Math.max(1, pageSize); + const totalPagingList = [...this.totalLocalPagingList]; + const pageNoIndex = (pageNo - 1) * pageSize; + const finalPageNoIndex = Math.min(totalPagingList.length, pageNoIndex + pageSize); + const resultPagingList = totalPagingList.splice(pageNoIndex, finalPageNoIndex - pageNoIndex); + u.delay(() => callback(resultPagingList), localPagingLoadingTime) + }, + // 存储列表缓存数据 + _saveLocalCache(data) { + uni.setStorageSync(this.finalCacheKey, data); + }, + // 通过缓存数据填充列表数据 + _setListByLocalCache() { + this.totalData = uni.getStorageSync(this.finalCacheKey) || []; + this.isSettingCacheList = true; + }, + // 修改父view的list + _callMyParentList(newVal) { + if (this.autowireListName.length) { + const myParent = u.getParent(this.$parent); + if (myParent && myParent[this.autowireListName]) { + myParent[this.autowireListName] = newVal; + } + } + }, + // 调用父view的query + _callMyParentQuery(customPageNo = 0, customPageSize = 0) { + if (this.autowireQueryName) { + if (this.myParentQuery === -1) { + const myParent = u.getParent(this.$parent); + if (myParent && myParent[this.autowireQueryName]) { + this.myParentQuery = myParent[this.autowireQueryName]; + } + } + if (this.myParentQuery !== -1) { + customPageSize > 0 ? this.myParentQuery(customPageNo, customPageSize) : this.myParentQuery(this.pageNo, this.defaultPageSize); + } + } + }, + // emit query事件 + _emitQuery(pageNo, pageSize, from){ + this.queryFrom = from; + this.requestTimeStamp = u.getTime(); + const [lastItem] = this.realTotalData.slice(-1); + if (this.fetch) { + const fetchParams = interceptor._handleFetchParams({pageNo, pageSize, from, lastItem: lastItem || null}, this.fetchParams); + const fetchResult = this.fetch(fetchParams); + if (!interceptor._handleFetchResult(fetchResult, this, fetchParams)) { + u.isPromise(fetchResult) ? fetchResult.then(res => { + this.complete(res); + }).catch(err => { + this.complete(false); + }) : this.complete(fetchResult) + } + } else { + this.$emit('query', ...interceptor._handleQuery(pageNo, pageSize, from, lastItem || null)); + } + }, + // 触发数据改变promise + _callDataPromise(success, totalList) { + for (const key in this.dataPromiseResultMap) { + const obj = this.dataPromiseResultMap[key]; + if (!obj) continue; + success ? obj.resolve({ totalList, noMore: this.loadingStatus === Enum.More.NoMore }) : this.callNetworkReject && obj.reject(`z-paging-${key}-error`); + } + }, + // 检查complete data的类型 + _checkDataType(data, success, isLocal) { + const dataType = Object.prototype.toString.call(data); + if (dataType === '[object Boolean]') { + success = data; + data = []; + } else if (dataType !== '[object Array]') { + data = []; + if (dataType !== '[object Undefined]' && dataType !== '[object Null]') { + u.consoleErr(`${isLocal ? 'setLocalPaging' : 'complete'}参数类型不正确，第一个参数类型必须为Array!`); + } + } + return { data, success }; + }, + } +} diff --git a/components/z-paging/components/z-paging/js/modules/empty.js b/components/z-paging/components/z-paging/js/modules/empty.js new file mode 100644 index 0000000..09b045c --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/empty.js @@ -0,0 +1,144 @@ +// [z-paging]空数据图view模块 +import u from '.././z-paging-utils' + +export default { + props: { + // 是否强制隐藏空数据图，默认为否 + hideEmptyView: { + type: Boolean, + default: u.gc('hideEmptyView', false) + }, + // 空数据图描述文字，默认为“没有数据哦~” + emptyViewText: { + type: [String, Object], + default: u.gc('emptyViewText', null) + }, + // 是否显示空数据图重新加载按钮(无数据时)，默认为否 + showEmptyViewReload: { + type: Boolean, + default: u.gc('showEmptyViewReload', false) + }, + // 加载失败时是否显示空数据图重新加载按钮，默认为是 + showEmptyViewReloadWhenError: { + type: Boolean, + default: u.gc('showEmptyViewReloadWhenError', true) + }, + // 空数据图点击重新加载文字，默认为“重新加载” + emptyViewReloadText: { + type: [String, Object], + default: u.gc('emptyViewReloadText', null) + }, + // 空数据图图片，默认使用z-paging内置的图片 + emptyViewImg: { + type: String, + default: u.gc('emptyViewImg', '') + }, + // 空数据图“加载失败”描述文字，默认为“很抱歉，加载失败” + emptyViewErrorText: { + type: [String, Object], + default: u.gc('emptyViewErrorText', null) + }, + // 空数据图“加载失败”图片，默认使用z-paging内置的图片 + emptyViewErrorImg: { + type: String, + default: u.gc('emptyViewErrorImg', '') + }, + // 空数据图样式 + emptyViewStyle: { + type: Object, + default: u.gc('emptyViewStyle', {}) + }, + // 空数据图容器样式 + emptyViewSuperStyle: { + type: Object, + default: u.gc('emptyViewSuperStyle', {}) + }, + // 空数据图img样式 + emptyViewImgStyle: { + type: Object, + default: u.gc('emptyViewImgStyle', {}) + }, + // 空数据图描述文字样式 + emptyViewTitleStyle: { + type: Object, + default: u.gc('emptyViewTitleStyle', {}) + }, + // 空数据图重新加载按钮样式 + emptyViewReloadStyle: { + type: Object, + default: u.gc('emptyViewReloadStyle', {}) + }, + // 空数据图片是否铺满z-paging，默认为否，即填充满z-paging内列表(滚动区域)部分。若设置为否，则为填铺满整个z-paging + emptyViewFixed: { + type: Boolean, + default: u.gc('emptyViewFixed', false) + }, + // 空数据图片是否垂直居中，默认为是，若设置为否即为从空数据容器顶部开始显示。emptyViewFixed为false时有效 + emptyViewCenter: { + type: Boolean, + default: u.gc('emptyViewCenter', true) + }, + // 加载中时是否自动隐藏空数据图，默认为是 + autoHideEmptyViewWhenLoading: { + type: Boolean, + default: u.gc('autoHideEmptyViewWhenLoading', true) + }, + // 用户下拉列表触发下拉刷新加载中时是否自动隐藏空数据图，默认为是 + autoHideEmptyViewWhenPull: { + type: Boolean, + default: u.gc('autoHideEmptyViewWhenPull', true) + }, + // 空数据view的z-index，默认为9 + emptyViewZIndex: { + type: Number, + default: u.gc('emptyViewZIndex', 9) + }, + }, + data() { + return { + customerEmptyViewErrorText: '' + } + }, + computed: { + finalEmptyViewImg() { + return this.isLoadFailed ? this.emptyViewErrorImg : this.emptyViewImg; + }, + finalShowEmptyViewReload() { + return this.isLoadFailed ? this.showEmptyViewReloadWhenError : this.showEmptyViewReload; + }, + // 是否展示空数据图 + showEmpty() { + if (this.refresherOnly || this.hideEmptyView || this.realTotalData.length) return false; + if (this.autoHideEmptyViewWhenLoading) { + if (this.isAddedData && !this.firstPageLoaded && !this.loading) return true; + } else { + return true; + } + return !this.autoHideEmptyViewWhenPull && !this.isUserReload; + }, + }, + methods: { + // 点击了空数据view重新加载按钮 + _emptyViewReload() { + let callbacked = false; + this.$emit('emptyViewReload', reload => { + if (reload === undefined || reload === true) { + this.fromEmptyViewReload = true; + this.reload().catch(() => {}); + } + callbacked = true; + }); + // 如果用户没有禁止默认的点击重新加载刷新列表事件，则触发列表重新刷新 + this.$nextTick(() => { + if (!callbacked) { + this.fromEmptyViewReload = true; + this.reload().catch(() => {}); + } + }) + }, + // 点击了空数据view + _emptyViewClick() { + this.$emit('emptyViewClick'); + }, + } +} \ No newline at end of file diff --git a/components/z-paging/components/z-paging/js/modules/i18n.js b/components/z-paging/components/z-paging/js/modules/i18n.js new file mode 100644 index 0000000..405aff3 --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/i18n.js @@ -0,0 +1,113 @@ +// [z-paging]i18n模块 +import { initVueI18n } from '@dcloudio/uni-i18n' +import messages from '../../i18n/index.js' +const { t } = initVueI18n(messages) + +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import interceptor from '../z-paging-interceptor' + +export default { + computed: { + finalLanguage() { + try { + const local = uni.getLocale(); + const language = this.systemInfo.appLanguage; + return local === 'auto' ? interceptor._handleLanguage2Local(language, this._language2Local(language)) : local; + } catch (e) { + // 如果获取系统本地语言异常，则默认返回中文，uni.getLocale在部分低版本HX或者cli中可能报找不到的问题 + return 'zh-Hans'; + } + }, + // 最终的下拉刷新默认状态的文字 + finalRefresherDefaultText() { + return this._getI18nText('zp.refresher.default', this.refresherDefaultText); + }, + // 最终的下拉刷新下拉中的文字 + finalRefresherPullingText() { + return this._getI18nText('zp.refresher.pulling', this.refresherPullingText); + }, + // 最终的下拉刷新中文字 + finalRefresherRefreshingText() { + return this._getI18nText('zp.refresher.refreshing', this.refresherRefreshingText); + }, + // 最终的下拉刷新完成文字 + finalRefresherCompleteText() { + return this._getI18nText('zp.refresher.complete', this.refresherCompleteText); + }, + // 最终的下拉刷新上次更新时间文字 + finalRefresherUpdateTimeTextMap() { + return { + title: t('zp.refresherUpdateTime.title'), + none: t('zp.refresherUpdateTime.none'), + today: t('zp.refresherUpdateTime.today'), + yesterday: t('zp.refresherUpdateTime.yesterday') + }; + }, + // 最终的继续下拉进入二楼文字 + finalRefresherGoF2Text() { + return this._getI18nText('zp.refresher.f2', this.refresherGoF2Text); + }, + // 最终的底部加载更多默认状态文字 + finalLoadingMoreDefaultText() { + return this._getI18nText('zp.loadingMore.default', this.loadingMoreDefaultText); + }, + // 最终的底部加载更多加载中文字 + finalLoadingMoreLoadingText() { + return this._getI18nText('zp.loadingMore.loading', this.loadingMoreLoadingText); + }, + // 最终的底部加载更多没有更多数据文字 + finalLoadingMoreNoMoreText() { + return this._getI18nText('zp.loadingMore.noMore', this.loadingMoreNoMoreText); + }, + // 最终的底部加载更多加载失败文字 + finalLoadingMoreFailText() { + return this._getI18nText('zp.loadingMore.fail', this.loadingMoreFailText); + }, + // 最终的空数据图title + finalEmptyViewText() { + return this.isLoadFailed ? this.finalEmptyViewErrorText : this._getI18nText('zp.emptyView.title', this.emptyViewText); + }, + // 最终的空数据图reload title + finalEmptyViewReloadText() { + return this._getI18nText('zp.emptyView.reload', this.emptyViewReloadText); + }, + // 最终的空数据图加载失败文字 + finalEmptyViewErrorText() { + return this.customerEmptyViewErrorText || this._getI18nText('zp.emptyView.error', this.emptyViewErrorText); + }, + // 最终的系统loading title + finalSystemLoadingText() { + return this._getI18nText('zp.systemLoading.title', this.systemLoadingText); + }, + }, + methods: { + // 获取当前z-paging的语言 + getLanguage() { + return this.finalLanguage; + }, + // 获取国际化转换后的文本 + _getI18nText(key, value) { + const dataType = Object.prototype.toString.call(value); + if (dataType === '[object Object]') { + const nextValue = value[this.finalLanguage]; + if (nextValue) return nextValue; + } else if (dataType === '[object String]') { + return value; + } + return t(key); + }, + // 系统language转i18n local + _language2Local(language) { + const formatedLanguage = language.toLowerCase().replace(new RegExp('_', ''), '-'); + if (formatedLanguage.indexOf('zh') !== -1) { + if (formatedLanguage === 'zh' || formatedLanguage === 'zh-cn' || formatedLanguage.indexOf('zh-hans') !== -1) { + return 'zh-Hans'; + } + return 'zh-Hant'; + } + if (formatedLanguage.indexOf('en') !== -1) return 'en'; + return language; + } + } +} diff --git a/components/z-paging/components/z-paging/js/modules/load-more.js b/components/z-paging/components/z-paging/js/modules/load-more.js new file mode 100644 index 0000000..de07684 --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/load-more.js @@ -0,0 +1,374 @@ +// [z-paging]滚动到底部加载更多模块 +import u from '.././z-paging-utils' +import Enum from '.././z-paging-enum' + +export default { + props: { + // 自定义底部加载更多样式 + loadingMoreCustomStyle: { + type: Object, + default: u.gc('loadingMoreCustomStyle', {}) + }, + // 自定义底部加载更多文字样式 + loadingMoreTitleCustomStyle: { + type: Object, + default: u.gc('loadingMoreTitleCustomStyle', {}) + }, + // 自定义底部加载更多加载中动画样式 + loadingMoreLoadingIconCustomStyle: { + type: Object, + default: u.gc('loadingMoreLoadingIconCustomStyle', {}) + }, + // 自定义底部加载更多加载中动画图标类型，可选flower或circle，默认为flower + loadingMoreLoadingIconType: { + type: String, + default: u.gc('loadingMoreLoadingIconType', 'flower') + }, + // 自定义底部加载更多加载中动画图标图片 + loadingMoreLoadingIconCustomImage: { + type: String, + default: u.gc('loadingMoreLoadingIconCustomImage', '') + }, + // 底部加载更多加载中view是否展示旋转动画，默认为是 + loadingMoreLoadingAnimated: { + type: Boolean, + default: u.gc('loadingMoreLoadingAnimated', true) + }, + // 是否启用加载更多数据(含滑动到底部加载更多数据和点击加载更多数据)，默认为是 + loadingMoreEnabled: { + type: Boolean, + default: u.gc('loadingMoreEnabled', true) + }, + // 是否启用滑动到底部加载更多数据，默认为是 + toBottomLoadingMoreEnabled: { + type: Boolean, + default: u.gc('toBottomLoadingMoreEnabled', true) + }, + // 滑动到底部状态为默认状态时，以加载中的状态展示，默认为否。若设置为是，可避免滚动到底部看到默认状态然后立刻变为加载中状态的问题，但分页数量未超过一屏时，不会显示【点击加载更多】 + loadingMoreDefaultAsLoading: { + type: Boolean, + default: u.gc('loadingMoreDefaultAsLoading', false) + }, + // 滑动到底部"默认"文字，默认为【点击加载更多】 + loadingMoreDefaultText: { + type: [String, Object], + default: u.gc('loadingMoreDefaultText', null) + }, + // 滑动到底部"加载中"文字，默认为【正在加载...】 + loadingMoreLoadingText: { + type: [String, Object], + default: u.gc('loadingMoreLoadingText', null) + }, + // 滑动到底部"没有更多"文字，默认为【没有更多了】 + loadingMoreNoMoreText: { + type: [String, Object], + default: u.gc('loadingMoreNoMoreText', null) + }, + // 滑动到底部"加载失败"文字，默认为【加载失败，点击重新加载】 + loadingMoreFailText: { + type: [String, Object], + default: u.gc('loadingMoreFailText', null) + }, + // 当没有更多数据且分页内容未超出z-paging时是否隐藏没有更多数据的view，默认为否 + hideNoMoreInside: { + type: Boolean, + default: u.gc('hideNoMoreInside', false) + }, + // 当没有更多数据且分页数组长度少于这个值时，隐藏没有更多数据的view，默认为0，代表不限制。 + hideNoMoreByLimit: { + type: Number, + default: u.gc('hideNoMoreByLimit', 0) + }, + // 是否显示默认的加载更多text，默认为是 + showDefaultLoadingMoreText: { + type: Boolean, + default: u.gc('showDefaultLoadingMoreText', true) + }, + // 是否显示没有更多数据的view + showLoadingMoreNoMoreView: { + type: Boolean, + default: u.gc('showLoadingMoreNoMoreView', true) + }, + // 是否显示没有更多数据的分割线，默认为是 + showLoadingMoreNoMoreLine: { + type: Boolean, + default: u.gc('showLoadingMoreNoMoreLine', true) + }, + // 自定义底部没有更多数据的分割线样式 + loadingMoreNoMoreLineCustomStyle: { + type: Object, + default: u.gc('loadingMoreNoMoreLineCustomStyle', {}) + }, + // 当分页未满一屏时，是否自动加载更多，默认为否(nvue无效) + insideMore: { + type: Boolean, + default: u.gc('insideMore', false) + }, + // 距底部/右边多远时（单位px），触发 scrolltolower 事件，默认为100rpx + lowerThreshold: { + type: [Number, String], + default: u.gc('lowerThreshold', '100rpx') + }, + }, + data() { + return { + M: Enum.More, + // 底部加载更多状态 + loadingStatus: Enum.More.Default, + // 在渲染之后的底部加载更多状态 + loadingStatusAfterRender: Enum.More.Default, + // 底部加载更多时间戳 + loadingMoreTimeStamp: 0, + // 底部加载更多slot + loadingMoreDefaultSlot: null, + // 是否展示底部加载更多 + showLoadingMore: false, + // 是否是开发者自定义的加载更多，-1代表交由z-paging自行判断；1代表没有更多了；0代表还有更多数据 + customNoMore: -1, + } + }, + computed: { + // 底部加载更多配置 + zLoadMoreConfig() { + return { + status: this.loadingStatusAfterRender, + defaultAsLoading: this.loadingMoreDefaultAsLoading || (this.useChatRecordMode && this.chatLoadingMoreDefaultAsLoading), + defaultThemeStyle: this.finalLoadingMoreThemeStyle, + customStyle: this.loadingMoreCustomStyle, + titleCustomStyle: this.loadingMoreTitleCustomStyle, + iconCustomStyle: this.loadingMoreLoadingIconCustomStyle, + loadingIconType: this.loadingMoreLoadingIconType, + loadingIconCustomImage: this.loadingMoreLoadingIconCustomImage, + loadingAnimated: this.loadingMoreLoadingAnimated, + showNoMoreLine: this.showLoadingMoreNoMoreLine, + noMoreLineCustomStyle: this.loadingMoreNoMoreLineCustomStyle, + defaultText: this.finalLoadingMoreDefaultText, + loadingText: this.finalLoadingMoreLoadingText, + noMoreText: this.finalLoadingMoreNoMoreText, + failText: this.finalLoadingMoreFailText, + hideContent: !this.loadingMoreDefaultAsLoading && this.listRendering, + unit: this.unit, + isChat: this.useChatRecordMode, + chatDefaultAsLoading: this.chatLoadingMoreDefaultAsLoading + }; + }, + // 最终的底部加载更多主题 + finalLoadingMoreThemeStyle() { + return this.loadingMoreThemeStyle.length ? this.loadingMoreThemeStyle : this.defaultThemeStyle; + }, + // 最终的底部加载更多触发阈值 + finalLowerThreshold() { + return u.convertToPx(this.lowerThreshold); + }, + // 是否显示默认状态下的底部加载更多 + showLoadingMoreDefault() { + return this._showLoadingMore('Default'); + }, + // 是否显示加载中状态下的底部加载更多 + showLoadingMoreLoading() { + return this._showLoadingMore('Loading'); + }, + // 是否显示没有更多了状态下的底部加载更多 + showLoadingMoreNoMore() { + return this._showLoadingMore('NoMore'); + }, + // 是否显示加载失败状态下的底部加载更多 + showLoadingMoreFail() { + return this._showLoadingMore('Fail'); + }, + // 是否显示自定义状态下的底部加载更多 + showLoadingMoreCustom() { + return this._showLoadingMore('Custom'); + }, + // 底部加载更多固定高度 + loadingMoreFixedHeight() { + return u.addUnit('80rpx', this.unit); + }, + }, + methods: { + // 页面滚动到底部时通知z-paging进行进一步处理 + pageReachBottom() { + !this.useChatRecordMode && this.toBottomLoadingMoreEnabled && this._onLoadingMore('toBottom'); + }, + // 手动触发上拉加载更多(非必须，可依据具体需求使用) + doLoadMore(type) { + this._onLoadingMore(type); + }, + // 通过@scroll事件检测是否滚动到了底部(顺带检测下是否滚动到了顶部) + _checkScrolledToBottom(scrollDiff, checked = false) { + // 如果当前scroll-view高度未获取，则获取其高度 + if (this.cacheScrollNodeHeight === -1) { + // 获取当前scroll-view高度 + this._getNodeClientRect('.zp-scroll-view').then((res) => { + if (res) { + const scrollNodeHeight = res[0].height; + // 缓存当前scroll-view高度，如果获取过了不再获取 + this.cacheScrollNodeHeight = scrollNodeHeight; + // // scrollDiff - this.cacheScrollNodeHeight = 当前滚动区域的顶部与内容底部的距离 - scroll-view高度 = 当前滚动区域的底部与内容底部的距离(也就是最终的与底部的距离) + if (scrollDiff - scrollNodeHeight <= this.finalLowerThreshold) { + // 如果与底部的距离小于阈值，则判断为滚动到了底部，触发滚动到底部事件 + this._onLoadingMore('toBottom'); + } + } + }); + } else { + // scrollDiff - this.cacheScrollNodeHeight = 当前滚动区域的顶部与内容底部的距离 - scroll-view高度 = 当前滚动区域的底部与内容底部的距离(也就是最终的与底部的距离) + if (scrollDiff - this.cacheScrollNodeHeight <= this.finalLowerThreshold) { + // 如果与底部的距离小于阈值，则判断为滚动到了底部，触发滚动到底部事件 + this._onLoadingMore('toBottom'); + } else if (scrollDiff - this.cacheScrollNodeHeight <= 500 && !checked) { + // 如果与底部的距离小于500px，则获取当前滚动的位置，延迟150毫秒重复上述步骤再次检测(避免@scroll触发时获取的scrollTop不正确导致的其他问题，此时获取的scrollTop不一定可信)。防止因为部分性能较差安卓设备@scroll采样率过低导致的滚动到底部但是依然没有触发的问题 + u.delay(() => { + this._getNodeClientRect('.zp-scroll-view', true, true).then((res) => { + if (res) { + this.oldScrollTop = res[0].scrollTop; + const newScrollDiff = res[0].scrollHeight - this.oldScrollTop; + this._checkScrolledToBottom(newScrollDiff, true); + } + }) + }, 150, 'checkScrolledToBottomDelay') + } + // 检测一下是否已经滚动到了顶部了，因为在安卓中滚动到顶部时scrollTop不一定为0(和滚动到底部一样的原因)，所以需要在scrollTop小于150px时，通过获取.zp-scroll-view的scrollTop再判断一下 + if (this.oldScrollTop <= 150 && this.oldScrollTop !== 0) { + u.delay(() => { + // 这里再判断一下是否确实已经滚动到顶部了，如果已经滚动到顶部了，则不用再判断了，再次判断的原因是可能150毫秒之后oldScrollTop才是0 + if (this.oldScrollTop !== 0) { + this._getNodeClientRect('.zp-scroll-view', true, true).then((res) => { + // 如果150毫秒后.zp-scroll-view的scrollTop为0，则认为已经滚动到了顶部了 + if (res && res[0].scrollTop === 0 && this.oldScrollTop !== 0) { + this._onScrollToUpper(); + } + }) + } + }, 150, 'checkScrolledToTopDelay') + } + } + }, + // 触发加载更多时调用,from:toBottom-滑动到底部触发；click-点击加载更多触发 + _onLoadingMore(from = 'click') { + // 如果是ios并且是滚动到底部的，则在滚动到底部时候尝试将列表设置为禁止滚动然后设置为允许滚动，以禁止底部bounce的效果 + if (this.isIos && from === 'toBottom' && !this.scrollToBottomBounceEnabled && this.scrollEnable) { + this.scrollEnable = false; + this.$nextTick(() => { + this.scrollEnable = true; + }) + } + // emit scrolltolower + this._emitScrollEvent('scrolltolower'); + // 如果是只使用下拉刷新 或者 禁用底部加载更多 或者 底部加载更多不是默认状态或加载失败状态 或者 是加载中状态 或者 空数据图已经展示了，则return，不触发内部加载更多逻辑 + if (this.refresherOnly || !this.loadingMoreEnabled || !(this.loadingStatus === Enum.More.Default || this.loadingStatus === Enum.More.Fail) || this.loading || this.showEmpty) return; + // #ifdef MP-WEIXIN + if (!this.isIos && !this.refresherOnly && !this.usePageScroll) { + const currentTimestamp = u.getTime(); + // 在非ios平台+scroll-view中节流处理 + if (this.loadingMoreTimeStamp > 0 && currentTimestamp - this.loadingMoreTimeStamp < 100) { + this.loadingMoreTimeStamp = 0; + return; + } + } + // #endif + // 处理加载更多数据 + this._doLoadingMore(); + }, + // 处理开始加载更多 + _doLoadingMore() { + if (this.pageNo >= this.defaultPageNo && this.loadingStatus !== Enum.More.NoMore) { + this.pageNo ++; + this._startLoading(false); + if (this.isLocalPaging) { + // 如果是本地分页，则在组件内部对数据进行分页处理，不触发@query事件 + this._localPagingQueryList(this.pageNo, this.defaultPageSize, this.localPagingLoadingTime, res => { + this.completeByTotal(res, this.totalLocalPagingList.length); + this.queryFrom = Enum.QueryFrom.LoadMore; + }) + } else { + // emit @query相关加载更多事件 + this._emitQuery(this.pageNo, this.defaultPageSize, Enum.QueryFrom.LoadMore); + this._callMyParentQuery(); + } + // 设置当前加载状态为底部加载更多状态 + this.loadingType = Enum.LoadingType.LoadMore; + } + }, + // (预处理)判断当没有更多数据且分页内容未超出z-paging时是否显示没有更多数据的view + _preCheckShowNoMoreInside(newVal, scrollViewNode, pagingContainerNode) { + if (this.loadingStatus === Enum.More.NoMore && this.hideNoMoreByLimit > 0 && newVal.length) { + this.showLoadingMore = newVal.length > this.hideNoMoreByLimit; + } else if ((this.loadingStatus === Enum.More.NoMore && this.hideNoMoreInside && newVal.length) || (this.insideMore && this.insideOfPaging !== false && newVal.length)) { + this.$nextTick(() => { + this._checkShowNoMoreInside(newVal, scrollViewNode, pagingContainerNode); + }) + if (this.insideMore && this.insideOfPaging !== false && newVal.length) { + this.showLoadingMore = newVal.length; + } + } else { + this.showLoadingMore = newVal.length; + } + }, + // 判断当没有更多数据且分页内容未超出z-paging时是否显示没有更多数据的view + async _checkShowNoMoreInside(totalData, oldScrollViewNode, oldPagingContainerNode) { + try { + const scrollViewNode = oldScrollViewNode || await this._getNodeClientRect('.zp-scroll-view'); + // 在页面滚动模式下 + if (this.usePageScroll) { + if (scrollViewNode) { + // 获取滚动内容总高度 + const scrollViewTotalH = scrollViewNode[0].top + scrollViewNode[0].height; + // 如果滚动内容总高度小于窗口高度，则认为内容未超出z-paging + this.insideOfPaging = scrollViewTotalH < this.windowHeight; + // 如果需要没有更多数据时，隐藏底部加载更多view，并且内容未超过z-paging，则隐藏底部加载更多 + if (this.hideNoMoreInside) { + this.showLoadingMore = !this.insideOfPaging; + } + // 如果需要内容未超过z-paging时自动加载更多，则触发加载更多 + this._updateInsideOfPaging(); + } + } else { + // 在scroll-view滚动模式下 + const pagingContainerNode = oldPagingContainerNode || await this._getNodeClientRect('.zp-paging-container-content'); + // 获取滚动内容总高度 + const pagingContainerH = pagingContainerNode ? pagingContainerNode[0].height : 0; + // 获取z-paging内置scroll-view高度 + const scrollViewH = scrollViewNode ? scrollViewNode[0].height : 0; + // 如果滚动内容总高度小于z-paging内置scroll-view高度，则认为内容未超出z-paging + this.insideOfPaging = pagingContainerH < scrollViewH; + if (this.hideNoMoreInside) { + this.showLoadingMore = !this.insideOfPaging; + } + // 如果需要内容未超过z-paging时自动加载更多，则触发加载更多 + this._updateInsideOfPaging(); + } + } catch (e) { + // 如果发生了异常，判断totalData数组长度为0，则认为内容未超出z-paging + this.insideOfPaging = !totalData.length; + if (this.hideNoMoreInside) { + this.showLoadingMore = !this.insideOfPaging; + } + // 如果需要内容未超过z-paging时自动加载更多，则触发加载更多 + this._updateInsideOfPaging(); + } + }, + // 是否要展示上拉加载更多view + _showLoadingMore(type) { + if (!this.showLoadingMoreWhenReload && (!(this.loadingStatus === Enum.More.Default ? this.nShowBottom : true) || !this.realTotalData.length)) return false; + if (((!this.showLoadingMoreWhenReload || this.isUserPullDown || this.loadingStatus !== Enum.More.Loading) && !this.showLoadingMore) || + (!this.loadingMoreEnabled && (!this.showLoadingMoreWhenReload || this.isUserPullDown || this.loadingStatus !== Enum.More.Loading)) || this.refresherOnly) { + return false; + } + if (this.useChatRecordMode && type !== 'Loading') return false; + if (!this.zSlots) return false; + if (type === 'Custom') { + return this.showDefaultLoadingMoreText && !(this.loadingStatus === Enum.More.NoMore && !this.showLoadingMoreNoMoreView); + } + const res = this.loadingStatus === Enum.More[type] && this.zSlots[`loadingMore${type}`] && (type === 'NoMore' ? this.showLoadingMoreNoMoreView : true); + if (res) { + // #ifdef APP-NVUE + if (!this.isIos) { + this.nLoadingMoreFixedHeight = false; + } + // #endif + } + return res; + }, + } +} diff --git a/components/z-paging/components/z-paging/js/modules/loading.js b/components/z-paging/components/z-paging/js/modules/loading.js new file mode 100644 index 0000000..7f40aec --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/loading.js @@ -0,0 +1,95 @@ +// [z-paging]loading相关模块 +import u from '.././z-paging-utils' +import Enum from '.././z-paging-enum' + +export default { + props: { + // 第一次加载后自动隐藏loading slot，默认为是 + autoHideLoadingAfterFirstLoaded: { + type: Boolean, + default: u.gc('autoHideLoadingAfterFirstLoaded', true) + }, + // loading slot是否铺满屏幕并固定，默认为否 + loadingFullFixed: { + type: Boolean, + default: u.gc('loadingFullFixed', false) + }, + // 是否自动显示系统Loading：即uni.showLoading，若开启则将在刷新列表时(调用reload、refresh时)显示，下拉刷新和滚动到底部加载更多不会显示，默认为false。 + autoShowSystemLoading: { + type: Boolean, + default: u.gc('autoShowSystemLoading', false) + }, + // 显示系统Loading时是否显示透明蒙层，防止触摸穿透，默认为是(H5、App、微信小程序、百度小程序有效) + systemLoadingMask: { + type: Boolean, + default: u.gc('systemLoadingMask', true) + }, + // 显示系统Loading时显示的文字，默认为"加载中" + systemLoadingText: { + type: [String, Object], + default: u.gc('systemLoadingText', null) + }, + }, + data() { + return { + loading: false, + loadingForNow: false, + } + }, + watch: { + // loading状态 + loadingStatus(newVal) { + this.$emit('loadingStatusChange', newVal); + this.$nextTick(() => { + this.loadingStatusAfterRender = newVal; + }) + if (this.useChatRecordMode) { + if (this.isFirstPage && (newVal === Enum.More.NoMore || newVal === Enum.More.Fail)) { + this.isFirstPageAndNoMore = true; + return; + } + } + this.isFirstPageAndNoMore = false; + }, + loading(newVal){ + if (newVal) { + this.loadingForNow = newVal; + } + }, + }, + computed: { + // 是否显示loading + showLoading() { + if (this.firstPageLoaded || !this.loading || !this.loadingForNow) return false; + if (this.finalShowSystemLoading) { + // 显示系统loading + uni.showLoading({ + title: this.finalSystemLoadingText, + mask: this.systemLoadingMask + }) + } + return this.autoHideLoadingAfterFirstLoaded ? (this.fromEmptyViewReload ? true : !this.pagingLoaded) : this.loadingType === Enum.LoadingType.Refresher; + }, + // 最终的是否显示系统loading + finalShowSystemLoading() { + return this.autoShowSystemLoading && this.loadingType === Enum.LoadingType.Refresher; + } + }, + methods: { + // 处理开始加载更多状态 + _startLoading(isReload = false) { + if ((this.showLoadingMoreWhenReload && !this.isUserPullDown) || !isReload) { + this.loadingStatus = Enum.More.Loading; + } + this.loading = true; + }, + // 停止系统loading和refresh + _endSystemLoadingAndRefresh(){ + this.finalShowSystemLoading && uni.hideLoading(); + !this.useCustomRefresher && uni.stopPullDownRefresh(); + // #ifdef APP-NVUE + this.usePageScroll && uni.stopPullDownRefresh(); + // #endif + } + } +} diff --git a/components/z-paging/components/z-paging/js/modules/nvue.js b/components/z-paging/components/z-paging/js/modules/nvue.js new file mode 100644 index 0000000..ed5bc25 --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/nvue.js @@ -0,0 +1,268 @@ +// [z-paging]nvue独有部分模块 +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import Enum from '.././z-paging-enum' + +// #ifdef APP-NVUE +const weexAnimation = weex.requireModule('animation'); +// #endif +export default { + props: { + // #ifdef APP-NVUE + // nvue中修改列表类型，可选值有list、waterfall和scroller，默认为list + nvueListIs: { + type: String, + default: u.gc('nvueListIs', 'list') + }, + // nvue waterfall配置，仅在nvue中且nvueListIs=waterfall时有效，配置参数详情参见：https://uniapp.dcloud.io/component/waterfall + nvueWaterfallConfig: { + type: Object, + default: u.gc('nvueWaterfallConfig', {}) + }, + // nvue 控制是否回弹效果，iOS不支持动态修改 + nvueBounce: { + type: Boolean, + default: u.gc('nvueBounce', true) + }, + // nvue中通过代码滚动到顶部/底部时，是否加快动画效果(无滚动动画时无效)，默认为否 + nvueFastScroll: { + type: Boolean, + default: u.gc('nvueFastScroll', false) + }, + // nvue中list的id + nvueListId: { + type: String, + default: u.gc('nvueListId', '') + }, + // nvue中refresh组件的样式 + nvueRefresherStyle: { + type: Object, + default: u.gc('nvueRefresherStyle', {}) + }, + // nvue中是否按分页模式(类似竖向swiper)显示List，默认为false + nvuePagingEnabled: { + type: Boolean, + default: u.gc('nvuePagingEnabled', false) + }, + // 是否隐藏nvue列表底部的tagView，此view用于标识滚动到底部位置，若隐藏则滚动到底部功能将失效，在nvue中实现吸顶+swiper功能时需将最外层z-paging的此属性设置为true。默认为否 + hideNvueBottomTag: { + type: Boolean, + default: u.gc('hideNvueBottomTag', false) + }, + // nvue中控制onscroll事件触发的频率：表示两次onscroll事件之间列表至少滚动了10px。注意，将该值设置为较小的数值会提高滚动事件采样的精度，但同时也会降低页面的性能 + offsetAccuracy: { + type: Number, + default: u.gc('offsetAccuracy', 10) + }, + // #endif + }, + data() { + return { + nRefresherLoading: false, + nListIsDragging: false, + nShowBottom: true, + nFixFreezing: false, + nShowRefresherReveal: false, + nLoadingMoreFixedHeight: false, + nShowRefresherRevealHeight: 0, + nOldShowRefresherRevealHeight: -1, + nRefresherWidth: u.rpx2px(750), + nF2Opacity: 0 + } + }, + computed: { + // #ifdef APP-NVUE + nScopedSlots() { + // #ifdef VUE2 + return this.$scopedSlots; + // #endif + // #ifdef VUE3 + return null; + // #endif + }, + nWaterfallColumnCount() { + if (this.finalNvueListIs !== 'waterfall') return 0; + return this._nGetWaterfallConfig('column-count', 2); + }, + nWaterfallColumnWidth() { + return this._nGetWaterfallConfig('column-width', 'auto'); + }, + nWaterfallColumnGap() { + return this._nGetWaterfallConfig('column-gap', 'normal'); + }, + nWaterfallLeftGap() { + return this._nGetWaterfallConfig('left-gap', 0); + }, + nWaterfallRightGap() { + return this._nGetWaterfallConfig('right-gap', 0); + }, + nViewIs() { + const is = this.finalNvueListIs; + return is === 'scroller' || is === 'view' ? 'view' : is === 'waterfall' ? 'header' : 'cell'; + }, + nSafeAreaBottomHeight() { + return this.safeAreaInsetBottom ? this.safeAreaBottom : 0; + }, + finalNvueListIs() { + if (this.usePageScroll) return 'view'; + const nvueListIsLowerCase = this.nvueListIs.toLowerCase(); + if (['list','waterfall','scroller'].indexOf(nvueListIsLowerCase) !== -1) return nvueListIsLowerCase; + return 'list'; + }, + finalNvueSuperListIs() { + return this.usePageScroll ? 'view' : 'scroller'; + }, + finalNvueRefresherEnabled() { + return this.finalNvueListIs !== 'view' && this.finalRefresherEnabled && !this.nShowRefresherReveal && !this.useChatRecordMode; + }, + // #endif + }, + mounted(){ + // #ifdef APP-NVUE + //旋转屏幕时更新宽度 + uni.onWindowResize((res) => { + // this._nUpdateRefresherWidth(); + }) + // #endif + }, + methods: { + // #ifdef APP-NVUE + // 列表滚动时触发 + _nOnScroll(e) { + this.$emit('scroll', e); + const contentOffsetY = -e.contentOffset.y; + this.oldScrollTop = contentOffsetY; + this.nListIsDragging = e.isDragging; + this._checkShouldShowBackToTop(contentOffsetY, contentOffsetY - 1); + }, + // 列表滚动结束 + _nOnScrollend(e) { + this.$emit('scrollend', e); + + // 判断是否滚动到顶部了 + if (e?.contentOffset?.y >= 0) { + this._emitScrollEvent('scrolltoupper'); + } + // 判断是否滚动到底部了 + this._getNodeClientRect('.zp-n-list').then(node => { + if (node) { + if (e?.contentSize?.height + e?.contentOffset?.y <= node[0].height) { + this._emitScrollEvent('scrolltolower'); + } + } + }) + }, + // 下拉刷新刷新中 + _nOnRrefresh() { + if (this.nShowRefresherReveal) return; + // 进入刷新状态 + this.nRefresherLoading = true; + if (this.refresherStatus === Enum.Refresher.GoF2) { + this._handleGoF2(); + this.$nextTick(() => { + this._nRefresherEnd(); + }) + } else { + this.refresherStatus = Enum.Refresher.Loading; + this._doRefresherLoad(); + } + + }, + // 下拉刷新下拉中 + _nOnPullingdown(e) { + if (this.refresherStatus === Enum.Refresher.Loading || (this.isIos && !this.nListIsDragging)) return; + this._emitTouchmove(e); + let { viewHeight, pullingDistance } = e; + // 更新下拉刷新状态 + // 下拉刷新距离超过阈值 + if (pullingDistance >= viewHeight) { + // 如果开启了下拉进入二楼并且下拉刷新距离超过进入二楼阈值，则当前下拉刷新状态为松手进入二楼，否则为松手立即刷新 + // (pullingDistance - viewHeight) + this.finalRefresherThreshold 不等同于pullingDistance，此处是为了兼容不同平台下拉相同距离pullingDistance不一致的问题，pullingDistance仅与viewHeight互相关联 + this.refresherStatus = this.refresherF2Enabled && (pullingDistance - viewHeight) + this.finalRefresherThreshold >= this.finalRefresherF2Threshold ? Enum.Refresher.GoF2 : Enum.Refresher.ReleaseToRefresh; + } else { + // 下拉刷新距离未超过阈值，显示默认状态 + this.refresherStatus = Enum.Refresher.Default; + } + }, + // 下拉刷新结束 + _nRefresherEnd(doEnd = true) { + if (doEnd) { + this._nDoRefresherEndAnimation(0, -this.nShowRefresherRevealHeight); + !this.usePageScroll && this.$refs['zp-n-list'].resetLoadmore(); + this.nRefresherLoading = false; + } + }, + // 执行主动触发下拉刷新动画 + _nDoRefresherEndAnimation(height, translateY, animate = true, checkStack = true) { + // 清除下拉刷新相关timeout + this._cleanRefresherCompleteTimeout(); + this._cleanRefresherEndTimeout(); + + if (!this.finalShowRefresherWhenReload) { + // 如果reload不需要自动展示下拉刷新view，则在complete duration结束后再把下拉刷新状态设置回默认 + this.refresherEndTimeout = u.delay(() => { + this.refresherStatus = Enum.Refresher.Default; + }, this.refresherCompleteDuration); + return; + } + // 用户处理用户在短时间内多次调用reload的情况，此时下拉刷新view不需要重复显示，只需要保证最后一次reload对应的请求结束后收回下拉刷新view即可 + const stackCount = this.refresherRevealStackCount; + if (height === 0 && checkStack) { + this.refresherRevealStackCount --; + if (stackCount > 1) return; + this.refresherEndTimeout = u.delay(() => { + this.refresherStatus = Enum.Refresher.Default; + }, this.refresherCompleteDuration); + } + if (stackCount > 1) { + this.refresherStatus = Enum.Refresher.Loading; + } + + const duration = animate ? 200 : 0; + if (this.nOldShowRefresherRevealHeight !== height) { + if (height > 0) { + this.nShowRefresherReveal = true; + } + // 展示下拉刷新view + weexAnimation.transition(this.$refs['zp-n-list-refresher-reveal'], { + styles: { + height: `${height}px`, + transform: `translateY(${translateY}px)`, + }, + duration, + timingFunction: 'linear', + needLayout: true, + delay: 0 + }) + } + u.delay(() => { + if (animate) { + this.nShowRefresherReveal = height > 0; + } + }, duration > 0 ? duration - 60 : 0); + this.nOldShowRefresherRevealHeight = height; + }, + // 滚动到底部加载更多 + _nOnLoadmore() { + if (this.nShowRefresherReveal || !this.totalData.length) return; + this.useChatRecordMode ? this.doChatRecordLoadMore() : this._onLoadingMore('toBottom'); + }, + // 获取nvue waterfall单项配置 + _nGetWaterfallConfig(key, defaultValue) { + return this.nvueWaterfallConfig[key] || defaultValue; + }, + // 更新nvue 下拉刷新view容器的宽度 + _nUpdateRefresherWidth() { + u.delay(() => { + this.$nextTick(()=>{ + this._getNodeClientRect('.zp-n-list').then(node => { + if (node) { + this.nRefresherWidth = node[0].width || this.nRefresherWidth; + } + }) + }) + }) + } + // #endif + } +} diff --git a/components/z-paging/components/z-paging/js/modules/refresher.js b/components/z-paging/components/z-paging/js/modules/refresher.js new file mode 100644 index 0000000..d97218d --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/refresher.js @@ -0,0 +1,831 @@ +// [z-paging]下拉刷新view模块 +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import Enum from '.././z-paging-enum' + +// #ifdef APP-NVUE +const weexAnimation = weex.requireModule('animation'); +// #endif +export default { + props: { + // 下拉刷新的主题样式，支持black，white，默认black + refresherThemeStyle: { + type: String, + default: u.gc('refresherThemeStyle', '') + }, + // 自定义下拉刷新中左侧图标的样式 + refresherImgStyle: { + type: Object, + default: u.gc('refresherImgStyle', {}) + }, + // 自定义下拉刷新中右侧状态描述文字的样式 + refresherTitleStyle: { + type: Object, + default: u.gc('refresherTitleStyle', {}) + }, + // 自定义下拉刷新中右侧最后更新时间文字的样式(show-refresher-update-time为true时有效) + refresherUpdateTimeStyle: { + type: Object, + default: u.gc('refresherUpdateTimeStyle', {}) + }, + // 在微信小程序和QQ小程序中，是否实时监听下拉刷新中进度，默认为否 + watchRefresherTouchmove: { + type: Boolean, + default: u.gc('watchRefresherTouchmove', false) + }, + // 底部加载更多的主题样式，支持black，white，默认black + loadingMoreThemeStyle: { + type: String, + default: u.gc('loadingMoreThemeStyle', '') + }, + // 是否只使用下拉刷新，设置为true后将关闭mounted自动请求数据、关闭滚动到底部加载更多，强制隐藏空数据图。默认为否 + refresherOnly: { + type: Boolean, + default: u.gc('refresherOnly', false) + }, + // 自定义下拉刷新默认状态下回弹动画时间，单位为毫秒，默认为100毫秒，nvue无效 + refresherDefaultDuration: { + type: [Number, String], + default: u.gc('refresherDefaultDuration', 100) + }, + // 自定义下拉刷新结束以后延迟回弹的时间，单位为毫秒，默认为0 + refresherCompleteDelay: { + type: [Number, String], + default: u.gc('refresherCompleteDelay', 0) + }, + // 自定义下拉刷新结束回弹动画时间，单位为毫秒，默认为300毫秒(refresherEndBounceEnabled为false时，refresherCompleteDuration为设定值的1/3)，nvue无效 + refresherCompleteDuration: { + type: [Number, String], + default: u.gc('refresherCompleteDuration', 300) + }, + // 自定义下拉刷新中是否允许列表滚动，默认为是 + refresherRefreshingScrollable: { + type: Boolean, + default: u.gc('refresherRefreshingScrollable', true) + }, + // 自定义下拉刷新结束状态下是否允许列表滚动，默认为否 + refresherCompleteScrollable: { + type: Boolean, + default: u.gc('refresherCompleteScrollable', false) + }, + // 是否使用自定义的下拉刷新，默认为是，即使用z-paging的下拉刷新。设置为false即代表使用uni scroll-view自带的下拉刷新，h5、App、微信小程序以外的平台不支持uni scroll-view自带的下拉刷新 + useCustomRefresher: { + type: Boolean, + default: u.gc('useCustomRefresher', true) + }, + // 自定义下拉刷新下拉帧率，默认为40，过高可能会出现抖动问题 + refresherFps: { + type: [Number, String], + default: u.gc('refresherFps', 40) + }, + // 自定义下拉刷新允许触发的最大下拉角度，默认为40度，当下拉角度小于设定值时，自定义下拉刷新动画不会被触发 + refresherMaxAngle: { + type: [Number, String], + default: u.gc('refresherMaxAngle', 40) + }, + // 自定义下拉刷新的角度由未达到最大角度变到达到最大角度时，是否继续下拉刷新手势，默认为否 + refresherAngleEnableChangeContinued: { + type: Boolean, + default: u.gc('refresherAngleEnableChangeContinued', false) + }, + // 自定义下拉刷新默认状态下的文字 + refresherDefaultText: { + type: [String, Object], + default: u.gc('refresherDefaultText', null) + }, + // 自定义下拉刷新松手立即刷新状态下的文字 + refresherPullingText: { + type: [String, Object], + default: u.gc('refresherPullingText', null) + }, + // 自定义下拉刷新刷新中状态下的文字 + refresherRefreshingText: { + type: [String, Object], + default: u.gc('refresherRefreshingText', null) + }, + // 自定义下拉刷新刷新结束状态下的文字 + refresherCompleteText: { + type: [String, Object], + default: u.gc('refresherCompleteText', null) + }, + // 自定义继续下拉进入二楼文字 + refresherGoF2Text: { + type: [String, Object], + default: u.gc('refresherGoF2Text', null) + }, + // 自定义下拉刷新默认状态下的图片 + refresherDefaultImg: { + type: String, + default: u.gc('refresherDefaultImg', null) + }, + // 自定义下拉刷新松手立即刷新状态下的图片，默认与refresherDefaultImg一致 + refresherPullingImg: { + type: String, + default: u.gc('refresherPullingImg', null) + }, + // 自定义下拉刷新刷新中状态下的图片 + refresherRefreshingImg: { + type: String, + default: u.gc('refresherRefreshingImg', null) + }, + // 自定义下拉刷新刷新结束状态下的图片 + refresherCompleteImg: { + type: String, + default: u.gc('refresherCompleteImg', null) + }, + // 自定义下拉刷新刷新中状态下是否展示旋转动画 + refresherRefreshingAnimated: { + type: Boolean, + default: u.gc('refresherRefreshingAnimated', true) + }, + // 是否开启自定义下拉刷新刷新结束回弹效果，默认为是 + refresherEndBounceEnabled: { + type: Boolean, + default: u.gc('refresherEndBounceEnabled', true) + }, + // 是否开启自定义下拉刷新，默认为是 + refresherEnabled: { + type: Boolean, + default: u.gc('refresherEnabled', true) + }, + // 设置自定义下拉刷新阈值，默认为80rpx + refresherThreshold: { + type: [Number, String], + default: u.gc('refresherThreshold', '80rpx') + }, + // 设置系统下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式，默认为black + refresherDefaultStyle: { + type: String, + default: u.gc('refresherDefaultStyle', 'black') + }, + // 设置自定义下拉刷新区域背景 + refresherBackground: { + type: String, + default: u.gc('refresherBackground', 'transparent') + }, + // 设置固定的自定义下拉刷新区域背景 + refresherFixedBackground: { + type: String, + default: u.gc('refresherFixedBackground', 'transparent') + }, + // 设置固定的自定义下拉刷新区域高度，默认为0 + refresherFixedBacHeight: { + type: [Number, String], + default: u.gc('refresherFixedBacHeight', 0) + }, + // 设置自定义下拉刷新下拉超出阈值后继续下拉位移衰减的比例，范围0-1，值越大代表衰减越多。默认为0.65(nvue无效) + refresherOutRate: { + type: Number, + default: u.gc('refresherOutRate', 0.65) + }, + // 是否开启下拉进入二楼功能，默认为否 + refresherF2Enabled: { + type: Boolean, + default: u.gc('refresherF2Enabled', false) + }, + // 下拉进入二楼阈值，默认为200rpx + refresherF2Threshold: { + type: [Number, String], + default: u.gc('refresherF2Threshold', '200rpx') + }, + // 下拉进入二楼动画时间，单位为毫秒，默认为200毫秒 + refresherF2Duration: { + type: [Number, String], + default: u.gc('refresherF2Duration', 200) + }, + // 下拉进入二楼状态松手后是否弹出二楼，默认为是 + showRefresherF2: { + type: Boolean, + default: u.gc('showRefresherF2', true) + }, + // 设置自定义下拉刷新下拉时实际下拉位移与用户下拉距离的比值，默认为0.75，即代表若用户下拉10px，则实际位移为7.5px(nvue无效) + refresherPullRate: { + type: Number, + default: u.gc('refresherPullRate', 0.75) + }, + // 是否显示最后更新时间，默认为否 + showRefresherUpdateTime: { + type: Boolean, + default: u.gc('showRefresherUpdateTime', false) + }, + // 如果需要区别不同页面的最后更新时间，请为不同页面的z-paging的`refresher-update-time-key`设置不同的字符串 + refresherUpdateTimeKey: { + type: String, + default: u.gc('refresherUpdateTimeKey', 'default') + }, + // 下拉刷新时下拉到“松手立即刷新”或“松手进入二楼”状态时是否使手机短振动，默认为否（h5无效） + refresherVibrate: { + type: Boolean, + default: u.gc('refresherVibrate', false) + }, + // 下拉刷新时是否禁止下拉刷新view跟随用户触摸竖直移动，默认为否。注意此属性只是禁止下拉刷新view移动，其他下拉刷新逻辑依然会正常触发 + refresherNoTransform: { + type: Boolean, + default: u.gc('refresherNoTransform', false) + }, + // 是否开启下拉刷新状态栏占位，适用于隐藏导航栏时，下拉刷新需要避开状态栏高度的情况，默认为否 + useRefresherStatusBarPlaceholder: { + type: Boolean, + default: u.gc('useRefresherStatusBarPlaceholder', false) + }, + }, + data() { + return { + R: Enum.Refresher, + //下拉刷新状态 + refresherStatus: Enum.Refresher.Default, + refresherTouchstartY: 0, + lastRefresherTouchmove: null, + refresherReachMaxAngle: true, + refresherTransform: 'translateY(0px)', + refresherTransition: '', + finalRefresherDefaultStyle: 'black', + refresherRevealStackCount: 0, + refresherCompleteTimeout: null, + refresherCompleteSubTimeout: null, + refresherEndTimeout: null, + isTouchmovingTimeout: null, + refresherTriggered: false, + isTouchmoving: false, + isTouchEnded: false, + isUserPullDown: false, + privateRefresherEnabled: -1, + privateShowRefresherWhenReload: false, + customRefresherHeight: -1, + showCustomRefresher: false, + doRefreshAnimateAfter: false, + isRefresherInComplete: false, + showF2: false, + f2Transform: '', + pullDownTimeStamp: 0, + moveDis: 0, + oldMoveDis: 0, + currentDis: 0, + oldCurrentMoveDis: 0, + oldRefresherTouchmoveY: 0, + oldTouchDirection: '', + oldEmitedTouchDirection: '', + oldPullingDistance: -1, + refresherThresholdUpdateTag: 0 + } + }, + watch: { + refresherDefaultStyle: { + handler(newVal) { + if (newVal.length) { + this.finalRefresherDefaultStyle = newVal; + } + }, + immediate: true + }, + refresherStatus(newVal) { + newVal === Enum.Refresher.Loading && this._cleanRefresherEndTimeout(); + this.refresherVibrate && (newVal === Enum.Refresher.ReleaseToRefresh || newVal === Enum.Refresher.GoF2) && this._doVibrateShort(); + this.$emit('refresherStatusChange', newVal); + this.$emit('update:refresherStatus', newVal); + }, + // 监听当前下拉刷新启用/禁用状态 + refresherEnabled(newVal) { + // 当禁用下拉刷新时，强制收回正在展示的下拉刷新view + !newVal && this.endRefresh(); + } + }, + computed: { + pullDownDisTimeStamp() { + return 1000 / this.refresherFps; + }, + refresherThresholdUnitConverted() { + return u.addUnit(this.refresherThreshold, this.unit); + }, + finalRefresherEnabled() { + if (this.useChatRecordMode) return false; + if (this.privateRefresherEnabled === -1) return this.refresherEnabled; + return this.privateRefresherEnabled === 1; + }, + finalRefresherThreshold() { + let refresherThreshold = this.refresherThresholdUnitConverted; + let idDefault = false; + if (refresherThreshold === u.addUnit(80, this.unit)) { + idDefault = true; + if (this.showRefresherUpdateTime) { + refresherThreshold = u.addUnit(120, this.unit); + } + } + if (idDefault && this.customRefresherHeight > 0) return this.customRefresherHeight + this.finalRefresherThresholdPlaceholder; + return u.convertToPx(refresherThreshold) + this.finalRefresherThresholdPlaceholder; + }, + finalRefresherF2Threshold() { + return u.convertToPx(u.addUnit(this.refresherF2Threshold, this.unit)); + }, + finalRefresherThresholdPlaceholder() { + return this.useRefresherStatusBarPlaceholder ? this.statusBarHeight : 0; + }, + finalRefresherFixedBacHeight() { + return u.convertToPx(this.refresherFixedBacHeight); + }, + finalRefresherThemeStyle() { + return this.refresherThemeStyle.length ? this.refresherThemeStyle : this.defaultThemeStyle; + }, + finalRefresherOutRate() { + let rate = this.refresherOutRate; + rate = Math.max(0,rate); + rate = Math.min(1,rate); + return rate; + }, + finalRefresherPullRate() { + let rate = this.refresherPullRate; + rate = Math.max(0,rate); + return rate; + }, + finalRefresherTransform() { + if (this.refresherNoTransform || this.refresherTransform === 'translateY(0px)') return 'none'; + return this.refresherTransform; + }, + finalShowRefresherWhenReload() { + return this.showRefresherWhenReload || this.privateShowRefresherWhenReload; + }, + finalRefresherTriggered() { + if (!(this.finalRefresherEnabled && !this.useCustomRefresher)) return false; + return this.refresherTriggered; + }, + showRefresher() { + const showRefresher = this.finalRefresherEnabled || this.useCustomRefresher && !this.useChatRecordMode; + // #ifndef APP-NVUE + this.active && this.customRefresherHeight === -1 && showRefresher && this.updateCustomRefresherHeight(); + // #endif + return showRefresher; + }, + hasTouchmove() { + // #ifdef VUE2 + // #ifdef APP-VUE || H5 + if (this.$listeners && !this.$listeners.refresherTouchmove) return false; + // #endif + // #ifdef MP-WEIXIN || MP-QQ + return this.watchRefresherTouchmove; + // #endif + return true; + // #endif + return this.watchRefresherTouchmove; + }, + }, + methods: { + // 终止下拉刷新状态 + endRefresh() { + this.totalData = this.realTotalData; + this._refresherEnd(); + this._endSystemLoadingAndRefresh(); + this._handleScrollViewBounce({ bounce: true }); + this.$nextTick(() => { + this.refresherTriggered = false; + }) + }, + // 手动更新自定义下拉刷新view高度 + updateCustomRefresherHeight() { + u.delay(() => this.$nextTick(this._updateCustomRefresherHeight)); + }, + // 关闭二楼 + closeF2() { + this._handleCloseF2(); + }, + // 自定义下拉刷新被触发 + _onRefresh(fromScrollView = false, isUserPullDown = true) { + if (fromScrollView && !(this.finalRefresherEnabled && !this.useCustomRefresher)) return; + this.$emit('onRefresh'); + this.$emit('Refresh'); + // #ifdef APP-NVUE + if (this.loading) { + u.delay(this._nRefresherEnd, 500) + return; + } + // #endif + if (this.loading || this.isRefresherInComplete) return; + this.loadingType = Enum.LoadingType.Refresher; + if (this.nShowRefresherReveal) return; + this.isUserPullDown = isUserPullDown; + this.isUserReload = !isUserPullDown; + this._startLoading(true); + this.refresherTriggered = true; + if (this.reloadWhenRefresh && isUserPullDown) { + this.useChatRecordMode ? this._onLoadingMore('click') : this._reload(false, false, isUserPullDown); + } + }, + // 自定义下拉刷新被复位 + _onRestore() { + this.refresherTriggered = 'restore'; + this.$emit('onRestore'); + this.$emit('Restore'); + }, + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // touch开始 + _refresherTouchstart(e) { + this._handleListTouchstart(); + if (this._touchDisabled()) return; + this._handleRefresherTouchstart(u.getTouch(e)); + }, + // #endif + // 进一步处理touch开始结果 + _handleRefresherTouchstart(touch) { + if (!this.loading && this.isTouchEnded) { + this.isTouchmoving = false; + } + this.loadingType = Enum.LoadingType.Refresher; + this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout); + this.isTouchEnded = false; + this.refresherTransition = ''; + this.refresherTouchstartY = touch.touchY; + this.$emit('refresherTouchstart', this.refresherTouchstartY); + this.lastRefresherTouchmove = touch; + this._cleanRefresherCompleteTimeout(); + this._cleanRefresherEndTimeout(); + }, + + // 非app-vue或微信小程序或QQ小程序或h5平台，使用js控制下拉刷新 + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // touch中 + _refresherTouchmove(e) { + const currentTimeStamp = u.getTime(); + let touch = null; + let refresherTouchmoveY = 0; + if (this.watchTouchDirectionChange) { + // 检测下拉刷新方向改变 + touch = u.getTouch(e); + refresherTouchmoveY = touch.touchY; + const direction = refresherTouchmoveY > this.oldRefresherTouchmoveY ? 'top' : 'bottom'; + // 只有在方向改变的时候才emit相关事件 + if (direction === this.oldTouchDirection && direction !== this.oldEmitedTouchDirection) { + this._handleTouchDirectionChange({ direction }); + this.oldEmitedTouchDirection = direction; + } + this.oldTouchDirection = direction; + this.oldRefresherTouchmoveY = refresherTouchmoveY; + } + // 节流处理，在pullDownDisTimeStamp时间内的下拉刷新中事件不进行处理 + if (this.pullDownTimeStamp && currentTimeStamp - this.pullDownTimeStamp <= this.pullDownDisTimeStamp) return; + // 如果不允许下拉，则return + if (this._touchDisabled()) return; + this.pullDownTimeStamp = Number(currentTimeStamp); + touch = u.getTouch(e); + refresherTouchmoveY = touch.touchY; + // 获取当前touch的y - 初始touch的y，计算它们的差 + let moveDis = refresherTouchmoveY - this.refresherTouchstartY; + if (moveDis < 0) return; + // 对下拉刷新的角度进行限制 + if (this.refresherMaxAngle >= 0 && this.refresherMaxAngle <= 90 && this.lastRefresherTouchmove && this.lastRefresherTouchmove.touchY <= refresherTouchmoveY) { + if (!moveDis && !this.refresherAngleEnableChangeContinued && this.moveDis < 1 && !this.refresherReachMaxAngle) return; + const x = Math.abs(touch.touchX - this.lastRefresherTouchmove.touchX); + const y = Math.abs(refresherTouchmoveY - this.lastRefresherTouchmove.touchY); + const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); + if ((x || y) && x > 1) { + // 获取下拉刷新前后两次位移的角度 + const angle = Math.asin(y / z) / Math.PI * 180; + // 如果角度小于配置要求，则return + if (angle < this.refresherMaxAngle) { + this.lastRefresherTouchmove = touch; + this.refresherReachMaxAngle = false; + return; + } + } + } + // 获取最终的moveDis + moveDis = this._getFinalRefresherMoveDis(moveDis); + // 处理下拉刷新位移 + this._handleRefresherTouchmove(moveDis, touch); + // 下拉刷新时，禁止页面滚动以防止页面向下滚动和下拉刷新同时作用导致下拉刷新位置偏移超过预期 + if (!this.disabledBounce) { + // #ifndef MP-LARK + this._handleScrollViewBounce({ bounce: false }); + // #endif + this.disabledBounce = true; + } + this._emitTouchmove({ pullingDistance: moveDis, dy: this.moveDis - this.oldMoveDis }); + }, + // #endif + // 进一步处理touch中结果 + _handleRefresherTouchmove(moveDis, touch) { + this.refresherReachMaxAngle = true; + this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout); + this.isTouchmoving = true; + this.isTouchEnded = false; + // 更新下拉刷新状态 + // 下拉刷新距离超过阈值 + if (moveDis >= this.finalRefresherThreshold) { + // 如果开启了下拉进入二楼并且下拉刷新距离超过进入二楼阈值，则当前下拉刷新状态为松手进入二楼，否则为松手立即刷新 + this.refresherStatus = this.refresherF2Enabled && moveDis >= this.finalRefresherF2Threshold ? Enum.Refresher.GoF2 : Enum.Refresher.ReleaseToRefresh; + } else { + // 下拉刷新距离未超过阈值，显示默认状态 + this.refresherStatus = Enum.Refresher.Default; + } + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // this.scrollEnable = false; + // 通过transform控制下拉刷新view垂直偏移 + this.refresherTransform = `translateY(${moveDis}px)`; + this.lastRefresherTouchmove = touch; + // #endif + this.moveDis = moveDis; + }, + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // touch结束 + _refresherTouchend(e) { + // 下拉刷新用户手离开屏幕，允许列表滚动 + this._handleScrollViewBounce({bounce: true}); + if (this._touchDisabled() || !this.isTouchmoving) return; + const touch = u.getTouch(e); + let refresherTouchendY = touch.touchY; + let moveDis = refresherTouchendY - this.refresherTouchstartY; + moveDis = this._getFinalRefresherMoveDis(moveDis); + this._handleRefresherTouchend(moveDis); + this.disabledBounce = false; + }, + // #endif + // 进一步处理touch结束结果 + _handleRefresherTouchend(moveDis) { + // #ifndef APP-PLUS || H5 || MP-WEIXIN + if (!this.isTouchmoving) return; + // #endif + this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout); + this.refresherReachMaxAngle = true; + this.isTouchEnded = true; + const refresherThreshold = this.finalRefresherThreshold; + if (moveDis >= refresherThreshold && (this.refresherStatus === Enum.Refresher.ReleaseToRefresh || this.refresherStatus === Enum.Refresher.GoF2)) { + // 如果是松手进入二楼状态，则触发进入二楼 + if (this.refresherStatus === Enum.Refresher.GoF2) { + this._handleGoF2(); + this._refresherEnd(); + } else { + // 如果是松手立即刷新状态，则触发下拉刷新 + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.refresherTransform = `translateY(${refresherThreshold}px)`; + this.refresherTransition = 'transform .1s linear'; + // #endif + u.delay(() => { + this._emitTouchmove({ pullingDistance: refresherThreshold, dy: this.moveDis - refresherThreshold }); + }, 0.1); + this.moveDis = refresherThreshold; + this.refresherStatus = Enum.Refresher.Loading; + this._doRefresherLoad(); + } + } else { + this._refresherEnd(); + this.isTouchmovingTimeout = u.delay(() => { + this.isTouchmoving = false; + }, this.refresherDefaultDuration); + } + this.scrollEnable = true; + this.$emit('refresherTouchend', moveDis); + }, + // 处理列表触摸开始事件 + _handleListTouchstart() { + if (this.useChatRecordMode && this.autoHideKeyboardWhenChat) { + uni.hideKeyboard(); + this.$emit('hidedKeyboard'); + } + }, + // 处理scroll-view bounce是否生效 + _handleScrollViewBounce({ bounce }) { + if (!this.usePageScroll && !this.scrollToTopBounceEnabled) { + if (this.wxsScrollTop <= 5) { + // #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.refresherTransition = ''; + // #endif + this.scrollEnable = bounce; + } else if (bounce) { + this.scrollEnable = bounce; + } + } + }, + // wxs正在下拉状态改变处理 + _handleWxsPullingDownStatusChange(onPullingDown) { + this.wxsOnPullingDown = onPullingDown; + if (onPullingDown && !this.useChatRecordMode) { + this.renderPropScrollTop = 0; + } + }, + // wxs正在下拉处理 + _handleWxsPullingDown({ moveDis, diffDis }){ + this._emitTouchmove({ pullingDistance: moveDis,dy: diffDis }); + }, + // wxs触摸方向改变 + _handleTouchDirectionChange({ direction }) { + this.$emit('touchDirectionChange',direction); + }, + // wxs通知更新其props + _handlePropUpdate(){ + this.wxsPropType = u.getTime().toString(); + }, + // 下拉刷新结束 + _refresherEnd(shouldEndLoadingDelay = true, fromAddData = false, isUserPullDown = false, setLoading = true) { + if (this.loadingType === Enum.LoadingType.Refresher) { + // 计算当前下拉刷新结束需要延迟的时间 + const refresherCompleteDelay = (fromAddData && (isUserPullDown || this.showRefresherWhenReload)) ? this.refresherCompleteDelay : 0; + // 如果延迟时间大于0，则展示刷新结束状态，否则直接展示默认状态 + const refresherStatus = refresherCompleteDelay > 0 ? Enum.Refresher.Complete : Enum.Refresher.Default; + if (this.finalShowRefresherWhenReload) { + const stackCount = this.refresherRevealStackCount; + this.refresherRevealStackCount --; + if (stackCount > 1) return; + } + this._cleanRefresherEndTimeout(); + this.refresherEndTimeout = u.delay(() => { + // 更新下拉刷新状态 + this.refresherStatus = refresherStatus; + // 如果当前下拉刷新状态不是刷新结束，则认为其不在刷新结束状态 + if (refresherStatus !== Enum.Refresher.Complete) { + this.isRefresherInComplete = false; + } + }, this.refresherStatus !== Enum.Refresher.Default && refresherStatus === Enum.Refresher.Default ? this.refresherCompleteDuration : 0); + + // #ifndef APP-NVUE + if (refresherCompleteDelay > 0) { + this.isRefresherInComplete = true; + } + // #endif + this._cleanRefresherCompleteTimeout(); + this.refresherCompleteTimeout = u.delay(() => { + let animateDuration = 1; + const animateType = this.refresherEndBounceEnabled && fromAddData ? 'cubic-bezier(0.19,1.64,0.42,0.72)' : 'linear'; + if (fromAddData) { + animateDuration = this.refresherEndBounceEnabled ? this.refresherCompleteDuration / 1000 : this.refresherCompleteDuration / 3000; + } + this.refresherTransition = `transform ${fromAddData ? animateDuration : this.refresherDefaultDuration / 1000}s ${animateType}`; + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.refresherTransform = 'translateY(0px)'; + this.currentDis = 0; + // #endif + // #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.wxsPropType = this.refresherTransition + 'end' + u.getTime(); + // #endif + // #ifdef APP-NVUE + this._nRefresherEnd(); + // #endif + this.moveDis = 0; + // #ifndef APP-NVUE + if (refresherStatus === Enum.Refresher.Complete) { + if (this.refresherCompleteSubTimeout) { + clearTimeout(this.refresherCompleteSubTimeout); + this.refresherCompleteSubTimeout = null; + } + this.refresherCompleteSubTimeout = u.delay(() => { + this.$nextTick(() => { + this.refresherStatus = Enum.Refresher.Default; + this.isRefresherInComplete = false; + }) + }, animateDuration * 800); + } + // #endif + this._emitTouchmove({ pullingDistance: 0, dy: this.moveDis }); + }, refresherCompleteDelay); + } + if (setLoading) { + u.delay(() => this.loading = false, shouldEndLoadingDelay ? 10 : 0); + isUserPullDown && this._onRestore(); + } + }, + // 处理进入二楼 + _handleGoF2() { + if (this.showF2 || !this.refresherF2Enabled) return; + this.$emit('refresherF2Change', 'go'); + + if (!this.showRefresherF2) return; + // #ifndef APP-NVUE + this.f2Transform = `translateY(${-this.superContentHeight}px)`; + this.showF2 = true; + u.delay(() => { + this.f2Transform = 'translateY(0px)'; + }, 100, 'f2ShowDelay') + // #endif + + // #ifdef APP-NVUE + this.showF2 = true; + this.$nextTick(() => { + weexAnimation.transition(this.$refs['zp-n-f2'], { + styles: { transform: `translateY(${-this.superContentHeight}px)` }, + duration: 0, + timingFunction: 'linear', + needLayout: true, + delay: 0 + }) + this.nF2Opacity = 1; + }) + u.delay(() => { + weexAnimation.transition(this.$refs['zp-n-f2'], { + styles: { transform: 'translateY(0px)' }, + duration: this.refresherF2Duration, + timingFunction: 'linear', + needLayout: true, + delay: 0 + }) + }, 10, 'f2GoDelay') + // #endif + }, + // 处理退出二楼 + _handleCloseF2() { + if (!this.showF2 || !this.refresherF2Enabled) return; + this.$emit('refresherF2Change', 'close'); + + if (!this.showRefresherF2) return; + // #ifndef APP-NVUE + this.f2Transform = `translateY(${-this.superContentHeight}px)`; + // #endif + + // #ifdef APP-NVUE + weexAnimation.transition(this.$refs['zp-n-f2'], { + styles: { transform: `translateY(${-this.superContentHeight}px)` }, + duration: this.refresherF2Duration, + timingFunction: 'linear', + needLayout: true, + delay: 0 + }) + // #endif + + u.delay(() => { + this.showF2 = false; + this.nF2Opacity = 0; + }, this.refresherF2Duration, 'f2CloseDelay') + }, + // 模拟用户手动触发下拉刷新 + _doRefresherRefreshAnimate() { + this._cleanRefresherCompleteTimeout(); + // 用户处理用户在短时间内多次调用reload的情况，此时下拉刷新view不需要重复显示，只需要保证最后一次reload对应的请求结束后收回下拉刷新view即可 + // #ifndef APP-NVUE + const doRefreshAnimateAfter = !this.doRefreshAnimateAfter && (this.finalShowRefresherWhenReload) && this + .customRefresherHeight === -1 && this.refresherThreshold === u.addUnit(80, this.unit); + if (doRefreshAnimateAfter) { + this.doRefreshAnimateAfter = true; + return; + } + // #endif + this.refresherRevealStackCount ++; + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.refresherTransform = `translateY(${this.finalRefresherThreshold}px)`; + // #endif + // #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5 + this.wxsPropType = 'begin' + u.getTime(); + // #endif + this.moveDis = this.finalRefresherThreshold; + this.refresherStatus = Enum.Refresher.Loading; + this.isTouchmoving = true; + this.isTouchmovingTimeout && clearTimeout(this.isTouchmovingTimeout); + this._doRefresherLoad(false); + }, + // 触发下拉刷新 + _doRefresherLoad(isUserPullDown = true) { + this._onRefresh(false, isUserPullDown); + this.loading = true; + }, + // #ifndef APP-VUE || MP-WEIXIN || MP-QQ || H5 + // 获取处理后的moveDis + _getFinalRefresherMoveDis(moveDis) { + let diffDis = moveDis - this.oldCurrentMoveDis; + this.oldCurrentMoveDis = moveDis; + if (diffDis > 0) { + // 根据配置的下拉刷新用户手势位移与实际需要的位移比率计算最终的diffDis + diffDis = diffDis * this.finalRefresherPullRate; + if (this.currentDis > this.finalRefresherThreshold) { + diffDis = diffDis * (1 - this.finalRefresherOutRate); + } + } + // 控制diffDis过大的情况，比如进入页面突然猛然下拉，此时diffDis不应进行太大的偏移 + diffDis = diffDis > 100 ? diffDis / 100 : diffDis; + this.currentDis += diffDis; + this.currentDis = Math.max(0, this.currentDis); + return this.currentDis; + }, + // 判断touch手势是否要触发 + _touchDisabled() { + const checkOldScrollTop = this.oldScrollTop > 5; + return this.loading || this.isRefresherInComplete || this.useChatRecordMode || !this.refresherEnabled || !this.useCustomRefresher ||(this.usePageScroll && this.useCustomRefresher && this.pageScrollTop > 10) || (!(this.usePageScroll && this.useCustomRefresher) && checkOldScrollTop); + }, + // #endif + // 更新自定义下拉刷新view高度 + _updateCustomRefresherHeight() { + this._getNodeClientRect('.zp-custom-refresher-slot-view').then((res) => { + this.customRefresherHeight = res ? res[0].height : 0; + this.showCustomRefresher = this.customRefresherHeight > 0; + if (this.doRefreshAnimateAfter) { + this.doRefreshAnimateAfter = false; + this._doRefresherRefreshAnimate(); + } + }); + }, + // emit pullingDown事件 + _emitTouchmove(e) { + // #ifndef APP-NVUE + e.viewHeight = this.finalRefresherThreshold; + // #endif + e.rate = e.viewHeight > 0 ? e.pullingDistance / e.viewHeight : 0; + this.hasTouchmove && this.oldPullingDistance !== e.pullingDistance && this.$emit('refresherTouchmove', e); + this.oldPullingDistance = e.pullingDistance; + }, + // 清除refresherCompleteTimeout + _cleanRefresherCompleteTimeout() { + this.refresherCompleteTimeout = this._cleanTimeout(this.refresherCompleteTimeout); + // #ifdef APP-NVUE + this._nRefresherEnd(false); + // #endif + }, + // 清除refresherEndTimeout + _cleanRefresherEndTimeout() { + this.refresherEndTimeout = this._cleanTimeout(this.refresherEndTimeout); + }, + } +} diff --git a/components/z-paging/components/z-paging/js/modules/scroller.js b/components/z-paging/components/z-paging/js/modules/scroller.js new file mode 100644 index 0000000..4421351 --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/scroller.js @@ -0,0 +1,550 @@ +// [z-paging]scroll相关模块 +import u from '.././z-paging-utils' +import Enum from '.././z-paging-enum' + +// #ifdef APP-NVUE +const weexDom = weex.requireModule('dom'); +// #endif + +export default { + props: { + // 使用页面滚动，默认为否，当设置为是时则使用页面的滚动而非此组件内部的scroll-view的滚动，使用页面滚动时z-paging无需设置确定的高度且对于长列表展示性能更高，但配置会略微繁琐 + usePageScroll: { + type: Boolean, + default: u.gc('usePageScroll', false) + }, + // 是否可以滚动，使用内置scroll-view和nvue时有效，默认为是 + scrollable: { + type: Boolean, + default: u.gc('scrollable', true) + }, + // 控制是否出现滚动条，默认为是 + showScrollbar: { + type: Boolean, + default: u.gc('showScrollbar', true) + }, + // 是否允许横向滚动，默认为否 + scrollX: { + type: Boolean, + default: u.gc('scrollX', false) + }, + // iOS设备上滚动到顶部时是否允许回弹效果，默认为否。关闭回弹效果后可使滚动到顶部与下拉刷新更连贯，但是有吸顶view时滚动到顶部时可能出现抖动。 + scrollToTopBounceEnabled: { + type: Boolean, + default: u.gc('scrollToTopBounceEnabled', false) + }, + // iOS设备上滚动到底部时是否允许回弹效果，默认为是。 + scrollToBottomBounceEnabled: { + type: Boolean, + default: u.gc('scrollToBottomBounceEnabled', true) + }, + // 在设置滚动条位置时使用动画过渡，默认为否 + scrollWithAnimation: { + type: Boolean, + default: u.gc('scrollWithAnimation', false) + }, + // 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 + scrollIntoView: { + type: String, + default: u.gc('scrollIntoView', '') + }, + }, + data() { + return { + scrollTop: 0, + oldScrollTop: 0, + scrollLeft: 0, + oldScrollLeft: 0, + scrollViewStyle: {}, + scrollViewContainerStyle: {}, + scrollViewInStyle: {}, + pageScrollTop: -1, + scrollEnable: true, + privateScrollWithAnimation: -1, + cacheScrollNodeHeight: -1, + superContentHeight: 0, + } + }, + watch: { + oldScrollTop(newVal) { + !this.usePageScroll && this._scrollTopChange(newVal,false); + }, + pageScrollTop(newVal) { + this.usePageScroll && this._scrollTopChange(newVal,true); + }, + usePageScroll: { + handler(newVal) { + this.loaded && this.autoHeight && this._setAutoHeight(!newVal); + // #ifdef H5 + if (newVal) { + this.$nextTick(() => { + const mainScrollRef = this.$refs['zp-scroll-view'].$refs.main; + if (mainScrollRef) { + mainScrollRef.style = {}; + } + }) + } + // #endif + }, + immediate: true + }, + finalScrollTop(newVal) { + this.renderPropScrollTop = newVal < 6 ? 0 : 10; + } + }, + computed: { + finalScrollWithAnimation() { + if (this.privateScrollWithAnimation !== -1) { + return this.privateScrollWithAnimation === 1; + } + return this.scrollWithAnimation; + }, + finalScrollViewStyle() { + if (this.superContentZIndex != 1) { + this.scrollViewStyle['z-index'] = this.superContentZIndex; + this.scrollViewStyle['position'] = 'relative'; + } + return this.scrollViewStyle; + }, + finalScrollTop() { + return this.usePageScroll ? this.pageScrollTop : this.oldScrollTop; + }, + // 当前是否是旧版webview + finalIsOldWebView() { + return this.isOldWebView && !this.usePageScroll; + }, + // 当前scroll-view/list-view是否允许滚动 + finalScrollable() { + return this.scrollable && !this.usePageScroll && this.scrollEnable + && (this.refresherCompleteScrollable ? true : this.refresherStatus !== Enum.Refresher.Complete) + && (this.refresherRefreshingScrollable ? true : this.refresherStatus !== Enum.Refresher.Loading); + } + }, + methods: { + // 滚动到顶部，animate为是否展示滚动动画，默认为是 + scrollToTop(animate, checkReverse = true) { + // 如果是聊天记录模式并且列表倒置了，则滚动到顶部实际上是滚动到底部 + if (this.useChatRecordMode && checkReverse && !this.isChatRecordModeAndNotInversion) { + this.scrollToBottom(animate, false); + return; + } + this.$nextTick(() => { + this._scrollToTop(animate, false); + // #ifdef APP-NVUE + if (this.nvueFastScroll && animate) { + u.delay(() => { + this._scrollToTop(false, false); + }); + } + // #endif + }) + }, + // 滚动到底部，animate为是否展示滚动动画，默认为是 + scrollToBottom(animate, checkReverse = true) { + // 如果是聊天记录模式并且列表倒置了，则滚动到底部实际上是滚动到顶部 + if (this.useChatRecordMode && checkReverse && !this.isChatRecordModeAndNotInversion) { + this.scrollToTop(animate, false); + return; + } + this.$nextTick(() => { + this._scrollToBottom(animate); + // #ifdef APP-NVUE + if (this.nvueFastScroll && animate) { + u.delay(() => { + this._scrollToBottom(false); + }); + } + // #endif + }) + }, + // 滚动到指定view(vue中有效)。sel为需要滚动的view的id值，不包含"#"；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否 + scrollIntoViewById(sel, offset, animate) { + this._scrollIntoView(sel, offset, animate); + }, + // 滚动到指定view(vue中有效)。nodeTop为需要滚动的view的top值(通过uni.createSelectorQuery()获取)；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否 + scrollIntoViewByNodeTop(nodeTop, offset, animate) { + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this._scrollIntoViewByNodeTop(nodeTop, offset, animate); + }) + }, + // y轴滚动到指定位置(vue中有效)。y为与顶部的距离，单位为px；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否 + scrollToY(y, offset, animate) { + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this._scrollToY(y, offset, animate); + }) + }, + // x轴滚动到指定位置(非页面滚动且在vue中有效)。x为与左侧的距离，单位为px；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否 + scrollToX(x, offset, animate) { + this.scrollLeft = this.oldScrollLeft; + this.$nextTick(() => { + this._scrollToX(x, offset, animate); + }) + }, + // 滚动到指定view(nvue中和虚拟列表中有效)。index为需要滚动的view的index(第几个，从0开始)；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否 + scrollIntoViewByIndex(index, offset, animate) { + if (index >= this.realTotalData.length) { + u.consoleErr('当前滚动的index超出已渲染列表长度，请先通过refreshToPage加载到对应index页并等待渲染成功后再调用此方法！'); + return; + } + this.$nextTick(() => { + // #ifdef APP-NVUE + // 在nvue中，根据index获取对应节点信息并滚动到此节点位置 + this._scrollIntoView(index, offset, animate); + // #endif + // #ifndef APP-NVUE + if (this.finalUseVirtualList) { + const isCellFixed = this.cellHeightMode === Enum.CellHeightMode.Fixed; + u.delay(() => { + if (this.finalUseVirtualList) { + // 虚拟列表 + 每个cell高度完全相同模式下，此时滚动到对应index的cell就是滚动到scrollTop = cellHeight * index的位置 + // 虚拟列表 + 高度是动态非固定的模式下，此时滚动到对应index的cell就是滚动到scrollTop = 缓存的cell高度数组中第index个的lastTotalHeight的位置 + const scrollTop = isCellFixed ? this.virtualCellHeight * index : this.virtualHeightCacheList[index].lastTotalHeight; + this.scrollToY(scrollTop, offset, animate); + } + }, isCellFixed ? 0 : 100) + } + // #endif + }) + }, + // 滚动到指定view(nvue中有效)。view为需要滚动的view(通过`this.$refs.xxx`获取)，不包含"#"；offset为偏移量，单位为px；animate为是否展示滚动动画，默认为否 + scrollIntoViewByView(view, offset, animate) { + this._scrollIntoView(view, offset, animate); + }, + // 当使用页面滚动并且自定义下拉刷新时，请在页面的onPageScroll中调用此方法，告知z-paging当前的pageScrollTop，否则会导致在任意位置都可以下拉刷新 + updatePageScrollTop(value) { + this.pageScrollTop = value; + }, + // 当使用页面滚动并且设置了slot="top"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="top"的view高度动态改变时，在其高度需要更新时调用此方法 + updatePageScrollTopHeight() { + this._updatePageScrollTopOrBottomHeight('top'); + }, + // 当使用页面滚动并且设置了slot="bottom"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="bottom"的view高度动态改变时，在其高度需要更新时调用此方法 + updatePageScrollBottomHeight() { + this._updatePageScrollTopOrBottomHeight('bottom'); + }, + // 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变时调用 + updateLeftAndRightWidth() { + if (!this.finalIsOldWebView) return; + this.$nextTick(() => this._updateLeftAndRightWidth(this.scrollViewContainerStyle, 'zp-page')); + }, + // 更新z-paging内置scroll-view的scrollTop + updateScrollViewScrollTop(scrollTop, animate = true) { + this._updatePrivateScrollWithAnimation(animate); + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this.scrollTop = scrollTop; + this.oldScrollTop = this.scrollTop; + }); + }, + + // 当滚动到顶部时 + _onScrollToUpper() { + this._emitScrollEvent('scrolltoupper'); + this.$emit('scrollTopChange', 0); + this.$nextTick(() => { + this.oldScrollTop = 0; + }) + }, + // 当滚动到底部时 + _onScrollToLower(e) { + (!e.detail || !e.detail.direction || e.detail.direction === 'bottom') + && this.toBottomLoadingMoreEnabled + && this._onLoadingMore(this.useChatRecordMode ? 'click' : 'toBottom') + }, + // 滚动到顶部 + _scrollToTop(animate = true, isPrivate = true) { + // #ifdef APP-NVUE + // 在nvue中需要通过weex.scrollToElement滚动到顶部，此时在顶部插入了一个view，使得滚动到这个view位置 + const el = this.$refs['zp-n-list-top-tag']; + if (this.usePageScroll) { + this._getNodeClientRect('zp-page-scroll-top', false).then(node => { + const nodeHeight = node ? node[0].height : 0; + weexDom.scrollToElement(el, { + offset: -nodeHeight, + animated: animate + }); + }); + } else { + if (!this.isIos && this.nvueListIs === 'scroller') { + this._getNodeClientRect('zp-n-refresh-container', false).then(node => { + const nodeHeight = node ? node[0].height : 0; + weexDom.scrollToElement(el, { + offset: -nodeHeight, + animated: animate + }); + }); + } else { + weexDom.scrollToElement(el, { + offset: 0, + animated: animate + }); + } + } + return; + // #endif + if (this.usePageScroll) { + this.$nextTick(() => { + uni.pageScrollTo({ + scrollTop: 0, + duration: animate ? 100 : 0, + }); + }); + return; + } + this._updatePrivateScrollWithAnimation(animate); + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this.scrollTop = 0; + this.oldScrollTop = this.scrollTop; + }); + }, + // 滚动到底部 + async _scrollToBottom(animate = true) { + // #ifdef APP-NVUE + // 在nvue中需要通过weex.scrollToElement滚动到顶部，此时在底部插入了一个view，使得滚动到这个view位置 + const el = this.$refs['zp-n-list-bottom-tag']; + if (el) { + weexDom.scrollToElement(el, { + offset: 0, + animated: animate + }); + } else { + u.consoleErr('滚动到底部失败，因为您设置了hideNvueBottomTag为true'); + } + return; + // #endif + if (this.usePageScroll) { + this.$nextTick(() => { + uni.pageScrollTo({ + scrollTop: Number.MAX_VALUE, + duration: animate ? 100 : 0, + }); + }); + return; + } + try { + this._updatePrivateScrollWithAnimation(animate); + const pagingContainerNode = await this._getNodeClientRect('.zp-paging-container'); + const scrollViewNode = await this._getNodeClientRect('.zp-scroll-view'); + const pagingContainerH = pagingContainerNode ? pagingContainerNode[0].height : 0; + const scrollViewH = scrollViewNode ? scrollViewNode[0].height : 0; + if (pagingContainerH > scrollViewH) { + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + this.scrollTop = pagingContainerH - scrollViewH + this.virtualPlaceholderTopHeight; + this.oldScrollTop = this.scrollTop; + }); + } + } catch (e) {} + }, + // 滚动到指定view + _scrollIntoView(sel, offset = 0, animate = false, finishCallback) { + try { + this.scrollTop = this.oldScrollTop; + this.$nextTick(() => { + // #ifdef APP-NVUE + const refs = this.$parent.$refs; + if (!refs) return; + const dataType = Object.prototype.toString.call(sel); + let el = null; + if (dataType === '[object Number]') { + const els = refs[`z-paging-${sel}`]; + el = els ? els[0] : null; + } else if (dataType === '[object Array]') { + el = sel[0]; + } else { + el = sel; + } + if (el) { + weexDom.scrollToElement(el, { + offset: -offset, + animated: animate + }); + } else { + u.consoleErr('在nvue中滚动到指定位置，cell必须设置 :ref="`z-paging-${index}`"'); + } + return; + // #endif + this._getNodeClientRect('#' + sel.replace('#', ''), this.$parent).then((node) => { + if (node) { + let nodeTop = node[0].top; + this._scrollIntoViewByNodeTop(nodeTop, offset, animate); + finishCallback && finishCallback(); + } + }); + }); + } catch (e) {} + }, + // 通过nodeTop滚动到指定view + _scrollIntoViewByNodeTop(nodeTop, offset = 0, animate = false) { + // 如果是聊天记录模式并且列表倒置了，此时nodeTop需要等于scroll-view高度 - nodeTop + if (this.isChatRecordModeAndInversion) { + this._getNodeClientRect('.zp-scroll-view').then(sNode => { + if (sNode) { + this._scrollToY(sNode[0].height - nodeTop, offset, animate, true); + } + }) + } else { + this._scrollToY(nodeTop, offset, animate, true); + } + }, + // y轴滚动到指定位置 + _scrollToY(y, offset = 0, animate = false, addScrollTop = false) { + this._updatePrivateScrollWithAnimation(animate); + u.delay(() => { + if (this.usePageScroll) { + if (addScrollTop && this.pageScrollTop !== -1) { + y += this.pageScrollTop; + } + const scrollTop = y - offset; + uni.pageScrollTo({ + scrollTop, + duration: animate ? 100 : 0 + }); + } else { + if (addScrollTop) { + y += this.oldScrollTop; + } + this.scrollTop = y - offset; + } + }, 10) + }, + // x轴滚动到指定位置 + _scrollToX(x, offset = 0, animate = false) { + this._updatePrivateScrollWithAnimation(animate); + u.delay(() => { + if (!this.usePageScroll) { + this.scrollLeft = x - offset; + } else { + u.consoleErr('使用页面滚动时不支持scrollToX'); + } + }, 10) + }, + // scroll-view滚动中 + _scroll(e) { + this.$emit('scroll', e); + const { scrollTop, scrollLeft } = e.detail; + // #ifndef APP-NVUE + this.finalUseVirtualList && this._updateVirtualScroll(scrollTop, this.oldScrollTop - scrollTop); + // #endif + this.oldScrollTop = scrollTop; + this.oldScrollLeft = scrollLeft; + // 滚动区域内容的总高度 - 当前滚动的scrollTop = 当前滚动区域的顶部与内容底部的距离 + const scrollDiff = e.detail.scrollHeight - this.oldScrollTop; + // 在非ios平台滚动中，再次验证一下是否滚动到了底部。因为在一些安卓设备中，有概率滚动到底部不触发@scrolltolower事件，因此添加双重检测逻辑 + !this.isIos && this._checkScrolledToBottom(scrollDiff); + }, + // emit scrolltolower/scrolltoupper事件 + _emitScrollEvent(type) { + const reversedType = type === 'scrolltolower' ? 'scrolltoupper' : 'scrolltolower'; + const eventType = this.useChatRecordMode && !this.isChatRecordModeAndNotInversion + ? reversedType + : type; + + this.$emit(eventType); + }, + // 更新内置的scroll-view是否启用滚动动画 + _updatePrivateScrollWithAnimation(animate) { + this.privateScrollWithAnimation = animate ? 1 : 0; + u.delay(() => this.$nextTick(() => { + // 在滚动结束后将滚动动画状态设置回初始状态 + this.privateScrollWithAnimation = -1; + }), 100, 'updateScrollWithAnimationDelay') + }, + // 检测scrollView是否要铺满屏幕 + _doCheckScrollViewShouldFullHeight(totalData) { + if (this.autoFullHeight && this.usePageScroll && this.isTotalChangeFromAddData) { + // #ifndef APP-NVUE + this.$nextTick(() => { + this._checkScrollViewShouldFullHeight((scrollViewNode, pagingContainerNode) => { + this._preCheckShowNoMoreInside(totalData, scrollViewNode, pagingContainerNode) + }); + }) + // #endif + // #ifdef APP-NVUE + this._preCheckShowNoMoreInside(totalData) + // #endif + } else { + this._preCheckShowNoMoreInside(totalData) + } + }, + // 检测z-paging是否要全屏覆盖(当使用页面滚动并且不满全屏时，默认z-paging需要铺满全屏，避免数据过少时内部的empty-view无法正确展示) + async _checkScrollViewShouldFullHeight(callback) { + try { + const scrollViewNode = await this._getNodeClientRect('.zp-scroll-view'); + const pagingContainerNode = await this._getNodeClientRect('.zp-paging-container-content'); + if (!scrollViewNode || !pagingContainerNode) return; + const scrollViewHeight = pagingContainerNode[0].height; + const scrollViewTop = scrollViewNode[0].top; + if (this.isAddedData && scrollViewHeight + scrollViewTop <= this.windowHeight) { + this._setAutoHeight(true, scrollViewNode); + callback(scrollViewNode, pagingContainerNode); + } else { + this._setAutoHeight(false); + callback(null, null); + } + } catch (e) { + callback(null, null); + } + }, + // 更新缓存中z-paging整个内容容器高度 + async _updateCachedSuperContentHeight() { + const superContentNode = await this._getNodeClientRect('.z-paging-content'); + if (superContentNode) { + this.superContentHeight = superContentNode[0].height; + } + }, + // scrollTop改变时触发 + _scrollTopChange(newVal, isPageScrollTop){ + this.$emit('scrollTopChange', newVal); + this.$emit('update:scrollTop', newVal); + this._checkShouldShowBackToTop(newVal); + // 之前在安卓中scroll-view有概率滚动到顶部时scrollTop不为0导致下拉刷新判断异常，因此判断scrollTop在105之内都允许下拉刷新，但此方案会导致某些情况（例如滚动到距离顶部10px处）下拉抖动，因此改为通过获取zp-scroll-view的节点信息中的scrollTop进行验证的方案 + // const scrollTop = this.isIos ? (newVal > 5 ? 6 : 0) : (newVal > 105 ? 106 : (newVal > 5 ? 6 : 0)); + const scrollTop = newVal > 5 ? 6 : 0; + if (isPageScrollTop && this.wxsPageScrollTop !== scrollTop) { + this.wxsPageScrollTop = scrollTop; + } else if (!isPageScrollTop && this.wxsScrollTop !== scrollTop) { + this.wxsScrollTop = scrollTop; + if (scrollTop > 6) { + this.scrollEnable = true; + } + } + }, + // 更新使用页面滚动时slot="top"或"bottom"插入view的高度 + _updatePageScrollTopOrBottomHeight(type) { + // #ifndef APP-NVUE + if (!this.usePageScroll) return; + // #endif + this._doCheckScrollViewShouldFullHeight(this.realTotalData); + const node = `.zp-page-${type}`; + const marginText = `margin${type.slice(0,1).toUpperCase() + type.slice(1)}`; + let safeAreaInsetBottomAdd = this.safeAreaInsetBottom; + this.$nextTick(() => { + let delayTime = 0; + // #ifdef MP-BAIDU || APP-NVUE + delayTime = 50; + // #endif + u.delay(() => { + this._getNodeClientRect(node).then((res) => { + if (res) { + let pageScrollNodeHeight = res[0].height; + if (type === 'bottom') { + if (safeAreaInsetBottomAdd) { + pageScrollNodeHeight += this.safeAreaBottom; + } + } else { + this.cacheTopHeight = pageScrollNodeHeight; + } + this.$set(this.scrollViewStyle, marginText, `${pageScrollNodeHeight}px`); + } else if (safeAreaInsetBottomAdd) { + this.$set(this.scrollViewStyle, marginText, `${this.safeAreaBottom}px`); + } + }); + }, delayTime) + }) + }, + } +} diff --git a/components/z-paging/components/z-paging/js/modules/virtual-list.js b/components/z-paging/components/z-paging/js/modules/virtual-list.js new file mode 100644 index 0000000..6c0eb3d --- /dev/null +++ b/components/z-paging/components/z-paging/js/modules/virtual-list.js @@ -0,0 +1,555 @@ +// [z-paging]虚拟列表模块 +import u from '.././z-paging-utils' +import c from '.././z-paging-constant' +import Enum from '.././z-paging-enum' + +export default { + props: { + // 是否使用虚拟列表，默认为否 + useVirtualList: { + type: Boolean, + default: u.gc('useVirtualList', false) + }, + // 在使用虚拟列表时，是否使用兼容模式，默认为否 + useCompatibilityMode: { + type: Boolean, + default: u.gc('useCompatibilityMode', false) + }, + // 使用兼容模式时传递的附加数据 + extraData: { + type: Object, + default: u.gc('extraData', {}) + }, + // 是否在z-paging内部循环渲染列表(内置列表)，默认为否。若use-virtual-list为true，则此项恒为true + useInnerList: { + type: Boolean, + default: u.gc('useInnerList', false) + }, + // 强制关闭inner-list，默认为false，如果为true将强制关闭innerList，适用于开启了虚拟列表后需要强制关闭inner-list的情况 + forceCloseInnerList: { + type: Boolean, + default: u.gc('forceCloseInnerList', false) + }, + // 内置列表cell的key名称，仅nvue有效，在nvue中开启use-inner-list时必须填此项 + cellKeyName: { + type: String, + default: u.gc('cellKeyName', '') + }, + // innerList样式 + innerListStyle: { + type: Object, + default: u.gc('innerListStyle', {}) + }, + // innerCell样式 + innerCellStyle: { + type: Object, + default: u.gc('innerCellStyle', {}) + }, + // 预加载的列表可视范围(列表高度)页数，默认为12，即预加载当前页及上下各12页的cell。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题 + preloadPage: { + type: [Number, String], + default: u.gc('preloadPage', 12), + validator: (value) => { + if (value <= 0) u.consoleErr('preload-page必须大于0！'); + return value > 0; + } + }, + // 虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。可选值【dynamic】，即代表高度是动态非固定的，【dynamic】性能低于【fixed】。 + cellHeightMode: { + type: String, + default: u.gc('cellHeightMode', Enum.CellHeightMode.Fixed) + }, + // 固定的cell高度，cellHeightMode=fixed才有效，若设置了值，则不计算第一个cell高度而使用设置的cell高度 + fixedCellHeight: { + type: [Number, String], + default: u.gc('fixedCellHeight', 0) + }, + // 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2 + virtualListCol: { + type: [Number, String], + default: u.gc('virtualListCol', 1) + }, + // 虚拟列表scroll取样帧率，默认为80，过低容易出现白屏问题，过高容易出现卡顿问题 + virtualScrollFps: { + type: [Number, String], + default: u.gc('virtualScrollFps', 80) + }, + // 虚拟列表cell id的前缀，适用于一个页面有多个虚拟列表的情况，用以区分不同虚拟列表cell的id，注意：请勿传数字或以数字开头的字符串。如设置为list1，则cell的id应为：list1-zp-id-${item.zp_index} + virtualCellIdPrefix: { + type: String, + default: u.gc('virtualCellIdPrefix', '') + }, + // 虚拟列表是否使用swiper-item包裹，默认为否，此属性为了解决vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在swiper-item内存在无法获取slot插入的cell高度进而导致虚拟列表失败的问题 + // 仅vue3+(微信小程序或QQ小程序)+非内置列表写法虚拟列表有效，其他情况此属性设置任何值都无效，所以如果您在swiper-item内使用z-paging的非内置虚拟列表写法，将此属性设置为true即可 + virtualInSwiperSlot: { + type: Boolean, + default: false + }, + }, + data() { + return { + virtualListKey: u.getInstanceId(), + virtualPageHeight: 0, + virtualCellHeight: 0, + virtualScrollTimeStamp: 0, + + virtualList: [], + virtualPlaceholderTopHeight: 0, + virtualPlaceholderBottomHeight: 0, + virtualTopRangeIndex: 0, + virtualBottomRangeIndex: 0, + lastVirtualTopRangeIndex: 0, + lastVirtualBottomRangeIndex: 0, + virtualItemInsertedCount: 0, + + virtualHeightCacheList: [], + + getCellHeightRetryCount: { + fixed: 0, + dynamic: 0 + }, + pagingOrgTop: -1, + updateVirtualListFromDataChange: false + } + }, + watch: { + // 监听总数据的改变，刷新虚拟列表布局 + realTotalData() { + this.updateVirtualListRender(); + }, + // 监听虚拟列表渲染数组的改变并emit + virtualList(newVal){ + this.$emit('update:virtualList', newVal); + this.$emit('virtualListChange', newVal); + }, + // 监听虚拟列表顶部占位高度改变并emit + virtualPlaceholderTopHeight(newVal) { + this.$emit('virtualTopHeightChange', newVal); + } + }, + computed: { + virtualCellIndexKey() { + return c.listCellIndexKey; + }, + finalUseVirtualList() { + if (this.useVirtualList && this.usePageScroll){ + u.consoleErr('使用页面滚动时，开启虚拟列表无效！'); + } + return this.useVirtualList && !this.usePageScroll; + }, + finalUseInnerList() { + return this.useInnerList || (this.finalUseVirtualList && !this.forceCloseInnerList); + }, + finalCellKeyName() { + // #ifdef APP-NVUE + if (this.finalUseVirtualList && !this.cellKeyName.length){ + u.consoleErr('在nvue中开启use-virtual-list必须设置cell-key-name，否则将可能导致列表渲染错误！'); + } + // #endif + return this.cellKeyName; + }, + finalVirtualPageHeight(){ + return this.virtualPageHeight > 0 ? this.virtualPageHeight : this.windowHeight; + }, + finalFixedCellHeight() { + return u.convertToPx(this.fixedCellHeight); + }, + fianlVirtualCellIdPrefix() { + const prefix = this.virtualCellIdPrefix ? this.virtualCellIdPrefix + '-' : ''; + return prefix + 'zp-id'; + }, + finalPlaceholderTopHeightStyle() { + // #ifdef VUE2 + return { transform: this.virtualPlaceholderTopHeight > 0 ? `translateY(${this.virtualPlaceholderTopHeight}px)` : 'none' }; + // #endif + return {}; + }, + virtualRangePageHeight(){ + return this.finalVirtualPageHeight * this.preloadPage; + }, + virtualScrollDisTimeStamp() { + return 1000 / this.virtualScrollFps; + } + }, + methods: { + // 在使用动态高度虚拟列表时，若在列表数组中需要插入某个item，需要调用此方法；item:需要插入的item，index:插入的cell位置，若index为2，则插入的item在原list的index=1之后，index从0开始 + doInsertVirtualListItem(item, index) { + if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return; + this.realTotalData.splice(index, 0, item); + // #ifdef VUE3 + this.realTotalData = [...this.realTotalData]; + // #endif + this.virtualItemInsertedCount ++; + if (!item || Object.prototype.toString.call(item) !== '[object Object]') { + item = { item }; + } + const cellIndexKey = this.virtualCellIndexKey; + item[cellIndexKey] = `custom-${this.virtualItemInsertedCount}`; + item[c.listCellIndexUniqueKey] = `${this.virtualListKey}-${item[cellIndexKey]}`; + this.$nextTick(async () => { + let retryCount = 0; + while (retryCount <= 10) { + await u.wait(c.delayTime); + + const cellNode = await this._getVirtualCellNodeByIndex(item[cellIndexKey]); + // 如果获取当前cell的节点信息失败，则重试（不超过10次） + if (!cellNode) { + retryCount ++; + continue; + } + + const currentHeight = cellNode ? cellNode[0].height : 0; + const lastHeightCache = this.virtualHeightCacheList[index - 1]; + const lastTotalHeight = lastHeightCache ? lastHeightCache.totalHeight : 0; + // 在缓存的cell高度数组中，插入此cell高度信息 + this.virtualHeightCacheList.splice(index, 0, { + height: currentHeight, + lastTotalHeight, + totalHeight: lastTotalHeight + currentHeight + }); + + // 从当前index起后续的cell缓存高度的lastTotalHeight和totalHeight需要加上当前cell的高度 + for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) { + const thisNode = this.virtualHeightCacheList[i]; + thisNode.lastTotalHeight += currentHeight; + thisNode.totalHeight += currentHeight; + } + + this._updateVirtualScroll(this.oldScrollTop); + break; + } + }) + }, + // 在使用动态高度虚拟列表时，手动更新指定cell的缓存高度(当cell高度在初始化之后再次改变后调用)；index:需要更新的cell在列表中的位置，从0开始 + didUpdateVirtualListCell(index) { + if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return; + const currentNode = this.virtualHeightCacheList[index]; + this.$nextTick(() => { + this._getVirtualCellNodeByIndex(index).then(cellNode => { + // 更新当前cell的高度 + const cellNodeHeight = cellNode ? cellNode[0].height : 0; + const heightDis = cellNodeHeight - currentNode.height; + currentNode.height = cellNodeHeight; + currentNode.totalHeight = currentNode.lastTotalHeight + cellNodeHeight; + + // 从当前index起后续的cell缓存高度的lastTotalHeight和totalHeight需要加上当前cell变化的高度 + for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) { + const thisNode = this.virtualHeightCacheList[i]; + thisNode.totalHeight += heightDis; + thisNode.lastTotalHeight += heightDis; + } + }); + }) + }, + // 在使用动态高度虚拟列表时，若删除了列表数组中的某个item，需要调用此方法以更新高度缓存数组；index:删除的cell在列表中的位置，从0开始 + didDeleteVirtualListCell(index) { + if (this.cellHeightMode !== Enum.CellHeightMode.Dynamic) return; + const currentNode = this.virtualHeightCacheList[index]; + // 从当前index起后续的cell缓存高度的lastTotalHeight和totalHeight需要减去当前cell的高度 + for (let i = index + 1; i < this.virtualHeightCacheList.length; i++) { + const thisNode = this.virtualHeightCacheList[i]; + thisNode.totalHeight -= currentNode.height; + thisNode.lastTotalHeight -= currentNode.height; + } + // 将当前cell的高度信息从高度缓存数组中删除 + this.virtualHeightCacheList.splice(index, 1); + }, + // 手动触发虚拟列表渲染更新，可用于解决例如修改了虚拟列表数组中元素，但展示未更新的情况 + updateVirtualListRender() { + // #ifndef APP-NVUE + if (this.finalUseVirtualList) { + this.updateVirtualListFromDataChange = true; + this.$nextTick(() => { + this.getCellHeightRetryCount.fixed = 0; + if (this.realTotalData.length) { + this.cellHeightMode === Enum.CellHeightMode.Fixed && this.isFirstPage && this._updateFixedCellHeight() + } else { + this._resetDynamicListState(!this.isUserPullDown); + } + this._updateVirtualScroll(this.oldScrollTop); + }) + } + // #endif + }, + // 初始化虚拟列表 + _virtualListInit() { + this.$nextTick(() => { + u.delay(() => { + // 获取虚拟列表滚动区域的高度 + this._getNodeClientRect('.zp-scroll-view').then(node => { + if (node) { + this.pagingOrgTop = node[0].top; + this.virtualPageHeight = node[0].height; + } + }); + }); + }) + }, + // cellHeightMode为fixed时获取第一个cell高度 + _updateFixedCellHeight() { + if (!this.finalFixedCellHeight) { + this.$nextTick(() => { + u.delay(() => { + this._getVirtualCellNodeByIndex(0).then(cellNode => { + if (!cellNode) { + if (this.getCellHeightRetryCount.fixed > 10) return; + this.getCellHeightRetryCount.fixed ++; + // 如果获取第一个cell的节点信息失败，则重试（不超过10次） + this._updateFixedCellHeight(); + } else { + this.virtualCellHeight = cellNode[0].height; + this._updateVirtualScroll(this.oldScrollTop); + } + }); + }, c.delayTime, 'updateFixedCellHeightDelay'); + }) + } else { + this.virtualCellHeight = this.finalFixedCellHeight; + } + }, + // cellHeightMode为dynamic时获取每个cell高度 + _updateDynamicCellHeight(list, dataFrom = 'bottom') { + const dataFromTop = dataFrom === 'top'; + const heightCacheList = this.virtualHeightCacheList; + const currentCacheList = dataFromTop ? [] : heightCacheList; + let listTotalHeight = 0; + this.$nextTick(() => { + u.delay(async () => { + for (let i = 0; i < list.length; i++) { + const cellNode = await this._getVirtualCellNodeByIndex(list[i][this.virtualCellIndexKey]); + const currentHeight = cellNode ? cellNode[0].height : 0; + if (!cellNode) { + if (this.getCellHeightRetryCount.dynamic <= 10) { + heightCacheList.splice(heightCacheList.length - i, i); + this.getCellHeightRetryCount.dynamic ++; + // 如果获取当前cell的节点信息失败，则重试（不超过10次） + this._updateDynamicCellHeight(list, dataFrom); + } + return; + } + const lastHeightCache = currentCacheList.length ? currentCacheList.slice(-1)[0] : null; + const lastTotalHeight = lastHeightCache ? lastHeightCache.totalHeight : 0; + // 缓存当前cell的高度信息：height-当前cell高度；lastTotalHeight-前面所有cell的高度总和；totalHeight-包含当前cell的所有高度总和 + currentCacheList.push({ + height: currentHeight, + lastTotalHeight, + totalHeight: lastTotalHeight + currentHeight + }); + if (dataFromTop) { + listTotalHeight += currentHeight; + } + } + // 如果数据是从顶部拼接的 + if (dataFromTop && list.length) { + for (let i = 0; i < heightCacheList.length; i++) { + // 更新之前所有项的缓存高度，需要加上此次插入的所有cell高度之和（因为是从顶部插入的cell） + const heightCacheItem = heightCacheList[i]; + heightCacheItem.lastTotalHeight += listTotalHeight; + heightCacheItem.totalHeight += listTotalHeight; + } + this.virtualHeightCacheList = currentCacheList.concat(heightCacheList); + } + this._updateVirtualScroll(this.oldScrollTop); + }, c.delayTime, 'updateDynamicCellHeightDelay') + }) + }, + // 设置cellItem的index + _setCellIndex(list, dataFrom = 'bottom') { + let currentItemIndex = 0; + const cellIndexKey = this.virtualCellIndexKey; + dataFrom === 'bottom' && ([Enum.QueryFrom.Refresh, Enum.QueryFrom.Reload].indexOf(this.queryFrom) >= 0) && this._resetDynamicListState(); + if (this.totalData.length && this.queryFrom !== Enum.QueryFrom.Refresh) { + if (dataFrom === 'bottom') { + currentItemIndex = this.realTotalData.length; + const lastItem = this.realTotalData.length ? this.realTotalData.slice(-1)[0] : null; + if (lastItem && lastItem[cellIndexKey] !== undefined) { + currentItemIndex = lastItem[cellIndexKey] + 1; + } + } else if (dataFrom === 'top') { + const firstItem = this.realTotalData.length ? this.realTotalData[0] : null; + if (firstItem && firstItem[cellIndexKey] !== undefined) { + currentItemIndex = firstItem[cellIndexKey] - list.length; + } + } + } else { + this._resetDynamicListState(); + } + for (let i = 0; i < list.length; i++) { + let item = list[i]; + if (!item || Object.prototype.toString.call(item) !== '[object Object]') { + item = { item }; + } + if (item[c.listCellIndexUniqueKey]) { + item = u.deepCopy(item); + } + item[cellIndexKey] = currentItemIndex + i; + item[c.listCellIndexUniqueKey] = `${this.virtualListKey}-${item[cellIndexKey]}`; + list[i] = item; + } + this.getCellHeightRetryCount.dynamic = 0; + this.cellHeightMode === Enum.CellHeightMode.Dynamic && this._updateDynamicCellHeight(list, dataFrom); + }, + // 更新scroll滚动（虚拟列表滚动时触发） + _updateVirtualScroll(scrollTop, scrollDiff = 0) { + const currentTimeStamp = u.getTime(); + scrollTop === 0 && this._resetTopRange(); + if (scrollTop !== 0 && this.virtualScrollTimeStamp && currentTimeStamp - this.virtualScrollTimeStamp <= this.virtualScrollDisTimeStamp) { + return; + } + this.virtualScrollTimeStamp = currentTimeStamp; + + let scrollIndex = 0; + const cellHeightMode = this.cellHeightMode; + if (cellHeightMode === Enum.CellHeightMode.Fixed) { + // 如果是固定高度的虚拟列表 + // 计算当前滚动到的cell的index = scrollTop / 虚拟列表cell的固定高度 + scrollIndex = parseInt(scrollTop / this.virtualCellHeight) || 0; + // 更新顶部和底部占位view的高度（为兼容考虑，顶部采用transformY的方式占位) + this._updateFixedTopRangeIndex(scrollIndex); + this._updateFixedBottomRangeIndex(scrollIndex); + } else if(cellHeightMode === Enum.CellHeightMode.Dynamic) { + // 如果是不固定高度的虚拟列表 + // 当前滚动的方向 + const scrollDirection = scrollDiff > 0 ? 'top' : 'bottom'; + // 视图区域的高度 + const rangePageHeight = this.virtualRangePageHeight; + // 顶部视图区域外的高度（顶部不需要渲染而是需要占位部分的高度） + const topRangePageOffset = scrollTop - rangePageHeight; + // 底部视图区域外的高度（底部不需要渲染而是需要占位部分的高度） + const bottomRangePageOffset = scrollTop + this.finalVirtualPageHeight + rangePageHeight; + + let virtualBottomRangeIndex = 0; + let virtualPlaceholderBottomHeight = 0; + let reachedLimitBottom = false; + const heightCacheList = this.virtualHeightCacheList; + const lastHeightCache = !!heightCacheList ? heightCacheList.slice(-1)[0] : null; + + let startTopRangeIndex = this.virtualTopRangeIndex; + // 如果是向底部滚动（顶部占位的高度不断增大，顶部的实际渲染cell数量不断减少） + if (scrollDirection === 'bottom') { + // 从顶部视图边缘的cell的位置开始向后查找 + for (let i = startTopRangeIndex; i < heightCacheList.length; i++){ + const heightCacheItem = heightCacheList[i]; + // 如果查找到某个cell对应的totalHeight大于顶部视图区域外的高度，则此cell为顶部视图边缘的cell + if (heightCacheItem && heightCacheItem.totalHeight > topRangePageOffset) { + // 记录顶部视图边缘cell的index并更新顶部占位区域的高度并停止继续查找 + this.virtualTopRangeIndex = i; + this.virtualPlaceholderTopHeight = heightCacheItem.lastTotalHeight; + break; + } + } + } else { + // 如果是向顶部滚动（顶部占位的高度不断减少，顶部的实际渲染cell数量不断增加） + let topRangeMatched = false; + // 从顶部视图边缘的cell的位置开始向前查找 + for (let i = startTopRangeIndex; i >= 0; i--){ + const heightCacheItem = heightCacheList[i]; + // 如果查找到某个cell对应的totalHeight小于顶部视图区域外的高度，则此cell为顶部视图边缘的cell + if (heightCacheItem && heightCacheItem.totalHeight < topRangePageOffset) { + // 记录顶部视图边缘cell的index并更新顶部占位区域的高度并停止继续查找 + this.virtualTopRangeIndex = i; + this.virtualPlaceholderTopHeight = heightCacheItem.lastTotalHeight; + topRangeMatched = true; + break; + } + } + // 如果查找不到，则认为顶部占位高度为0了，顶部cell不需要继续复用，重置topRangeIndex和placeholderTopHeight + !topRangeMatched && this._resetTopRange(); + } + // 从顶部视图边缘的cell的位置开始向后查找 + for (let i = this.virtualTopRangeIndex; i < heightCacheList.length; i++){ + const heightCacheItem = heightCacheList[i]; + // 如果查找到某个cell对应的totalHeight大于底部视图区域外的高度，则此cell为底部视图边缘的cell + if (heightCacheItem && heightCacheItem.totalHeight > bottomRangePageOffset) { + // 记录底部视图边缘cell的index并更新底部占位区域的高度并停止继续查找 + virtualBottomRangeIndex = i; + virtualPlaceholderBottomHeight = lastHeightCache.totalHeight - heightCacheItem.totalHeight; + reachedLimitBottom = true; + break; + } + } + if (!reachedLimitBottom || this.virtualBottomRangeIndex === 0) { + this.virtualBottomRangeIndex = this.realTotalData.length ? this.realTotalData.length - 1 : this.pageSize; + this.virtualPlaceholderBottomHeight = 0; + } else { + this.virtualBottomRangeIndex = virtualBottomRangeIndex; + this.virtualPlaceholderBottomHeight = virtualPlaceholderBottomHeight; + } + this._updateVirtualList(); + } + }, + // 更新fixedCell模式下topRangeIndex&placeholderTopHeight + _updateFixedTopRangeIndex(scrollIndex) { + let virtualTopRangeIndex = this.virtualCellHeight === 0 ? 0 : scrollIndex - (parseInt(this.finalVirtualPageHeight / this.virtualCellHeight) || 1) * this.preloadPage; + virtualTopRangeIndex *= this.virtualListCol; + virtualTopRangeIndex = Math.max(0, virtualTopRangeIndex); + this.virtualTopRangeIndex = virtualTopRangeIndex; + this.virtualPlaceholderTopHeight = (virtualTopRangeIndex / this.virtualListCol) * this.virtualCellHeight; + }, + // 更新fixedCell模式下bottomRangeIndex&placeholderBottomHeight + _updateFixedBottomRangeIndex(scrollIndex) { + let virtualBottomRangeIndex = this.virtualCellHeight === 0 ? this.pageSize : scrollIndex + (parseInt(this.finalVirtualPageHeight / this.virtualCellHeight) || 1) * (this.preloadPage + 1); + virtualBottomRangeIndex *= this.virtualListCol; + virtualBottomRangeIndex = Math.min(this.realTotalData.length, virtualBottomRangeIndex); + this.virtualBottomRangeIndex = virtualBottomRangeIndex; + this.virtualPlaceholderBottomHeight = (this.realTotalData.length - virtualBottomRangeIndex) * this.virtualCellHeight / this.virtualListCol; + this._updateVirtualList(); + }, + // 更新virtualList + _updateVirtualList() { + const shouldUpdateList = this.updateVirtualListFromDataChange || (this.lastVirtualTopRangeIndex !== this.virtualTopRangeIndex || this.lastVirtualBottomRangeIndex !== this.virtualBottomRangeIndex); + if (shouldUpdateList) { + this.updateVirtualListFromDataChange = false; + this.lastVirtualTopRangeIndex = this.virtualTopRangeIndex; + this.lastVirtualBottomRangeIndex = this.virtualBottomRangeIndex; + this.virtualList = this.realTotalData.slice(this.virtualTopRangeIndex, this.virtualBottomRangeIndex + 1); + } + }, + // 重置动态cell模式下的高度缓存数据、虚拟列表和滚动状态 + _resetDynamicListState(resetVirtualList = false) { + this.virtualHeightCacheList = []; + if (resetVirtualList) { + this.virtualList = []; + } + this.virtualTopRangeIndex = 0; + this.virtualPlaceholderTopHeight = 0; + }, + // 重置topRangeIndex和placeholderTopHeight + _resetTopRange() { + this.virtualTopRangeIndex = 0; + this.virtualPlaceholderTopHeight = 0; + this._updateVirtualList(); + }, + // 检测虚拟列表当前滚动位置，如发现滚动位置不正确则重新计算虚拟列表相关参数(为解决在App中可能出现的长时间进入后台后打开App白屏的问题) + _checkVirtualListScroll() { + if (this.finalUseVirtualList) { + this.$nextTick(() => { + this._getNodeClientRect('.zp-paging-touch-view').then(node => { + const currentTop = node ? node[0].top : 0; + if (!node || (currentTop === this.pagingOrgTop && this.virtualPlaceholderTopHeight !== 0)) { + this._updateVirtualScroll(0); + } + }); + }) + } + }, + // 获取对应index的虚拟列表cell节点信息 + _getVirtualCellNodeByIndex(index) { + let inDom = this.finalUseInnerList; + // 在vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在swiper-item内存在无法获取slot插入的cell高度的问题 + // 通过uni.createSelectorQuery().in(this.$parent)来解决此问题 + // #ifdef VUE3 + // #ifdef MP-WEIXIN || MP-QQ + if (this.forceCloseInnerList && this.virtualInSwiperSlot) { + inDom = this.$parent; + } + // #endif + // #endif + return this._getNodeClientRect(`#${this.fianlVirtualCellIdPrefix}-${index}`, inDom); + }, + // 处理使用内置列表时点击了cell事件 + _innerCellClick(item, index) { + this.$emit('innerCellClick', item, index); + } + } +} diff --git a/components/z-paging/components/z-paging/js/z-paging-constant.js b/components/z-paging/components/z-paging/js/z-paging-constant.js new file mode 100644 index 0000000..ecbcf8e --- /dev/null +++ b/components/z-paging/components/z-paging/js/z-paging-constant.js @@ -0,0 +1,19 @@ +// [z-paging]常量 + +export default { + // 当前版本号 + version: '2.8.6', + // 延迟操作的通用时间 + delayTime: 100, + // 请求失败时候全局emit使用的key + errorUpdateKey: 'z-paging-error-emit', + // 全局emit complete的key + completeUpdateKey: 'z-paging-complete-emit', + // z-paging缓存的前缀key + cachePrefixKey: 'z-paging-cache', + + // 虚拟列表中列表index的key + listCellIndexKey: 'zp_index', + // 虚拟列表中列表的唯一key + listCellIndexUniqueKey: 'zp_unique_index' +} diff --git a/components/z-paging/components/z-paging/js/z-paging-enum.js b/components/z-paging/components/z-paging/js/z-paging-enum.js new file mode 100644 index 0000000..84f461b --- /dev/null +++ b/components/z-paging/components/z-paging/js/z-paging-enum.js @@ -0,0 +1,45 @@ +// [z-paging]枚举 + +export default { + // 当前加载类型 refresher:下拉刷新 load-more:上拉加载更多 + LoadingType: { + Refresher: 'refresher', + LoadMore: 'load-more' + }, + // 下拉刷新状态 default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼 + Refresher: { + Default: 'default', + ReleaseToRefresh: 'release-to-refresh', + Loading: 'loading', + Complete: 'complete', + GoF2: 'go-f2' + }, + // 底部加载更多状态 default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败 + More: { + Default: 'default', + Loading: 'loading', + NoMore: 'no-more', + Fail: 'fail' + }, + // @query触发来源 user-pull-down:用户主动下拉刷新 reload:通过reload触发 refresh:通过refresh触发 load-more:通过滚动到底部加载更多或点击底部加载更多触发 + QueryFrom: { + UserPullDown: 'user-pull-down', + Reload: 'reload', + Refresh: 'refresh', + LoadMore: 'load-more' + }, + // 虚拟列表cell高度模式 + CellHeightMode: { + // 固定高度 + Fixed: 'fixed', + // 动态高度 + Dynamic: 'dynamic' + }, + // 列表缓存模式 + CacheMode: { + // 默认模式，只会缓存一次 + Default: 'default', + // 总是缓存，每次列表刷新(下拉刷新、调用reload等)都会更新缓存 + Always: 'always' + } +} \ No newline at end of file diff --git a/components/z-paging/components/z-paging/js/z-paging-interceptor.js b/components/z-paging/components/z-paging/js/z-paging-interceptor.js new file mode 100644 index 0000000..e94b61b --- /dev/null +++ b/components/z-paging/components/z-paging/js/z-paging-interceptor.js @@ -0,0 +1,97 @@ +// [z-paging]拦截器 + +const queryKey = 'Query'; +const fetchParamsKey = 'FetchParams'; +const fetchResultKey = 'FetchResult'; +const language2LocalKey = 'Language2Local'; + +// 拦截&处理@query事件 +function handleQuery(callback) { + _addHandleByKey(queryKey, callback); + return this; +} + +// 拦截&处理@query事件(私有，请勿调用) +function _handleQuery(pageNo, pageSize, from, lastItem) { + const callback = _getHandleByKey(queryKey); + return callback ? callback(pageNo, pageSize, from, lastItem) : [pageNo, pageSize, from]; +} + +// 拦截&处理:fetch参数 +function handleFetchParams(callback) { + _addHandleByKey(fetchParamsKey, callback); + return this; +} + +// 拦截&处理:fetch参数(私有，请勿调用) +function _handleFetchParams(parmas, extraParams) { + const callback = _getHandleByKey(fetchParamsKey); + return callback ? callback(parmas, extraParams || {}) : { pageNo: parmas.pageNo, pageSize: parmas.pageSize, ...(extraParams || {}) }; +} + +// 拦截&处理:fetch结果 +function handleFetchResult(callback) { + _addHandleByKey(fetchResultKey, callback); + return this; +} + +// 拦截&处理:fetch结果(私有，请勿调用) +function _handleFetchResult(result, paging, params) { + const callback = _getHandleByKey(fetchResultKey); + callback && callback(result, paging, params); + return callback ? true : false; +} + +// 拦截&处理系统language转i18n local +function handleLanguage2Local(callback) { + _addHandleByKey(language2LocalKey, callback); + return this; +} + +// 拦截&处理系统language转i18n local(私有，请勿调用) +function _handleLanguage2Local(language, local) { + const callback = _getHandleByKey(language2LocalKey); + return callback ? callback(language, local) : local; +} + +// 获取当前app对象 +function _getApp(){ + // #ifndef APP-NVUE + return getApp(); + // #endif + // #ifdef APP-NVUE + return getApp({ allowDefault: true }); + // #endif +} + +// 是否可以访问globalData +function _hasGlobalData() { + return _getApp() && _getApp().globalData; +} + +// 添加处理函数 +function _addHandleByKey(key, callback) { + try { + setTimeout(function() { + if (_hasGlobalData()) { + _getApp().globalData[`zp_handle${key}Callback`] = callback; + } + }, 1); + } catch (_) {} +} + +// 获取处理回调函数 +function _getHandleByKey(key) { + return _hasGlobalData() ? _getApp().globalData[`zp_handle${key}Callback`] : null; +} + +export default { + handleQuery, + _handleQuery, + handleFetchParams, + _handleFetchParams, + handleFetchResult, + _handleFetchResult, + handleLanguage2Local, + _handleLanguage2Local +}; diff --git a/components/z-paging/components/z-paging/js/z-paging-main.js b/components/z-paging/components/z-paging/js/z-paging-main.js new file mode 100644 index 0000000..f5a033d --- /dev/null +++ b/components/z-paging/components/z-paging/js/z-paging-main.js @@ -0,0 +1,515 @@ +// [z-paging]核心js + +import zStatic from './z-paging-static' +import c from './z-paging-constant' +import u from './z-paging-utils' + +import zPagingRefresh from '../components/z-paging-refresh' +import zPagingLoadMore from '../components/z-paging-load-more' +import zPagingEmptyView from '../../z-paging-empty-view/z-paging-empty-view' + +// modules +import commonLayoutModule from './modules/common-layout' +import dataHandleModule from './modules/data-handle' +import i18nModule from './modules/i18n' +import nvueModule from './modules/nvue' +import emptyModule from './modules/empty' +import refresherModule from './modules/refresher' +import loadMoreModule from './modules/load-more' +import loadingModule from './modules/loading' +import chatRecordModerModule from './modules/chat-record-mode' +import scrollerModule from './modules/scroller' +import backToTopModule from './modules/back-to-top' +import virtualListModule from './modules/virtual-list' + +import Enum from './z-paging-enum' + +const systemInfo = u.getSystemInfoSync(); +export default { + name: "z-paging", + components: { + zPagingRefresh, + zPagingLoadMore, + zPagingEmptyView + }, + mixins: [ + commonLayoutModule, + dataHandleModule, + i18nModule, + nvueModule, + emptyModule, + refresherModule, + loadMoreModule, + loadingModule, + chatRecordModerModule, + scrollerModule, + backToTopModule, + virtualListModule + ], + data() { + return { + // --------------静态资源--------------- + base64BackToTop: zStatic.base64BackToTop, + + // -------------全局数据相关-------------- + // 当前加载类型 + loadingType: Enum.LoadingType.Refresher, + requestTimeStamp: 0, + wxsPropType: '', + renderPropScrollTop: -1, + checkScrolledToBottomTimeOut: null, + cacheTopHeight: -1, + statusBarHeight: systemInfo.statusBarHeight, + + // --------------状态&判断--------------- + insideOfPaging: -1, + isLoadFailed: false, + isIos: systemInfo.platform === 'ios', + disabledBounce: false, + fromCompleteEmit: false, + disabledCompleteEmit: false, + pageLaunched: false, + active: false, + + // ---------------wxs相关--------------- + wxsIsScrollTopInTopRange: true, + wxsScrollTop: 0, + wxsPageScrollTop: 0, + wxsOnPullingDown: false, + }; + }, + props: { + // 调用complete后延迟处理的时间，单位为毫秒，默认0毫秒，优先级高于minDelay + delay: { + type: [Number, String], + default: u.gc('delay', 0), + }, + // 触发@query后最小延迟处理的时间，单位为毫秒，默认0毫秒，优先级低于delay（假设设置为300毫秒，若分页请求时间小于300毫秒，则在调用complete后延迟[300毫秒-请求时长]；若请求时长大于300毫秒，则不延迟），当show-refresher-when-reload为true或reload(true)时，其最小值为400 + minDelay: { + type: [Number, String], + default: u.gc('minDelay', 0), + }, + // 设置z-paging的style，部分平台(如微信小程序)无法直接修改组件的style，可使用此属性代替 + pagingStyle: { + type: Object, + default: u.gc('pagingStyle', {}), + }, + // z-paging的高度，优先级低于pagingStyle中设置的height；传字符串，如100px、100rpx、100% + height: { + type: String, + default: u.gc('height', '') + }, + // z-paging的宽度，优先级低于pagingStyle中设置的width；传字符串，如100px、100rpx、100% + width: { + type: String, + default: u.gc('width', '') + }, + // z-paging的最大宽度，优先级低于pagingStyle中设置的max-width；传字符串，如100px、100rpx、100%。默认为空，也就是铺满窗口宽度，若设置了特定值则会自动添加margin: 0 auto + maxWidth: { + type: String, + default: u.gc('maxWidth', '') + }, + // z-paging的背景色，优先级低于pagingStyle中设置的background。传字符串，如"#ffffff" + bgColor: { + type: String, + default: u.gc('bgColor', '') + }, + // 设置z-paging的容器(插槽的父view)的style + pagingContentStyle: { + type: Object, + default: u.gc('pagingContentStyle', {}), + }, + // z-paging是否自动高度，若自动高度则会自动铺满屏幕 + autoHeight: { + type: Boolean, + default: u.gc('autoHeight', false) + }, + // z-paging是否自动高度时，附加的高度，注意添加单位px或rpx，若需要减少高度，则传负数 + autoHeightAddition: { + type: [Number, String], + default: u.gc('autoHeightAddition', '0px') + }, + // loading(下拉刷新、上拉加载更多)的主题样式，支持black，white，默认black + defaultThemeStyle: { + type: String, + default: u.gc('defaultThemeStyle', 'black') + }, + // z-paging是否使用fixed布局，若使用fixed布局，则z-paging的父view无需固定高度，z-paging高度默认为100%，默认为是(当使用内置scroll-view滚动时有效) + fixed: { + type: Boolean, + default: u.gc('fixed', true) + }, + // 是否开启底部安全区域适配 + safeAreaInsetBottom: { + type: Boolean, + default: u.gc('safeAreaInsetBottom', false) + }, + // 开启底部安全区域适配后，是否使用placeholder形式实现，默认为否。为否时滚动区域会自动避开底部安全区域，也就是所有滚动内容都不会挡住底部安全区域，若设置为是，则滚动时滚动内容会挡住底部安全区域，但是当滚动到底部时才会避开底部安全区域 + useSafeAreaPlaceholder: { + type: Boolean, + default: u.gc('useSafeAreaPlaceholder', false) + }, + // z-paging bottom的背景色，默认透明，传字符串，如"#ffffff" + bottomBgColor: { + type: String, + default: u.gc('bottomBgColor', '') + }, + // slot="top"的view的z-index，默认为99，仅使用页面滚动时有效 + topZIndex: { + type: Number, + default: u.gc('topZIndex', 99) + }, + // z-paging内容容器父view的z-index，默认为1 + superContentZIndex: { + type: Number, + default: u.gc('superContentZIndex', 1) + }, + // z-paging内容容器部分的z-index，默认为1 + contentZIndex: { + type: Number, + default: u.gc('contentZIndex', 1) + }, + // z-paging二楼的z-index，默认为100 + f2ZIndex: { + type: Number, + default: u.gc('f2ZIndex', 100) + }, + // 使用页面滚动时，是否在不满屏时自动填充满屏幕，默认为是 + autoFullHeight: { + type: Boolean, + default: u.gc('autoFullHeight', true) + }, + // 是否监听列表触摸方向改变，默认为否 + watchTouchDirectionChange: { + type: Boolean, + default: u.gc('watchTouchDirectionChange', false) + }, + // z-paging中布局的单位，默认为rpx + unit: { + type: String, + default: u.gc('unit', 'rpx') + } + }, + created() { + // 组件创建时，检测是否开始加载状态 + if (this.createdReload && !this.refresherOnly && this.auto) { + this._startLoading(); + this.$nextTick(this._preReload); + } + }, + mounted() { + this.active = true; + this.wxsPropType = u.getTime().toString(); + this.renderJsIgnore; + if (!this.createdReload && !this.refresherOnly && this.auto) { + // 开始预加载 + u.delay(() => this.$nextTick(this._preReload), 0); + } + // 如果开启了列表缓存，在初始化的时候通过缓存数据填充列表数据 + this.finalUseCache && this._setListByLocalCache(); + let delay = 0; + // #ifdef H5 || MP + delay = c.delayTime; + // #endif + this.$nextTick(() => { + // 初始化systemInfo + this.systemInfo = u.getSystemInfoSync(); + // 初始化z-paging高度 + !this.usePageScroll && this.autoHeight && this._setAutoHeight(); + // #ifdef MP-KUAISHOU + this._setFullScrollViewInHeight(); + // #endif + this.loaded = true; + u.delay(() => { + // 更新fixed模式下z-paging的布局，主要是更新windowTop、windowBottom + this.updateFixedLayout(); + // 更新缓存中z-paging整个内容容器高度 + this._updateCachedSuperContentHeight(); + }); + }) + // 初始化页面滚动模式下slot="top"、slot="bottom"高度 + this.updatePageScrollTopHeight(); + this.updatePageScrollBottomHeight(); + // 初始化slot="left"、slot="right"宽度 + this.updateLeftAndRightWidth(); + if (this.finalRefresherEnabled && this.useCustomRefresher) { + this.$nextTick(() => { + this.isTouchmoving = true; + }) + } + // 监听uni.$emit中全局emit的complete error等事件 + this._onEmit(); + // #ifdef APP-NVUE + if (!this.isIos && !this.useChatRecordMode) { + this.nLoadingMoreFixedHeight = true; + } + // 在nvue中更新nvue下拉刷新view容器的宽度，而不是写死默认的750rpx，需要考虑列表宽度不是铺满屏幕的情况 + this._nUpdateRefresherWidth(); + // #endif + // #ifndef APP-NVUE + // 虚拟列表模式时，初始化数据 + this.finalUseVirtualList && this._virtualListInit(); + // #endif + // #ifndef APP-PLUS + this.$nextTick(() => { + // 非app平台中，在通过获取css设置的底部安全区域占位view高度设置bottom距离后，更新页面滚动底部高度 + setTimeout(() => { + this._getCssSafeAreaInsetBottom(() => this.safeAreaInsetBottom && this.updatePageScrollBottomHeight()); + }, delay) + }) + // #endif + }, + destroyed() { + this._handleUnmounted(); + }, + // #ifdef VUE3 + unmounted() { + this._handleUnmounted(); + }, + // #endif + watch: { + defaultThemeStyle: { + handler(newVal) { + if (newVal.length) { + this.finalRefresherDefaultStyle = newVal; + } + }, + immediate: true + }, + autoHeight(newVal) { + this.loaded && !this.usePageScroll && this._setAutoHeight(newVal); + }, + autoHeightAddition(newVal) { + this.loaded && !this.usePageScroll && this.autoHeight && this._setAutoHeight(newVal); + }, + }, + computed: { + // 当前z-paging的内置样式 + finalPagingStyle() { + const pagingStyle = { ...this.pagingStyle }; + if (!this.systemInfo) return pagingStyle; + const { windowTop, windowBottom } = this; + if (!this.usePageScroll && this.fixed) { + if (windowTop && !pagingStyle.top) { + pagingStyle.top = windowTop + 'px'; + } + if (windowBottom && !pagingStyle.bottom) { + pagingStyle.bottom = windowBottom + 'px'; + } + } + if (this.bgColor.length && !pagingStyle['background']) { + pagingStyle['background'] = this.bgColor; + } + if (this.height.length && !pagingStyle['height']) { + pagingStyle['height'] = this.height; + } + if (this.width.length && !pagingStyle['width']) { + pagingStyle['width'] = this.width; + } + if (this.maxWidth.length && !pagingStyle['max-width']) { + pagingStyle['max-width'] = this.maxWidth; + pagingStyle['margin'] = '0 auto'; + } + return pagingStyle; + }, + // 当前z-paging内容的样式 + finalPagingContentStyle() { + if (this.contentZIndex != 1) { + this.pagingContentStyle['z-index'] = this.contentZIndex; + this.pagingContentStyle['position'] = 'relative'; + } + return this.pagingContentStyle; + }, + + renderJsIgnore() { + if ((this.usePageScroll && this.useChatRecordMode) || (!this.refresherEnabled && this.scrollable) || !this.useCustomRefresher) { + this.$nextTick(() => { + this.renderPropScrollTop = 10; + }) + } + return 0; + }, + windowHeight() { + if (!this.systemInfo) return 0; + return this.systemInfo.windowHeight || 0; + }, + windowBottom() { + if (!this.systemInfo) return 0; + let windowBottom = this.systemInfo.windowBottom || 0; + // 如果开启底部安全区域适配并且不使用placeholder的形式体现并且不是聊天记录模式（因为聊天记录模式在keyboardHeight计算初已添加了底部安全区域），在windowBottom添加底部安全区域高度 + if (this.safeAreaInsetBottom && !this.useSafeAreaPlaceholder && !this.useChatRecordMode) { + windowBottom += this.safeAreaBottom; + } + return windowBottom; + }, + isIosAndH5() { + // #ifndef H5 + return false; + // #endif + return this.isIos; + } + }, + methods: { + // 当前版本号 + getVersion() { + return `z-paging v${c.version}`; + }, + // 设置nvue List的specialEffects + setSpecialEffects(args) { + this.setListSpecialEffects(args); + }, + // 与setSpecialEffects等效，兼容旧版本 + setListSpecialEffects(args) { + this.nFixFreezing = args && Object.keys(args).length; + if (this.isIos) { + this.privateRefresherEnabled = 0; + } + !this.usePageScroll && this.$refs['zp-n-list'].setSpecialEffects(args); + }, + // #ifdef APP-VUE + // 当app长时间进入后台后进入前台，因系统内存管理导致app重新加载时，进行一些适配处理 + _handlePageLaunch() { + // 首次触发不进行处理，只有进入后台后打开app重新加载时才处理 + if (this.pageLaunched) { + // 解决在vue3+ios中，app ReLaunch时顶部下拉刷新展示位置向下偏移的问题 + // #ifdef VUE3 + this.refresherThresholdUpdateTag = 1; + this.$nextTick(() => { + this.refresherThresholdUpdateTag = 0; + }) + // #endif + // 解决使用虚拟列表时，app ReLaunch时白屏问题 + this._checkVirtualListScroll(); + } + this.pageLaunched = true; + }, + // #endif + // 使手机发生较短时间的振动（15ms） + _doVibrateShort() { + // #ifndef H5 + + // #ifdef APP-PLUS + if (this.isIos) { + const UISelectionFeedbackGenerator = plus.ios.importClass('UISelectionFeedbackGenerator'); + const feedbackGenerator = new UISelectionFeedbackGenerator(); + feedbackGenerator.init(); + setTimeout(() => { + feedbackGenerator.selectionChanged(); + }, 0) + } else { + plus.device.vibrate(15); + } + // #endif + // #ifndef APP-PLUS + uni.vibrateShort(); + // #endif + + // #endif + }, + // 设置z-paging高度 + async _setAutoHeight(shouldFullHeight = true, scrollViewNode = null) { + const heightKey = 'min-height'; + try { + if (shouldFullHeight) { + // 如果需要铺满全屏，则计算当前全屏可是区域的高度 + let finalScrollViewNode = scrollViewNode || await this._getNodeClientRect('.zp-scroll-view'); + let finalScrollBottomNode = await this._getNodeClientRect('.zp-page-bottom'); + if (finalScrollViewNode) { + const scrollViewTop = finalScrollViewNode[0].top; + let scrollViewHeight = this.windowHeight - scrollViewTop; + scrollViewHeight -= finalScrollBottomNode ? finalScrollBottomNode[0].height : 0; + const additionHeight = u.convertToPx(this.autoHeightAddition); + // 在支付宝小程序中，添加!important会导致min-height失效，因此在支付宝小程序中需要去掉 + let importantSuffix = ' !important'; + // #ifdef MP-ALIPAY + importantSuffix = ''; + // #endif + const finalHeight = scrollViewHeight + additionHeight - (this.insideMore ? 1 : 0) + 'px' + importantSuffix; + this.$set(this.scrollViewStyle, heightKey, finalHeight); + this.$set(this.scrollViewInStyle, heightKey, finalHeight); + } + } else { + this.$delete(this.scrollViewStyle, heightKey); + this.$delete(this.scrollViewInStyle, heightKey); + } + } catch (e) {} + }, + // #ifdef MP-KUAISHOU + // 设置scroll-view内容器的最小高度等于scroll-view的高度(为了解决在快手小程序中内容较少时scroll-view内容器高度无法铺满scroll-view的问题) + async _setFullScrollViewInHeight() { + try { + // 如果需要铺满全屏，则计算当前全屏可是区域的高度 + const scrollViewNode = await this._getNodeClientRect('.zp-scroll-view'); + scrollViewNode && this.$set(this.scrollViewInStyle, 'min-height', scrollViewNode[0].height + 'px'); + } catch (e) {} + }, + // #endif + // 组件销毁后续处理 + _handleUnmounted() { + this.active = false; + this._offEmit(); + // 取消监听键盘高度变化事件（H5、百度小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序不支持） + // #ifndef H5 || MP-BAIDU || MP-TOUTIAO || MP-QQ || MP-KUAISHOU + this.useChatRecordMode && uni.offKeyboardHeightChange(this._handleKeyboardHeightChange); + // #endif + }, + // 触发更新是否超出页面状态 + _updateInsideOfPaging() { + this.insideMore && this.insideOfPaging === true && setTimeout(this.doLoadMore, 200) + }, + // 清除timeout + _cleanTimeout(timeout) { + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + return timeout; + }, + // 添加全局emit监听 + _onEmit() { + uni.$on(c.errorUpdateKey, (errorMsg) => { + if (this.loading) { + if (!!errorMsg) { + this.customerEmptyViewErrorText = errorMsg; + } + this.complete(false).catch(() => {}); + } + }) + uni.$on(c.completeUpdateKey, (data) => { + setTimeout(() => { + if (this.loading) { + if (!this.disabledCompleteEmit) { + const type = data.type || 'normal'; + const list = data.list || data; + const rule = data.rule; + this.fromCompleteEmit = true; + switch (type){ + case 'normal': + this.complete(list); + break; + case 'total': + this.completeByTotal(list, rule); + break; + case 'nomore': + this.completeByNoMore(list, rule); + break; + case 'key': + this.completeByKey(list, rule); + break; + default: + break; + } + } else { + this.disabledCompleteEmit = false; + } + } + }, 1); + }) + }, + // 销毁全局emit和listener监听 + _offEmit(){ + uni.$off(c.errorUpdateKey); + uni.$off(c.completeUpdateKey); + }, + }, +}; diff --git a/components/z-paging/components/z-paging/js/z-paging-mixin.js b/components/z-paging/components/z-paging/js/z-paging-mixin.js new file mode 100644 index 0000000..e4a7e14 --- /dev/null +++ b/components/z-paging/components/z-paging/js/z-paging-mixin.js @@ -0,0 +1,22 @@ +// [z-paging]使用页面滚动时引入此mixin，用于监听和处理onPullDownRefresh等页面生命周期方法 + +export default { + onPullDownRefresh() { + if (this.isPagingRefNotFound()) return; + this.$refs.paging.reload().catch(() => {}); + }, + onPageScroll(e) { + if (this.isPagingRefNotFound()) return; + this.$refs.paging.updatePageScrollTop(e.scrollTop); + e.scrollTop < 10 && this.$refs.paging.doChatRecordLoadMore(); + }, + onReachBottom() { + if (this.isPagingRefNotFound()) return; + this.$refs.paging.pageReachBottom(); + }, + methods: { + isPagingRefNotFound() { + return !this.$refs.paging; + } + } +} diff --git a/components/z-paging/components/z-paging/js/z-paging-static.js b/components/z-paging/components/z-paging/js/z-paging-static.js new file mode 100644 index 0000000..fb46d11 --- /dev/null +++ b/components/z-paging/components/z-paging/js/z-paging-static.js @@ -0,0 +1,13 @@ +// [z-paging]公用的静态图片资源 + +export default { + base64Arrow: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAD1BMVEVHcExRUVFMTExRUVFRUVE9CdWsAAAABHRSTlMAjjrY9ZnUjwAAAQFJREFUWMPt2MsNgzAMgGEEE1B1gKJmAIRYoCH7z9RCXrabh33iYktcIv35EEg5ZBh07pvxJU6MFSPOSRnjnBUjUsaciRUjMsb4xIoRCWNiYsUInzE5sWKEyxiYWDbyefqHx1zIeiYTk7mQYziTYecxHvEJjwmIT3hMQELCYSISEg4TkZj0mYTEpM8kJCU9JiMp6TEZyUmbAUhO2gxAQNJiIAKSFgMRmNQZhMCkziAEJTUGIyipMRjBSZkhCE7KDEFIUmTeGCHJxWz0zXaE0GTCG8ZFtEaS347r/1fe11YyHYVfubxayfjoHmc0YYwmmmiiiSaaaKLJ7ckyz5ve+dw3Xw2emdwm9xSbAAAAAElFTkSuQmCC', + base64ArrowWhite: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAElBMVEVHcEz///////////////////+IGTx/AAAABnRSTlMA/dAkXZOhASU/AAABYElEQVRYw+2YwXLCIBCGsdAHWGbyAKZ4zxi9O017rxLf/1UaWFAgA1m8dcpedNSPf/l/Vh0Ya/Wn6hN0JcGvoCqRM4C8VBFiDwBqqNuJKV0rAnCgy3AUqZE57x0iqTL8Br4U3WBf/YWaIlTKfAcELU/h9w72CSVPa3C3OCDvhpHbRp/s2vq4fHhCeiCl2A3m4Qd71DQR257mFBlMcTlbFnFWzNtHxewYEfSiaLS4el8d8nyhmKJd1CF4eOS0keLMAuSxubLBIeIGQW8YHCFFo7EH9+YDcQt9FMZEswTheaNxTHwHT8SZorJjMrEVwo4Zo0U8HSEyZvJMOg4RjnmmRr8nDYeIz3OMkbfE/QhBo+U9RnZJxjGCRh/WKmHEMWLNkfPKsGh/CWJk1JjG0kcuJggTt34VDP8aWAFhp4nybVb5+9qQhjSkIQ1pSEMa8k+Q5U9rV3dF8MpFBK+/7miVq1/HZ2qmo9D+pAAAAABJRU5ErkJggg==', + base64Flower: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAKlBMVEVHcEzDw8Ovr6+pqamUlJTCwsKenp61tbWxsbGysrLNzc2bm5u5ubmjo6MpovhuAAAACnRSTlMA/P79/sHDhiZS0DxZowAABBBJREFUWMPtl89rE0EUx7ctTXatB3MI1SWnDbUKPUgXqh4ED8Uf7KUVSm3ooVSpSii0Fn/gD4j4o+APiEoVmos9FO2celiqZVgwgaKHPQiCCkv+F99kM7Ozm5kxq1dfD91k9pPve9/3ZjbRNHHok/mKli4eIPNgSuRObuN9SqSEzM20iGnm0yIbqCuV7NSSSIV7uyPM6JMBYdeTOanh/QihJYZsUCSby+VkMj2AvOt0rAeQAwqE3lfKMZVlQCZk1QOCKkkVPadITCfIRNKxfoJI5+0OIFtJx14CMSg1mRSDko7VAfksRQzEbGYqxOJcVTWMCH2I1/IACNW0PWU2M8cmAVHtnH5mM1VRWtwKZjOd5JbF6s1IbaYqaotjNlPHgDAnlAizubTR6ovMYn052g/U5qcmOpi0WL8xTS/3IfSet5m8MEr5ajjF5le6dq/OJpobrdY0t3i9QgefWrxW9/1BLhk0E9m8FeUMhhXal499iD0eQRfDF+ts/tttORRerfp+oV7f4xJj82iUYm1Yzod+ZQEAlS/8mMBwKebVmCVp1f0JLS6zKd17+iwRKTARVg2SHtz3iEbBH+Q+U28zW2Jiza8Tjb1YFoYZMsJyjDqp3M9XBQdSdPLFdxEpvOB37JrHcmR/y9+LgoTlCFGZEa2sc6d4PGlweEa2JSVPoVm+IfGG3ZL037iV9oH+P+Jxc4HGVflNq1M0pivao/EopO4b/ojVCP9GjmiXOeS0DOn1o/iiccT4ORnyvBGF3yUywkQajW4Ti0SGuiy/wVSg/L8w+X/8Q+hvUx8Xd90z4oV5a1i88MbFWHz0WZZ1UrTwBGPX3Rat9AFiXRMRjoMdIdJLEOt2h7jrYOzgOamKZSWSNspOS0X8SAqRYmxRL7sg4eLzYmNehcxh3uoyud/BH2Udux4ywxFTc1xC7Mgf4vMhc5S+kSH3Y7yj+qpwIWSoPTVCOOPVthGx9FbGqrwFw6wSFxJr+17zeKcztt3u+2roAEVgUjDd+AHGuxHy2rZHaa8JMkTHEeyi85ANPO9j9BVuBRD2FY5LDMo/Sz/2hReqGIs/KiFin+CsPsYO/yvM3jL2vE8EbX7/Bf8ejtr2GLN65bioAdgLd8Bis/mD5GmP2qeqyo2ZwQEOtAjRIDH7mBKpUcMoApbZJ5UIxkEwxyMZyMxW/uKFvHCFR3SSmerHyDNQ2dF4JG6zIMpBgLfjSF9x1D6smFcYnGApjmSLICO3ecCDWrQ48geba9DI3STy2i7ax6WIB62fSyIZIiO3GFQqSURp8wCo7GhJBGwuSovJBNjb7kT6FPVnIa9qJ2Ko+l9mefGIdinaMp0yC1URYiwsdfNE45EuA5Cx9EhalfvN5s+UyItm81vaB3p4joniN+SCP7Qc1hblAAAAAElFTkSuQmCC', + base64FlowerWhite: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAElBMVEX///9HcEz///////////////84chYNAAAABnRSTlP/AGzCOYZj5g1nAAACfklEQVRYw+2YTVPDIBCGtza9Jw25a0bvcax30o73OOr//yvma2F3YWlpPTijXNpAHrK8LLALVPFium2vNIFSbwGKTGQA2GUiHcD29yDNy3sMIdUBQl7r2H8mOEVqAHgPkYZUS6Qc2zYhQqtjyDZEximCZwWZLIBeIgYShs2NzxKpSUehYpMJhURGb+O+w5BpMCAREKPnCDHbIY20SzhM5yxziAXpOiBXydrekT9i5XDEq4NIIHHgyU5mRGqviII4mREJJA4QJzMiILwlRJzpKxJKvCBm8OsBBbLux0tsPl4RKYm5aPu6jw1U4mGxEUR9g8M1PcqBEp/WJliNgYOXueBzS4jZSIcgY5lCtevgDSgyzE+rAfuOTQMq0yzvoGH18qju27Mayzs4fPyMziCx81NJa5RNfW7vPYK9KOfDiVkBxFHG8hAj9txuoBuSWORsFfkpBf7xKFLSeaOefEojh5jz22DJEqMP8fUyaKdQx+RnG+yXMpe8Aars8ueR1pVH/bW3FyyvPRw90upLDHwpgBDtg4aUBNkxRLXMAi03IhcZtr1m+FeI/O/JNyDmmL1djLOauSlNflBpW18RQ2bPqXI22MXXEk75KRHTnkPkYbESbdKP2ZFk0r5sIwffAjy1lx+vx7NLjB6/E7Jfv5ERKhzpN0w8IDE8IGFDv5dhz10s7GFiXRZcUeLCEG5P5nDq9k4PFDcoMpE3GY4OuxuCXhmuyNB6k0RsLIAvqp9NE5r8ZCSS8gxnUp7ODdYhZTqxuiJ9uyJJtPmpqJ7wVj+XVieS903iViHziqAhchLEJAyb7jWU647EpUofQ0ziUuXXXhDddtlllSwjgSQu7r4BRWhQqfDPMVwAAAAASUVORK5CYII=', + base64Success: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAElBMVEVRUVFHcExTU1NRUVFRUVFRUVFOSlSUAAAABnRSTlP/AI6+VySB3ZENAAACcElEQVRYw+2YyYKCMAyGI8hdpdxdZu7gcpdZ7jL6/s8yYheSNi0aPdqbwOffpGmaFOYPD3gj4bisN7vddv17N/JVgxn5x12IWgIaWTuO/IE3PseQbwjGPo2cgRmHFLJwdm/X643zwiqOKPPJ1nj3sjEP2iiifZWj5bhopSyGaEO2HX5fbQJzwJ+W7x/jw5ZFjsEU0PMph9xE8i5EqprKALW95eJQURkgzw98uJ/JvwGecR7bIjWWsUgVrrIfFZ2HlLy3sKETD1mmRLRMRhGVssRa0xJkdn3SpJBymBkM8+pSSDXMDNyDaToVHd2fgpNt0sjwiUZO19+jGQ+gQEg9Oq+bufmAVGihomNmjQG7UG3020vrlm7lkFnKFGU3kZ0KGAdmKe821pipQ+qEKcrZeTL2g5FsUks4cStjEZWwXg0b0n4GxmEpkWwIs5VBynjgK7xZaz1/0D7OxkVuLpsY5BQNFyLS84VBjjbg0iL2r2EQHBOxBhikuUOkdxODVF1cxHoWtPPsiyXO455Iv34hssCO8EV4ZIYTjS8SR4qYSHRiTiYQ4ZFbHi0iIhhBTi6dTCgSWRcnw4h4yGTuyTAiOGBIWGoZTgSHJQl+LcOJ4OCnW6yX2bMnJ9pidCOXtkTkTrIGpYuOynAiOF14SamMiOCk5Ke+mq8BcOrrvym8d0zKIQnWT+M1WwOQNO4fFiWb18hhERxJPx2fblbPHHyC41VyiAtKBUFBIih7JMWVoIQTFIr3lKPN80WvoLSWFPC653ioTZA0I0FrQ7qU6asaK0H7JmkSJa2ooOGVtNUsc3j9FYHkIkJy3SG6VHnfXKXGP9t4N9Q4Ye98AAAAAElFTkSuQmCC', + base64SuccessWhite: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAGFBMVEVHcEz///////////////////////////8dS1W+AAAAB3RSTlMAiVYk6KvDHLfaegAAAo1JREFUWMPtWEtzmzAQNhCTq910ytXpiyvxTNOr60zrayepx9d02gnX4sTm7xcEiJX2gdnkGJ1A4tOnfWqXyeR1vMRYzrcPD9v5h5MBl3/Ldvx4cxIg/FWC8X0xjLjalM54uhhCfCrRuJURX0pi3EmIqZV7O59vrRZmguStHL9b7S7ftfLwOtiZDw7AHMtmquAQ12b5Wwbnordm8g9zLLO49qc/m2n6aKnhwPOGZ08hAiNHhheiHae1lOUPGZpQkPKa3q0mOUjaRzSRaGUjpy/mmWSwySSpllcEteBKAT52KEnSbblA51pJEPxBQoiH1FP4E3s5+FJv07h6/ylD6ui7B+9fq/ehrFB98ghec9EoVtyjK8pqCHLmCBOwMWSCeWFNN4MbPAk55NhsvoFHSSVR0k5TCTTEzlUGcqV/nVp7n9oIVkmtaqbAEqEgfdgHJPwsEAyZ9r4VAZXFjpEwyaw3+H2v42KYxKhs1XvY/gSSGv+IHyUSuHXCeZhLAgVI3EjgSGo1Fb3xO0tGGU9S2/KAIbtjxpJASG73qox6w5LUq0cEOa+iIONIWIilQSQ0pPa2jgaRQAgQP7c0mITRWGxpMAmEQFN2NAQJNCV0mI6GIIEO47hlQ0ORQLd0nL+hoUjg1m6I1TRr8uYEAriBHLcVFQ5UEMiBe3XkTBEG04WXlGKGxPnMS305XQPA1Ocn2JiuAZwE66fxnKwBnDTuXxZTMq85lwW6kt5ndLqZPefiU1yvmktcUSooChJF2aMprhQlnKJQ5FxRKkcVRa+itNYU8Io2oVkY14w0NMWYlqft91Bj9VHq+ca3b43BxjWJmla0sfKohlfTVpPN+93L/yLQ/IjQ/O5Q/VR5HdL4D7mlxmjwVdELAAAAAElFTkSuQmCC', + base64Empty: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAMAAAAL34HQAAALeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTAyLTIyVDIxOjIxOjQ1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTAxLTEzVDE5OjA5OjQwKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wMS0xM1QxOTowOTo0MCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZWQwMWYzNWQtOWRjOC00MDBiLWEyMmQtNjM5OGZiNzVhNGRiIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDhlMzQ3ZmEtMDY2My1jYTRiLTgzNTctNTk4YjBkNGIzOTU2IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZDA4MDI4MDItMzUyYS04NTRhLTkxYjctNmRlNmQ1MmViM2QwIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHRpZmY6T3JpZW50YXRpb249IjEiIHRpZmY6WFJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6WVJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6Q29sb3JTcGFjZT0iMSIgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMwMCIgZXhpZjpQaXhlbFlEaW1lbnNpb249IjMwMCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDA4MDI4MDItMzUyYS04NTRhLTkxYjctNmRlNmQ1MmViM2QwIiBzdEV2dDp3aGVuPSIyMDIyLTAyLTIyVDIxOjIxOjQ1KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwNjg2NzJkLWY5NDMtOTU0Mi1iMDBiLTVlMDExNmE1NmIzZSIgc3RFdnQ6d2hlbj0iMjAyNC0wMS0xM1QxMDoyNjoxNiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDphYmJkZmUyZC0xY2Q2LTJiNDgtYjUyNS05YzlhZjdlNjA4NDMiIHN0RXZ0OndoZW49IjIwMjQtMDEtMTNUMTE6MjM6NDArMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTQ5MjM5MDAtNDhiZC03YTQ1LWI4NGItYmVlZTVjOWUxYTM1IiBzdEV2dDp3aGVuPSIyMDI0LTAxLTEzVDExOjIzOjQwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmVkMDFmMzVkLTlkYzgtNDAwYi1hMjJkLTYzOThmYjc1YTRkYiIgc3RFdnQ6d2hlbj0iMjAyNC0wMS0xM1QxOTowOTo0MCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmFiYmRmZTJkLTFjZDYtMmI0OC1iNTI1LTljOWFmN2U2MDg0MyIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjM2ZGQ4NTQxLWQ0MWEtYmY0Yy1iZjA3LWNmNjZhNjZhMDg2MSIgc3RSZWY6b3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmQwODAyODAyLTM1MmEtODU0YS05MWI3LTZkZTZkNTJlYjNkMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm30U/gAAAAJcEhZcwAALiMAAC4jAXilP3YAAAA/UExURUdwTODg4O3t7e7u7unp6d7e3uTk5M/Pz8nJyePj4+jo6Pj4+MrKyszMzO7u7unp6fb29vLy8vr6+v7+/sHBweag3xAAAAAOdFJOUwAxia5pF0n+/vzX3KbULQ2DYQAACG1JREFUeNrtm4l2o7gShi20IWFrAd7/WUc7EosDWKZ976Hc7WTmdMKXv0qlqpLyeNx222233Xbbbbfddtv/mOHn8xexSNsiRH5PrbFtW4p+DetpsF4v8Gs+HA3WEwOAfwzriYxaLTVsP8X1QK0z+vqQCzewYogi60aL9SEX5oyxphYVCFTGjfSJCTmN1jBruN5KTGCUS8bhySQGHRaohmW4glwtldbOeYJYKlgvbyUuA8aFFEKc++aIM4hrRnyiMnIZKq1PrihcM3GNKboMF1Naa9X9+8T1KrxIlVbGjv3cAEHOYYMqqgUsVuJqqehV3+sjDwB+DTJp0lYtMCyZpxqjF4e+74+sRcQSFZO8UonUSEFzuUY+DKo59A2kZDatGCjzCauy/2AmhSyCq0WHEj0KTNJDmVeNhErMt1Q8W4xti4/FwMJ4jaxl05TKFiNtD3kBGrHnhiph9V0eXQc6DkyE2xX830AlKshFTErXeuCZXK/9m41wFsGSfZ4lcGeyZ98PrylJ7MWCojQZ3qSukL2QslgdngqJnTEPdTJhXvbNBoR/+7wabIxWduN/Ja5dWEivm4XSZ2uQckNzmRlHrn2lc6eiafvS4V2Hd12tesau8toZW0CtWoZYb9t+OqxdCYKYjVPF16pVbILIy/gR7MVaWMHYPCoa2VkzkX4Iry2rirXbumGyAjGC1h62YLw6ApsNKZph3fpIWHt08JovRWD62sejpXhTrhWrPpl6zZ6PW2oTG5ltlvgtF6weNYCWKeJJSfg4W6PNJlj3sVZgOXV4lc8n4RlkMTLEBDVoYc3nI09kpyzzfgWsjyzBZSNDKF2/wjh+sxYvn8Y1scxlfLF9T1RBO3wVHsnq8Fk4oGkEh/0KJPSa8T2CeWE5X9BPmgLsaRIGeNL2kshCsWoLBmdPJW5Wbz1ndAKUXjPwxXYAUpSV3fy5BJg1aa1tyVXHHMgVH31ewDVrleHr9XqC684SUF4mecR3+wW5SC2QNvxUizRv98mLDhPgYiMDb+v8g0OADxqxcnf9w01mZYJF0fUVP5LcdswbsMmy1DVs5PlE5NpNiTR8M8qAWZkOy6aN13VcoOF2/s3xn3Mes8Xza05tgR/BuNz69nlNzMR0fH45p+G4R9oxh2mKt9MF4J7K/lvWUojwF5nCgCpuRUptnZMQ3au0nSo2UsHgV3xpmeLYzGml3ZFBBzYGPCpOQRwXs1/GG1J74dlZc6JKUOtjBAz9XjVxucGWHbZVJDPJQGYDRl1Qmf1ovk2Sbghb6MQlnF7mBzM1bgOqJAPpoOQaVe+4Skcit3uqHMyG/Sh1rHNN0gAfM0nnPrmulfLVBSm20TSZSdWa0LJl2ukVyE4vTYCgP3uQkwv1TKtQWgxDzBSg80OQjCs4klKvuUzHLCfIbDKIE/S5VIGqD1iD2819pkAqTWdmeina+oZABi7X5B1MGoTJqJSchuk6JNHcgUPAcsVFk0+N0oDN68Vo7FQSmCXjx46OEtUk1lpY2ZFQGr/AcpqVato4wPUD+RhfAeyQI5sJ6l2sDwnKqNFSJvpiyJbFl3kTOjZ2ievwCR7hkUoWeV2vOLAXvB39AJoyqYa81A5cvaAidXYTFTycKDBcalVK5f3XS89kzLVl9txfL+K+p6NUnitz5KkKm7D3DrRPNq4bk7l20aFRppNilmuQI+uzTtj9wPBkTsVwM7HbJ5pwGgujyRyZDzQLNoiRFluRtQ+GzEguqRxUL+ZMFqulMzIfaP3ARj2k/txB8c+2HyjmDizCaVWtNoE5MvMlKs/4VQ7HUJZCrU6qCKcNJ2aSWUZhJZu4VI0LB4CHFdj77DRuGi28WKAxoRyZyzGVrmc0jmk1nP5QaxZo1puqq1YIAqgZb8e/rABZJWNCNxV7DSTpOO7Aail9J9nYHtua/4ouE/aS0X1qtXQzwGx+rnbi2vhF/TfZG52oc6DPo1WCi3RTDnRk7TEntoEp38gg+DjYs2opkR3JW5EpL9rU0XSK5/6LOTAVS+72x7pm60zSf5HMdldjhzJqw1FRcxXdS3ZNZp0s92FiyluUvBPoD9ynZNkBiu2NF11ofnlnQbZgKqvusj9R/f6DOzgVsahbNlXxlsxU8y7qrbTupitRyxFBKG6H3aEPUqj7YrzAymq41FXlZLlO4WLbvG2Kg4vYB+wPfWS2B5Rq8TW9ROpAZbiF6MmCTsx1NLLsx7NOoOiZup2CNbZ36xc96ErcxzuILGrmmFhimjtwKo/yTm7feTVwB61IzbnW4967Kt3cDDotGt8JKrTiUyO3Uy2PZZt9tapXEfXhWmTgcoB+JchFWsiCKvYnhmn/tKuJDbgly897FnFfkE1rQLKy810OU7xW3bEJHCD5gERtuTGuxoJqA6qI9TNMa6MbvZomsiubbPYx78YXDaaRqqsyqfSaLZdjYGHLu65rDgydXCWm1P5EvcQ828f9pcBapTILSMv1nZCAc0WzFIFsGfUi/kmAxc6cFqDSYuPSMIbs1OVrwITTQM9HVRFJ5JL56qcoFzzT1uVcd2v9jFw8BHlcWtmEI86hp5Dy/zOlK8cUp/rVseRUBqawz6kmAcPLM9l5m8h4V53Iz/2mFJaTCvF8JbsMvPjU/7crbUXart0v4WyE0LnDPcAX95Knj4VUE8HCdNdUP8BDcOXKdPl4uSWbh4LfOV0HDdfipOmu+eIRrDsNPkIT7np/8ZAzVdOd1u8wHIqeXt8VqtgiO50ePeNaGG+uO9rHiKdL71pnIun8jxEKXv2r2HYBzO/mz96vFKoMM5WLk7tQXS9U5kwCu5lk7n6++kdCFWRaTUzm0/5fClWGWTrM/AGhCrJO/ZBQhTPFLwmV7ebgcdttt91222233Xbbbf+H9h+2WEtdHVinLAAAAABJRU5ErkJggg==', + base64Error: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAMAAAAL34HQAAALeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDg4LCAyMDIwLzA3LzEwLTIyOjA2OjUzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTAyLTIyVDIxOjIxOjQ1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTAxLTEzVDE5OjEwOjEwKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0wMS0xM1QxOToxMDoxMCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTQ3NTExNjAtZDY5MC00ZTkzLWFhNGUtNGMwYTViNGU1ZGFjIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzRiNzlkYWMtZTJmYS1iNzQ0LWIxM2ItOWU1N2VjMDhhM2YwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZDA4MDI4MDItMzUyYS04NTRhLTkxYjctNmRlNmQ1MmViM2QwIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHRpZmY6T3JpZW50YXRpb249IjEiIHRpZmY6WFJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6WVJlc29sdXRpb249IjMwMDAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6Q29sb3JTcGFjZT0iMSIgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMwMCIgZXhpZjpQaXhlbFlEaW1lbnNpb249IjMwMCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZDA4MDI4MDItMzUyYS04NTRhLTkxYjctNmRlNmQ1MmViM2QwIiBzdEV2dDp3aGVuPSIyMDIyLTAyLTIyVDIxOjIxOjQ1KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwNjg2NzJkLWY5NDMtOTU0Mi1iMDBiLTVlMDExNmE1NmIzZSIgc3RFdnQ6d2hlbj0iMjAyNC0wMS0xM1QxMDoyNjoxNiswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjZjk1NTE1OC04MjFiLTA4NDUtYWJmNS05YTE1NGM1ZTY4NjEiIHN0RXZ0OndoZW49IjIwMjQtMDEtMTNUMTE6MDQ6MDQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZGM1Y2IyNWItZDZlNC0yZjQ2LTgyODQtZmUwOTNlY2M2ZTkxIiBzdEV2dDp3aGVuPSIyMDI0LTAxLTEzVDExOjA0OjA0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjE0NzUxMTYwLWQ2OTAtNGU5My1hYTRlLTRjMGE1YjRlNWRhYyIgc3RFdnQ6d2hlbj0iMjAyNC0wMS0xM1QxOToxMDoxMCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDx4bXBNTTpEZXJpdmVkRnJvbSBz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', + base64BackToTop: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAElBMVEVRUVH+/v5HcEyZmZlRUVFRUVGm1ByOAAAABnRSTlPMzADMTZAJBBGsAAAEnElEQVR42t2cS27jMAyGf7/2U+QCQeDsbeQCgZDujaC5/1UmkzaJn+JDFGcw3LdfflKibJkkDnxrL7dbg7sNt6+L4O8OYBM+B0ys+QrGkHZG+OEEQ8g6go8Bx1GIGMdpNOQyIG6XdMgnSPtKhLQDGEZFBgYMkhKFtGBb0EIEjDgFRowoBVaMGAWpMedEfxMiZtwpUsgZCqtlkCNUdpVAWigtCCCDFtLwIWeoreZCWiRYYEKGFEjDg+yRZCUH0iLRAgNyToXUNCRZyMqWhGnUN2IPm3wSlwJ7IUspyCBkIQUZhCykIIeQuRTkEDKXAuM9srrtYbrZN7Y98giZSoFd+t1OxmMITG0dcrSFXFchZ1tIvQZpYWxhBbK3hpQrkMEa0iwh5t4a+QvZvDXyF7J5a+Qv5PPW21/I5623v5DPW29/IaO3Xv5Clrw1y1/Ikrdm+Qs5svw83yNnSJ5BQb4F/F7EIEJSnThGBAXxkFQfLOviQUE8JAUPsosHBfGQfDAtHhREQ1JxIV00KIgmrnRI84S0yAd5BAXxxJUck0f6Qnwr9qmr6xF5xLMjcwn/iudIEAdWnyjkEXlQKZiRVzoqRyLbgeUKKR8Q4alY7cSnoxzSf2ggsqehKr6YVpcXpOd7H93f60cKhOd7Re2LteUF4eLqiVS1mr0ge4io6C2+soaFkJ7MuuuQs1yITEp9hwwKISIpzR2iESKSIoT0rLNwuVHQqoSIpAQJpGce60vIUSdEIuUqgPTsJ5QFZK8UIpBS8iG94GFrDjlrhfCl8CG96Llxmle4kEr6vKWBPIVo9kqDQSRk9/3cWoikcCFPAd33v4dIChPyEvLzBA6RlEYWke4JEUnhKXkLeUEKxRHJFfKCQHGucIW8IdZSRkLeEGMpYyEjiK2UsZARxFTKRMgYYillImQMMZQyFTKB2EmZCplAuFLIHT8TMoWwpQwiIVMIUwqpZP5bp5CCvCTiQKr5f5lCQN+tPCBn2ZvVDFJwIDUP0m1BYAfZYRNSsCB7BqTbhoARePIxtZ9tgwWkoJcwCalmv3MBAemtO4R6dah2HaKQqj8Zvp9sQDjvJ21+SPCBHPJDDk6QITekEV7gqCC19CpKAym9IMfckKv4olMBCeIrWwVEfvkshzQekO9r9P1/ALk+IG1eSPCDiCJfyG+FyU+A6ZCa/piZDinpz7LpkCv5gdkAEshP5emQhv7onw6pGeULyZCSUYiRDAmMkpJkCKs4JhFSq8p8hJBSVbAkhARV6ZUQoisik0FqXTmcDHLVFfbJIEFXoiiCNMpiSxGkVJaNiiBBWQArgTTaUl4JpNQWJUsgQVteXQg+AKkLxQWFGKW+5J2+eVp4S168X3CF1CltCKdTJ8lb84YK2bUBO+wZW0Pqv9nk4tKu49N45NJC5dMM5tLW5tOg59Jq6NM06dL+abFXwr/RkuvTXJwae1abtE/Dt0/ruksTvs84AZ/BCC4jHnyGVfiM3VBQFANEXEah+Ax18RlP4zNox2dkkM/wI58xTn8yDCXGYCDV3W5RGSajtXyGhG1jbpbjzpwGt/0MJft8jqC7iUbQ/QZaxdnKqcIftwAAAABJRU5ErkJggg==', +} diff --git a/components/z-paging/components/z-paging/js/z-paging-utils.js b/components/z-paging/components/z-paging/js/z-paging-utils.js new file mode 100644 index 0000000..ca8a460 --- /dev/null +++ b/components/z-paging/components/z-paging/js/z-paging-utils.js @@ -0,0 +1,302 @@ +// [z-paging]工具类 + +import zLocalConfig from '../config/index' +import c from './z-paging-constant' + +const storageKey = 'Z-PAGING-REFRESHER-TIME-STORAGE-KEY'; +let config = null; +let configLoaded = false; +let cachedSystemInfo = null; +const timeoutMap = {}; + +// 获取默认配置信息 +function gc(key, defaultValue) { + // 这里return一个函数以解决在vue3+appvue中，props默认配置读取在main.js之前执行导致uni.$zp全局配置无效的问题。相当于props的default中传入一个带有返回值的函数 + return () => { + // 处理z-paging全局配置 + _handleDefaultConfig(); + // 如果全局配置不存在，则返回默认值 + if (!config) return defaultValue; + const value = config[key]; + // 如果全局配置存在但对应的配置项不存在，则返回默认值；反之返回配置项 + return value === undefined ? defaultValue : value; + }; +} + +// 获取最终的touch位置 +function getTouch(e) { + let touch = null; + if (e.touches && e.touches.length) { + touch = e.touches[0]; + } else if (e.changedTouches && e.changedTouches.length) { + touch = e.changedTouches[0]; + } else if (e.datail && e.datail != {}) { + touch = e.datail; + } else { + return { touchX: 0, touchY: 0 } + } + return { + touchX: touch.clientX, + touchY: touch.clientY + }; +} + +// 判断当前手势是否在z-paging内触发 +function getTouchFromZPaging(target) { + if (target && target.tagName && target.tagName !== 'BODY' && target.tagName !== 'UNI-PAGE-BODY') { + const classList = target.classList; + if (classList && classList.contains('z-paging-content')) { + // 此处额外记录当前z-paging是否是页面滚动、是否滚动到了顶部、是否是聊天记录模式以传给renderjs。避免不同z-paging组件renderjs内部判断数据互相影响导致的各种问题 + return { + isFromZp: true, + isPageScroll: classList.contains('z-paging-content-page'), + isReachedTop: classList.contains('z-paging-reached-top'), + isUseChatRecordMode: classList.contains('z-paging-use-chat-record-mode') + }; + } else { + return getTouchFromZPaging(target.parentNode); + } + } else { + return { isFromZp: false }; + } +} + +// 递归获取z-paging所在的parent，如果查找不到则返回null +function getParent(parent) { + if (!parent) return null; + if (parent.$refs.paging) return parent; + return getParent(parent.$parent); +} + +// 打印错误信息 +function consoleErr(err) { + console.error(`[z-paging]${err}`); +} + +// 延时操作，如果key存在，调用时清除对应key之前的延时操作 +function delay(callback, ms = c.delayTime, key) { + const timeout = setTimeout(callback, ms);; + if (!!key) { + timeoutMap[key] && clearTimeout(timeoutMap[key]); + timeoutMap[key] = timeout; + } + return timeout; +} + +// 设置下拉刷新时间 +function setRefesrherTime(time, key) { + const datas = getRefesrherTime() || {}; + datas[key] = time; + uni.setStorageSync(storageKey, datas); +} + +// 获取下拉刷新时间 +function getRefesrherTime() { + return uni.getStorageSync(storageKey); +} + +// 通过下拉刷新标识key获取下拉刷新时间 +function getRefesrherTimeByKey(key) { + const datas = getRefesrherTime(); + return datas && datas[key] ? datas[key] : null; +} + +// 通过下拉刷新标识key获取下拉刷新时间(格式化之后) +function getRefesrherFormatTimeByKey(key, textMap) { + const time = getRefesrherTimeByKey(key); + const timeText = time ? _timeFormat(time, textMap) : textMap.none; + return `${textMap.title}${timeText}`; +} + +// 将文本的px或者rpx转为px的值 +function convertToPx(text) { + const dataType = Object.prototype.toString.call(text); + if (dataType === '[object Number]') return text; + let isRpx = false; + if (text.indexOf('rpx') !== -1 || text.indexOf('upx') !== -1) { + text = text.replace('rpx', '').replace('upx', ''); + isRpx = true; + } else if (text.indexOf('px') !== -1) { + text = text.replace('px', ''); + } + if (!isNaN(text)) { + if (isRpx) return Number(rpx2px(text)); + return Number(text); + } + return 0; +} + +// rpx => px，预留的兼容处理 +function rpx2px(rpx) { + return uni.upx2px(rpx); +} + +// 同步获取系统信息，兼容不同平台 +function getSystemInfoSync(useCache = false) { + if (useCache && cachedSystemInfo) { + return cachedSystemInfo; + } + // 目前只用到了deviceInfo、appBaseInfo和windowInfo中的信息，因此仅整合这两个信息数据 + const infoTypes = ['DeviceInfo', 'AppBaseInfo', 'WindowInfo']; + const { deviceInfo, appBaseInfo, windowInfo } = infoTypes.reduce((acc, key) => { + const method = `get${key}`; + if (uni[method] && uni.canIUse(method)) { + acc[key.charAt(0).toLowerCase() + key.slice(1)] = uni[method](); + } + return acc; + }, {}); + // 如果deviceInfo、appBaseInfo和windowInfo都可以从各自专属的api中获取，则整合它们的数据 + if (deviceInfo && appBaseInfo && windowInfo) { + cachedSystemInfo = { ...deviceInfo, ...appBaseInfo, ...windowInfo }; + } else { + // 使用uni.getSystemInfoSync兜底，确保能获取到最终的系统信息 + cachedSystemInfo = uni.getSystemInfoSync(); + } + return cachedSystemInfo; +} + +// 获取当前时间 +function getTime() { + return (new Date()).getTime(); +} + +// 获取z-paging实例id，随机生成10位数字+字母 +function getInstanceId() { + const s = []; + const hexDigits = "0123456789abcdef"; + for (let i = 0; i < 10; i++) { + s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); + } + return s.join('') + getTime(); +} + +// 等待一段时间 +function wait(ms) { + return new Promise(resolve => { + setTimeout(resolve, ms); + }); +} + +// 是否是promise +function isPromise(func) { + return Object.prototype.toString.call(func) === '[object Promise]'; +} + +// 添加单位 +function addUnit(value, unit) { + if (Object.prototype.toString.call(value) === '[object String]') { + let tempValue = value; + tempValue = tempValue.replace('rpx', '').replace('upx', '').replace('px', ''); + if (value.indexOf('rpx') === -1 && value.indexOf('upx') === -1 && value.indexOf('px') !== -1) { + tempValue = parseFloat(tempValue) * 2; + } + value = tempValue; + } + return unit === 'rpx' ? value + 'rpx' : (value / 2) + 'px'; +} + +// 深拷贝 +function deepCopy(obj) { + if (typeof obj !== 'object' || obj === null) return obj; + let newObj = Array.isArray(obj) ? [] : {}; + for (let key in obj) { + if (obj.hasOwnProperty(key)) { + newObj[key] = deepCopy(obj[key]); + } + } + return newObj; +} + +// ------------------ 私有方法 ------------------------ +// 处理全局配置 +function _handleDefaultConfig() { + // 确保只加载一次全局配置 + if (configLoaded) return; + // 优先从config.js中读取 + if (zLocalConfig && Object.keys(zLocalConfig).length) { + config = zLocalConfig; + } + // 如果在config.js中读取不到，则尝试到uni.$zp读取 + if (!config && uni.$zp) { + config = uni.$zp.config; + } + // 将config中的短横线写法全部转为驼峰写法，使得读取配置时可以直接通过key去匹配，而非读取每个配置时候再去转，减少不必要的性能开支 + config = config ? Object.keys(config).reduce((result, key) => { + result[_toCamelCase(key)] = config[key]; + return result; + }, {}) : null; + configLoaded = true; +} + +// 时间格式化 +function _timeFormat(time, textMap) { + const date = new Date(time); + const currentDate = new Date(); + // 设置time对应的天，去除时分秒，使得可以直接比较日期 + const dateDay = new Date(time).setHours(0, 0, 0, 0); + // 设置当前的天，去除时分秒，使得可以直接比较日期 + const currentDateDay = new Date().setHours(0, 0, 0, 0); + const disTime = dateDay - currentDateDay; + let dayStr = ''; + const timeStr = _dateTimeFormat(date); + if (disTime === 0) { + dayStr = textMap.today; + } else if (disTime === -86400000) { + dayStr = textMap.yesterday; + } else { + dayStr = _dateDayFormat(date, date.getFullYear() !== currentDate.getFullYear()); + } + return `${dayStr} ${timeStr}`; +} + +// date格式化为年月日 +function _dateDayFormat(date, showYear = true) { + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + return showYear ? `${year}-${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}` : `${_fullZeroToTwo(month)}-${_fullZeroToTwo(day)}`; +} + +// data格式化为时分 +function _dateTimeFormat(date) { + const hour = date.getHours(); + const minute = date.getMinutes(); + return `${_fullZeroToTwo(hour)}:${_fullZeroToTwo(minute)}`; +} + +// 不满2位在前面填充0 +function _fullZeroToTwo(str) { + str = str.toString(); + return str.length === 1 ? '0' + str : str; +} + +// 驼峰转短横线 +function _toKebab(value) { + return value.replace(/([A-Z])/g, "-$1").toLowerCase(); +} + +// 短横线转驼峰 +function _toCamelCase(value) { + return value.replace(/-([a-z])/g, (_, group1) => group1.toUpperCase()); +} + + +export default { + gc, + setRefesrherTime, + getRefesrherFormatTimeByKey, + getTouch, + getTouchFromZPaging, + getParent, + convertToPx, + getTime, + getInstanceId, + consoleErr, + delay, + wait, + isPromise, + addUnit, + deepCopy, + rpx2px, + getSystemInfoSync +}; diff --git a/components/z-paging/components/z-paging/wxs/z-paging-renderjs.js b/components/z-paging/components/z-paging/wxs/z-paging-renderjs.js new file mode 100644 index 0000000..1cbc2a2 --- /dev/null +++ b/components/z-paging/components/z-paging/wxs/z-paging-renderjs.js @@ -0,0 +1,67 @@ +// [z-paging]使用renderjs在app-vue和h5中对touchmove事件冒泡进行处理 + +import u from '../js/z-paging-utils' +const data = { + startY: 0, + isTouchFromZPaging: false, + isUsePageScroll: false, + isReachedTop: true, + isIosAndH5: false, + useChatRecordMode: false, + appLaunched: false +} + +export default { + mounted() { + if (window) { + this._handleTouch(); + // #ifdef APP-VUE + this.$ownerInstance.callMethod('_handlePageLaunch'); + // #endif + } + }, + methods: { + // 接收逻辑层发送的数据（是否是ios+h5） + renderPropIsIosAndH5Change(newVal) { + if (newVal === -1) return; + data.isIosAndH5 = newVal; + }, + + // 拦截处理touch事件 + _handleTouch() { + if (!window.$zPagingRenderJsInited) { + window.$zPagingRenderJsInited = true; + window.addEventListener('touchstart', this._handleTouchstart, { passive: true }) + window.addEventListener('touchmove', this._handleTouchmove, { passive: false }) + } + }, + // 处理touch开始 + _handleTouchstart(e) { + const touch = u.getTouch(e); + data.startY = touch.touchY; + const touchResult = u.getTouchFromZPaging(e.target); + data.isTouchFromZPaging = touchResult.isFromZp; + data.isUsePageScroll = touchResult.isPageScroll; + data.isReachedTop = touchResult.isReachedTop; + data.useChatRecordMode = touchResult.isUseChatRecordMode; + }, + // 处理touch中 + _handleTouchmove(e) { + const touch = u.getTouch(e); + const moveY = touch.touchY - data.startY; + // 如果是在z-paging内触摸并且（是在顶部位置且是下拉的情况下（或不是聊天记录滚动模式并且在iOS+h5+scroll-view并且是往上拉的情况：避免在此平台中滚动到底部后上拉有个系统灰色遮罩导致列表被短暂锁定的问题）） + // (data.useChatRecordMode ? moveY < 0 : moveY > 0)是为了判断是否是上拉的情况，聊天记录模式列表倒置，因此moveY < 0为上拉 + if (data.isTouchFromZPaging && ((data.isReachedTop && (data.useChatRecordMode ? moveY < 0 : moveY > 0)) || (!data.useChatRecordMode && data.isIosAndH5 && !data.isUsePageScroll && moveY < 0))) { + if (e.cancelable && !e.defaultPrevented) { + // 阻止事件冒泡，以避免在一些平台中下拉刷新时整个page跟着一起下拉&在iOS+h5+scroll-view中在底部上拉有个系统灰色遮罩导致列表被短暂锁定的问题 + e.preventDefault(); + } + } + }, + // 移除touch相关事件监听 + _removeAllEventListener(){ + window.removeEventListener('touchstart'); + window.removeEventListener('touchmove'); + } + } +}; diff --git a/components/z-paging/components/z-paging/wxs/z-paging-wxs.wxs b/components/z-paging/components/z-paging/wxs/z-paging-wxs.wxs new file mode 100644 index 0000000..b9777ec --- /dev/null +++ b/components/z-paging/components/z-paging/wxs/z-paging-wxs.wxs @@ -0,0 +1,382 @@ +// [z-paging]微信小程序、QQ小程序、app-vue、h5上使用wxs实现自定义下拉刷新，降低逻辑层与视图层的通信折损，提升性能 + +var currentDis = 0; +var isPCFlag = -1; +var startY = -1; + +// 监听js层传过来的数据 +function propObserver(newVal, oldVal, ownerIns, ins) { + var state = ownerIns.getState() || {}; + state.currentIns = ins; + var dataset = ins.getDataset(); + var loading = dataset.loading == true; + // 如果是下拉刷新结束，更新transform + if (newVal && newVal.indexOf('end') != -1) { + var transition = newVal.split('end')[0]; + _setTransform('translateY(0px)', ins, false, transition); + state.moveDis = 0; + state.oldMoveDis = 0; + currentDis = 0; + } else if (newVal && newVal.indexOf('begin') != -1) { + // 如果是下拉刷新开始，更新transform + var refresherThreshold = ins.getDataset().refresherthreshold; + _setTransformValue(refresherThreshold, ins, state, false); + } +} + +// touch开始 +function touchstart(e, ownerIns) { + var ins = _getIns(ownerIns); + var state = {}; + var dataset = {}; + ownerIns.callMethod('_handleListTouchstart'); + if (ins) { + state = ins.getState(); + dataset = ins.getDataset(); + if (_touchDisabled(e, ins, 0)) return; + } + var isTouchEnded = state.isTouchEnded; + state.oldMoveDis = 0; + var touch = _getTouch(e); + var loading = _isTrue(dataset.loading); + state.startY = touch.touchY; + startY = state.startY; + state.lastTouch = touch; + if (!loading && isTouchEnded) { + state.isTouchmoving = false; + } + state.isTouchEnded = false; + // 通知js层touch开始 + ownerIns.callMethod('_handleRefresherTouchstart', touch); +} + +// touch中 +function touchmove(e, ownerIns) { + var touch = _getTouch(e); + var ins = _getIns(ownerIns); + var dataset = ins.getDataset(); + var refresherThreshold = dataset.refresherthreshold; + var refresherF2Threshold = dataset.refresherf2threshold; + var refresherF2Enabled = _isTrue(dataset.refresherf2enabled); + var isIos = _isTrue(dataset.isios); + var state = ins.getState(); + var watchTouchDirectionChange = _isTrue(dataset.watchtouchdirectionchange); + var moveDisObj = {}; + var moveDis = 0; + var prevent = false; + // 如果需要监听touch方向的改变 + if (watchTouchDirectionChange) { + moveDisObj = _getMoveDis(e, ins); + moveDis = moveDisObj.currentDis; + prevent = moveDisObj.isDown; + var direction = prevent ? 'top' : 'bottom'; + // 确保只在touch方向改变时通知一次js层，而不是touchmove中持续通知 + if (prevent == state.oldTouchDirection && prevent != state.oldEmitedTouchDirection) { + ownerIns.callMethod('_handleTouchDirectionChange', { direction: direction }); + state.oldEmitedTouchDirection = prevent; + } + state.oldTouchDirection = prevent; + } + // 判断是否允许下拉刷新 + if (_touchDisabled(e, ins, 1)) { + _handlePullingDown(state, ownerIns, false); + return true; + } + // 判断下拉刷新的角度是否在要求范围内 + if (!_getAngleIsInRange(e, touch, state, dataset)) { + _handlePullingDown(state, ownerIns, false); + return true; + } + moveDisObj = _getMoveDis(e, ins); + moveDis = moveDisObj.currentDis; + prevent = moveDisObj.isDown; + if (moveDis < 0) { + // moveDis小于0，将transform重置为0 + _setTransformValue(0, ins, state, false); + _handlePullingDown(state, ownerIns, false); + return true; + } + if (prevent && !state.disabledBounce) { + // 如果是用户下拉并且需要触发下拉刷新，需要通知js层将列表禁止滚动，防止在下拉刷新过程中列表也可以滚动导致的下拉刷新偏移过大的问题（在下拉刷新过程中仅通知一次） + ownerIns.callMethod('_handleScrollViewBounce', { bounce: false }); + state.disabledBounce = true; + _handlePullingDown(state, ownerIns, prevent); + return !prevent; + } + // 更新transform + _setTransformValue(moveDis, ins, state, false); + var oldRefresherStatus = state.refresherStatus; + var oldIsTouchmoving = _isTrue(dataset.oldistouchmoving); + var hasTouchmove = _isTrue(dataset.hastouchmove); + var isTouchmoving = state.isTouchmoving; + state.refresherStatus = moveDis >= refresherThreshold ? (refresherF2Enabled && moveDis > refresherF2Threshold ? 'goF2' : 'releaseToRefresh') : 'default'; + if (!isTouchmoving) { + state.isTouchmoving = true; + isTouchmoving = true; + } + if (state.isTouchEnded) { + state.isTouchEnded = false; + } + // 如果需要实时监听下拉位置偏移，则需要实时通知js层，此操作会使wxs层与js层频繁通信从而导致在一些性能较差设备中下拉刷新卡顿 + if (hasTouchmove) { + ownerIns.callMethod('_handleWxsPullingDown', { moveDis: moveDis, diffDis: moveDisObj.diffDis }); + } + // 在下拉刷新状态改变时通知js层 + if (oldRefresherStatus == undefined || oldRefresherStatus != state.refresherStatus || oldIsTouchmoving != isTouchmoving) { + ownerIns.callMethod('_handleRefresherTouchmove', moveDis, touch); + } + _handlePullingDown(state, ownerIns, prevent); + return !prevent; +} + +// touch结束 +function touchend(e, ownerIns) { + var touch = _getTouch(e); + var ins = _getIns(ownerIns); + var dataset = ins.getDataset(); + var state = ins.getState(); + if (state.disabledBounce) { + // 通知js允许列表滚动 + ownerIns.callMethod('_handleScrollViewBounce', { bounce: true }); + state.disabledBounce = false; + } + if (_touchDisabled(e, ins, 2)) return; + state.reachMaxAngle = true; + state.hitReachMaxAngleCount = 0; + state.fixedIsTopHitCount = 0; + if (!state.isTouchmoving) return; + var oldRefresherStatus = state.refresherStatus; + var oldMoveDis = state.moveDis; + var refresherThreshold = ins.getDataset().refresherthreshold; + var moveDis = _getMoveDis(e, ins).currentDis; + if (!(moveDis >= refresherThreshold && oldRefresherStatus === 'releaseToRefresh')) { + state.isTouchmoving = false; + } + // 通知js层touch结束 + ownerIns.callMethod('_handleRefresherTouchend', moveDis); + state.isTouchEnded = true; + if (oldMoveDis < refresherThreshold) return; + var animate = false; + if (moveDis >= refresherThreshold) { + moveDis = refresherThreshold; + animate = true; + } + _setTransformValue(moveDis, ins, state, animate); +} + +// #ifdef H5 +// 判断是否是pc平台 +function isPC() { + if (!navigator) return false; + if (isPCFlag != -1) return isPCFlag; + var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; + isPCFlag = agents.every(function(item) { return navigator.userAgent.indexOf(item) < 0 }); + return isPCFlag; +} + +var movable = false; + +// 在pc平台监听mousedown、mousemove、mouseup等相关事件并转为对应touch事件处理，使得在pc平台也支持通过鼠标进行下拉刷新 + +function mousedown(e, ins) { + if (!isPC()) return; + touchstart(e, ins); + movable = true; +} + +function mousemove(e, ins) { + if (!isPC() || !movable) return; + touchmove(e, ins); +} + +function mouseup(e, ins) { + if (!isPC()) return; + touchend(e, ins); + movable = false; +} + +function mouseleave(e, ins) { + if (!isPC()) return; + movable = false; +} +// #endif + + +// 修改视图层transform +function _setTransformValue(value, ins, state, animate) { + value = value || 0; + if (state.moveDis == value) return; + state.moveDis = value; + _setTransform('translateY(' + value + 'px)', ins, animate, ''); +} + +// 设置视图层transform，直接在视图层操作下拉刷新，使得js层不需要频繁和视图层通信，从而大大提升下拉刷新性能 +function _setTransform(transform, ins, animate, transition) { + var dataset = ins.getDataset(); + if (_isTrue(dataset.refreshernotransform)) return; + transform = transform == 'translateY(0px)' ? 'none' : transform; + ins.requestAnimationFrame(function() { + var stl = { 'transform': transform }; + if (animate) { + stl['transition'] = 'transform .1s linear'; + } + if (transition.length) { + stl['transition'] = transition; + } + ins.setStyle(stl); + }) +} + +// 进一步处理下拉刷新的偏移数据 +function _getMoveDis(e, ins) { + var state = ins.getState(); + var refresherThreshold = parseFloat(ins.getDataset().refresherthreshold); + var refresherOutRate = parseFloat(ins.getDataset().refresheroutrate); + var refresherPullRate = parseFloat(ins.getDataset().refresherpullrate); + var touch = _getTouch(e); + var currentStartY = !state.startY || state.startY == 'NaN' ? startY : state.startY; + var moveDis = touch.touchY - currentStartY; + var oldMoveDis = state.oldMoveDis || 0; + state.oldMoveDis = moveDis; + // 获取当前下拉刷新位置与上次的偏移量 + var diffDis = moveDis - oldMoveDis; + if (diffDis > 0) { + // 对偏移量进行进一步处理，通过refresherPullRate等配置进行约束 + diffDis = diffDis * refresherPullRate; + if (currentDis > refresherThreshold) { + diffDis = diffDis * (1 - refresherOutRate); + } + } + // 控制diffDis过大的情况，比如进入页面突然猛然下拉，此时diffDis不应进行太大的偏移 + diffDis = diffDis > 100 ? diffDis / 100 : (diffDis > 20 ? diffDis / 2.2 : diffDis); + currentDis += diffDis; + currentDis = Math.max(0, currentDis); + return { + currentDis: currentDis, + diffDis: diffDis, + isDown: diffDis > 0 + }; +} + +// 获取经过统一格式包装的当前touch对象 +function _getTouch(e) { + var touch = e; + if (e.touches && e.touches.length) { + touch = e.touches[0]; + } else if (e.changedTouches && e.changedTouches.length) { + touch = e.changedTouches[0]; + } else if (e.datail && e.datail != {}) { + touch = e.datail; + } + return { + touchX: touch.clientX, + touchY: touch.clientY + }; +} + +// 获取当前currentIns +function _getIns(ownerIns) { + var ins = ownerIns.getState().currentIns; + if (!ins) { + ownerIns.callMethod('_handlePropUpdate'); + } + return ins; +} + +// 判断当前状态是否允许下拉刷新 +function _touchDisabled(e, ins, processTag) { + var dataset = ins.getDataset(); + var state = ins.getState(); + var loading = _isTrue(dataset.loading); + var useChatRecordMode = _isTrue(dataset.usechatrecordmode); + var refresherEnabled = _isTrue(dataset.refresherenabled); + var useCustomRefresher = _isTrue(dataset.usecustomrefresher); + var usePageScroll = _isTrue(dataset.usepagescroll); + var pageScrollTop = parseFloat(dataset.pagescrolltop); + var scrollTop = parseFloat(dataset.scrolltop); + var finalScrollTop = usePageScroll ? pageScrollTop : scrollTop; + var fixedIsTop = false; + // 是否要处理滚动到顶部scrollTop不为0时候的容错，为解决在安卓中scroll-view有概率滚动到顶部时scrollTop不为0导致下拉刷新判断异常，但此方案会导致某些情况（例如滚动到距离顶部10px处）下拉抖动，因此改为通过获取zp-scroll-view的节点信息中的scrollTop进行验证的方案 + var handleFaultTolerantMove = false; + if (handleFaultTolerantMove && finalScrollTop == (state.startScrollTop || 0) && finalScrollTop <= 105) { + fixedIsTop = true; + } + var fixedIsTopHitCount = state.fixedIsTopHitCount || 0; + if (fixedIsTop) { + fixedIsTopHitCount ++; + if (fixedIsTopHitCount <= 2) { + fixedIsTop = false; + } + state.fixedIsTopHitCount = fixedIsTopHitCount; + } else { + state.fixedIsTopHitCount = 0; + } + if (handleFaultTolerantMove && processTag === 0) { + state.startScrollTop = finalScrollTop || 0; + } + if (handleFaultTolerantMove && processTag === 2) { + fixedIsTop = true; + } + return loading || useChatRecordMode || !refresherEnabled || !useCustomRefresher || + ((usePageScroll && useCustomRefresher && pageScrollTop > 5) && !fixedIsTop) || + ((!usePageScroll && useCustomRefresher && scrollTop > 5) && !fixedIsTop); +} + +// 判断下拉刷新的角度是否在要求范围内 +function _getAngleIsInRange(e, touch, state, dataset) { + var maxAngle = dataset.refreshermaxangle; + var refresherAecc = _isTrue(dataset.refresheraecc); + var lastTouch = state.lastTouch; + var reachMaxAngle = state.reachMaxAngle; + var moveDis = state.oldMoveDis; + if (!lastTouch) return true; + if (maxAngle >= 0 && maxAngle <= 90 && lastTouch) { + // 考虑下拉刷新手势由水平移动转为垂直方向移动的情况，此时不应当只判断垂直方向角度是否符合要求，应当直接禁止以避免在swiper中使用下拉刷新时，横向切换swiper途中手未离开屏幕还可以下拉刷新的问题 + if ((!moveDis || moveDis < 1) && !refresherAecc && reachMaxAngle != null && !reachMaxAngle) return false; + var x = Math.abs(touch.touchX - lastTouch.touchX); + var y = Math.abs(touch.touchY - lastTouch.touchY); + var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); + if ((x || y) && x > 1) { + // 获取下拉刷新前后两次位移的角度 + var angle = Math.asin(y / z) / Math.PI * 180; + if (angle < maxAngle) { + // 如果角度小于配置要求，则return，同时通过hitReachMaxAngleCount控制角度判断的灵敏程度以最大程度兼容各种使用场景 + var hitReachMaxAngleCount = state.hitReachMaxAngleCount || 0; + state.hitReachMaxAngleCount = ++hitReachMaxAngleCount; + if (state.hitReachMaxAngleCount > 2) { + state.lastTouch = touch; + state.reachMaxAngle = false; + } + return false; + } + } + } + state.lastTouch = touch; + return true; +} + +// 进一步处理是否在下拉刷新并通知js层 +function _handlePullingDown(state, ins, onPullingDown) { + var oldOnPullingDown = state.onPullingDown || false; + if (oldOnPullingDown != onPullingDown) { + ins.callMethod('_handleWxsPullingDownStatusChange', onPullingDown); + } + state.onPullingDown = onPullingDown; +} + +// 判断js层传过来的值是否为true +function _isTrue(value) { + value = (typeof(value) === 'string' ? JSON.parse(value) : value) || false; + return value == true || value == 'true'; +} + +module.exports = { + touchstart: touchstart, + touchmove: touchmove, + touchend: touchend, + mousedown: mousedown, + mousemove: mousemove, + mouseup: mouseup, + mouseleave: mouseleave, + propObserver: propObserver +} diff --git a/components/z-paging/components/z-paging/z-paging.vue b/components/z-paging/components/z-paging/z-paging.vue new file mode 100644 index 0000000..f06be6e --- /dev/null +++ b/components/z-paging/components/z-paging/z-paging.vue @@ -0,0 +1,538 @@ + + + + + + + + + + + + + + diff --git a/components/z-paging/package.json b/components/z-paging/package.json new file mode 100644 index 0000000..6b23151 --- /dev/null +++ b/components/z-paging/package.json @@ -0,0 +1,89 @@ +{ + "id": "z-paging", + "name": "z-paging", + "displayName": "【z-paging下拉刷新、上拉加载】高性能，全平台兼容。支持虚拟列表，分页全自动处理", + "version": "2.8.6", + "description": "超简单、低耦合！使用wxs+renderjs实现。支持自定义下拉刷新、上拉加载更多、虚拟列表、下拉进入二楼、自动管理空数据图、无闪动聊天分页、本地分页、国际化等数百项配置", + "keywords": [ + "下拉刷新", + "上拉加载", + "分页器", + "nvue", + "虚拟列表" +], + "repository": "https://github.com/SmileZXLee/uni-z-paging", + "engines": { + "HBuilderX": "^3.0.7" + }, + "dcloudext": { + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "393727164" + }, + "declaration": { + "ads": "无", + "data": "无", + "permissions": "无" + }, + "npmurl": "https://www.npmjs.com/package/z-paging", + "type": "component-vue" + }, + "uni_modules": { + "dependencies": [], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y", + "alipay": "n" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "y", + "app-harmony": "u", + "app-uvue": "u" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "微信浏览器(Android)": "y", + "QQ浏览器(Android)": "y" + }, + "H5-pc": { + "Chrome": "y", + "IE": "y", + "Edge": "y", + "Firefox": "y", + "Safari": "y" + }, + "小程序": { + "微信": "y", + "阿里": "y", + "百度": "y", + "字节跳动": "y", + "QQ": "y", + "钉钉": "y", + "快手": "y", + "飞书": "y", + "京东": "y" + }, + "快应用": { + "华为": "y", + "联盟": "y" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} \ No newline at end of file diff --git a/components/z-paging/readme.md b/components/z-paging/readme.md new file mode 100644 index 0000000..8e4f0ce --- /dev/null +++ b/components/z-paging/readme.md @@ -0,0 +1,57 @@ +# z-paging + +

+ logo +

+ +[![version](https://img.shields.io/badge/version-2.8.6-blue)](https://github.com/SmileZXLee/uni-z-paging) [![license](https://img.shields.io/github/license/SmileZXLee/uni-z-paging)](https://en.wikipedia.org/wiki/MIT_License) + + +`z-paging-x`现已支持uniapp x，持续完善中，插件地址👉🏻 [https://ext.dcloud.net.cn/plugin?name=z-paging-x](https://ext.dcloud.net.cn/plugin?name=z-paging-x) + +### 文档地址：[https://z-paging.zxlee.cn](https://z-paging.zxlee.cn) + +### 更新组件前，请注意[版本差异](https://z-paging.zxlee.cn/start/upgrade-guide.html) + +*** +### 功能&特点 +* 【配置简单】仅需两步（绑定网络请求方法、绑定分页结果数组）轻松完成完整下拉刷新，上拉加载更多功能。 +* 【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，全由z-paging内部处理。 +* 【超灵活，支持各种类型自定义】支持自定义下拉刷新，自定义上拉加载更多等各种自定义效果；支持使用内置自动分页，同时也支持通过监听下拉刷新和滚动到底部事件自行处理；支持使用自带全屏布局规范，同时也支持将z-paging自由放在任意容器中。 +* 【功能丰富】支持国际化，支持自定义且自动管理空数据图，支持主题模式切换，支持本地分页，支持无闪动聊天分页模式，支持展示最后更新时间，支持吸顶效果，支持内部scroll-view滚动与页面滚动，支持一键滚动到顶部，支持下拉进入二楼等诸多功能。 +* 【【全平台兼容】支持vue&nvue，vue2&vue3，js&ts，支持h5、app、鸿蒙Next及各家小程序。 +* 【高性能】在app-vue、h5、微信小程序、QQ小程序上使用wxs+renderjs在视图层实现下拉刷新；支持虚拟列表，轻松渲染百万级列表数据！ + +*** +### 反馈qq群 +* 官方1群`已满`：[790460711](https://jq.qq.com/?_wv=1027&k=vU2fKZZH) + +* 官方2群`已满`：[371624008](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=avPmibADf2TNi4LxkIwjCE5vbfXpa-r1&authKey=dQ%2FVDAR87ONxI4b32Py%2BvmXbhnopjHN7%2FJPtdsqJdsCPFZB6zDQ17L06Uh0kITUZ&noverify=0&group_code=371624008) +* 官方3群：[343409055](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=sIaNqiCMIjxGQVksjytCw6R8DSiibHR7&authKey=pp995q8ZzFtl5F2xUwvvceP24QTcguWW%2FRVoDnMa8JZF4L2DmS%2B%2FV%2F5sYrcgPsmW&noverify=0&group_code=343409055) + +*** + +### 预览 + +*** + +| 自定义下拉刷新效果演示 | 滑动切换选项卡+吸顶演示 | 聊天记录模式演示 | +| :----------------------------------------------------------: | :----------------------------------------------------------: | ------------------------------------------------------------ | +| ![](https://z-paging.zxlee.cn/public/img/z-paging-demo5.gif) | ![](https://z-paging.zxlee.cn/public/img/z-paging-demo6.gif) | ![](https://z-paging.zxlee.cn/public/img/z-paging-demo7.gif) | + +| 虚拟列表(流畅渲染1万+条)演示 | 下拉进入二楼演示 | 在弹窗内使用演示 | +| :----------------------------------------------------------: | :----------------------------------------------------------: | ------------------------------------------------------------ | +| ![](https://z-paging.zxlee.cn/public/img/z-paging-demo8.gif) | ![](https://z-paging.zxlee.cn/public/img/z-paging-demo9.gif) | ![](https://z-paging.zxlee.cn/public/img/z-paging-demo10.gif) | + + +### 在线demo体验地址： + +* [https://demo.z-paging.zxlee.cn](https://demo.z-paging.zxlee.cn) + +| 扫码体验 | +| ------------------------------------------------------------ | +| ![](https://z-paging.zxlee.cn/public/img/code.png) | + +### demo下载 +* 支持vue2&vue3的`选项式api`写法demo下载，请点击页面右上角的【使用HBuilderX导入示例项目】或【下载示例项目ZIP】。 +* 支持vue3的`组合式api`写法demo下载，请访问[github](https://github.com/SmileZXLee/uni-z-paging)。 \ No newline at end of file diff --git a/components/z-paging/types/comps.d.ts b/components/z-paging/types/comps.d.ts new file mode 100644 index 0000000..bb1690b --- /dev/null +++ b/components/z-paging/types/comps.d.ts @@ -0,0 +1,11 @@ +declare module 'vue' { + export interface GlobalComponents { + ['z-paging']: typeof import('./comps/z-paging')['ZPaging'] + ['z-paging-swiper']: typeof import('./comps/z-paging-swiper')['ZPagingSwiper'] + ['z-paging-swiper-item']: typeof import('./comps/z-paging-swiper-item')['ZPagingSwiperItem'] + ['z-paging-empty-view']: typeof import('./comps/z-paging-empty-view')['ZPagingEmptyView'] + ['z-paging-cell']: typeof import('./comps/z-paging-cell')['ZPagingCell'] + } +} + +export {} diff --git a/components/z-paging/types/comps/_common.d.ts b/components/z-paging/types/comps/_common.d.ts new file mode 100644 index 0000000..ec3b8e7 --- /dev/null +++ b/components/z-paging/types/comps/_common.d.ts @@ -0,0 +1,9 @@ +export interface AllowedComponentProps { + class?: unknown; + style?: unknown; +} + +export interface VNodeProps { + key?: string | number | symbol; + ref?: unknown; +} diff --git a/components/z-paging/types/comps/z-paging-cell.d.ts b/components/z-paging/types/comps/z-paging-cell.d.ts new file mode 100644 index 0000000..bcd8358 --- /dev/null +++ b/components/z-paging/types/comps/z-paging-cell.d.ts @@ -0,0 +1,29 @@ +import { AllowedComponentProps, VNodeProps } from './_common' + +// ****************************** Props ****************************** +declare interface ZPagingCellProps { + /** + * z-paging-cell样式 + */ + cellStyle?: Record +} + +// ****************************** Slots ****************************** +declare interface ZPagingCellSlots { + // ******************** 主体布局Slot ******************** + /** + * 默认插入的view + */ + ['default']?: () => any +} + +declare interface _ZPagingCell { + new (): { + $props: AllowedComponentProps & + VNodeProps & + ZPagingCellProps + $slots: ZPagingCellSlots + } +} + +export declare const ZPagingCell: _ZPagingCell diff --git a/components/z-paging/types/comps/z-paging-empty-view.d.ts b/components/z-paging/types/comps/z-paging-empty-view.d.ts new file mode 100644 index 0000000..771c399 --- /dev/null +++ b/components/z-paging/types/comps/z-paging-empty-view.d.ts @@ -0,0 +1,95 @@ +import { AllowedComponentProps, VNodeProps } from './_common' + +// ****************************** Props ****************************** +declare interface ZPagingEmptyViewProps { + /** + * 空数据图片是否铺满z-paging，默认为是。若设置为否，则为填充满z-paging的剩余部分 + * @default false + * @since 2.0.3 + */ + emptyViewFixed?: boolean; + + /** + * 空数据图描述文字 + * @default "没有数据哦~" + */ + emptyViewText?: string; + + /** + * 空数据图图片，默认使用z-paging内置的图片 + * - 建议使用绝对路径，开头不要添加"@"，请以"/"开头 + */ + emptyViewImg?: string; + + /** + * 空数据图点击重新加载文字 + * @default "重新加载" + * @since 1.6.7 + */ + emptyViewReloadText?: string; + + /** + * 空数据图样式，可设置空数据view的top等 + * - 如果空数据图不是fixed布局，则此处是`margin-top` + */ + emptyViewStyle?: Record; + + /** + * 空数据图img样式 + */ + emptyViewImgStyle?: Record; + + /** + * 空数据图描述文字样式 + */ + emptyViewTitleStyle?: Record; + + /** + * 空数据图重新加载按钮样式 + * @since 1.6.7 + */ + emptyViewReloadStyle?: Record; + + /** + * 是否显示空数据图重新加载按钮(无数据时) + * @default false + * @since 1.6.7 + */ + showEmptyViewReload?: boolean; + + /** + * 是否是加载失败 + * @default false + */ + isLoadFailed?: boolean; + + /** + * 空数据图中布局的单位 + * @default 'rpx' + * @since 2.6.7 + */ + unit?: 'rpx' | 'px'; + + // ****************************** Events ****************************** + /** + * 点击了重新加载按钮 + */ + onReload?: () => void + + /** + * 点击了空数据view + * @since 2.3.3 + */ + onViewClick?: () => void +} + +declare interface _ZPagingEmptyView { + new (): { + $props: AllowedComponentProps & + VNodeProps & + ZPagingEmptyViewProps + } +} + +export declare const ZPagingEmptyView: _ZPagingEmptyView + diff --git a/components/z-paging/types/comps/z-paging-swiper-item.d.ts b/components/z-paging/types/comps/z-paging-swiper-item.d.ts new file mode 100644 index 0000000..202246a --- /dev/null +++ b/components/z-paging/types/comps/z-paging-swiper-item.d.ts @@ -0,0 +1,95 @@ +import { AllowedComponentProps, VNodeProps } from './_common' + +// ****************************** Props ****************************** +declare interface ZPagingSwiperItemProps { + /** + * 当前组件的index，也就是当前组件是swiper中的第几个 + * @default 0 + */ + tabIndex?: number + + /** + * 当前swiper切换到第几个index + * @default 0 + */ + currentIndex?: number + + /** + * 是否使用虚拟列表。使用页面滚动或nvue时，不支持虚拟列表。在nvue中z-paging内置了list组件，效果与虚拟列表类似，并且可以提供更好的性能。 + * @default false + */ + useVirtualList?: boolean + + /** + * 虚拟列表cell高度模式，默认为`fixed`，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。 + * @default 'fixed' + */ + cellHeightMode?: 'fixed' | 'dynamic' + + /** + * 预加载的列表可视范围(列表高度)页数。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题。 + * @default 12 + */ + preloadPage?: number | string + + /** + * 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2。 + * @default 1 + * @since 2.2.8 + */ + virtualListCol?: number | string + + /** + * 虚拟列表scroll取样帧率，默认为80，过低容易出现白屏问题，过高容易出现卡顿问题 + * @default 80 + */ + virtualScrollFps?: number | string + + /** + * 是否在z-paging内部循环渲染列表(使用内置列表)。 + * @default false + */ + useInnerList?: boolean + + /** + * 内置列表cell的key名称(仅nvue有效，在nvue中开启use-inner-list时必须填此项) + * @since 2.2.7 + */ + cellKeyName?: string + + /** + * innerList样式 + */ + innerListStyle?: Record +} + +// ****************************** Methods ****************************** +declare interface _ZPagingSwiperItemRef { + /** + * 重新加载分页数据，pageNo恢复为默认值，相当于下拉刷新的效果 + * + * @param [animate=false] 是否展示下拉刷新动画 + */ + reload: (animate?: boolean) => void; + + /** + * 请求结束 + * - 当通过complete传进去的数组长度小于pageSize时，则判定为没有更多了 + * + * @param [data] 请求结果数组 + * @param [success=true] 是否请求成功 + */ + complete: (data?: any[] | false, success?: boolean) => void; +} + +declare interface _ZPagingSwiperItem { + new (): { + $props: AllowedComponentProps & + VNodeProps & + ZPagingSwiperItemProps + } +} + +export declare const ZPagingSwiperItem: _ZPagingSwiperItem + +export declare const ZPagingSwiperItemRef: _ZPagingSwiperItemRef diff --git a/components/z-paging/types/comps/z-paging-swiper.d.ts b/components/z-paging/types/comps/z-paging-swiper.d.ts new file mode 100644 index 0000000..996008b --- /dev/null +++ b/components/z-paging/types/comps/z-paging-swiper.d.ts @@ -0,0 +1,89 @@ +import { AllowedComponentProps, VNodeProps } from './_common' + +// ****************************** Props ****************************** +declare interface ZPagingSwiperProps { + /** + * 是否使用fixed布局，若使用fixed布局，则z-paging-swiper的父view无需固定高度，z-paging高度默认铺满屏幕，页面中的view请放z-paging-swiper标签内，需要固定在顶部的view使用slot="top"包住，需要固定在底部的view使用slot="bottom"包住。 + * @default true + */ + fixed?: boolean + + /** + * 是否开启底部安全区域适配 + * @default false + */ + safeAreaInsetBottom?: boolean + + /** + * z-paging-swiper样式 + */ + swiperStyle?: Record +} + + +// ****************************** Slots ****************************** +declare interface ZPagingSwiperSlots { + // ******************** 主体布局Slot ******************** + /** + * 默认插入的view + */ + ['default']?: () => any + + /** + * 可以将自定义导航栏、tab-view等需要固定的(不需要跟着滚动的)元素放入slot="top"的view中。 + * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="top"。需要固定在顶部的view请勿设置position: fixed; + * @since 1.5.5 + */ + ['top']?: () => any + + /** + * 可以将需要固定在底部的(不需要跟着滚动的)元素放入slot="bottom"的view中。 + * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="bottom"。需要固定在底部的view请勿设置position: fixed; + * @since 1.6.2 + */ + ['bottom']?: () => any + + /** + * 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="left"的view中。 + * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="left"。需要固定在左侧的view请勿设置position: fixed; + * @since 2.2.3 + */ + ['left']?: () => any + + /** + * 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="right"的view中。 + * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="right"。需要固定在右侧的view请勿设置position: fixed; + * @since 2.2.3 + */ + ['right']?: () => any +} + +// ****************************** Methods ****************************** +declare interface _ZPagingSwiperRef { + /** + * 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变后调用 + * + * @since 2.3.5 + */ + updateLeftAndRightWidth: () => void; + + /** + * 更新fixed模式下z-paging-swiper的布局，在onShow时候调用，以修复在iOS+h5+tabbar+fixed+底部有安全区域的设备中从tabbar页面跳转到无tabbar页面后返回，底部有一段空白区域的问题 + * + * @since 2.6.5 + */ + updateFixedLayout: () => void; +} + +declare interface _ZPagingSwiper { + new (): { + $props: AllowedComponentProps & + VNodeProps & + ZPagingSwiperProps + $slots: ZPagingSwiperSlots + } +} + +export declare const ZPagingSwiper: _ZPagingSwiper + +export declare const ZPagingSwiperRef: _ZPagingSwiperRef diff --git a/components/z-paging/types/comps/z-paging.d.ts b/components/z-paging/types/comps/z-paging.d.ts new file mode 100644 index 0000000..84b5ddf --- /dev/null +++ b/components/z-paging/types/comps/z-paging.d.ts @@ -0,0 +1,2083 @@ +import { AllowedComponentProps, VNodeProps } from './_common' + +type _Arrayable = T | T[]; + +/** + * i18n配置信息 + */ +type _I18nText = Partial>; + +declare global { + namespace ZPagingEnums { + /** + * query的触发来源：user-pull-down:用户主动下拉刷新 reload:通过reload触发 refresh:通过refresh触发 load-more:通过滚动到底部加载更多或点击底部加载更多触发 + */ + type QueryFrom = 'user-pull-down' | 'reload' | 'refresh' | 'load-more'; + + /** + * 下拉刷新状态：default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼 + */ + type RefresherStatus = 'default' | 'release-to-refresh' | 'loading' | 'complete' | 'go-f2'; + + /** + * 下拉进入二楼状态： go:二楼开启 close:二楼关闭 + */ + type GoF2Status = 'go' | 'close'; + + /** + * 底部加载更多状态：default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败 + */ + type LoadMoreStatus = 'default' | 'loading' | 'no-more' | 'fail'; + + /** + * 列表触摸的方向，top代表用户将列表向上移动(scrollTop不断减小)，bottom代表用户将列表向下移动(scrollTop不断增大) + */ + type TouchDirection = 'top' | 'bottom'; + } + + namespace ZPagingParams { + /** + * z-paging返回数据 + * + * @since 2.5.3 + */ + interface ReturnData { + /** + * 总列表 + */ + totalList: T[]; + /** + * 是否没有更多数据 + */ + noMore: boolean; + } + + /** + * 嵌套父容器信息 [list组件](https://uniapp.dcloud.net.cn/component/list.html) + * + * @since 2.0.4 + */ + interface SetSpecialEffectsArgs { + /** + * 和list同时滚动的组件id，应为外层的scroller + */ + id?: string; + /** + * 要吸顶的header顶部距离scroller顶部的距离 + * - Android暂不支持 + * + * @default 0 + */ + headerHeight?: number; + } + + /** + * touchmove信息 + */ + interface RefresherTouchmoveInfo { + /** 下拉的距离 */ + pullingDistance: number; + /** 前后两次回调滑动距离的差值 */ + dy: number; + /** refresh组件高度 */ + viewHeight: number; + /** pullingDistance/viewHeight的比值 */ + rate: number; + } + + /** + * 默认事件处理 + */ + type DefaultEventHandler = (value: boolean) => void; + + /** + * 使用虚拟列表或内置列表时点击了cell的信息 + */ + interface InnerCellClickInfo { + /** 当前点击的item */ + item: any; + /** 当前点击的index */ + index: number; + } + + /** + * 键盘的高度信息 + */ + interface KeyboardHeightInfo { + /** 键盘的高度 */ + height: number; + } + + /** + * 列表滚动信息(vue) + */ + interface ScrollInfo { + detail: { + scrollLeft: number; + scrollTop: number; + scrollHeight: number; + scrollWidth: number; + deltaX: number; + deltaY: number; + } + } + /** + * 列表滚动信息(nvue) + */ + interface ScrollInfoN { + contentSize: { + width: number; + height: number; + }; + contentOffset: { + x: number; + y: number; + }; + isDragging: boolean; + } + + /** + * 滚动结束时触发事件信息 + */ + interface ScrollendEvent { + contentSize: { + width: number; + height: number; + }; + contentOffset: { + x: number; + y: number; + }; + isDragging: boolean; + } + + /** + * 下拉刷新Slot的props + */ + interface RefresherSlotProps { + /** 下拉刷新状态：default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼 */ + refresherStatus: ZPagingEnums.RefresherStatus; + } + + /** + * 空数据图Slot的props + */ + interface EmptySlotProps { + /** 是否加载失败: 加载失败，false: 加载成功) */ + isLoadFailed: boolean; + } + + /** + * 虚拟列表&内置列表中cell Slot的props + */ + interface InnerListCellSlotProps { + /** 当前item */ + item: any; + /** 当前index */ + index: number; + } + + /** + * 聊天记录加载中Slot的props + */ + interface ChatLoadingSlotProps { + /** 底部加载更多状态：default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败 */ + loadingMoreStatus: ZPagingEnums.LoadMoreStatus; + } + } + + /** + * 虚拟列表数据项 + * + * @since 2.7.7 + */ + type ZPagingVirtualItem = T & { + /** + * 元素真实索引 + */ + zp_index: number; + }; +} + +// ****************************** Props ****************************** +declare interface ZPagingProps { + // ******************** 数据&布局配置 ******************** + /** + * 父组件v-model所绑定的list的值 + * @default [] + */ + value?: any[] + + /** + * 自定义初始的pageNo(从第几页开始) + * @default 1 + */ + defaultPageNo?: number + + /** + * 自定义pageSize(每页显示多少条) + * - 必须和后端的pageSize一致，例如后端分页的pageSize为15，此属性必须改为15 + * @default 10 + */ + defaultPageSize?: number + + /** + * z-paging是否使用fixed布局 + * - 若使用fixed布局，则z-paging的父view无需固定高度，z-paging高度默认铺满屏幕，页面中的view请放在z-paging标签内，需要固定在顶部的view使用slot="top"包住，需要固定在底部的view使用slot="bottom"包住 + * @default true + * @since 1.5.6 + */ + fixed?: boolean + + /** + * 是否开启底部安全区域适配 + * @default false + * @since 1.6.1 + */ + safeAreaInsetBottom?: boolean + + /** + * 开启底部安全区域适配后，是否使用placeholder形式实现。 + * - 为否时滚动区域会自动避开底部安全区域，也就是所有滚动内容都不会挡住底部安全区域，若设置为是，则滚动时滚动内容会挡住底部安全区域，但是当滚动到底部时才会避开底部安全区域 + * @default false + * @since 2.2.7 + */ + useSafeAreaPlaceholder?: boolean + + /** + * 使用页面滚动，默认为否。当设置为是时，则使用页面的滚动而非此组件内部的scroll-view的滚动。 + * @default false + */ + usePageScroll?: boolean + + /** + * 使用页面滚动时，是否在不满屏时自动填充满屏幕 + * @default true + * @since 2.0.6 + */ + autoFullHeight?: boolean + + /** + * loading(下拉刷新、上拉加载更多)的主题样式，支持black，white + * @default 'black' + */ + defaultThemeStyle?: 'black' | 'white' + + /** + * 设置z-paging的style，部分平台(如微信小程序)无法直接修改组件的style，可使用此属性代替。 + */ + pagingStyle?: Record + + /** + * z-paging的高度，优先级低于paging-style中设置的height + * - 传字符串，如100px、100rpx、100% + */ + height?: string + + /** + * z-paging的宽度，优先级低于paging-style中设置的width + * - 传字符串，如100px、100rpx、100% + */ + width?: string + + /** + * z-paging的最大宽度，优先级低于paging-style中设置的max-width + * - 默认为空，也就是铺满窗口宽度，若设置了特定值则会自动添加margin: 0 auto + */ + maxWidth?: string + + /** + * z-paging的背景色(为css中的background，因此也可以设置渐变，背景图片等)，优先级低于paging-style中设置的background-color。 + * - 传字符串，如"#ffffff" + */ + bgColor?: string + + /** + * 是否监听列表触摸方向改变 + * @default false + * @since 2.3.0 + */ + watchTouchDirectionChange?: boolean + + /** + * 调用complete后延迟处理的时间，单位为毫秒，优先级高于min-delay + * @default 0 + * @since 1.9.6 + */ + delay?: number | string + + /** + * 触发@query后最小延迟处理的时间，单位为毫秒，优先级低于delay + * @default 0 + * @since 2.0.9 + */ + minDelay?: number | string + + /** + * 请求失败是否触发reject + * @default true + * @since 2.6.1 + */ + callNetworkReject?: boolean + + /** + * z-paging中默认布局的单位 + * @default rpx + * @since 2.6.7 + */ + unit?: 'rpx' | 'px' + + /** + * 自动拼接complete中传过来的数组 + * - 若设置为false，则complete中传过来的数组会直接覆盖list + * @default true + * @since 1.8.8 + */ + concat?: boolean + + /** + * 为保证数据一致，设置当前tab切换时的标识key，并在complete中传递相同key，若二者不一致，则complete将不会生效 + * @since 1.6.4 + */ + dataKey?: number | string | Record + + /** + * 【极简写法】自动注入的list名，可自动修改父view(包含ref="paging")中对应name的list值 + * - z-paging标签必须设置ref="paging" + * @since 1.8.5 + */ + autowireListName?: string + + /** + * 【极简写法】自动注入的query名，可自动调用父view(包含ref="paging")中的query方法 + * - z-paging标签必须设置ref="paging" + * @since 1.8.5 + */ + autowireQueryName?: string + + /** + * 获取分页数据Function，功能与@query类似。若设置了fetch则@query将不再触发。 + * @since 2.7.8 + */ + fetch?: (...args: any[]) => any; + + /** + * fetch的附加参数，fetch配置后有效 + * @since 2.7.8 + */ + fetchParams?: Record + + // ******************** reload相关配置 ******************** + /** + * z-paging mounted 后自动调用 reload 方法 (mounted 后自动调用接口) + * @default true + * @since 2.4.3 + */ + auto?: boolean + + /** + * reload 时自动滚动到顶部 + * - 如果reload时list被清空导致占位消失，也可能会自动返回到顶部，因此如果是这种情况还需要将autoCleanListWhenReload设置为false + * @default true + */ + autoScrollToTopWhenReload?: boolean + + /** + * reload时立即自动清空原list若立即自动清空，则在reload之后、请求回调之前页面是空白的 + * @default true + */ + autoCleanListWhenReload?: boolean + + /** + * 列表刷新时自动显示下拉刷新 view + * @default false + * @since 1.7.2 + */ + showRefresherWhenReload?: boolean + + /** + * 列表刷新时自动显示加载更多view，且为加载中状态 (仅初始设置有效，不可动态修改) + * @default false + * @since 1.7.2 + */ + showLoadingMoreWhenReload?: boolean + + /** + * 组件 created 时立即触发 reload (可解决一些情况下先看到页面再看到 loading 的问题) + * - auto 为 true 时有效。为否时将在 mounted+nextTick 后触发 reload + * @default false + * @since 2.2.3 + */ + createdReload?: boolean + + // ******************** 下拉刷新配置 ******************** + /** + * 是否开启下拉刷新 + * @default true + */ + refresherEnabled?: boolean + + /** + * 设置自定义下拉刷新阈值，默认单位为px。支持传100、"100px"或"100rpx" + * - nvue无效 + * @default '80rpx' + */ + refresherThreshold?: number | string + + /** + * 是否开启下拉刷新状态栏占位，适用于隐藏导航栏时，下拉刷新需要避开状态栏高度的情况 + * @default false + * @since 2.6.1 + */ + useRefresherStatusBarPlaceholder?: boolean + + /** + * 是否只使用下拉刷新 + * - 设置为true后将关闭mounted自动请求数据、关闭滚动到底部加载更多，强制隐藏空数据图 + * @default false + */ + refresherOnly?: boolean + + /** + * 是否使用自定义的下拉刷新，默认为是，即使用z-paging的下拉刷新 + * - 设置为false即代表使用uni scroll-view自带的下拉刷新，h5、App、微信小程序以外的平台不支持uni scroll-view自带的下拉刷新 + * @default true + */ + useCustomRefresher?: boolean + + /** + * 用户下拉刷新时是否触发reload方法 + * @default true + */ + reloadWhenRefresh?: boolean + + /** + * 下拉刷新的主题样式，支持black，white + * @default 'black' + */ + refresherThemeStyle?: string + + /** + * 自定义下拉刷新中左侧图标的样式 + */ + refresherImgStyle?: Record + + /** + * 自定义下拉刷新中右侧状态描述文字的样式 + */ + refresherTitleStyle?: Record + + /** + * 自定义下拉刷新中右侧最后更新时间文字的样式 + * - show-refresher-update-time为true时有效 + */ + refresherUpdateTimeStyle?: Record + + /** + * 是否实时监听下拉刷新中进度，并通过@refresherTouchmove传递给父组件 + * @default false + * @since 2.1.0 + */ + watchRefresherTouchmove?: boolean + + /** + * 是否显示最后更新时间 + * @default false + * @since 1.6.7 + */ + showRefresherUpdateTime?: boolean + + /** + * 自定义下拉刷新默认状态下的文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '继续下拉刷新' + */ + refresherDefaultText?: string | _I18nText + + /** + * 自定义下拉刷新松手立即刷新状态下的文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '松开立即刷新' + */ + refresherPullingText?: string | _I18nText + + /** + * 自定义下拉刷新刷新中状态下的文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '正在刷新...' + */ + refresherRefreshingText?: string | _I18nText + + /** + * 自定义下拉刷新刷新结束状态下的文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '刷新成功' + * @since 2.0.6 + */ + refresherCompleteText?: string | _I18nText + + /** + * 自定义下拉刷新默认状态下的图片 + */ + refresherDefaultImg?: string + + /** + * 自定义下拉刷新松手立即刷新状态下的图片 + */ + refresherPullingImg?: string + + /** + * 自定义下拉刷新刷新中状态下的图片 + */ + refresherRefreshingImg?: string + + /** + * 自定义下拉刷新刷新结束状态下的图片 + */ + refresherCompleteImg?: string + + /** + * 自定义下拉刷新刷新中状态下是否展示旋转动画 + * @default true + * @since 2.5.8 + */ + refresherRefreshingAnimated?: boolean + + /** + * 是否开启自定义下拉刷新刷新结束回弹动画效果 + * @default true + */ + refresherEndBounceEnabled?: boolean + + /** + * 设置系统下拉刷新默认样式，支持设置 black，white，none + * @default 'black' + */ + refresherDefaultStyle?: string + + /** + * 设置自定义下拉刷新区域背景颜色 + * @default '#FFFFFF00' + */ + refresherBackground?: string + + /** + * 设置固定的自定义下拉刷新区域背景颜色 + * @default '#FFFFFF00' + */ + refresherFixedBackground?: string + + /** + * 设置固定的自定义下拉刷新区域高度 + * @default 0 + */ + refresherFixedBacHeight?: number | string + + /** + * 设置自定义下拉刷新默认状态下回弹动画时间，单位为毫秒 + * @default 100 + * @since 2.3.1 + */ + refresherDefaultDuration?: number | string + + /** + * 自定义下拉刷新结束以后延迟收回的时间，单位为毫秒 + * @default 0 + * @since 2.0.6 + */ + refresherCompleteDelay?: number | string + + /** + * 自定义下拉刷新结束收回动画时间，单位为毫秒 + * @default 300 + * @since 2.0.6 + */ + refresherCompleteDuration?: number | string + + /** + * 下拉刷新时下拉到“松手立即刷新”状态时是否使手机短振动 + * @default false + * @since 2.4.7 + */ + refresherVibrate?: boolean + + /** + * 自定义下拉刷新刷新中状态是否允许列表滚动 + * @default true + */ + refresherRefreshingScrollable?: boolean + + /** + * 自定义下拉刷新结束状态下是否允许列表滚动 + * @default false + * @since 2.1.1 + */ + refresherCompleteScrollable?: boolean + + /** + * 设置自定义下拉刷新下拉超出阈值后继续下拉位移衰减的比例 + * @default 0.65 + */ + refresherOutRate?: number + + /** + * 是否开启下拉进入二楼功能 + * @default false + * @since 2.7.7 + */ + refresherF2Enabled?: boolean + + /** + * 下拉进入二楼阈值 + * @default '200rpx' + * @since 2.7.7 + */ + refresherF2Threshold?: number | string + + /** + * 下拉进入二楼动画时间，单位为毫秒 + * @default 200 + * @since 2.7.7 + */ + refresherF2Duration?: number | string + + /** + * 下拉进入二楼状态松手后是否弹出二楼 + * @default true + * @since 2.7.7 + */ + showRefresherF2?: boolean + + /** + * 设置自定义下拉刷新下拉时实际下拉位移与用户下拉距离的比值 + * @default 0.75 + * @since 2.3.7 + */ + refresherPullRate?: number + + /** + * 自定义下拉刷新下拉帧率，默认为40，过高可能会出现抖动问题 + * @default 40 + */ + refresherFps?: number | string + + /** + * 自定义下拉刷新允许触发的最大下拉角度，默认为40度 + * - 值小于0或大于90时，代表不受角度限 + * @default 40 + * @since 2.5.8 + */ + refresherMaxAngle?: number | string + + /** + * 自定义下拉刷新的角度由未达到最大角度变到达到最大角度时，是否继续下拉刷新手势 + * @default false + */ + refresherAngleEnableChangeContinued?: boolean + + /** + * 下拉刷新时是否禁止下拉刷新view跟随用户触摸竖直移动 + * @default false + * @since 2.5.8 + */ + refresherNoTransform?: boolean + + // ******************** 底部加载更多配置 ******************** + /** + * 是否启用加载更多数据(含滑动到底部加载更多数据和点击加载更多数据) + * @default true + */ + loadingMoreEnabled?: boolean + + /** + * 距底部/右边多远时，触发 scrolltolower 事件，默认单位为px + * - 支持传100、"100px"或"100rpx" + * @default '100rpx' + */ + lowerThreshold?: number | string + + /** + * 是否启用滑动到底部加载更多数据 + * @default true + */ + toBottomLoadingMoreEnabled?: boolean + + /** + * 底部加载更多的主题样式，支持black，white + * @default 'black' + */ + loadingMoreThemeStyle?: string + + /** + * 自定义底部加载更多样式；如：{'background':'red'} + * - 此属性无法修改文字样式，修改文字样式请使用loading-more-title-custom-style + */ + loadingMoreCustomStyle?: Record + + /** + * 自定义底部加载更多文字样式；如：{'color':'red'} + * @since 2.1.7 + */ + loadingMoreTitleCustomStyle?: Record + + /** + * 自定义底部加载更多加载中动画样式 + */ + loadingMoreLoadingIconCustomStyle?: Record + + /** + * 自定义底部加载更多加载中动画图标类型 + * - 可选flower或circle，默认为flower (nvue不支持) + * @default 'flower' + */ + loadingMoreLoadingIconType?: 'flower' | 'circle' + + /** + * 自定义底部加载更多加载中动画图标图片 + * - 若设置则使用自定义的动画图标，loading-more-loading-icon-type将无效 (nvue无效) + */ + loadingMoreLoadingIconCustomImage?: string + + /** + * 底部加载更多加载中view是否展示旋转动画 + * - loading-more-loading-icon-custom-image有值时有效，nvue无效 + * @default true + * @since 1.9.4 + */ + loadingMoreLoadingAnimated?: boolean + + /** + * 滑动到底部"默认"文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '点击加载更多' + */ + loadingMoreDefaultText?: string | _I18nText + + /** + * 滑动到底部"加载中"文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '正在加载...' + */ + loadingMoreLoadingText?: string | _I18nText + + /** + * 滑动到底部"没有更多"文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '没有更多了' + */ + loadingMoreNoMoreText?: string | _I18nText + + /** + * 滑动到底部"加载失败"文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '加载失败，点击重新加载' + */ + loadingMoreFailText?: string | _I18nText + + /** + * 当没有更多数据且分页内容未超出z-paging时是否隐藏没有更多数据的view + * - nvue不支持，nvue中请使用hide-no-more-by-limit控制 + * @default false + * @since 2.4.3 + */ + hideNoMoreInside?: boolean + + /** + * 当没有更多数据且分页数组长度少于这个值时，隐藏没有更多数据的view + * - 默认为0，代表不限制。此属性优先级高于`hide-no-more-inside` + * @default 0 + * @since 2.4.3 + */ + hideNoMoreByLimit?: number + + /** + * 当分页未满一屏时，是否自动加载更多 (nvue无效) + * @default false + * @since 2.0.0 + */ + insideMore?: boolean + + /** + * 滑动到底部状态为默认状态时，以加载中的状态展示 + * - 若设置为是，可避免滚动到底部看到默认状态然后立刻变为加载中状态的问题，但分页数量未超过一屏时，不会显示【点击加载更多】 + * @default false + * @since 2.2.0 + */ + loadingMoreDefaultAsLoading?: boolean + + /** + * 是否显示没有更多数据的view + * @default true + */ + showLoadingMoreNoMoreView?: boolean + + /** + * 是否显示默认的加载更多text + * @default true + */ + showDefaultLoadingMoreText?: boolean + + /** + * 是否显示没有更多数据的分割线，默认为是 + * @default true + */ + showLoadingMoreNoMoreLine?: boolean + + /** + * 自定义底部没有更多数据的分割线样式 + */ + loadingMoreNoMoreLineCustomStyle?: Record + + // ******************** 空数据与加载失败配置 ******************** + /** + * 是否强制隐藏空数据图 + * @default false + */ + hideEmptyView?: boolean + + /** + * 空数据图片是否铺满z-paging + * - 默认为否，即填充满z-paging内列表(滚动区域)部分。若设置为否，则为填铺满整个z-paging + * @default false + * @since 2.0.3 + */ + emptyViewFixed?: boolean + + /** + * 空数据图片是否垂直居中 + * - 默认为是，若设置为否即为从空数据容器顶部开始显示 (empty-view-fixed为false时有效) + * @default true + * @since 2.0.6 + */ + emptyViewCenter?: boolean + + /** + * 空数据图描述文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '没有数据哦~' + */ + emptyViewText?: string | _I18nText + + /** + * 空数据图图片，默认使用z-paging内置的图片 + * - 建议使用绝对路径，开头不要添加"@"，请以"/"开头 + */ + emptyViewImg?: string + + /** + * 空数据图“加载失败”图片，默认使用z-paging内置的图片 + * - 建议使用绝对路径，开头不要添加"@"，请以"/"开头 + * @since 1.6.7 + */ + emptyViewErrorImg?: string + + /** + * 空数据图点击重新加载文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '重新加载' + * @since 1.6.7 + */ + emptyViewReloadText?: string | _I18nText + + /** + * 空数据图“加载失败”描述文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '很抱歉，加载失败' + * @since 1.6.7 + */ + emptyViewErrorText?: string | _I18nText + /** + * 空数据图父view样式 + */ + emptyViewSuperStyle?: Record + + /** + * 空数据图样式，可设置空数据view的top等，如：:empty-view-style="{'top':'100rpx'}" + */ + emptyViewStyle?: Record + + /** + * 空数据图img样式 + */ + emptyViewImgStyle?: Record + + /** + * 空数据图描述文字样式 + */ + emptyViewTitleStyle?: Record + + /** + * 空数据图重新加载按钮样式 + * @since 1.6.7 + */ + emptyViewReloadStyle?: Record + + /** + * 是否显示空数据图重新加载按钮(无数据时) + * @default false + * @since 1.6.7 + */ + showEmptyViewReload?: boolean + + /** + * 加载失败时是否显示空数据图重新加载按钮 + * @default true + * @since 1.6.7 + */ + showEmptyViewReloadWhenError?: boolean + + /** + * 加载中时是否自动隐藏空数据图 + * @default true + */ + autoHideEmptyViewWhenLoading?: boolean + + /** + * 用户下拉列表触发下拉刷新加载中时是否自动隐藏空数据图 + * @default true + * @since 2.0.9 + */ + autoHideEmptyViewWhenPull?: boolean + + // ******************** 全屏Loading配置 ******************** + /** + * 第一次加载后自动隐藏loading slot + * @default true + */ + autoHideLoadingAfterFirstLoaded?: boolean + + /** + * loading slot的父view是否铺满屏幕并固定 + * - 设置为true后，插入的loading的父view会铺满全屏。注意：插入的loading需要设置height:100%（nvue为flex:1）才可铺满全屏。loading内的view从导航栏顶部开始，会被导航栏盖住，请妥善处理。 + * @default false + * @since 2.0.9 + */ + loadingFullFixed?: boolean + + /** + * 是否自动显示系统Loading：即uni.showLoading + * - 若开启则将在刷新列表时（调用reload、refresh时）显示。下拉刷新和滚动到底部加载更多不会显示。 + * @default false + * @since 2.3.7 + */ + autoShowSystemLoading?: boolean + + /** + * 显示系统Loading时显示的文字 + * - 支持直接传字符串或形如：{'en':'英文','zh-Hans':'简体中文','zh-Hant':'繁体中文'}的i18n配置 + * @default '加载中...' + * @since 2.3.7 + */ + systemLoadingText?: string | _I18nText + + /** + * 显示系统Loading时是否显示透明蒙层，防止触摸穿透。H5、App、微信小程序、百度小程序有效。 + * @default true + * @since 2.3.9 + */ + systemLoadingMask?: boolean + + // ******************** 返回顶部按钮配 ******************** + /** + * 自动显示点击返回顶部按钮 + * @default false + */ + autoShowBackToTop?: boolean + + /** + * 点击返回顶部按钮显示/隐藏的阈值(滚动距离)，默认单位为px + * - 支持传100、"100px"或"100rpx" + * @default 400rpx + */ + backToTopThreshold?: number | string + + /** + * 点击返回顶部按钮的自定义图片地址 + * - 建议使用绝对路径，开头不要添加"@"，请以"/"开头 + * @default 'z-paging内置的图片' + */ + backToTopImg?: string + + /** + * 点击返回顶部按钮返回到顶部时是否展示过渡动画 + * @default true + */ + backToTopWithAnimate?: boolean + + /** + * 点击返回顶部按钮与底部的距离，默认单位为px + * - 支持传100、"100px"或"100rpx" + * @default 160rpx + */ + backToTopBottom?: number | string + + /** + * 点击返回顶部按钮的自定义样式 + */ + backToTopStyle?: Record + + // ******************** 虚拟列表&内置列表配置 ******************** + /** + * 是否使用虚拟列表 + * - 使用页面滚动或nvue时，不支持虚拟列表。在nvue中z-paging内置了list组件，效果与虚拟列表类似，并且可以提供更好的性能 + * @default false + */ + useVirtualList?: boolean + + /** + * 在使用虚拟列表时，是否使用兼容模式。兼容模式写法较繁琐，但可提供良好的兼容性。 + * @default false + * @since 2.4.0 + */ + useCompatibilityMode?: boolean + + /** + * 使用兼容模式时传递的附加数据，可选、非必须 + * @since 2.4.0 + */ + extraData?: Record + + /** + * 虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。 + * @default 'fixed' + */ + cellHeightMode?: 'fixed' | 'dynamic' + + /** + * 预加载的列表可视范围(列表高度)页数。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题。 + * @default 12 + */ + preloadPage?: number | string + + /** + * 固定的cell高度，`cell-height-mode=fixed`才有效，若设置了值，则不计算第一个cell高度而使用设置的cell高度。默认单位为px + * - 支持传100、"100px"或"100rpx" + * @since 2.7.8 + */ + fixedCellHeight?: number | string + + /** + * 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2。 + * @default 1 + * @since 2.2.8 + */ + virtualListCol?: number | string + + /** + * 虚拟列表scroll取样帧率，默认为80，过低容易出现白屏问题，过高容易出现卡顿问题 + * @default 80 + */ + virtualScrollFps?: number | string + + /** + * 虚拟列表cell id的前缀，适用于一个页面有多个虚拟列表的情况，用以区分不同虚拟列表cell的id + * - 注意：请勿传数字或以数字开头的字符串。如设置为list1，则cell的id应为：list1-zp-id-${item.zp_index} + * @since 2.8.1 + */ + virtualCellIdPrefix?: string + + /** + * 是否在z-paging内部循环渲染列表(使用内置列表)。 + * @default false + */ + useInnerList?: boolean + + /** + * 强制关闭inner-list。适用于开启了虚拟列表后需要强制关闭inner-list的情况。 + * @default false + * @since 2.2.7 + */ + forceCloseInnerList?: boolean + + /** + * 虚拟列表是否使用swiper-item包裹，默认为否，此属性为了解决vue3+(微信小程序或QQ小程序)中，使用非内置列表写法时，若z-paging在swiper-item内存在无法获取slot插入的cell高度进而导致虚拟列表失败的问题 + * - 仅vue3+(微信小程序或QQ小程序)+非内置列表写法虚拟列表有效，其他情况此属性设置任何值都无效，所以如果您在swiper-item内使用z-paging的非内置虚拟列表写法，将此属性设置为true即可 + * @default false + * @since 2.8.6 + */ + virtualInSwiperSlot?: boolean + + /** + * 内置列表cell的key名称(仅nvue有效，在nvue中开启use-inner-list时必须填此项) + * @since 2.2.7 + */ + cellKeyName?: string + + /** + * innerList样式 + */ + innerListStyle?: Record + + /** + * innerCell样式 + * @since 2.2.8 + */ + innerCellStyle?: Record + + // ******************** 本地分页配置 ******************** + /** + * 本地分页时上拉加载更多延迟时间，单位为毫秒 + * @default 200 + */ + localPagingLoadingTime?: number | string + + // ******************** 聊天记录模式配置 ******************** + /** + * 使用聊天记录模式，为保证良好的体验。 + * @default false + */ + useChatRecordMode?: boolean; + + /** + * 使用聊天记录模式时是否自动隐藏键盘(在用户触摸列表时候自动隐藏键盘) + * @default true + * @since 2.3.4 + */ + autoHideKeyboardWhenChat?: boolean; + + /** + * 使用聊天记录模式中键盘弹出时是否自动调整slot="bottom"高度 + * @default true + * @since 2.7.4 + */ + autoAdjustPositionWhenChat?: boolean; + + /** + * 使用聊天记录模式中键盘弹出时是否自动滚动到底部 + * @default false + * @since 2.7.4 + */ + autoToBottomWhenChat?: boolean; + + /** + * 使用聊天记录模式中键盘弹出时占位高度偏移距离。默认0rpx。单位px + * @default "0px" + * @since 2.7.6 + */ + chatAdjustPositionOffset?: string; + + /** + * 使用聊天记录模式中`reload`时是否显示`chatLoading` + * @default false + * @since 2.7.4 + */ + showChatLoadingWhenReload?: boolean; + + /** + * `bottom`的背景色，默认透明，传字符串，如"#ffffff" + * @since 2.7.4 + */ + bottomBgColor?: string; + + /** + * 在聊天记录模式中滑动到顶部状态为默认状态时，是否以加载中的状态展示 + * @default true + * @since 2.7.5 + */ + chatLoadingMoreDefaultAsLoading?: boolean; + + // ******************** scroll-view相关配置 ******************** + /** + * 控制是否出现滚动条 + * @default true + */ + showScrollbar?: boolean; + + /** + * 是否可以滚动，使用内置scroll-view和nvue时有效 + * @default true + */ + scrollable?: boolean; + + /** + * 是否允许横向滚动 + * @default false + * @since 2.0.6 + */ + scrollX?: boolean; + + /** + * iOS设备上滚动到顶部时是否允许回弹效果 + * - 关闭回弹效果后可使滚动到顶部后立即下拉可立即触发下拉刷新，但是有吸顶view时滚动到顶部时可能出现抖动 + * @default false + */ + scrollToTopBounceEnabled?: boolean; + + /** + * iOS设备上滚动到底部时是否允许回弹效果。可能会导致使用scroll-view滚动时无法顺利滚动到底部 + * @default true + */ + scrollToBottomBounceEnabled?: boolean; + + /** + * 在设置滚动条位置时使用动画过渡 + * @default false + */ + scrollWithAnimation?: boolean; + + /** + * 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。若在一些平台中无效，可以通过调用z-paging的scrollToxxx系列的方法实现。 + */ + scrollIntoView?: string; + + /** + * iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部。仅支持app-nvue，微信小程序。 + * @default true + */ + enableBackToTop?: boolean; + + // ******************** nvue独有配置 ******************** + /** + * nvue中修改列表类型。 + * @default "list" + */ + nvueListIs?: 'list' | 'waterfall' | 'scroller'; + + /** + * waterfall 配置，仅在 nvue 中且 nvueListIs=waterfall 时有效。示例: {'column-gap': 20}。配置参数详情参见: https://uniapp.dcloud.io/component/waterfall + */ + nvueWaterfallConfig?: Record; + + /** + * nvue 控制是否回弹效果，iOS 不支持动态修改。注意: 若禁用回弹效果，下拉刷新将失效。 + * @default true + */ + nvueBounce?: boolean; + + /** + * nvue 中通过代码滚动到顶部/底部时，是否加快动画效果(无滚动动画时无效)。 + * @default false + * @since 1.9.4 + */ + nvueFastScroll?: boolean; + + /** + * nvue 中 list 的 id。 + * @since 2.0.4 + */ + nvueListId?: string; + + /** + * 是否隐藏 nvue 列表底部的 tagView，此 view 用于标识滚动到底部位置。 + * - 若隐藏则滚动到底部功能将失效。 + * - 在 nvue 中实现吸顶+swiper 功能时需将最外层 z-paging 的此属性设置为 true。 + * @default false + * @since 2.0.4 + */ + hideNvueBottomTag?: boolean; + + /** + * 设置 nvue 中是否按分页模式(类似竖向 swiper)显示 List。 + * @default false + * @since 2.3.1 + */ + nvuePagingEnabled?: boolean; + + /** + * nvue 中控制 onscroll 事件触发的频率。表示两次 onscroll 事件之间列表至少滚动了指定的像素值。单位: px。 + * @since 2.3.5 + */ + offsetAccuracy?: number; + + // ******************** 缓存配置 ******************** + /** + * 是否使用缓存。若开启，将自动缓存第一页的数据。注意：默认仅会缓存组件首次加载时第一次请求到的数据，后续的下拉刷新操作不会更新缓存。 + * - 必须设置 `cacheKey`，否则缓存无效。 + * @default false + */ + useCache?: boolean; + + /** + * 使用缓存时缓存的 key，用于区分不同列表的缓存数据。 + * - useCache为 true 时必须设置，否则缓存无效。 + */ + cacheKey?: string; + + /** + * 缓存模式。 + * - default: 仅缓存组件首次加载时第一次请求到的数据。 + * - always: 总是缓存，每次列表刷新(如下拉刷新、调用 reload 等)都会更新缓存。 + * @default "default" + */ + cacheMode?: 'default' | 'always'; + + // ******************** z-index配置 ******************** + /** + * slot="top" 的 view 的 z-index。 + * - 仅使用页面滚动时有效。 + * @default 99 + */ + topZIndex?: number; + + /** + * z-paging 内容容器父 view 的 z-index。 + * @default 1 + */ + superContentZIndex?: number; + + /** + * z-paging 内容容器部分的 z-index。 + * @default 1 + */ + contentZIndex?: number; + + /** + * 空数据 view 的 z-index。 + * @default 9 + */ + emptyViewZIndex?: number; + + // ******************** 其他配置 ******************** + /** + * z-paging 是否自动高度。 + * - 自动高度时会自动铺满屏幕，不需要设置父 view 为 100% 等操作。 + * - 注意：自动高度可能并不准确。 + * @deprecated 建议使用 fixed 代替。 + * @default false + */ + autoHeight?: boolean; + + /** + * z-paging 自动高度时的附加高度。 + * - 添加单位 px 或 rpx，默认为 px。 + * - 若需要减少高度，请传负数，如 "-10rpx" 或 "10.5px"。 + * @deprecated 建议使用 fixed 代替。 + * @default "0px" + */ + autoHeightAddition?: number | string; + + + // ****************************** Events ****************************** + + // ******************** 数据处理相关事件 ******************** + /** + * 父组件v-model所绑定的list的值改变时触发此事件 + * @param value 列表数据 + */ + onInput?: (value: any[]) => any + + /** + * 下拉刷新或滚动到底部时会自动触发此方法。z-paging加载时也会触发(若要禁止，请设置:auto="false")。pageNo和pageSize会自动计算好，直接传给服务器即可。 + * @param pageNo 当前第几页 + * @param pageSize 每页多少条 + * @param from query的触发来源：user-pull-down:用户主动下拉刷新 reload:通过reload触发 refresh:通过refresh触发 load-more:通过滚动到底部加载更多或点击底部加载更多触发 + */ + onQuery?: (pageNo: number, pageSize: number, from: ZPagingEnums.QueryFrom) => void + + /** + * 分页渲染的数组改变时触发 + * @param list 最终的分页数据数组 + */ + onListChange?: (list: any[]) => void + + // ******************** 下拉刷新相关事件 ******************** + /** + * 自定义下拉刷新状态改变 + * - use-custom-refresher为false时无效 + * @param status 下拉刷新状态：default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼 + */ + onRefresherStatusChange?: (status: ZPagingEnums.RefresherStatus) => void + + /** + * 自定义下拉刷新下拉开始 + * - use-custom-refresher为false时无效 + * @param y 当前触摸开始的屏幕点的y值(单位px) + */ + onRefresherTouchstart?: (y: number) => void + + /** + * 自定义下拉刷新下拉拖动中 + * - use-custom-refresher为false时无效 + * - 在使用wxs的平台上，为减少wxs与js通信折损，只有在z-paging添加@refresherTouchmove时，wxs才会实时将下拉拖动事件传给js，在微信小程序和QQ小程序中，因$listeners无效，所以必须设置:watch-refresher-touchmove="true"方可使此事件被触发 + * @param info touchmove信息 + */ + onRefresherTouchmove?: (info: ZPagingParams.RefresherTouchmoveInfo) => void + + /** + * 自定义下拉刷新下拉结束 + * - use-custom-refresher为false时无效 + * @param y 当前触摸开始的屏幕点的y值(单位px) + */ + onRefresherTouchend?: (y: number) => void + + /** + * 下拉进入二楼状态改变 + * - use-custom-refresher为false时无效 + * @param y 当前触摸开始的屏幕点的y值(单位px) + * @since 2.7.7 + */ + onRefresherF2Change?: (status: ZPagingEnums.GoF2Status) => void + + /** + * 自定义下拉刷新被触发 + */ + onRefresh?: () => void + + /** + * 自定义下拉刷新被复位 + */ + onRestore?: () => void + + // ******************** 底部加载更多相关事件 ******************** + /** + * 自定义下拉刷新状态改变 + * - use-custom-refresher为false时无效 + * @param status 底部加载更多状态：default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败 + */ + onLoadingStatusChange?: (status: ZPagingEnums.LoadMoreStatus) => void + + // ******************** 空数据与加载失败相关事件 ******************** + /** + * 点击了空数据图中的重新加载按钮 + * @param handler 点击空数据图中重新加载后是否进行reload操作，默认为是。如果需要禁止reload事件，则调用handler(false) + * @since 1.8.0 + */ + onEmptyViewReload?: (handler: ZPagingParams.DefaultEventHandler) => void + + /** + * 点击了空数据图view + * @since 2.3.3 + */ + onEmptyViewClick?: () => void + + /** + * z-paging请求失败状态改变 + * @param isLoadFailed 当前是否是请求失败状态，为true代表是，反之为否；默认状态为否 + * @since 2.5.0 + */ + onIsLoadFailedChange?: (isLoadFailed: boolean) => void + + // ******************** 返回顶部按钮相关事件 ******************** + /** + * 点击了返回顶部按钮 + * @param handler 点击返回顶部按钮后是否滚动到顶部，默认为是。如果需要禁止滚动到顶部事件，则调用handler(false) + * @since 2.6.1 + */ + onBackToTopClick?: (handler: ZPagingParams.DefaultEventHandler) => void + + // ******************** 虚拟列表&内置列表相关事件 ******************** + /** + * 虚拟列表当前渲染的数组改变时触发，在虚拟列表中只会渲染可见区域内+预加载页面的数据 + * - nvue无效 + * @param list 虚拟列表当前渲染的数组 + * @since 2.2.7 + */ + onVirtualListChange?: (list: any[]) => void + + /** + * 使用虚拟列表或内置列表时点击了cell + * - nvue无效 + * @param list 虚拟列表当前渲染的数组 + * @since 2.4.0 + */ + onInnerCellClick?: (info: ZPagingParams.InnerCellClickInfo) => void + + /** + * 虚拟列表顶部占位高度改变 + * - nvue无效 + * @param height 虚拟列表顶部占位高度(单位：px) + * @since 2.7.12 + */ + onVirtualPlaceholderTopHeight?: (height: number) => void + + // ******************** 聊天记录模式相关事件 ******************** + /** + * 在聊天记录模式下，触摸列表隐藏了键盘 + * - nvue无效 + * @since 2.3.6 + */ + onHidedKeyboard?: () => void + + /** + * 键盘高度改变 + * @param info 键盘高度信息 + * @since 2.7.1 + */ + onKeyboardHeightChange?: (info: ZPagingParams.KeyboardHeightInfo) => void + + /** + * z-paging列表滚动时触发 + * @param event 滚动事件信息，vue使用_ScrollInfo，nvue使用_ScrollInfoN + */ + onScroll?: (event: ZPagingParams.ScrollInfo | ZPagingParams.ScrollInfoN) => void + + /** + * scrollTop改变时触发，使用点击返回顶部时需要获取scrollTop时可使用此事件 + * @param scrollTop + */ + onScrollTopChange?: (scrollTop: number) => void + + /** + * z-paging内置的scroll-view/list-view/waterfall滚动底部时触发 + */ + onScrolltolower?: () => void + + /** + * z-paging内置的scroll-view/list-view/waterfall滚动顶部时触发 + */ + onScrolltoupper?: () => void + + /** + * z-paging内置的list滚动结束时触发 + * - 仅nvue有效 + * @param event 滚动结束时触发事件信息 + * @since 2.7.3 + */ + onScrollend?: (event: ZPagingParams.ScrollendEvent) => void + + // ******************** 布局&交互相关事件 ******************** + /** + * z-paging中内容高度改变时触发 + * @param height 改变后的高度 + * @since 2.1.3 + */ + onContentHeightChanged?: (height: number) => void + + /** + * 监听列表触摸方向改变 + * - nvue无效 + * - 必须同时设置:watch-touch-direction-change="true" + * @param direction 列表触摸的方向，top代表用户将列表向上移动(scrollTop不断减小)，bottom代表用户将列表向下移动(scrollTop不断增大) + * @since 2.3.0 + */ + onTouchDirectionChange?: (direction: ZPagingEnums.TouchDirection) => void +} + + +// ****************************** Slots ****************************** +declare interface ZPagingSlots { + // ******************** 主体布局Slot ******************** + /** + * 默认插入的列表view + */ + ['default']?: () => any + + /** + * 可以将自定义导航栏、tab-view等需要固定的(不需要跟着滚动的)元素放入slot="top"的view中。 + * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="top"。需要固定在顶部的view请勿设置position: fixed; + * @since 1.5.5 + */ + ['top']?: () => any + + /** + * 可以将需要固定在底部的(不需要跟着滚动的)元素放入slot="bottom"的view中。 + * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="bottom"。需要固定在底部的view请勿设置position: fixed; + * @since 1.6.2 + */ + ['bottom']?: () => any + + /** + * 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="left"的view中。 + * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="left"。需要固定在左侧的view请勿设置position: fixed; + * @since 2.2.3 + */ + ['left']?: () => any + + /** + * 可以将需要固定在左侧的(不需要跟着滚动的)元素放入slot="right"的view中。 + * 注意，当有多个需要固定的view时，请用一个view包住它们，并且在这个view上设置slot="right"。需要固定在右侧的view请勿设置position: fixed; + * @since 2.2.3 + */ + ['right']?: () => any + + // ******************** 下拉刷新Slot ******************** + /** + * 自定义下拉刷新view，设置后则不使用uni自带的下拉刷新view和z-paging自定义的下拉刷新view。此view的style必须设置为height:100% + * - 在非nvue中，自定义下拉刷新view的高度受refresher-threshold控制，因此如果它的高度不为默认的80rpx，则需要设置refresher-threshold="自定义下拉刷新view的高度" + * @param refresherStatus 下拉刷新状态：default:默认状态 release-to-refresh:松手立即刷新 loading:刷新中 complete:刷新结束 go-f2:松手进入二楼 + */ + ['refresher']?: (props: ZPagingParams.RefresherSlotProps) => any + + /** + * 自定义结束状态下的下拉刷新view，若设置，当下拉刷新结束时，会替换当前状态下的下拉刷新view。 + * - 注意：默认情况下您无法看到结束状态的下拉刷新view，除非您设置了refresher-complete-delay并且值足够大，例如：500 + * @since 2.1.1 + */ + ['refresherComplete']?: () => any + + /** + * 自定义松手显示二楼状态下的view + * @since 2.7.7 + */ + ['refresherF2']?: () => any + + /** + * 自定义需要插入二楼的view + * @since 2.7.7 + */ + ['f2']?: () => any + + // ******************** 底部加载更多Slot ******************** + /** + * 自定义滑动到底部"默认"状态的view(即"点击加载更多view") + */ + ['loadingMoreDefault']?: () => any + + /** + * 自定义滑动到底部"加载中"状态的view + */ + ['loadingMoreLoading']?: () => any + + /** + * 自定义滑动到底部"没有更多数据"状态的view + */ + ['loadingMoreNoMore']?: () => any + + /** + * 自定义滑动到底部"加载失败"状态的view + */ + ['loadingMoreFail']?: () => any + + // ******************** 空数据图Slot ******************** + /** + * 自定义空数据占位view + * @param isLoadFailed 是否加载失败：true: 加载失败，false: 加载成功 + */ + ['empty']?: (props: ZPagingParams.EmptySlotProps) => any + + // ******************** 全屏Loading Slot ******************** + /** + * 自定义页面reload时的加载view + * - 注意：这个slot默认仅会在第一次加载时显示，若需要每次reload时都显示，需要将auto-hide-loading-after-first-loaded设置为false + */ + ['loading']?: () => any + + // ******************** 返回顶部按钮Slot ******************** + /** + * 自定义点击返回顶部view + * - 注意：此view受“【返回顶部按钮】配置”控制，且其父view默认宽高为76rpx + * @since 1.9.4 + */ + ['backToTop']?: () => any + + // ******************** 虚拟列表&内置列表Slot ******************** + /** + * 内置列表中的cell + * - use-virtual-list或use-inner-list为true时有效 + * @param item 当前item + * @param index 当前index + * @since 2.2.5 + */ + ['cell']?: (props: ZPagingParams.InnerListCellSlotProps) => any + + /** + * 内置列表中的header(在cell顶部且跟随列表滚动) + * - use-virtual-list或use-inner-list为true时有效 + * @since 2.2.5 + */ + ['header']?: () => any + + /** + * 内置列表中的footer(在cell顶部且跟随列表滚动) + * - use-virtual-list或use-inner-list为true时有效 + * @since 2.2.5 + */ + ['footer']?: () => any + + // ******************** 聊天记录模式Slot ******************** + /** + * 使用聊天记录模式时自定义顶部加载更多view(除没有更多数据外) + * - use-chat-record-mode为true时有效 + * @param loadingMoreStatus 底部加载更多状态：default:默认状态 loading:加载中 no-more:没有更多数据 fail:加载失败 + */ + ['chatLoading']?: (props: ZPagingParams.ChatLoadingSlotProps) => any + + /** + * 使用聊天记录模式时自定义没有更多数据view + * - use-chat-record-mode为true时有效 + * @since 2.7.5 + */ + ['chatNoMore']?: () => any +} + +// ****************************** Methods ****************************** +declare interface _ZPagingRef { + // ******************** 数据刷新&处理方法 ******************** + /** + * 重新加载分页数据，pageNo恢复为默认值，相当于下拉刷新的效果 + * + * @param [animate=false] 是否展示下拉刷新动画 + */ + reload: (animate?: boolean) => Promise< ZPagingParams.ReturnData>; + + /** + * 刷新列表数据，pageNo和pageSize不会重置，列表数据会重新从服务端获取 + * + * @since 2.0.4 + * @returns {Promise>} Promise，当前最新分页结果： + * - resolve 操作成功 + * - - `totalList` (T[]): 当前总列表 + * - - `noMore` (boolean): 是否没有更多数据 + * - reject 操作失败 + */ + refresh: () => Promise>; + + /** + * 刷新列表数据至指定页 + * + * @since 2.5.9 + * @param page 目标页数 + * @returns {Promise>} Promise，当前最新分页结果： + * - resolve 操作成功 + * - - `totalList` (T[]): 当前总列表 + * - - `noMore` (boolean): 是否没有更多数据 + * - reject 操作失败 + */ + refreshToPage: (page: number) => Promise>; + + /** + * 请求结束 + * - 当通过complete传进去的数组长度小于pageSize时，则判定为没有更多了 + * + * @param [data] 请求结果数组 + * @param [success=true] 是否请求成功 + * @returns {Promise>} Promise，当前最新分页结果： + * - resolve 操作成功 + * - - `totalList` (T[]): 当前总列表 + * - - `noMore` (boolean): 是否没有更多数据 + * - reject 操作失败 + */ + complete: (data?: T[] | false, success?: boolean) => Promise>; + + /** + * 请求结束 + * - 通过total判断是否有更多数据 + * + * @since 2.0.6 + * @param data 请求结果数组 + * @param total 列表总长度 + * @param [success=true] 是否请求成功 + * @returns {Promise>} Promise，当前最新分页结果： + * - resolve 操作成功 + * - - `totalList` (T[]): 当前总列表 + * - - `noMore` (boolean): 是否没有更多数据 + * - reject 操作失败 + */ + completeByTotal: (data: T[], total: number, success?: boolean) => Promise>; + + /** + * 请求结束 + * - 自行判断是否有更多数据 + * + * @since 1.9.2 + * @param data 请求结果数组 + * @param noMore 是否没有更多数据 + * @param [success=true] 是否请求成功 + * @returns {Promise>} Promise，当前最新分页结果： + * - resolve 操作成功 + * - - `totalList` (T[]): 当前总列表 + * - - `noMore` (boolean): 是否没有更多数据 + * - reject 操作失败 + */ + completeByNoMore: (data: T[], noMore: boolean, success?: boolean) => Promise>; + + /** + * 请求失败 + * - 通过方法传入请求失败原因，将请求失败原因传递给z-paging展示 + * + * @since 2.6.3 + * @param cause 请求失败原因 + * @returns {Promise>} Promise，当前最新分页结果： + * - resolve 操作成功 + * - - `totalList` (T[]): 当前总列表 + * - - `noMore` (boolean): 是否没有更多数据 + * - reject 操作失败 + */ + completeByError: (cause: string) => Promise>; + + /** + * 请求结束 + * - 保证数据一致 + * + * @since 1.6.4 + * @param data 请求结果数组 + * @param key dataKey，需与:data-key绑定的一致 + * @param [success=true] 是否请求成功 + * @returns {Promise>} Promise，当前最新分页结果： + * - resolve 操作成功 + * - - `totalList` (T[]): 当前总列表 + * - - `noMore` (boolean): 是否没有更多数据 + * - reject 操作失败 + */ + completeByKey: (data: T[], key: string, success?: boolean) => Promise>; + + /** + * 清空分页数据，pageNo恢复为默认值 + * + * @since 2.1.0 + */ + clear: () => void; + + /** + * 从顶部添加数据，不会影响分页的pageNo和pageSize + * + * @param data 需要添加的数据，可以是一条数据或一组数据 + * @param [scrollToTop=true] 是否滚动到顶部，不填默认为true + * @param [animate=true] 是否使用动画滚动到顶部 + */ + addDataFromTop: (data: _Arrayable, scrollToTop?: boolean, animate?: boolean) => void; + + /** + * 【不推荐】重新设置列表数据，调用此方法不会影响pageNo和pageSize，也不会触发请求 + * - 适用场景：当需要删除列表中某一项时，将删除对应项后的数组通过此方法传递给z-paging + * + * @param data 修改后的列表数组 + */ + resetTotalData: (data: T[]) => void; + + // ******************** 下拉刷新相关方法 ******************** + /** + * 终止下拉刷新状态 + * + * @since 2.1.0 + */ + endRefresh: () => void; + + /** + * 手动更新自定义下拉刷新view高度 + * - 常用于某些情况下使用slot="refresher"插入的view高度未能正确计算导致异常时手动更新其高度 + * + * @since 2.6.1 + */ + updateCustomRefresherHeight: () => void; + + /** + * 手动关闭二楼 + * + * @since 2.7.7 + */ + closeF2: () => void; + + // ******************** 底部加载更多相关方法 ******************** + /** + * 手动触发上拉加载更多 + * - 非必须，可依据具体需求使用，例如当z-paging未确定高度时，内部的scroll-view会无限增高，此时z-paging无法得知是否滚动到底部，您可以在页面的onReachBottom中手动调用此方法触发上拉加载更多 + * + * @param [source] 触发加载更多的来源类型 + */ + doLoadMore: (source?: "click" | "toBottom") => void; + + // ******************** 页面滚动&布局相关方法 ******************** + /** + * 当使用页面滚动并且自定义下拉刷新时，请在页面的onPageScroll中调用此方法，告知z-paging当前的pageScrollTop，否则会导致在任意位置都可以下拉刷新 + * - 若引入了mixins，则不需要调用此方法 + * + * @param scrollTop 从page的onPageScroll中获取的scrollTop + */ + updatePageScrollTop: (scrollTop: number) => void; + + /** + * 在使用页面滚动并且设置了slot="top"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="top"的view高度动态改变时，在其高度需要更新时调用此方法 + */ + updatePageScrollTopHeight: () => void; + + /** + * 在使用页面滚动并且设置了slot="bottom"时，默认初次加载会自动获取其高度，并使内部容器下移，当slot="bottom"的view高度动态改变时，在其高度需要更新时调用此方法 + */ + updatePageScrollBottomHeight: () => void; + + /** + * 更新slot="left"和slot="right"宽度，当slot="left"或slot="right"宽度动态改变后调用 + * + * @since 2.3.5 + */ + updateLeftAndRightWidth: () => void; + + /** + * 更新fixed模式下z-paging的布局，在onShow时候调用，以修复在iOS+h5+tabbar+fixed+底部有安全区域的设备中从tabbar页面跳转到无tabbar页面后返回，底部有一段空白区域的问题 + * + * @since 2.6.5 + */ + updateFixedLayout: () => void; + + // ******************** 虚拟列表相关方法 ******************** + /** + * 在使用动态高度虚拟列表时，若在列表数组中需要插入某个item，需要调用此方法 + * + * @since 2.5.9 + * @param item 插入的数据项 + * @param index 插入的cell位置，若为2，则插入的item在原list的index=1之后，从0开始 + */ + doInsertVirtualListItem: (item: T, index: number) => void; + + /** + * 在使用动态高度虚拟列表时，手动更新指定cell的缓存高度 + * - 当cell高度在初始化之后再次改变时调用 + * + * @since 2.4.0 + * @param index 需要更新的cell在列表中的位置，从0开始 + */ + didUpdateVirtualListCell: (index: number) => void; + + /** + * 在使用动态高度虚拟列表时，若删除了列表数组中的某个item，需要调用此方法以更新高度缓存数组 + * + * @since 2.4.0 + * @param index 需要更新的cell在列表中的位置，从0开始 + */ + didDeleteVirtualListCell: (index: number) => void; + + /** + * 手动触发虚拟列表渲染更新，可用于解决例如修改了虚拟列表数组中元素，但展示未更新的情况 + * + * @since 2.7.11 + */ + updateVirtualListRender: () => void; + + // ******************** 本地分页相关方法 ******************** + /** + * 设置本地分页，请求结束(成功或者失败)调用此方法，将请求的结果传递给z-paging作分页处理 + * - 若调用了此方法，则上拉加载更多时内部会自动分页，不会触发@query所绑定的事件 + * + * @param data 请求结果数组 + * @param [success=true] 是否请求成功 + * @returns {Promise>} Promise，当前最新分页结果： + * - resolve 操作成功 + * - - `totalList` (T[]): 当前总列表 + * - - `noMore` (boolean): 是否没有更多数据 + * - reject 操作失败 + */ + setLocalPaging: (data: T[], success?: boolean) => Promise>; + + // ******************** 聊天记录模式相关方法 ******************** + /** + * 手动触发滚动到顶部加载更多，聊天记录模式时有效 + */ + doChatRecordLoadMore: () => void; + + /** + * 添加聊天记录，use-chat-record-mode为true时有效 + * + * @param data 需要添加的聊天数据，可以是一条数据或一组数据 + * @param [scrollToBottom=true] 是否滚动到底部 + * @param [animate=true] 是否使用动画滚动到底部 + */ + addChatRecordData: (data: _Arrayable, scrollToBottom?: boolean, animate?: boolean) => void; + + // ******************** 滚动到指定位置方法 ******************** + /** + * 滚动到顶部 + * + * @param [animate=true] 是否有动画效果 + */ + scrollToTop: (animate?: boolean) => void; + + /** + * 滚动到底部 + * + * @param [animate=true] 是否有动画效果 + */ + scrollToBottom: (animate?: boolean) => void; + + /** + * 滚动到指定view + * - vue中有效，若此方法无效，请使用scrollIntoViewByNodeTop + * + * @param id 需要滚动到的view的id值，不包含"#" + * @param [offset=0] 偏移量，单位为px + * @param [animate=false] 是否有动画效果 + */ + scrollIntoViewById: (id: string, offset?: number, animate?: boolean) => void; + + /** + * 滚动到指定view + * - vue中有效 + * + * @since 1.7.4 + * @param top 需要滚动的view的top值(通过uni.createSelectorQuery()获取) + * @param [offset=0] 偏移量，单位为px + * @param [animate=false] 是否有动画效果 + */ + scrollIntoViewByNodeTop: (top: number, offset?: number, animate?: boolean) => void; + + /** + * y轴滚动到指定位置 + * - vue中有效 + * - 与scrollIntoViewByNodeTop的不同之处在于，scrollToY传入的是view相对于屏幕的top值，而scrollIntoViewByNodeTop传入的top值并非是固定的，通过uni.createSelectorQuery()获取到的top会因列表滚动而改变 + * + * @since 2.1.0 + * @param y 与顶部的距离，单位为px + * @param [offset=0] 偏移量，单位为px + * @param [animate=false] 是否有动画效果 + */ + scrollToY: (y: number, offset?: number, animate?: boolean) => void; + + /** + * x轴滚动到指定位置 + * - 非页面滚动且在vue中有效 + * + * @since 2.8.5 + * @param x 与左侧的距离，单位为px + * @param [offset=0] 偏移量，单位为px + * @param [animate=false] 是否有动画效果 + */ + scrollToX: (x: number, offset?: number, animate?: boolean) => void; + + /** + * 滚动到指定view + * - nvue或虚拟列表中有效 + * - 在nvue中的cell必须设置 :ref="`z-paging-${index}`" + * + * @param index 需要滚动到的view的index(第几个) + * @param [offset=0] 偏移量，单位为px + * @param [animate=false] 是否有动画效果 + */ + scrollIntoViewByIndex: (index: number, offset?: number, animate?: boolean) => void; + + /** + * 滚动到指定view + * - nvue中有效 + * + * @param view 需要滚动到的view(通过this.$refs.xxx获取) + * @param [offset=0] 偏移量，单位为px + * @param [animate=false] 是否有动画效果 + */ + scrollIntoViewByView: (view: any, offset?: number, animate?: boolean) => void; + + /** + * 设置nvue List的specialEffects + * + * @since 2.0.4 + * @param args 参见https://uniapp.dcloud.io/component/list?id=listsetspecialeffects + */ + setSpecialEffects: (args: ZPagingParams.SetSpecialEffectsArgs) => void; + + // ******************** nvue独有方法 ******************** + /** + * 与{@link setSpecialEffects}相同 + * + * @since 2.0.4 + */ + setListSpecialEffects: (args: ZPagingParams.SetSpecialEffectsArgs) => void; + + // ******************** 缓存相关方法 ******************** + /** + * 手动更新列表缓存数据，将自动截取v-model绑定的list中的前pageSize条覆盖缓存，请确保在list数据更新到预期结果后再调用此方法 + * + * @since 2.3.9 + */ + updateCache: () => void; + + // ******************** 获取版本号方法 ******************** + /** + * 获取当前版本号 + */ + getVersion: () => string; +} + +declare interface _ZPaging { + new (): { + $props: AllowedComponentProps & + VNodeProps & + ZPagingProps + $slots: ZPagingSlots + } +} + +export declare const ZPaging: _ZPaging + +declare global { + interface ZPagingRef extends _ZPagingRef {} + // 兼容v2.8.1之前的旧版本 + interface ZPagingInstance extends _ZPagingRef {} +} diff --git a/components/z-paging/types/index.d.ts b/components/z-paging/types/index.d.ts new file mode 100644 index 0000000..d1ccf53 --- /dev/null +++ b/components/z-paging/types/index.d.ts @@ -0,0 +1,24 @@ +/// +declare module 'z-paging' { + export function install() : void + /** + * z-paging全局配置 + * - uni.$zp + * + * @since 2.6.5 + */ + interface $zp { + /** + * 全局配置 + */ + config : Record; + } + global { + interface Uni { + $zp : $zp + } + } +} + +declare type ZPagingSwiperRef = typeof import('./comps/z-paging-swiper')['ZPagingSwiperRef'] +declare type ZPagingSwiperItemRef = typeof import('./comps/z-paging-swiper-item')['ZPagingSwiperItemRef'] \ No newline at end of file diff --git a/lib/luch-request/adapters/index.js b/lib/luch-request/adapters/index.js new file mode 100644 index 0000000..617d3a5 --- /dev/null +++ b/lib/luch-request/adapters/index.js @@ -0,0 +1,99 @@ +import buildURL from '../helpers/buildURL' +import buildFullPath from '../core/buildFullPath' +import settle from '../core/settle' +import { isUndefined } from "../utils" + +/** + * 返回可选值存在的配置 + * @param {Array} keys - 可选值数组 + * @param {Object} config2 - 配置 + * @return {{}} - 存在的配置项 + */ +const mergeKeys = (keys, config2) => { + let config = {} + keys.forEach(prop => { + if (!isUndefined(config2[prop])) { + config[prop] = config2[prop] + } + }) + return config +} +export default (config) => { + return new Promise((resolve, reject) => { + let fullPath = buildURL(buildFullPath(config.baseURL, config.url), config.params) + const _config = { + url: fullPath, + header: config.header, + complete: (response) => { + config.fullPath = fullPath + response.config = config + try { + // 对可能字符串不是json 的情况容错 + if (typeof response.data === 'string') { + response.data = JSON.parse(response.data) + } + // eslint-disable-next-line no-empty + } catch (e) { + } + settle(resolve, reject, response) + } + } + let requestTask + if (config.method === 'UPLOAD') { + delete _config.header['content-type'] + delete _config.header['Content-Type'] + let otherConfig = { + // #ifdef MP-ALIPAY + fileType: config.fileType, + // #endif + filePath: config.filePath, + name: config.name + } + const optionalKeys = [ + // #ifdef APP-PLUS || H5 + 'files', + // #endif + // #ifdef H5 + 'file', + // #endif + // #ifdef H5 || APP-PLUS + 'timeout', + // #endif + 'formData' + ] + requestTask = uni.uploadFile({..._config, ...otherConfig, ...mergeKeys(optionalKeys, config)}) + } else if (config.method === 'DOWNLOAD') { + // #ifdef H5 || APP-PLUS + if (!isUndefined(config['timeout'])) { + _config['timeout'] = config['timeout'] + } + // #endif + requestTask = uni.downloadFile(_config) + } else { + const optionalKeys = [ + 'data', + 'method', + // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN + 'timeout', + // #endif + 'dataType', + // #ifndef MP-ALIPAY || APP-PLUS + 'responseType', + // #endif + // #ifdef APP-PLUS + 'sslVerify', + // #endif + // #ifdef H5 + 'withCredentials', + // #endif + // #ifdef APP-PLUS + 'firstIpv4', + // #endif + ] + requestTask = uni.request({..._config,...mergeKeys(optionalKeys, config)}) + } + if (config.getTask) { + config.getTask(requestTask, config) + } + }) +} diff --git a/lib/luch-request/core/InterceptorManager.js b/lib/luch-request/core/InterceptorManager.js new file mode 100644 index 0000000..742e61b --- /dev/null +++ b/lib/luch-request/core/InterceptorManager.js @@ -0,0 +1,51 @@ +'use strict' + + +function InterceptorManager() { + this.handlers = [] +} + +/** + * Add a new interceptor to the stack + * + * @param {Function} fulfilled The function to handle `then` for a `Promise` + * @param {Function} rejected The function to handle `reject` for a `Promise` + * + * @return {Number} An ID used to remove interceptor later + */ +InterceptorManager.prototype.use = function use(fulfilled, rejected) { + this.handlers.push({ + fulfilled: fulfilled, + rejected: rejected + }) + return this.handlers.length - 1 +} + +/** + * Remove an interceptor from the stack + * + * @param {Number} id The ID that was returned by `use` + */ +InterceptorManager.prototype.eject = function eject(id) { + if (this.handlers[id]) { + this.handlers[id] = null + } +} + +/** + * Iterate over all the registered interceptors + * + * This method is particularly useful for skipping over any + * interceptors that may have become `null` calling `eject`. + * + * @param {Function} fn The function to call for each interceptor + */ +InterceptorManager.prototype.forEach = function forEach(fn) { + this.handlers.forEach(h => { + if (h !== null) { + fn(h) + } + }) +} + +export default InterceptorManager diff --git a/lib/luch-request/core/Request.js b/lib/luch-request/core/Request.js new file mode 100644 index 0000000..e8d8639 --- /dev/null +++ b/lib/luch-request/core/Request.js @@ -0,0 +1,199 @@ +/** + * @Class Request + * @description luch-request http请求插件 + * @version 3.0.5 + * @Author lu-ch + * @Date 2021-01-06 + * @Email webwork.s@qq.com + * 文档: https://www.quanzhan.co/luch-request/ + * github: https://github.com/lei-mu/luch-request + * DCloud: http://ext.dcloud.net.cn/plugin?id=392 + * HBuilderX: beat-3.0.4 alpha-3.0.4 + */ + + +import dispatchRequest from './dispatchRequest' +import InterceptorManager from './InterceptorManager' +import mergeConfig from './mergeConfig' +import defaults from './defaults' +import { isPlainObject } from '../utils' + +export default class Request { + /** + * @param {Object} arg - 全局配置 + * @param {String} arg.baseURL - 全局根路径 + * @param {Object} arg.header - 全局header + * @param {String} arg.method = [GET|POST|PUT|DELETE|CONNECT|HEAD|OPTIONS|TRACE] - 全局默认请求方式 + * @param {String} arg.dataType = [json] - 全局默认的dataType + * @param {String} arg.responseType = [text|arraybuffer] - 全局默认的responseType。App和支付宝小程序不支持 + * @param {Object} arg.custom - 全局默认的自定义参数 + * @param {Number} arg.timeout - 全局默认的超时时间，单位 ms。默认60000。H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序 + * @param {Boolean} arg.sslVerify - 全局默认的是否验证 ssl 证书。默认true.仅App安卓端支持（HBuilderX 2.3.3+） + * @param {Boolean} arg.withCredentials - 全局默认的跨域请求时是否携带凭证（cookies）。默认false。仅H5支持（HBuilderX 2.6.15+） + * @param {Boolean} arg.firstIpv4 - 全DNS解析时优先使用ipv4。默认false。仅 App-Android 支持 (HBuilderX 2.8.0+) + * @param {Function(statusCode):Boolean} arg.validateStatus - 全局默认的自定义验证器。默认statusCode >= 200 && statusCode < 300 + */ + constructor(arg = {}) { + if (!isPlainObject(arg)) { + arg = {} + console.warn('设置全局参数必须接收一个Object') + } + this.config = {...defaults, ...arg} + this.interceptors = { + request: new InterceptorManager(), + response: new InterceptorManager() + } + } + + /** + * @Function + * @param {Request~setConfigCallback} f - 设置全局默认配置 + */ + setConfig(f) { + this.config = f(this.config) + } + + middleware(config) { + config = mergeConfig(this.config, config) + let chain = [dispatchRequest, undefined] + let promise = Promise.resolve(config) + + this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { + chain.unshift(interceptor.fulfilled, interceptor.rejected) + }) + + this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { + chain.push(interceptor.fulfilled, interceptor.rejected) + }) + + while (chain.length) { + promise = promise.then(chain.shift(), chain.shift()) + } + + return promise + } + + /** + * @Function + * @param {Object} config - 请求配置项 + * @prop {String} options.url - 请求路径 + * @prop {Object} options.data - 请求参数 + * @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型 + * @prop {Object} [options.dataType = config.dataType] - 如果设为 json，会尝试对返回的数据做一次 JSON.parse + * @prop {Object} [options.header = config.header] - 请求header + * @prop {Object} [options.method = config.method] - 请求方法 + * @returns {Promise} + */ + request(config = {}) { + return this.middleware(config) + } + + get(url, options = {}) { + return this.middleware({ + url, + method: 'GET', + ...options + }) + } + + post(url, data, options = {}) { + return this.middleware({ + url, + data, + method: 'POST', + ...options + }) + } + + // #ifndef MP-ALIPAY + put(url, data, options = {}) { + return this.middleware({ + url, + data, + method: 'PUT', + ...options + }) + } + + // #endif + + // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU + delete(url, data, options = {}) { + return this.middleware({ + url, + data, + method: 'DELETE', + ...options + }) + } + + // #endif + + // #ifdef H5 || MP-WEIXIN + connect(url, data, options = {}) { + return this.middleware({ + url, + data, + method: 'CONNECT', + ...options + }) + } + + // #endif + + // #ifdef H5 || MP-WEIXIN || MP-BAIDU + head(url, data, options = {}) { + return this.middleware({ + url, + data, + method: 'HEAD', + ...options + }) + } + + // #endif + + // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU + options(url, data, options = {}) { + return this.middleware({ + url, + data, + method: 'OPTIONS', + ...options + }) + } + + // #endif + + // #ifdef H5 || MP-WEIXIN + trace(url, data, options = {}) { + return this.middleware({ + url, + data, + method: 'TRACE', + ...options + }) + } + + // #endif + + upload(url, config = {}) { + config.url = url + config.method = 'UPLOAD' + return this.middleware(config) + } + + download(url, config = {}) { + config.url = url + config.method = 'DOWNLOAD' + return this.middleware(config) + } +} + + +/** + * setConfig回调 + * @return {Object} - 返回操作后的config + * @callback Request~setConfigCallback + * @param {Object} config - 全局默认config + */ diff --git a/lib/luch-request/core/buildFullPath.js b/lib/luch-request/core/buildFullPath.js new file mode 100644 index 0000000..459d64f --- /dev/null +++ b/lib/luch-request/core/buildFullPath.js @@ -0,0 +1,20 @@ +'use strict' + +import isAbsoluteURL from '../helpers/isAbsoluteURL' +import combineURLs from '../helpers/combineURLs' + +/** + * Creates a new URL by combining the baseURL with the requestedURL, + * only when the requestedURL is not already an absolute URL. + * If the requestURL is absolute, this function returns the requestedURL untouched. + * + * @param {string} baseURL The base URL + * @param {string} requestedURL Absolute or relative URL to combine + * @returns {string} The combined full path + */ +export default function buildFullPath(baseURL, requestedURL) { + if (baseURL && !isAbsoluteURL(requestedURL)) { + return combineURLs(baseURL, requestedURL) + } + return requestedURL +} diff --git a/lib/luch-request/core/defaults.js b/lib/luch-request/core/defaults.js new file mode 100644 index 0000000..1d27ef1 --- /dev/null +++ b/lib/luch-request/core/defaults.js @@ -0,0 +1,30 @@ +/** + * 默认的全局配置 + */ + + +export default { + baseURL: '', + header: {}, + method: 'GET', + dataType: 'json', + // #ifndef MP-ALIPAY || APP-PLUS + responseType: 'text', + // #endif + custom: {}, + // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN + timeout: 60000, + // #endif + // #ifdef APP-PLUS + sslVerify: true, + // #endif + // #ifdef H5 + withCredentials: false, + // #endif + // #ifdef APP-PLUS + firstIpv4: false, + // #endif + validateStatus: function validateStatus(status) { + return status >= 200 && status < 300 + } +} diff --git a/lib/luch-request/core/dispatchRequest.js b/lib/luch-request/core/dispatchRequest.js new file mode 100644 index 0000000..597b9ab --- /dev/null +++ b/lib/luch-request/core/dispatchRequest.js @@ -0,0 +1,6 @@ +import adapter from '../adapters/index' + + +export default (config) => { + return adapter(config) +} diff --git a/lib/luch-request/core/mergeConfig.js b/lib/luch-request/core/mergeConfig.js new file mode 100644 index 0000000..35b4a84 --- /dev/null +++ b/lib/luch-request/core/mergeConfig.js @@ -0,0 +1,103 @@ +import {deepMerge, isUndefined} from '../utils' + +/** + * 合并局部配置优先的配置，如果局部有该配置项则用局部，如果全局有该配置项则用全局 + * @param {Array} keys - 配置项 + * @param {Object} globalsConfig - 当前的全局配置 + * @param {Object} config2 - 局部配置 + * @return {{}} + */ +const mergeKeys = (keys, globalsConfig, config2) => { + let config = {} + keys.forEach(prop => { + if (!isUndefined(config2[prop])) { + config[prop] = config2[prop] + } else if (!isUndefined(globalsConfig[prop])) { + config[prop] = globalsConfig[prop] + } + }) + return config +} +/** + * + * @param globalsConfig - 当前实例的全局配置 + * @param config2 - 当前的局部配置 + * @return - 合并后的配置 + */ +export default (globalsConfig, config2 = {}) => { + const method = config2.method || globalsConfig.method || 'GET' + let config = { + baseURL: globalsConfig.baseURL || '', + method: method, + url: config2.url || '', + params: config2.params || {}, + custom: {...(globalsConfig.custom || {}), ...(config2.custom || {})}, + header: deepMerge(globalsConfig.header || {}, config2.header || {}) + } + const defaultToConfig2Keys = ['getTask', 'validateStatus'] + config = {...config, ...mergeKeys(defaultToConfig2Keys, globalsConfig, config2)} + + // eslint-disable-next-line no-empty + if (method === 'DOWNLOAD') { + // #ifdef H5 || APP-PLUS + if (!isUndefined(config2.timeout)) { + config['timeout'] = config2['timeout'] + } else if (!isUndefined(globalsConfig.timeout)) { + config['timeout'] = globalsConfig['timeout'] + } + // #endif + } else if (method === 'UPLOAD') { + delete config.header['content-type'] + delete config.header['Content-Type'] + const uploadKeys = [ + // #ifdef APP-PLUS || H5 + 'files', + // #endif + // #ifdef MP-ALIPAY + 'fileType', + // #endif + // #ifdef H5 + 'file', + // #endif + 'filePath', + 'name', + // #ifdef H5 || APP-PLUS + 'timeout', + // #endif + 'formData', + ] + uploadKeys.forEach(prop => { + if (!isUndefined(config2[prop])) { + config[prop] = config2[prop] + } + }) + // #ifdef H5 || APP-PLUS + if (isUndefined(config.timeout) && !isUndefined(globalsConfig.timeout)) { + config['timeout'] = globalsConfig['timeout'] + } + // #endif + } else { + const defaultsKeys = [ + 'data', + // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN + 'timeout', + // #endif + 'dataType', + // #ifndef MP-ALIPAY || APP-PLUS + 'responseType', + // #endif + // #ifdef APP-PLUS + 'sslVerify', + // #endif + // #ifdef H5 + 'withCredentials', + // #endif + // #ifdef APP-PLUS + 'firstIpv4', + // #endif + ] + config = {...config, ...mergeKeys(defaultsKeys, globalsConfig, config2)} + } + + return config +} diff --git a/lib/luch-request/core/settle.js b/lib/luch-request/core/settle.js new file mode 100644 index 0000000..a96e3fd --- /dev/null +++ b/lib/luch-request/core/settle.js @@ -0,0 +1,16 @@ +/** + * Resolve or reject a Promise based on response status. + * + * @param {Function} resolve A function that resolves the promise. + * @param {Function} reject A function that rejects the promise. + * @param {object} response The response. + */ +export default function settle(resolve, reject, response) { + const validateStatus = response.config.validateStatus + const status = response.statusCode + if (status && (!validateStatus || validateStatus(status))) { + resolve(response) + } else { + reject(response) + } +} diff --git a/lib/luch-request/helpers/buildURL.js b/lib/luch-request/helpers/buildURL.js new file mode 100644 index 0000000..b27a19a --- /dev/null +++ b/lib/luch-request/helpers/buildURL.js @@ -0,0 +1,69 @@ +'use strict' + +import * as utils from './../utils' + +function encode(val) { + return encodeURIComponent(val). + replace(/%40/gi, '@'). + replace(/%3A/gi, ':'). + replace(/%24/g, '$'). + replace(/%2C/gi, ','). + replace(/%20/g, '+'). + replace(/%5B/gi, '['). + replace(/%5D/gi, ']') +} + +/** + * Build a URL by appending params to the end + * + * @param {string} url The base of the url (e.g., http://www.google.com) + * @param {object} [params] The params to be appended + * @returns {string} The formatted url + */ +export default function buildURL(url, params) { + /*eslint no-param-reassign:0*/ + if (!params) { + return url + } + + var serializedParams + if (utils.isURLSearchParams(params)) { + serializedParams = params.toString() + } else { + var parts = [] + + utils.forEach(params, function serialize(val, key) { + if (val === null || typeof val === 'undefined') { + return + } + + if (utils.isArray(val)) { + key = key + '[]' + } else { + val = [val] + } + + utils.forEach(val, function parseValue(v) { + if (utils.isDate(v)) { + v = v.toISOString() + } else if (utils.isObject(v)) { + v = JSON.stringify(v) + } + parts.push(encode(key) + '=' + encode(v)) + }) + }) + + serializedParams = parts.join('&') + } + + if (serializedParams) { + var hashmarkIndex = url.indexOf('#') + if (hashmarkIndex !== -1) { + url = url.slice(0, hashmarkIndex) + } + + url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams + } + + return url +} diff --git a/lib/luch-request/helpers/combineURLs.js b/lib/luch-request/helpers/combineURLs.js new file mode 100644 index 0000000..87ca469 --- /dev/null +++ b/lib/luch-request/helpers/combineURLs.js @@ -0,0 +1,14 @@ +'use strict' + +/** + * Creates a new URL by combining the specified URLs + * + * @param {string} baseURL The base URL + * @param {string} relativeURL The relative URL + * @returns {string} The combined URL + */ +export default function combineURLs(baseURL, relativeURL) { + return relativeURL + ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '') + : baseURL +} diff --git a/lib/luch-request/helpers/isAbsoluteURL.js b/lib/luch-request/helpers/isAbsoluteURL.js new file mode 100644 index 0000000..5e4eabe --- /dev/null +++ b/lib/luch-request/helpers/isAbsoluteURL.js @@ -0,0 +1,14 @@ +'use strict' + +/** + * Determines whether the specified URL is absolute + * + * @param {string} url The URL to test + * @returns {boolean} True if the specified URL is absolute, otherwise false + */ +export default function isAbsoluteURL(url) { + // A URL is considered absolute if it begins with "://" or "//" (protocol-relative URL). + // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed + // by any combination of letters, digits, plus, period, or hyphen. + return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url) +} diff --git a/lib/luch-request/index.d.ts b/lib/luch-request/index.d.ts new file mode 100644 index 0000000..1b6f436 --- /dev/null +++ b/lib/luch-request/index.d.ts @@ -0,0 +1,116 @@ +type AnyObject = Record +type HttpPromise = Promise>; +type Tasks = UniApp.RequestTask | UniApp.UploadTask | UniApp.DownloadTask +export interface RequestTask { + abort: () => void; + offHeadersReceived: () => void; + onHeadersReceived: () => void; +} +export interface HttpRequestConfig { + /** 请求基地址 */ + baseURL?: string; + /** 请求服务器接口地址 */ + url?: string; + + /** 请求查询参数，自动拼接为查询字符串 */ + params?: AnyObject; + /** 请求体参数 */ + data?: AnyObject; + + /** 文件对应的 key */ + name?: string; + /** HTTP 请求中其他额外的 form data */ + formData?: AnyObject; + /** 要上传文件资源的路径。 */ + filePath?: string; + /** 需要上传的文件列表。使用 files 时，filePath 和 name 不生效，App、H5（ 2.6.15+） */ + files?: Array<{ + name?: string; + file?: File; + uri: string; + }>; + /** 要上传的文件对象，仅H5（2.6.15+）支持 */ + file?: File; + + /** 请求头信息 */ + header?: AnyObject; + /** 请求方式 */ + method?: "GET" | "POST" | "PUT" | "DELETE" | "CONNECT" | "HEAD" | "OPTIONS" | "TRACE" | "UPLOAD" | "DOWNLOAD"; + /** 如果设为 json，会尝试对返回的数据做一次 JSON.parse */ + dataType?: string; + /** 设置响应的数据类型，App和支付宝小程序不支持 */ + responseType?: "text" | "arraybuffer"; + /** 自定义参数 */ + custom?: AnyObject; + /** 超时时间，仅微信小程序（2.10.0）、支付宝小程序支持 */ + timeout?: number; + /** DNS解析时优先使用ipv4，仅 App-Android 支持 (HBuilderX 2.8.0+) */ + firstIpv4?: boolean; + /** 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+） */ + sslVerify?: boolean; + /** 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+） */ + withCredentials?: boolean; + + /** 返回当前请求的task, options。请勿在此处修改options。 */ + getTask?: (task: T, options: HttpRequestConfig) => void; + /** 全局自定义验证器 */ + validateStatus?: (statusCode: number) => boolean | void; +} +export interface HttpResponse { + config: HttpRequestConfig; + statusCode: number; + cookies: Array; + data: T; + errMsg: string; + header: AnyObject; +} +export interface HttpUploadResponse { + config: HttpRequestConfig; + statusCode: number; + data: T; + errMsg: string; +} +export interface HttpDownloadResponse extends HttpResponse { + tempFilePath: string; +} +export interface HttpError { + config: HttpRequestConfig; + statusCode?: number; + cookies?: Array; + data?: any; + errMsg: string; + header?: AnyObject; +} +export interface HttpInterceptorManager { + use( + onFulfilled?: (config: V) => Promise | V, + onRejected?: (config: E) => Promise | E + ): void; + eject(id: number): void; +} +export abstract class HttpRequestAbstract { + constructor(config?: HttpRequestConfig); + config: HttpRequestConfig; + interceptors: { + request: HttpInterceptorManager; + response: HttpInterceptorManager; + } + middleware(config: HttpRequestConfig): HttpPromise; + request(config: HttpRequestConfig): HttpPromise; + get(url: string, config?: HttpRequestConfig): HttpPromise; + upload(url: string, config?: HttpRequestConfig): HttpPromise; + delete(url: string, data?: AnyObject, config?: HttpRequestConfig): HttpPromise; + head(url: string, data?: AnyObject, config?: HttpRequestConfig): HttpPromise; + post(url: string, data?: AnyObject, config?: HttpRequestConfig): HttpPromise; + put(url: string, data?: AnyObject, config?: HttpRequestConfig): HttpPromise; + connect(url: string, data?: AnyObject, config?: HttpRequestConfig): HttpPromise; + options(url: string, data?: AnyObject, config?: HttpRequestConfig): HttpPromise; + trace(url: string, data?: AnyObject, config?: HttpRequestConfig): HttpPromise; + + download(url: string, config?: HttpRequestConfig): Promise; + + setConfig(onSend: (config: HttpRequestConfig) => HttpRequestConfig): void; +} + +declare class HttpRequest extends HttpRequestAbstract { } +export default HttpRequest; diff --git a/lib/luch-request/index.js b/lib/luch-request/index.js new file mode 100644 index 0000000..b6b7e99 --- /dev/null +++ b/lib/luch-request/index.js @@ -0,0 +1,2 @@ +import Request from './core/Request' +export default Request diff --git a/lib/luch-request/utils.js b/lib/luch-request/utils.js new file mode 100644 index 0000000..cc7004d --- /dev/null +++ b/lib/luch-request/utils.js @@ -0,0 +1,135 @@ +'use strict' + +// utils is a library of generic helper functions non-specific to axios + +var toString = Object.prototype.toString + +/** + * Determine if a value is an Array + * + * @param {Object} val The value to test + * @returns {boolean} True if value is an Array, otherwise false + */ +export function isArray (val) { + return toString.call(val) === '[object Array]' +} + + +/** + * Determine if a value is an Object + * + * @param {Object} val The value to test + * @returns {boolean} True if value is an Object, otherwise false + */ +export function isObject (val) { + return val !== null && typeof val === 'object' +} + +/** + * Determine if a value is a Date + * + * @param {Object} val The value to test + * @returns {boolean} True if value is a Date, otherwise false + */ +export function isDate (val) { + return toString.call(val) === '[object Date]' +} + +/** + * Determine if a value is a URLSearchParams object + * + * @param {Object} val The value to test + * @returns {boolean} True if value is a URLSearchParams object, otherwise false + */ +export function isURLSearchParams (val) { + return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams +} + + +/** + * Iterate over an Array or an Object invoking a function for each item. + * + * If `obj` is an Array callback will be called passing + * the value, index, and complete array for each item. + * + * If 'obj' is an Object callback will be called passing + * the value, key, and complete object for each property. + * + * @param {Object|Array} obj The object to iterate + * @param {Function} fn The callback to invoke for each item + */ +export function forEach (obj, fn) { + // Don't bother if no value provided + if (obj === null || typeof obj === 'undefined') { + return + } + + // Force an array if not already something iterable + if (typeof obj !== 'object') { + /*eslint no-param-reassign:0*/ + obj = [obj] + } + + if (isArray(obj)) { + // Iterate over array values + for (var i = 0, l = obj.length; i < l; i++) { + fn.call(null, obj[i], i, obj) + } + } else { + // Iterate over object keys + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) { + fn.call(null, obj[key], key, obj) + } + } + } +} + +/** + * 是否为boolean 值 + * @param val + * @returns {boolean} + */ +export function isBoolean(val) { + return typeof val === 'boolean' +} + +/** + * 是否为真正的对象{} new Object + * @param {any} obj - 检测的对象 + * @returns {boolean} + */ +export function isPlainObject(obj) { + return Object.prototype.toString.call(obj) === '[object Object]' +} + + + +/** + * Function equal to merge with the difference being that no reference + * to original objects is kept. + * + * @see merge + * @param {Object} obj1 Object to merge + * @returns {Object} Result of all merge properties + */ +export function deepMerge(/* obj1, obj2, obj3, ... */) { + let result = {} + function assignValue(val, key) { + if (typeof result[key] === 'object' && typeof val === 'object') { + result[key] = deepMerge(result[key], val) + } else if (typeof val === 'object') { + result[key] = deepMerge({}, val) + } else { + result[key] = val + } + } + for (let i = 0, l = arguments.length; i < l; i++) { + forEach(arguments[i], assignValue) + } + return result +} + +export function isUndefined (val) { + return typeof val === 'undefined' +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..efd6b2e --- /dev/null +++ b/main.js @@ -0,0 +1,17 @@ +import App from './App' +import globalMixin from './mixins/global' +import { createSSRApp } from 'vue' +import './uni.promisify.adaptor' + +uni.$zp = { + config: { + 'empty-view-text': '空空如也~~', + 'refresher-enabled': true, + }, +} + +export function createApp() { + const app = createSSRApp(App) + app.use(globalMixin) + return { app } +} diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..6da07ea --- /dev/null +++ b/manifest.json @@ -0,0 +1,25 @@ +{ + "name" : "", + "appid" : "", + "description" : "", + "versionName" : "1.0.0", + "versionCode" : "100", + "vueVersion" : "3", + "uniStatistics" : { + "enable" : false + }, + "mp-weixin" : { + "appid" : "", + "setting" : { + "urlCheck" : false, + "es6" : true, + "postcss" : true, + "minified" : true + }, + "lazyCodeLoading" : "requiredComponents", + "usingComponents" : true, + "optimization" : { + "subPackages" : true + } + } +} diff --git a/mixins/global.js b/mixins/global.js new file mode 100644 index 0000000..21cf0cd --- /dev/null +++ b/mixins/global.js @@ -0,0 +1,17 @@ +const ASSETSURL = import.meta.env.VITE_ASSETSURL + +export default { + install(app) { + app.mixin({ + data() { + return { + // 资源地址 + ASSETSURL, + } + }, + onLoad() {}, + onShow() {}, + methods: {}, + }) + }, +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..f4c35a2 --- /dev/null +++ b/package.json @@ -0,0 +1,7 @@ +{ + "dependencies": { + "dotenv": "^17.2.2", + "moment": "*", + "vue": "^3.5.21" + } +} diff --git a/pages.json b/pages.json new file mode 100644 index 0000000..f3e769f --- /dev/null +++ b/pages.json @@ -0,0 +1,24 @@ +{ + "pages": [ + { + "path": "pages/index/index" + } + ], + "subPackages": [ + { + "root": "subPages", + "pages": [] + } + ], + "easycom": { + "autoscan": true, + "custom": { + } + }, + "globalStyle": { + "navigationBarTextStyle": "black", + "navigationBarTitleText": "miniprogram", + "navigationBarBackgroundColor": "#F8F8F8", + "backgroundColor": "#F8F8F8" + } +} diff --git a/pages/index/index.vue b/pages/index/index.vue new file mode 100644 index 0000000..6ff5ec6 --- /dev/null +++ b/pages/index/index.vue @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/store/index.js b/store/index.js new file mode 100644 index 0000000..de760dc --- /dev/null +++ b/store/index.js @@ -0,0 +1,12 @@ +import { createStore } from 'vuex' + +const store = createStore({ + state() { + return {} + }, + mutations: {}, + actions: {}, + getters: {}, +}) + +export default store diff --git a/uni.promisify.adaptor.js b/uni.promisify.adaptor.js new file mode 100644 index 0000000..d281951 --- /dev/null +++ b/uni.promisify.adaptor.js @@ -0,0 +1,13 @@ +uni.addInterceptor({ + returnValue (res) { + if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) { + return res; + } + return new Promise((resolve, reject) => { + res.then((res) => { + if (!res) return resolve(res) + return res[0] ? reject(res[0]) : resolve(res[1]) + }); + }); + }, +}); \ No newline at end of file diff --git a/uni.scss b/uni.scss new file mode 100644 index 0000000..60c5dad --- /dev/null +++ b/uni.scss @@ -0,0 +1,76 @@ +/** + * 这里是uni-app内置的常用样式变量 + * + * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量 + * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App + * + */ + +/** + * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 + * + * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 + */ +@import '@/uview-plus/theme.scss'; +/* 颜色变量 */ + +/* 行为相关颜色 */ +$uni-color-primary: #007aff; +$uni-color-success: #4cd964; +$uni-color-warning: #f0ad4e; +$uni-color-error: #dd524d; + +/* 文字基本颜色 */ +$uni-text-color:#333;//基本色 +$uni-text-color-inverse:#fff;//反色 +$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息 +$uni-text-color-placeholder: #808080; +$uni-text-color-disable:#c0c0c0; + +/* 背景颜色 */ +$uni-bg-color:#ffffff; +$uni-bg-color-grey:#f8f8f8; +$uni-bg-color-hover:#f1f1f1;//点击状态颜色 +$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 + +/* 边框颜色 */ +$uni-border-color:#c8c7cc; + +/* 尺寸变量 */ + +/* 文字尺寸 */ +$uni-font-size-sm:12px; +$uni-font-size-base:14px; +$uni-font-size-lg:16px; + +/* 图片尺寸 */ +$uni-img-size-sm:20px; +$uni-img-size-base:26px; +$uni-img-size-lg:40px; + +/* Border Radius */ +$uni-border-radius-sm: 2px; +$uni-border-radius-base: 3px; +$uni-border-radius-lg: 6px; +$uni-border-radius-circle: 50%; + +/* 水平间距 */ +$uni-spacing-row-sm: 5px; +$uni-spacing-row-base: 10px; +$uni-spacing-row-lg: 15px; + +/* 垂直间距 */ +$uni-spacing-col-sm: 4px; +$uni-spacing-col-base: 8px; +$uni-spacing-col-lg: 12px; + +/* 透明度 */ +$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 + +/* 文章场景相关 */ +$uni-color-title: #2C405A; // 文章标题颜色 +$uni-font-size-title:20px; +$uni-color-subtitle: #555555; // 二级标题颜色 +$uni-font-size-subtitle:26px; +$uni-color-paragraph: #3F536E; // 文章段落颜色 +$uni-font-size-paragraph:15px; \ No newline at end of file diff --git a/uview-plus/LICENSE b/uview-plus/LICENSE new file mode 100644 index 0000000..893530a --- /dev/null +++ b/uview-plus/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 https://uiadmin.net/uview-plus + +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. \ No newline at end of file diff --git a/uview-plus/README.md b/uview-plus/README.md new file mode 100644 index 0000000..d9e44df --- /dev/null +++ b/uview-plus/README.md @@ -0,0 +1,74 @@ +

+ logo +

+

uview-plus 3.0

+

多平台快速开发的UI框架

+ +[![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) +[![release](https://img.shields.io/github/v/release/ijry/uview-plus?style=flat-square)](https://gitee.com/jry/uview-plus/releases) +[![license](https://img.shields.io/github/license/ijry/uview-plus?style=flat-square)](https://en.wikipedia.org/wiki/MIT_License) + +## 说明 + +uview-plus，是uni-app全面兼容vue3/nvue/鸿蒙/uni-app-x的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。uview-plus是基于uView2.x移植的支持vue3的版本，感谢uView。 + +## 可视化设计 + +uview-plus现已推出免费可视化设计，可以方便的进行页面可视化设计，导出源码即可使用。极大提高前端页面开发效率；如产品经理设计师直接使用更可作为高保真高可用原型制作工具，让设计稿即代码，无需传统的设计稿开发还原步骤。 + + + + + +## 文档 +[官方文档：https://uview-plus.jiangruyi.com](https://uview-plus.jiangruyi.com) +[备用文档：https://uiadmin.net/uview-plus](https://uiadmin.net/uview-plus) + + +## 预览 + +您可以通过**微信**扫码，查看最佳的演示效果。 +
+
+ + +## 链接 + +- [官方文档](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) + +## 交流反馈 + +欢迎加入我们的QQ群交流反馈：[点此跳转](https://uview-plus.jiangruyi.com/components/addQQGroup.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/install.html)了解更详细的内容 + +## 快速上手 + +请通过[快速上手](https://uview-plus.jiangruyi.com/components/quickstart.html)了解更详细的内容 + +## 使用方法 +配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。 + +```html + +``` + +## 版权信息 +uview-plus遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uview-plus应用到您的产品中。 + diff --git a/uview-plus/changelog.md b/uview-plus/changelog.md new file mode 100644 index 0000000..ce63dcf --- /dev/null +++ b/uview-plus/changelog.md @@ -0,0 +1,610 @@ +## 3.3.69（2025-02-19） +picker允许传递禁用颜色props + +slider组件isRange状态下增加min max插槽分开显示内容 + +feat: 新增经典下拉框组件up-select + +## 3.3.68（2025-02-12） +fix: 修复weekText类型 + +feat: 日历增加单选与多选指定禁止选中的日期功能 + +fix: NumberBox删除数字时取值有误 #613 + +## 3.3.67（2025-02-11） +feat: navbar支持返回全局拦截器配置 + +feat: 表单-校验-支持无提示-得到校验结果 + +feat: picker传递hasInput属性时候，可以禁用输入框点击 + +## 3.3.66（2025-02-09） +feat: steps-item增加content插槽 + +## 3.3.65（2025-02-05） +feat: number-box组件新增按钮圆角/按钮宽度/数据框背景色/迷你模式 +## 3.3.64（2025-01-18） +feat: 日历组件支持自定义星期文案 + +## 3.3.63（2025-01-13） +fix: cate-tab支持支付宝小程序 + +fix: textarea 修复 placeholder-style + +fix: 修复在图片加载及加载失败时容器宽度 + +fix: waterfall组件报错Maximum recursive updates + +## 3.3.62（2025-01-10） +feat: sleder滑动选择器双滑块增加外层触发值的变动功能 + +fix: picker支持hasInput优化 + +## 3.3.61（2024-12-31） +fix: 修复微信getSystemInfoSync接口废弃警告 + +fix: 'u-status-bar' symbol missing + +## 3.3.60（2024-12-30） +feat: 日期组件支持禁用 + +fix: ts定义修复 #600 + +feat: Tabs组件选中时增加一个active的class #595 + +## 3.3.59（2024-12-30） +fix: Property "isH5" was accessed during render + +## 3.3.58（2024-12-26） +fix: slider组件change事件传参 + +## 3.3.57（2024-12-23） +fix: slider组件change事件传参 + +feat: 更新u-picker组件增加当前选中class类名 + +## 3.3.56（2024-12-18） +feat: 在u-alert组件中添加关闭事件 + +## 3.3.55（2024-12-17） +add: swiper增加双向绑定 + +## 3.3.54（2024-12-11） +add: qrcode支持props控制是否开启点击预览 + +add: 新增cate-tab垂直分类组件 + +## 3.3.53（2024-12-10） +fix: 修复popup居中模式点击内容区域触发关闭 + +## 3.3.52（2024-12-09） +add: notice-bar支持justifyContent属性 + +## 3.3.51（2024-12-09） +add: radio增加label插槽 + +## 3.3.50（2024-12-05） +fix: 优化popup等对禁止背景滚动机制 + +add: slider在弹窗使用示例 + +fix: card组件类名问题 + +## 3.3.49（2024-12-02） +fix: 去除album多余的$u引用 + +fix: 优化图片组件兼容性 + +add: picker组件增加zIndex属性 + +add: text增加是否占满剩余空间属性 + +add: input颜色示例 + +## 3.3.48（2024-11-29） +add: 文本行数限制样式提高到10行 + +del: 去除不跨端的inputmode +## 3.3.47（2024-11-28） +fix: 时间选择器在hasInput模式下部分机型键盘弹出 + +## 3.3.46（2024-11-26） +fix: 修复text传递事件参数 + +## 3.3.45（2024-11-24） +add: navbar组件支持配置标题颜色 + +fix: 边框按钮警告类型下颜色变量使用错误 + +## 3.3.43（2024-11-18） +fix: 支持瀑布流组件v-model置为[] + +add: 新增字符串路径访问工具方法getValueByPath + +add: 新增float-button悬浮按钮组件 + +## 3.3.42（2024-11-15） +add: button组件支持stop参数阻止冒泡 + +## 3.3.41（2024-11-13） +fix: u-radio-group invalid import + +improvement: 优化图片组件宽高及修复事件event传递 + +## 3.3.40（2024-11-11） +add: 组件radioGroup增加gap属性用于设置item间隔 + +fix: 修复H5全局导入 + +## 3.3.39（2024-11-04） +fix: 修复相册组件 + +## 3.3.38（2024-11-04） +fix: 修复视频预览报错 #510 + +add: album组件增加stop参数支持阻止事件冒泡 + +## 3.3.37（2024-10-21） +fix: 修复因为修改组件名称前缀，导致h5打包后$parent方法内找不到父组件的问题 + +fix: 修复datetime-picker选择2000年以前日期出错 + +## 3.3.36（2024-10-09） +fix: toast 自动关闭 + +feat: 增加微信小程序用户昵称审核完毕回调及修改 ts 定义文件 + +## 3.3.35（2024-10-08） +feat: modal和picker支持v-model:show双向绑定 + +feat: 支持checkbox使用slot自定义label后自带点击事件 #522 + +feat: swipe-action支持自动关闭特性及初始化打开状态 + +## 3.3.34（2024-09-23） +feat: 支持toast设置duration值为-1时不自动关闭 + +## 3.3.33（2024-09-18） +fix: 修复test.date('008')等验证结果不准确 + +## 3.3.32（2024-09-09） +fix: u-keyboard名称冲突warning + +## 3.3.31（2024-08-31） +feat: qrcode初步支持nvue + +## 3.3.30（2024-08-30） +fix: slider兼容step为字符串类型 + +## 3.3.29（2024-08-30） +fix: 修复tabs组件current参数为字符串处理逻辑 + +## 3.3.28（2024-08-26） +fix: list组件滑动偏移量不一样取绝对值导致iOS下拉偏移量计算错误 + +## 3.3.27（2024-08-22） +fix: 修复up-datetime-picker组件toolbarRightSlot定义缺失 + +fix: 修复FormItem的rules更新错误的问题 + +## 3.3.26（2024-08-22） +fix: 批量注册全局组件优化 + +## 3.3.25（2024-08-21） +fix: 修复slider在app-vue下样式问题 + +## 3.3.24（2024-08-19） +fix: 修复时间选择器hasInput模式小程序不生效 + +feat: 支持H5导入所有组件 + +## 3.3.23（2024-08-17） +feat: swipe-action增加closeAll方法 + +fix: 兼容tabs在某些场景下index小于0时自动设置为0 + +add: 通用mixin新增navTo页面跳转方法 + +## 3.3.21（2024-08-15） +improvement: 优化二维码组件loading及支持预览与长按事件 #351 + +fix: 修复swipe-action自动关闭其它功能及组件卸载自动关闭 + +## 3.3.20（2024-08-15） +refactor: props默认值文件移至组件文件夹内便于查找 +## 3.3.19（2024-08-14） +fix: 修复2被rpx兼容处理只在数字值生效 + +add: 增加swiper自定义插槽示例 + +## 3.3.18（2024-08-13） +feat: 新增支持datetime-picker工具栏插槽及picker插槽支持修复 +## 3.3.17（2024-08-12） +feat: swiper组件增加默认slot便于自定义 + +feat: grid新增间隔参数 + +feat: picker新增toolbar-right和toolbar-bottom插槽 + +## 3.3.16（2024-08-12） +fix: 解决swiper中title换行后多余的内容未被遮挡问题 + +fix: 修复迷你导航适配异形屏 + +## 3.3.15（2024-08-09） +fix: 修复默认单位设置为rpx时一些组件高度间距异常 + +fix: 修复日历在rpx单位下布局异常 + +feat: code-input支持App端展示输入光标 + +## 3.3.14（2024-08-09） +add: 增加box组件 + +add: 增加card卡片组件 + + +## 3.3.13（2024-08-08） +feat: input支持调用原生组件的focus和blur方法 + +improvement: grid-item条件编译优化 + +add: 新增迷你导航组件 + +## 3.3.12（2024-08-06） +improvement: $u挂载时机调整便于打包分离chunk + +fix: steps新增itemStyle属性名称冲突 + +## 3.3.11（2024-08-05） +feat: 新增支持upload组件的deletable/maxCount/accept变更监听 #333 + +feat: 新增支持tabs在swiper中使用 + +feat: 新增FormItem支持独立设置验证规则rules + +fix: 修复index-list未设置$slots.header时索引高亮失效 + +## 3.3.10（2024-08-02） +fix: 修复index-list偶发的滑动最后一个索引报错top不存在 + +fix: 修复gird在QQ、抖音小程序下布局 + +feat: 优化step支持自定义样式prop + +feat: action-sheet组件支持v-model:show双向绑定 + +fix: 小程序下steps和grid都统一采用grid布局 + +fix: 修复支付宝小程序下input类型为数字时双向绑定失效 + +feat : form 表单 validate 校验不通过后 error增加字段prop信息 #304 + +fix: form组件异步校异常验问题 #393 + +## 3.3.9（2024-08-01） +fix: 优化获取nvue元素 + +feat: modal新增contentTextAlign设置文案对齐方式 + +fix: 修复NVUE下tabbar文字不显示 #458 + +feat: loading-page增加zIndex属性 + +fix: 相册在宽度较小时换行问题 + +feat: album相册增加自适应自动换行模式 + +feat: album相册增加图片尺寸单位prop + +fix: 修复calendar日历月份居中 + +## 3.3.8（2024-07-31） +feat: slider支持进度条任意位置触发按钮拖动 + +fix: 修复app-vue下modal标题不居中 + +fix: #459 TS setConfig 声明异常 + +feat: tabs组件增加longPress长按事件 + +feat: 新增showRight属性控制collapse右侧图标显隐 + +fix: 优化nvue下css警告 + +## 3.3.7（2024-07-29） +feat: 支持IndexList组件支持在弹窗等场景下使用及联动优化 + +feat: popup组件支持v-model:show双向绑定 + +feat: 优化tabs的current双向绑定 + +fix: checkbox独立使用时checked赋初始值可以，但是手动切换时值没有做双向绑定！ #455 + +feat: slider组件支持区间双滑块 + +fix: toast 支持自定义图标？可传入了决对路径的 icon也没有用 #409 + +feat: form-item校验失败时 增加class方便自定义显示错误的展示方式 #394 + +fix: up-cell的required配置不生效 #395 + +fix: 横向滚动组件，微信小程序编译后会有警告 #415 + +fix: u-picker内部对默认值defaultIndex的监听 #425 + +feat: toast 组件支持遮掩层穿透 #417 + +fix: 兼容vue的slot编译bug #423 + +fix: upload 微信小程序 点击预览视频报错 #424 + +fix: u-number-box 组件修改【integer, decimalLength, min, max 】props时没有触发绑定值更新 #429 + +feat: Tabs组件能否支持自定义插槽 #439 + +feat: ActionSheet 可以配置最大高度吗， 我当做select使用了。 #445 + +fix: cursor-pointer优化 + +feat: 新版slider组件兼容NVUE改造 + +feat: 新增slider组件手动实现以支持样式自定义 + +perf：补充TS声明提示信息 + +修复：ActionSheet 操作菜单cancelText属性为空DOM节点还存在并且可以点击问题 + +fix: 去除预留的beforeDestroy兼容容易在某些sdk下不识别条件编译 + +## 3.3.6（2024-07-23） +feat: u-album组件添加radius,shape参数，定义参考当前u-image参数 + +fix: 修复了calendar组件title和日期title未垂直居中的问题 + +fix: update:modelValue缺失emit定义 + +## 3.3.5（2024-07-10） +picker组件支持hasInput模式 + +## 3.3.4（2024-07-07） +fix: input组件双向绑定问题 #419 + +lazy-load完善emit + +优化通用小程序分享 + +## 3.3.2（2024-06-27） +fix: 在Nvue环境中编译，出现大量警告 #406 +## 3.3.1（2024-06-27） +u-button组件报错，找不到button mixins #407 +## 3.3.0（2024-06-27） +feat: checkbox支持label设置slot + +feat: modal增加customClass + +feat: navbar、popup、tabs、text支持customClass + +fix: cell组建缺少flex布局 + +fix: 修复微信小程序真机调试时快速输入出现文本回退问题 + +feat: tag增加默认slot + +公共mixin改造为按需导入语法 + +refactor: 组件props混入mixin改造为按需导入语法 + +fix: u-tabbar 安卓手机点击按钮变蓝问题 #396 + +feat: upload组建增加extension属性 + +fix: upload组件参数mode添加left + +fix: 修复阴影在非nvue时白色背景色不显示 + +## 3.2.24（2024-06-11） +fix: 修复时间选择器confirm事件触发时机导致2次才会触发v-model更新 +## 3.2.23（2024-05-30） +fix: #378 H5 u-input 在表单中初始值为空也会触发一次 formValidate(this,"change")事件导致进入页面直接校验了一次 + +fix: #373 搜索组件up-search的@clear事件无效 + +fix: #372 ActionSheet 组件的取消按钮触发区域太小 + +## 3.2.22（2024-05-13） +上传组件支持微信小程序预览视频 + +修复折叠面板右侧箭头不显示 + +修复uxp2px + +## 3.2.21（2024-05-10） +fix: loading-icon修复flex布局 +## 3.2.20（2024-05-10） +修复瀑布流大小写#355 +## 3.2.19（2024-05-10） +去除意外的文件引入 +## 3.2.18（2024-05-09） +fix: 349 popup 组件设置 zIndex 属性后，组件渲染异常# +feat: 搜索框增加adjustPosition属性 +fix: #331增加u-action-sheet__cancel +优化mixin兼容性 +feat: #326 up-list增加下拉刷新功能 +fix: #319 优化up-tabs参数与定义匹配 +fix: index-list组件微信小程序端使用自定义导航栏异常 +fix: #285 pickerimmediateChange 写死为true +fix: #111 u-scroll-list组件,隐藏指示器后报错, 提示找不到ref +list增加微信小程序防抖配置 + +## 3.2.17（2024-05-08） +fix: 支付宝小程序二维码渲染 +## 3.2.16（2024-05-06） +修复tabs中，当前激活样式的undefined bug + +fix: #341u-code 倒计时没结束前退出，再次进入结束后退出界面，再次进入重新开始倒计时bug + +受到uni-app内置text样式影响修复 + +## 3.2.15（2024-04-28） +优化时间选择器hasInput模式初始化值 +## 3.2.14（2024-04-24） +去除pleaseSetTranspileDependencies + +http采用useStore + +## 3.2.13（2024-04-22） +修复modal标题样式 + +优化日期选择器hasInput模式宽度 + +## 3.2.12（2024-04-22） +修复color应用 +## 3.2.11（2024-04-18） +修复import化带来的问题 +## 3.2.10（2024-04-17） +完善input清空事件App端失效的兼容性 + +修复日历组件二次打开后当前月份显示不正确 + +## 3.2.9（2024-04-16） +组件内uni.$u用法改为import引入 + +规范化及兼容性增强 + +## 3.2.8（2024-04-15） +修复up-tag语法错 +## 3.2.7（2024-04-15） +修复下拉菜单背景色在支付宝小程序无效 + +setConfig改为浅拷贝解决无法用import导入代替uni.$u.props设置 + +## 3.2.6（2024-04-14） +修复某些情况下滑动单元格默认右侧按钮是展开的问题 +## 3.2.5（2024-04-13） +调整分段器尺寸及修复窗口大小改变时重新计算尺寸 + +多个组件支持cursor-pointer增强PC端体验 + +## 3.2.4（2024-04-12） +初步支持typescript +## 3.2.3（2024-04-12） +fix: 修复square属性在小程序下无效问题 + +fix:修复lastIndex异常导致的column异常问题 + +fix: alipayapp picker style + +feat(button): 添加用户同意隐私协议事件回调 + +fix: input switch password + +fix: 修复u-code组件keepRuning失效问题 + +feat: form-item添加labelPosition属性 + +新增dropdown组件 + +分段器支持内部current值 + +优化cell和action-sheet视觉大小 + +修复tabs文字换行 + +## 3.2.2（2024-04-11） +修复换行符问题 +## 3.2.1（2024-04-11） +修复演示H5二维码 + +fix: #270 ReadMore 展开阅读更多内容变化兼容 + +fix: #238Calendar组件maxDate修改为不能小于minDate + +checkbox支持独立使用 + +修复popup中在微信小程序中真机调试滚动失效 + +## 3.2.0（2024-04-10） +修复轮播图在nvue显示 +修复疑似u-slider名称被占用导致slider在App下不显示 +解决微信小程序提示 Some selectors are not allowed in component wxss +示例中u-前缀统一为up- +增加瀑布流与图片懒加载组件 +fix: #308修复tag组件缺失iconColor参数 +fix: #297使用grid布局解决目前编译为抖音小程序无法开启virtualHost +## 3.1.52（2024-04-07） +工具类方法调用import化改造 +新增up-copy复制组件 +## 3.1.51（2024-04-07） +优化时间选择器自带输入框格式化显示 +防止按钮文字换行 +修复订单列表模板滑动 +增加u-qrcode二维码组件 +## 3.1.49（2024-03-27） +日期时间组件支持自带输入框 +fix: popup弹窗滚动穿透问题 +fix: 修复小程序numberbox bug +## 3.1.48（2024-03-18） +fix:[plugin:uni:pre-css] Unbalanced delimiter found in string +## 3.1.47（2024-03-18） +fix: setConfig设置组件默认参数无效问题 +fix: 修复自定义图标无效问题 +feat: 增加u-form-item单独设置规则变量 +fix：#293小程序是自定义导航栏的时候即传了customNavHeight的时候会出现跳转偏移的情况 + +## 3.1.46（2024-01-29） +beforeUnmount +## 3.1.45（2024-01-24） +fix: #262ext组件为超链接的情况下size属性不生效 +fix: #263最新版本3.1.42中微信小程序u-swipe-action-item报错 +fix: #224最新版本3.1.42中微信小程序u-swipe-action-item报错 +fix: #263支持支付宝小程序 +fix: #261u-input在直接修改v-model的绑定值时，每隔一次会无法出发change事件 +优化折叠面板兼容微信小程序 +## 3.1.42（2024-01-15） +修复u-number-box默认值0时在小程序不显示值 +优化u-code的timer判断 +优化支付宝小程序下textarea字数统计兼容 +优化u-calendar +## 3.1.41（2023-11-18） +#215优化u-cell图标容器间距问题 +## 3.1.40（2023-11-16） +修复u-slider双向绑定 +## 3.1.39（2023-11-10） +修复头条小程序不支持env(safe-area-inset-bottom) +优化#201u-grid 指定列数导致闪烁 +#193IndexList 索引列表 高度错误 +其他优化 +## 3.1.38（2023-10-08） +修复u-slider +## 3.1.37（2023-09-13） +完善emits定义及修复code-input双向数据绑定 +## 3.1.36（2023-08-08） +修复富文本事件名称大小写 +## 3.1.35（2023-08-02） +修复编译到支付宝小程序u-form报错 +## 3.1.34（2023-07-27） +修复App打包uni.$u.mpMixin方式sdk暂时不支持导致报错 +## 3.1.33（2023-07-13） +修复弹窗进入动画、模板页面样式等 +## 3.1.31（2023-07-11） +修复dayjs引用 +## 3.0.8（2022-07-12） +修复u-tag默认宽度撑满容器 +## 3.0.7（2022-07-12） +修复u-navbar自定义插槽演示示例 +## 3.0.6（2022-07-11） +修复u-image缺少emits申明 +## 3.0.5（2022-07-11） +修复u-upload缺少emits申明 +## 3.0.4（2022-07-10） +修复u-textarea/u-input/u-datetime-picker/u-number-box/u-radio-group/u-switch/u-rate在vue3下数据绑定 +## 3.0.3（2022-07-09） +启用自建演示二维码 +## 3.0.2（2022-07-09） +修复dayjs/clipboard等导致打包报错 +## 3.0.1（2022-07-09） +增加插件市场地址 +## 3.0.0（2022-07-09） +# uview-plus(vue3)初步发布 diff --git a/uview-plus/components/u--form/u--form.vue b/uview-plus/components/u--form/u--form.vue new file mode 100644 index 0000000..9d65d2d --- /dev/null +++ b/uview-plus/components/u--form/u--form.vue @@ -0,0 +1,85 @@ + + + diff --git a/uview-plus/components/u--image/u--image.vue b/uview-plus/components/u--image/u--image.vue new file mode 100644 index 0000000..c8c7cc5 --- /dev/null +++ b/uview-plus/components/u--image/u--image.vue @@ -0,0 +1,50 @@ + + + \ No newline at end of file diff --git a/uview-plus/components/u--input/u--input.vue b/uview-plus/components/u--input/u--input.vue new file mode 100644 index 0000000..41c1a79 --- /dev/null +++ b/uview-plus/components/u--input/u--input.vue @@ -0,0 +1,74 @@ + + + \ No newline at end of file diff --git a/uview-plus/components/u--text/u--text.vue b/uview-plus/components/u--text/u--text.vue new file mode 100644 index 0000000..a2aa8ff --- /dev/null +++ b/uview-plus/components/u--text/u--text.vue @@ -0,0 +1,45 @@ + + + diff --git a/uview-plus/components/u--textarea/u--textarea.vue b/uview-plus/components/u--textarea/u--textarea.vue new file mode 100644 index 0000000..c8267bc --- /dev/null +++ b/uview-plus/components/u--textarea/u--textarea.vue @@ -0,0 +1,47 @@ + + + diff --git a/uview-plus/components/u-action-sheet/actionSheet.js b/uview-plus/components/u-action-sheet/actionSheet.js new file mode 100644 index 0000000..fb6787d --- /dev/null +++ b/uview-plus/components/u-action-sheet/actionSheet.js @@ -0,0 +1,26 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:44:35 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/actionSheet.js + */ +export default { + // action-sheet组件 + actionSheet: { + show: false, + title: '', + description: '', + actions: [], + index: '', + cancelText: '', + closeOnClickAction: true, + safeAreaInsetBottom: true, + openType: '', + closeOnClickOverlay: true, + round: 0, + wrapMaxHeight: '600px' + } +} diff --git a/uview-plus/components/u-action-sheet/props.js b/uview-plus/components/u-action-sheet/props.js new file mode 100644 index 0000000..43ba0f2 --- /dev/null +++ b/uview-plus/components/u-action-sheet/props.js @@ -0,0 +1,62 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const props = defineMixin({ + props: { + // 操作菜单是否展示 （默认false） + show: { + type: Boolean, + default: () => defProps.actionSheet.show + }, + // 标题 + title: { + type: String, + default: () => defProps.actionSheet.title + }, + // 选项上方的描述信息 + description: { + type: String, + default: () => defProps.actionSheet.description + }, + // 数据 + actions: { + type: Array, + default: () => defProps.actionSheet.actions + }, + // 取消按钮的文字，不为空时显示按钮 + cancelText: { + type: String, + default: () => defProps.actionSheet.cancelText + }, + // 点击某个菜单项时是否关闭弹窗 + closeOnClickAction: { + type: Boolean, + default: () => defProps.actionSheet.closeOnClickAction + }, + // 处理底部安全区（默认true） + safeAreaInsetBottom: { + type: Boolean, + default: () => defProps.actionSheet.safeAreaInsetBottom + }, + // 小程序的打开方式 + openType: { + type: String, + default: () => defProps.actionSheet.openType + }, + // 点击遮罩是否允许关闭 (默认true) + closeOnClickOverlay: { + type: Boolean, + default: () => defProps.actionSheet.closeOnClickOverlay + }, + // 圆角值 + round: { + type: [Boolean, String, Number], + default: () => defProps.actionSheet.round + }, + // 选项区域最大高度 + wrapMaxHeight: { + type: [String], + default: () => defProps.actionSheet.wrapMaxHeight + }, + } +}) diff --git a/uview-plus/components/u-action-sheet/u-action-sheet.vue b/uview-plus/components/u-action-sheet/u-action-sheet.vue new file mode 100644 index 0000000..1478bf6 --- /dev/null +++ b/uview-plus/components/u-action-sheet/u-action-sheet.vue @@ -0,0 +1,283 @@ + + + + + + diff --git a/uview-plus/components/u-album/album.js b/uview-plus/components/u-album/album.js new file mode 100644 index 0000000..7eea921 --- /dev/null +++ b/uview-plus/components/u-album/album.js @@ -0,0 +1,28 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:47:24 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/album.js + */ +export default { + // album 组件 + album: { + urls: [], + keyName: '', + singleSize: 180, + multipleSize: 70, + space: 6, + singleMode: 'scaleToFill', + multipleMode: 'aspectFill', + maxCount: 9, + previewFullImage: true, + rowCount: 3, + showMore: true, + autoWrap: false, + unit: 'px', + stop: true, + } +} diff --git a/uview-plus/components/u-album/props.js b/uview-plus/components/u-album/props.js new file mode 100644 index 0000000..828ab04 --- /dev/null +++ b/uview-plus/components/u-album/props.js @@ -0,0 +1,86 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 图片地址，Array|Array形式 + urls: { + type: Array, + default: () => defProps.album.urls + }, + // 指定从数组的对象元素中读取哪个属性作为图片地址 + keyName: { + type: String, + default: () => defProps.album.keyName + }, + // 单图时，图片长边的长度 + singleSize: { + type: [String, Number], + default: () => defProps.album.singleSize + }, + // 多图时，图片边长 + multipleSize: { + type: [String, Number], + default: () => defProps.album.multipleSize + }, + // 多图时，图片水平和垂直之间的间隔 + space: { + type: [String, Number], + default: () => defProps.album.space + }, + // 单图时，图片缩放裁剪的模式 + singleMode: { + type: String, + default: () => defProps.album.singleMode + }, + // 多图时，图片缩放裁剪的模式 + multipleMode: { + type: String, + default: () => defProps.album.multipleMode + }, + // 最多展示的图片数量，超出时最后一个位置将会显示剩余图片数量 + maxCount: { + type: [String, Number], + default: () => defProps.album.maxCount + }, + // 是否可以预览图片 + previewFullImage: { + type: Boolean, + default: () => defProps.album.previewFullImage + }, + // 每行展示图片数量，如设置，singleSize和multipleSize将会无效 + rowCount: { + type: [String, Number], + default: () => defProps.album.rowCount + }, + // 超出maxCount时是否显示查看更多的提示 + showMore: { + type: Boolean, + default: () => defProps.album.showMore + }, + // 图片形状，circle-圆形，square-方形 + shape: { + type: String, + default: () => defProps.image.shape + }, + // 圆角，单位任意 + radius: { + type: [String, Number], + default: () => defProps.image.radius + }, + // 自适应换行 + autoWrap: { + type: Boolean, + default: () => defProps.album.autoWrap + }, + // 单位 + unit: { + type: [String], + default: () => defProps.album.unit + }, + // 阻止点击冒泡 + stop: { + type: Boolean, + default: () => defProps.album.stop + } + } +}) diff --git a/uview-plus/components/u-album/u-album.vue b/uview-plus/components/u-album/u-album.vue new file mode 100644 index 0000000..4228959 --- /dev/null +++ b/uview-plus/components/u-album/u-album.vue @@ -0,0 +1,279 @@ + + + + + diff --git a/uview-plus/components/u-alert/alert.js b/uview-plus/components/u-alert/alert.js new file mode 100644 index 0000000..37c8ade --- /dev/null +++ b/uview-plus/components/u-alert/alert.js @@ -0,0 +1,22 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:48:53 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/alert.js + */ +export default { + // alert警告组件 + alert: { + title: '', + type: 'warning', + description: '', + closable: false, + showIcon: false, + effect: 'light', + center: false, + fontSize: 14 + } +} diff --git a/uview-plus/components/u-alert/props.js b/uview-plus/components/u-alert/props.js new file mode 100644 index 0000000..124c546 --- /dev/null +++ b/uview-plus/components/u-alert/props.js @@ -0,0 +1,46 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 显示文字 + title: { + type: String, + default: () => defProps.alert.title + }, + // 主题，success/warning/info/error + type: { + type: String, + default: () => defProps.alert.type + }, + // 辅助性文字 + description: { + type: String, + default: () => defProps.alert.description + }, + // 是否可关闭 + closable: { + type: Boolean, + default: () => defProps.alert.closable + }, + // 是否显示图标 + showIcon: { + type: Boolean, + default: () => defProps.alert.showIcon + }, + // 浅或深色调，light-浅色，dark-深色 + effect: { + type: String, + default: () => defProps.alert.effect + }, + // 文字是否居中 + center: { + type: Boolean, + default: () => defProps.alert.center + }, + // 字体大小 + fontSize: { + type: [String, Number], + default: () => defProps.alert.fontSize + } + } +}) diff --git a/uview-plus/components/u-alert/u-alert.vue b/uview-plus/components/u-alert/u-alert.vue new file mode 100644 index 0000000..10627b1 --- /dev/null +++ b/uview-plus/components/u-alert/u-alert.vue @@ -0,0 +1,251 @@ + + + + + diff --git a/uview-plus/components/u-avatar-group/avatarGroup.js b/uview-plus/components/u-avatar-group/avatarGroup.js new file mode 100644 index 0000000..c1f4e86 --- /dev/null +++ b/uview-plus/components/u-avatar-group/avatarGroup.js @@ -0,0 +1,23 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:49:55 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/avatarGroup.js + */ +export default { + // avatarGroup 组件 + avatarGroup: { + urls: [], + maxCount: 5, + shape: 'circle', + mode: 'scaleToFill', + showMore: true, + size: 40, + keyName: '', + gap: 0.5, + extraValue: 0 + } +} diff --git a/uview-plus/components/u-avatar-group/props.js b/uview-plus/components/u-avatar-group/props.js new file mode 100644 index 0000000..c4d4763 --- /dev/null +++ b/uview-plus/components/u-avatar-group/props.js @@ -0,0 +1,54 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 头像图片组 + urls: { + type: Array, + default: () => defProps.avatarGroup.urls + }, + // 最多展示的头像数量 + maxCount: { + type: [String, Number], + default: () => defProps.avatarGroup.maxCount + }, + // 头像形状 + shape: { + type: String, + default: () => defProps.avatarGroup.shape + }, + // 图片裁剪模式 + mode: { + type: String, + default: () => defProps.avatarGroup.mode + }, + // 超出maxCount时是否显示查看更多的提示 + showMore: { + type: Boolean, + default: () => defProps.avatarGroup.showMore + }, + // 头像大小 + size: { + type: [String, Number], + default: () => defProps.avatarGroup.size + }, + // 指定从数组的对象元素中读取哪个属性作为图片地址 + keyName: { + type: String, + default: () => defProps.avatarGroup.keyName + }, + // 头像之间的遮挡比例 + gap: { + type: [String, Number], + validator(value) { + return value >= 0 && value <= 1 + }, + default: () => defProps.avatarGroup.gap + }, + // 需额外显示的值 + extraValue: { + type: [Number, String], + default: () => defProps.avatarGroup.extraValue + } + } +}) diff --git a/uview-plus/components/u-avatar-group/u-avatar-group.vue b/uview-plus/components/u-avatar-group/u-avatar-group.vue new file mode 100644 index 0000000..f390982 --- /dev/null +++ b/uview-plus/components/u-avatar-group/u-avatar-group.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/uview-plus/components/u-avatar/avatar.js b/uview-plus/components/u-avatar/avatar.js new file mode 100644 index 0000000..904e06c --- /dev/null +++ b/uview-plus/components/u-avatar/avatar.js @@ -0,0 +1,28 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:49:22 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/avatar.js + */ +export default { + // avatar 组件 + avatar: { + src: '', + shape: 'circle', + size: 40, + mode: 'scaleToFill', + text: '', + bgColor: '#c0c4cc', + color: '#ffffff', + fontSize: 18, + icon: '', + mpAvatar: false, + randomBgColor: false, + defaultUrl: '', + colorIndex: '', + name: '' + } +} diff --git a/uview-plus/components/u-avatar/props.js b/uview-plus/components/u-avatar/props.js new file mode 100644 index 0000000..e24fb10 --- /dev/null +++ b/uview-plus/components/u-avatar/props.js @@ -0,0 +1,81 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +import test from '../../libs/function/test'; +export const props = defineMixin({ + props: { + // 头像图片路径(不能为相对路径) + src: { + type: String, + default: () => defProps.avatar.src + }, + // 头像形状，circle-圆形，square-方形 + shape: { + type: String, + default: () => defProps.avatar.shape + }, + // 头像尺寸 + size: { + type: [String, Number], + default: () => defProps.avatar.size + }, + // 裁剪模式 + mode: { + type: String, + default: () => defProps.avatar.mode + }, + // 显示的文字 + text: { + type: String, + default: () => defProps.avatar.text + }, + // 背景色 + bgColor: { + type: String, + default: () => defProps.avatar.bgColor + }, + // 文字颜色 + color: { + type: String, + default: () => defProps.avatar.color + }, + // 文字大小 + fontSize: { + type: [String, Number], + default: () => defProps.avatar.fontSize + }, + // 显示的图标 + icon: { + type: String, + default: () => defProps.avatar.icon + }, + // 显示小程序头像，只对百度，微信，QQ小程序有效 + mpAvatar: { + type: Boolean, + default: () => defProps.avatar.mpAvatar + }, + // 是否使用随机背景色 + randomBgColor: { + type: Boolean, + default: () => defProps.avatar.randomBgColor + }, + // 加载失败的默认头像(组件有内置默认图片) + defaultUrl: { + type: String, + default: () => defProps.avatar.defaultUrl + }, + // 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间 + colorIndex: { + type: [String, Number], + // 校验参数规则，索引在0-19之间 + validator(n) { + return test.range(n, [0, 19]) || n === '' + }, + default: () => defProps.avatar.colorIndex + }, + // 组件标识符 + name: { + type: String, + default: () => defProps.avatar.name + } + } +}) diff --git a/uview-plus/components/u-avatar/u-avatar.vue b/uview-plus/components/u-avatar/u-avatar.vue new file mode 100644 index 0000000..8826d38 --- /dev/null +++ b/uview-plus/components/u-avatar/u-avatar.vue @@ -0,0 +1,180 @@ + + + + + diff --git a/uview-plus/components/u-back-top/backtop.js b/uview-plus/components/u-back-top/backtop.js new file mode 100644 index 0000000..93a5c35 --- /dev/null +++ b/uview-plus/components/u-back-top/backtop.js @@ -0,0 +1,27 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:50:18 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/backtop.js + */ +export default { + // backtop组件 + backtop: { + mode: 'circle', + icon: 'arrow-upward', + text: '', + duration: 100, + scrollTop: 0, + top: 400, + bottom: 100, + right: 20, + zIndex: 9, + iconStyle: { + color: '#909399', + fontSize: '19px' + } + } +} diff --git a/uview-plus/components/u-back-top/props.js b/uview-plus/components/u-back-top/props.js new file mode 100644 index 0000000..7448b85 --- /dev/null +++ b/uview-plus/components/u-back-top/props.js @@ -0,0 +1,56 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 返回顶部的形状，circle-圆形，square-方形 + mode: { + type: String, + default: () => defProps.backtop.mode + }, + // 自定义图标 + icon: { + type: String, + default: () => defProps.backtop.icon + }, + // 提示文字 + text: { + type: String, + default: () => defProps.backtop.text + }, + // 返回顶部滚动时间 + duration: { + type: [String, Number], + default: () => defProps.backtop.duration + }, + // 滚动距离 + scrollTop: { + type: [String, Number], + default: () => defProps.backtop.scrollTop + }, + // 距离顶部多少距离显示，单位px + top: { + type: [String, Number], + default: () => defProps.backtop.top + }, + // 返回顶部按钮到底部的距离，单位px + bottom: { + type: [String, Number], + default: () => defProps.backtop.bottom + }, + // 返回顶部按钮到右边的距离，单位px + right: { + type: [String, Number], + default: () => defProps.backtop.right + }, + // 层级 + zIndex: { + type: [String, Number], + default: () => defProps.backtop.zIndex + }, + // 图标的样式，对象形式 + iconStyle: { + type: Object, + default: () => defProps.backtop.iconStyle + } + } +}) diff --git a/uview-plus/components/u-back-top/u-back-top.vue b/uview-plus/components/u-back-top/u-back-top.vue new file mode 100644 index 0000000..2034979 --- /dev/null +++ b/uview-plus/components/u-back-top/u-back-top.vue @@ -0,0 +1,133 @@ + + + + + diff --git a/uview-plus/components/u-badge/badge.js b/uview-plus/components/u-badge/badge.js new file mode 100644 index 0000000..4d7329c --- /dev/null +++ b/uview-plus/components/u-badge/badge.js @@ -0,0 +1,27 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-23 19:51:50 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/badge.js + */ +export default { + // 徽标数组件 + badge: { + isDot: false, + value: '', + show: true, + max: 999, + type: 'error', + showZero: false, + bgColor: null, + color: null, + shape: 'circle', + numberType: 'overflow', + offset: [], + inverted: false, + absolute: false + } +} diff --git a/uview-plus/components/u-badge/props.js b/uview-plus/components/u-badge/props.js new file mode 100644 index 0000000..5048faf --- /dev/null +++ b/uview-plus/components/u-badge/props.js @@ -0,0 +1,79 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 是否显示圆点 + isDot: { + type: Boolean, + default: () => defProps.badge.isDot + }, + // 显示的内容 + value: { + type: [Number, String], + default: () => defProps.badge.value + }, + // 显示的内容 + modelValue: { + type: [Number, String], + default: () => defProps.badge.modelValue + }, + // 是否显示 + show: { + type: Boolean, + default: () => defProps.badge.show + }, + // 最大值，超过最大值会显示 '{max}+' + max: { + type: [Number, String], + default: () => defProps.badge.max + }, + // 主题类型，error|warning|success|primary + type: { + type: String, + default: () => defProps.badge.type + }, + // 当数值为 0 时，是否展示 Badge + showZero: { + type: Boolean, + default: () => defProps.badge.showZero + }, + // 背景颜色，优先级比type高，如设置，type参数会失效 + bgColor: { + type: [String, null], + default: () => defProps.badge.bgColor + }, + // 字体颜色 + color: { + type: [String, null], + default: () => defProps.badge.color + }, + // 徽标形状，circle-四角均为圆角，horn-左下角为直角 + shape: { + type: String, + default: () => defProps.badge.shape + }, + // 设置数字的显示方式，overflow|ellipsis|limit + // overflow会根据max字段判断，超出显示`${max}+` + // ellipsis会根据max判断，超出显示`${max}...` + // limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数 + numberType: { + type: String, + default: () => defProps.badge.numberType + }, + // 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效 + offset: { + type: Array, + default: () => defProps.badge.offset + }, + // 是否反转背景和字体颜色 + inverted: { + type: Boolean, + default: () => defProps.badge.inverted + }, + // 是否绝对定位 + absolute: { + type: Boolean, + default: () => defProps.badge.absolute + } + } +}) diff --git a/uview-plus/components/u-badge/u-badge.vue b/uview-plus/components/u-badge/u-badge.vue new file mode 100644 index 0000000..b48e5a1 --- /dev/null +++ b/uview-plus/components/u-badge/u-badge.vue @@ -0,0 +1,177 @@ + + + + + diff --git a/uview-plus/components/u-box/props.js b/uview-plus/components/u-box/props.js new file mode 100644 index 0000000..7c9f989 --- /dev/null +++ b/uview-plus/components/u-box/props.js @@ -0,0 +1,27 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const propsBox = defineMixin({ + props: { + // 背景色 + bgColors: { + type: [Array], + default: ['#EEFCFF', '#FCF8FF', '#FDF8F2'] + }, + // 高度 + height: { + type: [String], + default: "160px" + }, + // 圆角 + borderRadius: { + type: [String], + default: "6px" + }, + // 间隔 + gap: { + type: [String], + default: "15px" + }, + } +}) diff --git a/uview-plus/components/u-box/u-box.vue b/uview-plus/components/u-box/u-box.vue new file mode 100644 index 0000000..6cc8dc4 --- /dev/null +++ b/uview-plus/components/u-box/u-box.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/uview-plus/components/u-button/button.js b/uview-plus/components/u-button/button.js new file mode 100644 index 0000000..248bf48 --- /dev/null +++ b/uview-plus/components/u-button/button.js @@ -0,0 +1,43 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:51:27 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/button.js + */ +export default { + // button组件 + button: { + hairline: false, + type: 'info', + size: 'normal', + shape: 'square', + plain: false, + disabled: false, + loading: false, + loadingText: '', + loadingMode: 'spinner', + loadingSize: 15, + openType: '', + formType: '', + appParameter: '', + hoverStopPropagation: true, + lang: 'en', + sessionFrom: '', + sendMessageTitle: '', + sendMessagePath: '', + sendMessageImg: '', + showMessageCard: false, + dataName: '', + throttleTime: 0, + hoverStartTime: 0, + hoverStayTime: 200, + text: '', + icon: '', + iconColor: '', + color: '', + stop: true, + } +} diff --git a/uview-plus/components/u-button/nvue.scss b/uview-plus/components/u-button/nvue.scss new file mode 100644 index 0000000..ebdba7d --- /dev/null +++ b/uview-plus/components/u-button/nvue.scss @@ -0,0 +1,46 @@ +$u-button-active-opacity:0.75 !default; +$u-button-loading-text-margin-left:4px !default; +$u-button-text-color: #FFFFFF !default; +$u-button-text-plain-error-color:$u-error !default; +$u-button-text-plain-warning-color:$u-warning !default; +$u-button-text-plain-success-color:$u-success !default; +$u-button-text-plain-info-color:$u-info !default; +$u-button-text-plain-primary-color:$u-primary !default; +.u-button { + &--active { + opacity: $u-button-active-opacity; + } + + &--active--plain { + background-color: rgb(217, 217, 217); + } + + &__loading-text { + margin-left:$u-button-loading-text-margin-left; + } + + &__text, + &__loading-text { + color:$u-button-text-color; + } + + &__text--plain--error { + color:$u-button-text-plain-error-color; + } + + &__text--plain--warning { + color:$u-button-text-plain-warning-color; + } + + &__text--plain--success{ + color:$u-button-text-plain-success-color; + } + + &__text--plain--info { + color:$u-button-text-plain-info-color; + } + + &__text--plain--primary { + color:$u-button-text-plain-primary-color; + } +} \ No newline at end of file diff --git a/uview-plus/components/u-button/props.js b/uview-plus/components/u-button/props.js new file mode 100644 index 0000000..46a4775 --- /dev/null +++ b/uview-plus/components/u-button/props.js @@ -0,0 +1,159 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 是否细边框 + hairline: { + type: Boolean, + default: () => defProps.button.hairline + }, + // 按钮的预置样式，info，primary，error，warning，success + type: { + type: String, + default: () => defProps.button.type + }, + // 按钮尺寸，large，normal，small，mini + size: { + type: String, + default: () => defProps.button.size + }, + // 按钮形状，circle（两边为半圆），square（带圆角） + shape: { + type: String, + default: () => defProps.button.shape + }, + // 按钮是否镂空 + plain: { + type: Boolean, + default: () => defProps.button.plain + }, + // 是否禁止状态 + disabled: { + type: Boolean, + default: () => defProps.button.disabled + }, + // 是否加载中 + loading: { + type: Boolean, + default: () => defProps.button.loading + }, + // 加载中提示文字 + loadingText: { + type: [String, Number], + default: () => defProps.button.loadingText + }, + // 加载状态图标类型 + loadingMode: { + type: String, + default: () => defProps.button.loadingMode + }, + // 加载图标大小 + loadingSize: { + type: [String, Number], + default: () => defProps.button.loadingSize + }, + // 开放能力，具体请看uniapp稳定关于button组件部分说明 + // https://uniapp.dcloud.io/component/button + openType: { + type: String, + default: () => defProps.button.openType + }, + // 用于
组件，点击分别会触发 组件的 submit/reset 事件 + // 取值为submit（提交表单），reset（重置表单） + formType: { + type: String, + default: () => defProps.button.formType + }, + // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 + // 只微信小程序、QQ小程序有效 + appParameter: { + type: String, + default: () => defProps.button.appParameter + }, + // 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效 + hoverStopPropagation: { + type: Boolean, + default: () => defProps.button.hoverStopPropagation + }, + // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效 + lang: { + type: String, + default: () => defProps.button.lang + }, + // 会话来源，open-type="contact"时有效。只微信小程序有效 + sessionFrom: { + type: String, + default: () => defProps.button.sessionFrom + }, + // 会话内消息卡片标题，open-type="contact"时有效 + // 默认当前标题，只微信小程序有效 + sendMessageTitle: { + type: String, + default: () => defProps.button.sendMessageTitle + }, + // 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 + // 默认当前分享路径，只微信小程序有效 + sendMessagePath: { + type: String, + default: () => defProps.button.sendMessagePath + }, + // 会话内消息卡片图片，open-type="contact"时有效 + // 默认当前页面截图，只微信小程序有效 + sendMessageImg: { + type: String, + default: () => defProps.button.sendMessageImg + }, + // 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示， + // 用户点击后可以快速发送小程序消息，open-type="contact"时有效 + showMessageCard: { + type: Boolean, + default: () => defProps.button.showMessageCard + }, + // 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取 + dataName: { + type: String, + default: () => defProps.button.dataName + }, + // 节流，一定时间内只能触发一次 + throttleTime: { + type: [String, Number], + default: () => defProps.button.throttleTime + }, + // 按住后多久出现点击态，单位毫秒 + hoverStartTime: { + type: [String, Number], + default: () => defProps.button.hoverStartTime + }, + // 手指松开后点击态保留时间，单位毫秒 + hoverStayTime: { + type: [String, Number], + default: () => defProps.button.hoverStayTime + }, + // 按钮文字，之所以通过props传入，是因为slot传入的话 + // nvue中无法控制文字的样式 + text: { + type: [String, Number], + default: () => defProps.button.text + }, + // 按钮图标 + icon: { + type: String, + default: () => defProps.button.icon + }, + // 按钮图标 + iconColor: { + type: String, + default: () => defProps.button.icon + }, + // 按钮颜色，支持传入linear-gradient渐变色 + color: { + type: String, + default: () => defProps.button.color + }, + // 停止冒泡 + stop: { + type: Boolean, + default: () => defProps.button.stop + }, + } +}) diff --git a/uview-plus/components/u-button/u-button.vue b/uview-plus/components/u-button/u-button.vue new file mode 100644 index 0000000..a4f1f82 --- /dev/null +++ b/uview-plus/components/u-button/u-button.vue @@ -0,0 +1,505 @@ + + + + + diff --git a/uview-plus/components/u-button/vue.scss b/uview-plus/components/u-button/vue.scss new file mode 100644 index 0000000..b2d128e --- /dev/null +++ b/uview-plus/components/u-button/vue.scss @@ -0,0 +1,81 @@ +// nvue下hover-class无效 +$u-button-before-top:50% !default; +$u-button-before-left:50% !default; +$u-button-before-width:100% !default; +$u-button-before-height:100% !default; +$u-button-before-transform:translate(-50%, -50%) !default; +$u-button-before-opacity:0 !default; +$u-button-before-background-color:#000 !default; +$u-button-before-border-color:#000 !default; +$u-button-active-before-opacity:.15 !default; +$u-button-icon-margin-left:4px !default; +$u-button-plain-u-button-info-color:$u-info; +$u-button-plain-u-button-success-color:$u-success; +$u-button-plain-u-button-error-color:$u-error; +$u-button-plain-u-button-warning-color:$u-warning; + +.u-button { + width: 100%; + white-space: nowrap; + + &__text { + white-space: nowrap; + line-height: 1; + } + + &:before { + position: absolute; + top:$u-button-before-top; + left:$u-button-before-left; + width:$u-button-before-width; + height:$u-button-before-height; + border: inherit; + border-radius: inherit; + transform:$u-button-before-transform; + opacity:$u-button-before-opacity; + content: " "; + background-color:$u-button-before-background-color; + border-color:$u-button-before-border-color; + } + + &--active { + &:before { + opacity: .15 + } + } + + &__icon+&__text:not(:empty), + &__loading-text { + margin-left:$u-button-icon-margin-left; + } + + &--plain { + &.u-button--primary { + color: $u-primary; + } + } + + &--plain { + &.u-button--info { + color:$u-button-plain-u-button-info-color; + } + } + + &--plain { + &.u-button--success { + color:$u-button-plain-u-button-success-color; + } + } + + &--plain { + &.u-button--error { + color:$u-button-plain-u-button-error-color; + } + } + + &--plain { + &.u-button--warning { + color:$u-button-plain-u-button-warning-color; + } + } +} diff --git a/uview-plus/components/u-calendar/calendar.js b/uview-plus/components/u-calendar/calendar.js new file mode 100644 index 0000000..0dd6675 --- /dev/null +++ b/uview-plus/components/u-calendar/calendar.js @@ -0,0 +1,45 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:52:43 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/calendar.js + */ +export default { + // calendar 组件 + calendar: { + title: '日期选择', + showTitle: true, + showSubtitle: true, + mode: 'single', + startText: '开始', + endText: '结束', + customList: [], + color: '#3c9cff', + minDate: 0, + maxDate: 0, + defaultDate: null, + maxCount: Number.MAX_SAFE_INTEGER, // Infinity + rowHeight: 56, + formatter: null, + showLunar: false, + showMark: true, + confirmText: '确定', + confirmDisabledText: '确定', + show: false, + closeOnClickOverlay: false, + readonly: false, + showConfirm: true, + maxRange: Number.MAX_SAFE_INTEGER, // Infinity + rangePrompt: '', + showRangePrompt: true, + allowSameDay: false, + round: 0, + monthNum: 3, + weekText: ['一', '二', '三', '四', '五', '六', '日'], + forbidDays: [], + forbidDaysToast: '该日期已禁用', + } +} diff --git a/uview-plus/components/u-calendar/header.vue b/uview-plus/components/u-calendar/header.vue new file mode 100644 index 0000000..85cc8bf --- /dev/null +++ b/uview-plus/components/u-calendar/header.vue @@ -0,0 +1,105 @@ + + + + + diff --git a/uview-plus/components/u-calendar/month.vue b/uview-plus/components/u-calendar/month.vue new file mode 100644 index 0000000..167a395 --- /dev/null +++ b/uview-plus/components/u-calendar/month.vue @@ -0,0 +1,608 @@ + + + + + diff --git a/uview-plus/components/u-calendar/props.js b/uview-plus/components/u-calendar/props.js new file mode 100644 index 0000000..e58d8bc --- /dev/null +++ b/uview-plus/components/u-calendar/props.js @@ -0,0 +1,167 @@ +import { + defineMixin +} from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const props = defineMixin({ + props: { + // 日历顶部标题 + title: { + type: String, + default: () => defProps.calendar.title + }, + // 是否显示标题 + showTitle: { + type: Boolean, + default: () => defProps.calendar.showTitle + }, + // 是否显示副标题 + showSubtitle: { + type: Boolean, + default: () => defProps.calendar.showSubtitle + }, + // 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围 + mode: { + type: String, + default: () => defProps.calendar.mode + }, + // mode=range时，第一个日期底部的提示文字 + startText: { + type: String, + default: () => defProps.calendar.startText + }, + // mode=range时，最后一个日期底部的提示文字 + endText: { + type: String, + default: () => defProps.calendar.endText + }, + // 自定义列表 + customList: { + type: Array, + default: () => defProps.calendar.customList + }, + // 主题色，对底部按钮和选中日期有效 + color: { + type: String, + default: () => defProps.calendar.color + }, + // 最小的可选日期 + minDate: { + type: [String, Number], + default: () => defProps.calendar.minDate + }, + // 最大可选日期 + maxDate: { + type: [String, Number], + default: () => defProps.calendar.maxDate + }, + // 默认选中的日期，mode为multiple或range是必须为数组格式 + defaultDate: { + type: [Array, String, Date, null], + default: () => defProps.calendar.defaultDate + }, + // mode=multiple时，最多可选多少个日期 + maxCount: { + type: [String, Number], + default: () => defProps.calendar.maxCount + }, + // 日期行高 + rowHeight: { + type: [String, Number], + default: () => defProps.calendar.rowHeight + }, + // 日期格式化函数 + formatter: { + type: [Function, null], + default: () => defProps.calendar.formatter + }, + // 是否显示农历 + showLunar: { + type: Boolean, + default: () => defProps.calendar.showLunar + }, + // 是否显示月份背景色 + showMark: { + type: Boolean, + default: () => defProps.calendar.showMark + }, + // 确定按钮的文字 + confirmText: { + type: String, + default: () => defProps.calendar.confirmText + }, + // 确认按钮处于禁用状态时的文字 + confirmDisabledText: { + type: String, + default: () => defProps.calendar.confirmDisabledText + }, + // 是否显示日历弹窗 + show: { + type: Boolean, + default: () => defProps.calendar.show + }, + // 是否允许点击遮罩关闭日历 + closeOnClickOverlay: { + type: Boolean, + default: () => defProps.calendar.closeOnClickOverlay + }, + // 是否为只读状态，只读状态下禁止选择日期 + readonly: { + type: Boolean, + default: () => defProps.calendar.readonly + }, + // 是否展示确认按钮 + showConfirm: { + type: Boolean, + default: () => defProps.calendar.showConfirm + }, + // 日期区间最多可选天数，默认无限制，mode = range时有效 + maxRange: { + type: [Number, String], + default: () => defProps.calendar.maxRange + }, + // 范围选择超过最多可选天数时的提示文案，mode = range时有效 + rangePrompt: { + type: String, + default: () => defProps.calendar.rangePrompt + }, + // 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 + showRangePrompt: { + type: Boolean, + default: () => defProps.calendar.showRangePrompt + }, + // 是否允许日期范围的起止时间为同一天，mode = range时有效 + allowSameDay: { + type: Boolean, + default: () => defProps.calendar.allowSameDay + }, + // 圆角值 + round: { + type: [Boolean, String, Number], + default: () => defProps.calendar.round + }, + // 最多展示月份数量 + monthNum: { + type: [Number, String], + default: 3 + }, + // 星期文案 + weekText: { + type: Array, + default: defProps.calendar.weekText + }, + forbidDays: { + type: Array, + default: defProps.calendar.forbidDays + }, + forbidDaysToast: { + type: String, + default: defProps.calendar.forbidDaysToast + }, + // 弹窗位置 + popMode: { + type: String, + default: "bottom" + }, + } +}) \ No newline at end of file diff --git a/uview-plus/components/u-calendar/u-calendar.vue b/uview-plus/components/u-calendar/u-calendar.vue new file mode 100644 index 0000000..eb39760 --- /dev/null +++ b/uview-plus/components/u-calendar/u-calendar.vue @@ -0,0 +1,367 @@ + + + + + \ No newline at end of file diff --git a/uview-plus/components/u-calendar/util.js b/uview-plus/components/u-calendar/util.js new file mode 100644 index 0000000..af5496c --- /dev/null +++ b/uview-plus/components/u-calendar/util.js @@ -0,0 +1,86 @@ +import dayjs from 'dayjs/esm/index' +export default { + methods: { + // 设置月份数据 + setMonth() { + // 月初是周几 + const day = dayjs(this.date).date(1).day() + const start = day == 0 ? 6 : day - 1 + + // 本月天数 + const days = dayjs(this.date).endOf('month').format('D') + + // 上个月天数 + const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D') + + // 日期数据 + const arr = [] + // 清空表格 + this.month = [] + + // 添加上月数据 + arr.push( + ...new Array(start).fill(1).map((e, i) => { + const day = prevDays - start + i + 1 + + return { + value: day, + disabled: true, + date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD') + } + }) + ) + + // 添加本月数据 + arr.push( + ...new Array(days - 0).fill(1).map((e, i) => { + const day = i + 1 + + return { + value: day, + date: dayjs(this.date).date(day).format('YYYY-MM-DD') + } + }) + ) + + // 添加下个月 + arr.push( + ...new Array(42 - days - start).fill(1).map((e, i) => { + const day = i + 1 + + return { + value: day, + disabled: true, + date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD') + } + }) + ) + + // 分割数组 + for (let n = 0; n < arr.length; n += 7) { + this.month.push( + arr.slice(n, n + 7).map((e, i) => { + e.index = i + n + + // 自定义信息 + const custom = this.customList.find((c) => c.date == e.date) + + // 农历 + if (this.lunar) { + const { + IDayCn, + IMonthCn + } = this.getLunar(e.date) + e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn + } + + return { + ...e, + ...custom + } + }) + ) + } + } + } +} diff --git a/uview-plus/components/u-car-keyboard/carKeyboard.js b/uview-plus/components/u-car-keyboard/carKeyboard.js new file mode 100644 index 0000000..3fde659 --- /dev/null +++ b/uview-plus/components/u-car-keyboard/carKeyboard.js @@ -0,0 +1,15 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:53:20 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/carKeyboard.js + */ +export default { + // 车牌号键盘 + carKeyboard: { + random: false + } +} diff --git a/uview-plus/components/u-car-keyboard/props.js b/uview-plus/components/u-car-keyboard/props.js new file mode 100644 index 0000000..a456fc0 --- /dev/null +++ b/uview-plus/components/u-car-keyboard/props.js @@ -0,0 +1,17 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const props = defineMixin({ + props: { + // 是否打乱键盘按键的顺序 + random: { + type: Boolean, + default: false + }, + // 输入一个中文后，是否自动切换到英文 + autoChange: { + type: Boolean, + default: false + } + } +}) diff --git a/uview-plus/components/u-car-keyboard/u-car-keyboard.vue b/uview-plus/components/u-car-keyboard/u-car-keyboard.vue new file mode 100644 index 0000000..b571b79 --- /dev/null +++ b/uview-plus/components/u-car-keyboard/u-car-keyboard.vue @@ -0,0 +1,315 @@ + + + + + diff --git a/uview-plus/components/u-card/props.js b/uview-plus/components/u-card/props.js new file mode 100644 index 0000000..3bd171a --- /dev/null +++ b/uview-plus/components/u-card/props.js @@ -0,0 +1,140 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const propsCard = defineMixin({ + props: { + // 与屏幕两侧是否留空隙 + full: { + type: Boolean, + default: false + }, + // 标题 + title: { + type: String, + default: '' + }, + // 标题颜色 + titleColor: { + type: String, + default: '#303133' + }, + // 标题字体大小 + titleSize: { + type: [Number, String], + default: '15px' + }, + // 副标题 + subTitle: { + type: String, + default: '' + }, + // 副标题颜色 + subTitleColor: { + type: String, + default: '#909399' + }, + // 副标题字体大小 + subTitleSize: { + type: [Number, String], + default: '13' + }, + // 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时) + border: { + type: Boolean, + default: true + }, + // 用于标识点击了第几个 + index: { + type: [Number, String, Object], + default: '' + }, + // 用于隔开上下左右的边距，带单位的写法，如："30px 30px"，"20px 20px 30px 30px" + margin: { + type: String, + default: '15px' + }, + // card卡片的圆角 + borderRadius: { + type: [Number, String], + default: '8px' + }, + // 头部自定义样式，对象形式 + headStyle: { + type: Object, + default() { + return {}; + } + }, + // 主体自定义样式，对象形式 + bodyStyle: { + type: Object, + default() { + return {}; + } + }, + // 底部自定义样式，对象形式 + footStyle: { + type: Object, + default() { + return {}; + } + }, + // 头部是否下边框 + headBorderBottom: { + type: Boolean, + default: true + }, + // 底部是否有上边框 + footBorderTop: { + type: Boolean, + default: true + }, + // 标题左边的缩略图 + thumb: { + type: String, + default: '' + }, + // 缩略图宽高 + thumbWidth: { + type: [String, Number], + default: '30px' + }, + // 缩略图是否为圆形 + thumbCircle: { + type: Boolean, + default: false + }, + // 给head，body，foot的内边距 + padding: { + type: [String, Number], + default: '15px' + }, + paddingHead: { + type: [String, Number], + default: '' + }, + paddingBody: { + type: [String, Number], + default: '' + }, + paddingFoot: { + type: [String, Number], + default: '' + }, + // 是否显示头部 + showHead: { + type: Boolean, + default: true + }, + // 是否显示尾部 + showFoot: { + type: Boolean, + default: true + }, + // 卡片外围阴影，字符串形式 + boxShadow: { + type: String, + default: 'none' + } + } +}) diff --git a/uview-plus/components/u-card/u-card.vue b/uview-plus/components/u-card/u-card.vue new file mode 100644 index 0000000..595e2cb --- /dev/null +++ b/uview-plus/components/u-card/u-card.vue @@ -0,0 +1,186 @@ + + + + + diff --git a/uview-plus/components/u-cate-tab/u-cate-tab.vue b/uview-plus/components/u-cate-tab/u-cate-tab.vue new file mode 100644 index 0000000..0a9d8b4 --- /dev/null +++ b/uview-plus/components/u-cate-tab/u-cate-tab.vue @@ -0,0 +1,319 @@ + + + + diff --git a/uview-plus/components/u-cell-group/cellGroup.js b/uview-plus/components/u-cell-group/cellGroup.js new file mode 100644 index 0000000..658a9e7 --- /dev/null +++ b/uview-plus/components/u-cell-group/cellGroup.js @@ -0,0 +1,17 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:54:16 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/cellGroup.js + */ +export default { + // cell-group组件的props + cellGroup: { + title: '', + border: true, + customStyle: {} + } +} diff --git a/uview-plus/components/u-cell-group/props.js b/uview-plus/components/u-cell-group/props.js new file mode 100644 index 0000000..7d7941a --- /dev/null +++ b/uview-plus/components/u-cell-group/props.js @@ -0,0 +1,16 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 分组标题 + title: { + type: String, + default: () => defProps.cellGroup.title + }, + // 是否显示外边框 + border: { + type: Boolean, + default: () => defProps.cellGroup.border + } + } +}) diff --git a/uview-plus/components/u-cell-group/u-cell-group.vue b/uview-plus/components/u-cell-group/u-cell-group.vue new file mode 100644 index 0000000..4edfd49 --- /dev/null +++ b/uview-plus/components/u-cell-group/u-cell-group.vue @@ -0,0 +1,67 @@ + + + + + + diff --git a/uview-plus/components/u-cell/cell.js b/uview-plus/components/u-cell/cell.js new file mode 100644 index 0000000..07cb07c --- /dev/null +++ b/uview-plus/components/u-cell/cell.js @@ -0,0 +1,35 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-23 20:53:09 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/cell.js + */ +export default { + // cell组件的props + cell: { + customClass: '', + title: '', + label: '', + value: '', + icon: '', + disabled: false, + border: true, + center: false, + url: '', + linkType: 'navigateTo', + clickable: false, + isLink: false, + required: false, + arrowDirection: '', + iconStyle: {}, + rightIconStyle: {}, + rightIcon: 'arrow-right', + titleStyle: {}, + size: '', + stop: true, + name: '' + } +} diff --git a/uview-plus/components/u-cell/props.js b/uview-plus/components/u-cell/props.js new file mode 100644 index 0000000..daa7d16 --- /dev/null +++ b/uview-plus/components/u-cell/props.js @@ -0,0 +1,112 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 标题 + title: { + type: [String, Number], + default: () => defProps.cell.title + }, + // 标题下方的描述信息 + label: { + type: [String, Number], + default: () => defProps.cell.label + }, + // 右侧的内容 + value: { + type: [String, Number], + default: () => defProps.cell.value + }, + // 左侧图标名称，或者图片链接(本地文件建议使用绝对地址) + icon: { + type: String, + default: () => defProps.cell.icon + }, + // 是否禁用cell + disabled: { + type: Boolean, + default: () => defProps.cell.disabled + }, + // 是否显示下边框 + border: { + type: Boolean, + default: () => defProps.cell.border + }, + // 内容是否垂直居中(主要是针对右侧的value部分) + center: { + type: Boolean, + default: () => defProps.cell.center + }, + // 点击后跳转的URL地址 + url: { + type: String, + default: () => defProps.cell.url + }, + // 链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作 + linkType: { + type: String, + default: () => defProps.cell.linkType + }, + // 是否开启点击反馈(表现为点击时加上灰色背景) + clickable: { + type: Boolean, + default: () => defProps.cell.clickable + }, + // 是否展示右侧箭头并开启点击反馈 + isLink: { + type: Boolean, + default: () => defProps.cell.isLink + }, + // 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) + required: { + type: Boolean, + default: () => defProps.cell.required + }, + // 右侧的图标箭头 + rightIcon: { + type: String, + default: () => defProps.cell.rightIcon + }, + // 右侧箭头的方向，可选值为：left，up，down + arrowDirection: { + type: String, + default: () => defProps.cell.arrowDirection + }, + // 左侧图标样式 + iconStyle: { + type: [Object, String], + default: () => { + return defProps.cell.iconStyle + } + }, + // 右侧箭头图标的样式 + rightIconStyle: { + type: [Object, String], + default: () => { + return defProps.cell.rightIconStyle + } + }, + // 标题的样式 + titleStyle: { + type: [Object, String], + default: () => { + return defProps.cell.titleStyle + } + }, + // 单位元的大小，可选值为large + size: { + type: String, + default: () => defProps.cell.size + }, + // 点击cell是否阻止事件传播 + stop: { + type: Boolean, + default: () => defProps.cell.stop + }, + // 标识符，cell被点击时返回 + name: { + type: [Number, String], + default: () => defProps.cell.name + } + } +}) diff --git a/uview-plus/components/u-cell/u-cell.vue b/uview-plus/components/u-cell/u-cell.vue new file mode 100644 index 0000000..5b09865 --- /dev/null +++ b/uview-plus/components/u-cell/u-cell.vue @@ -0,0 +1,268 @@ + + + + + diff --git a/uview-plus/components/u-checkbox-group/checkboxGroup.js b/uview-plus/components/u-checkbox-group/checkboxGroup.js new file mode 100644 index 0000000..6730ab1 --- /dev/null +++ b/uview-plus/components/u-checkbox-group/checkboxGroup.js @@ -0,0 +1,29 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:54:47 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/checkboxGroup.js + */ +export default { + // checkbox-group组件 + checkboxGroup: { + name: '', + value: [], + shape: 'square', + disabled: false, + activeColor: '#2979ff', + inactiveColor: '#c8c9cc', + size: 18, + placement: 'row', + labelSize: 14, + labelColor: '#303133', + labelDisabled: false, + iconColor: '#ffffff', + iconSize: 12, + iconPlacement: 'left', + borderBottom: false + } +} diff --git a/uview-plus/components/u-checkbox-group/props.js b/uview-plus/components/u-checkbox-group/props.js new file mode 100644 index 0000000..955e17e --- /dev/null +++ b/uview-plus/components/u-checkbox-group/props.js @@ -0,0 +1,93 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const props = defineMixin({ + props: { + // 标识符 + name: { + type: String, + default: () => defProps.checkboxGroup.name + }, + // #ifdef VUE3 + // 绑定的值 + modelValue: { + type: Array, + default: () => defProps.checkboxGroup.value + }, + // #endif + // #ifdef VUE2 + // 绑定的值 + value: { + type: Array, + default: () => defProps.checkboxGroup.value + }, + // #endif + // 形状，circle-圆形，square-方形 + shape: { + type: String, + default: () => defProps.checkboxGroup.shape + }, + // 是否禁用全部checkbox + disabled: { + type: Boolean, + default: () => defProps.checkboxGroup.disabled + }, + + // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 + activeColor: { + type: String, + default: () => defProps.checkboxGroup.activeColor + }, + // 未选中的颜色 + inactiveColor: { + type: String, + default: () => defProps.checkboxGroup.inactiveColor + }, + + // 整个组件的尺寸，默认px + size: { + type: [String, Number], + default: () => defProps.checkboxGroup.size + }, + // 布局方式，row-横向，column-纵向 + placement: { + type: String, + default: () => defProps.checkboxGroup.placement + }, + // label的字体大小，px单位 + labelSize: { + type: [String, Number], + default: () => defProps.checkboxGroup.labelSize + }, + // label的字体颜色 + labelColor: { + type: [String], + default: () => defProps.checkboxGroup.labelColor + }, + // 是否禁止点击文本操作 + labelDisabled: { + type: Boolean, + default: () => defProps.checkboxGroup.labelDisabled + }, + // 图标颜色 + iconColor: { + type: String, + default: () => defProps.checkboxGroup.iconColor + }, + // 图标的大小，单位px + iconSize: { + type: [String, Number], + default: () => defProps.checkboxGroup.iconSize + }, + // 勾选图标的对齐方式，left-左边，right-右边 + iconPlacement: { + type: String, + default: () => defProps.checkboxGroup.iconPlacement + }, + // 竖向配列时，是否显示下划线 + borderBottom: { + type: Boolean, + default: () => defProps.checkboxGroup.borderBottom + } + } +}) diff --git a/uview-plus/components/u-checkbox-group/u-checkbox-group.vue b/uview-plus/components/u-checkbox-group/u-checkbox-group.vue new file mode 100644 index 0000000..19c3a8b --- /dev/null +++ b/uview-plus/components/u-checkbox-group/u-checkbox-group.vue @@ -0,0 +1,133 @@ + + + + + diff --git a/uview-plus/components/u-checkbox/checkbox.js b/uview-plus/components/u-checkbox/checkbox.js new file mode 100644 index 0000000..0e6be5e --- /dev/null +++ b/uview-plus/components/u-checkbox/checkbox.js @@ -0,0 +1,27 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-23 21:06:59 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/checkbox.js + */ +export default { + // checkbox组件 + checkbox: { + name: '', + shape: '', + size: '', + checkbox: false, + disabled: '', + activeColor: '', + inactiveColor: '', + iconSize: '', + iconColor: '', + label: '', + labelSize: '', + labelColor: '', + labelDisabled: '' + } +} diff --git a/uview-plus/components/u-checkbox/props.js b/uview-plus/components/u-checkbox/props.js new file mode 100644 index 0000000..11faae8 --- /dev/null +++ b/uview-plus/components/u-checkbox/props.js @@ -0,0 +1,76 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // checkbox的名称 + name: { + type: [String, Number, Boolean], + default: () => defProps.checkbox.name + }, + // 形状，square为方形，circle为圆型 + shape: { + type: String, + default: () => defProps.checkbox.shape + }, + // 整体的大小 + size: { + type: [String, Number], + default: () => defProps.checkbox.size + }, + // 是否默认选中 + checked: { + type: Boolean, + default: () => defProps.checkbox.checked + }, + // 是否禁用 + disabled: { + type: [String, Boolean], + default: () => defProps.checkbox.disabled + }, + // 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值 + activeColor: { + type: String, + default: () => defProps.checkbox.activeColor + }, + // 未选中的颜色 + inactiveColor: { + type: String, + default: () => defProps.checkbox.inactiveColor + }, + // 图标的大小，单位px + iconSize: { + type: [String, Number], + default: () => defProps.checkbox.iconSize + }, + // 图标颜色 + iconColor: { + type: String, + default: () => defProps.checkbox.iconColor + }, + // label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式 + label: { + type: [String, Number], + default: () => defProps.checkbox.label + }, + // label的字体大小，px单位 + labelSize: { + type: [String, Number], + default: () => defProps.checkbox.labelSize + }, + // label的颜色 + labelColor: { + type: String, + default: () => defProps.checkbox.labelColor + }, + // 是否禁止点击提示语选中复选框 + labelDisabled: { + type: [String, Boolean], + default: () => defProps.checkbox.labelDisabled + }, + // 是否独立使用 + usedAlone: { + type: [Boolean], + default: () => false + } + } +}) diff --git a/uview-plus/components/u-checkbox/u-checkbox.vue b/uview-plus/components/u-checkbox/u-checkbox.vue new file mode 100644 index 0000000..71f582a --- /dev/null +++ b/uview-plus/components/u-checkbox/u-checkbox.vue @@ -0,0 +1,387 @@ + + + + + diff --git a/uview-plus/components/u-circle-progress/circleProgress.js b/uview-plus/components/u-circle-progress/circleProgress.js new file mode 100644 index 0000000..742c795 --- /dev/null +++ b/uview-plus/components/u-circle-progress/circleProgress.js @@ -0,0 +1,15 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:55:02 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/circleProgress.js + */ +export default { + // circleProgress 组件 + circleProgress: { + percentage: 30 + } +} diff --git a/uview-plus/components/u-circle-progress/props.js b/uview-plus/components/u-circle-progress/props.js new file mode 100644 index 0000000..b237418 --- /dev/null +++ b/uview-plus/components/u-circle-progress/props.js @@ -0,0 +1,10 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + percentage: { + type: [String, Number], + default: () => defProps.circleProgress.percentage + } + } +}) diff --git a/uview-plus/components/u-circle-progress/u-circle-progress.vue b/uview-plus/components/u-circle-progress/u-circle-progress.vue new file mode 100644 index 0000000..dbd79ef --- /dev/null +++ b/uview-plus/components/u-circle-progress/u-circle-progress.vue @@ -0,0 +1,201 @@ + + + + + diff --git a/uview-plus/components/u-code-input/codeInput.js b/uview-plus/components/u-code-input/codeInput.js new file mode 100644 index 0000000..cbe6827 --- /dev/null +++ b/uview-plus/components/u-code-input/codeInput.js @@ -0,0 +1,29 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:55:58 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/codeInput.js + */ +export default { + // codeInput 组件 + codeInput: { + adjustPosition: true, + maxlength: 6, + dot: false, + mode: 'box', + hairline: false, + space: 10, + value: '', + focus: false, + bold: false, + color: '#606266', + fontSize: 18, + size: 35, + disabledKeyboard: false, + borderColor: '#c9cacc', + disabledDot: true + } +} diff --git a/uview-plus/components/u-code-input/props.js b/uview-plus/components/u-code-input/props.js new file mode 100644 index 0000000..8aa2202 --- /dev/null +++ b/uview-plus/components/u-code-input/props.js @@ -0,0 +1,90 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 键盘弹起时，是否自动上推页面 + adjustPosition: { + type: Boolean, + default: () => defProps.codeInput.adjustPosition + }, + // 最大输入长度 + maxlength: { + type: [String, Number], + default: () => defProps.codeInput.maxlength + }, + // 是否用圆点填充 + dot: { + type: Boolean, + default: () => defProps.codeInput.dot + }, + // 显示模式，box-盒子模式，line-底部横线模式 + mode: { + type: String, + default: () => defProps.codeInput.mode + }, + // 是否细边框 + hairline: { + type: Boolean, + default: () => defProps.codeInput.hairline + }, + // 字符间的距离 + space: { + type: [String, Number], + default: () => defProps.codeInput.space + }, + // #ifdef VUE3 + // 预置值 + modelValue: { + type: [String, Number], + default: () => defProps.codeInput.value + }, + // #endif + // #ifdef VUE2 + // 预置值 + value: { + type: [String, Number], + default: () => defProps.codeInput.value + }, + // #endif + // 是否自动获取焦点 + focus: { + type: Boolean, + default: () => defProps.codeInput.focus + }, + // 字体是否加粗 + bold: { + type: Boolean, + default: () => defProps.codeInput.bold + }, + // 字体颜色 + color: { + type: String, + default: () => defProps.codeInput.color + }, + // 字体大小 + fontSize: { + type: [String, Number], + default: () => defProps.codeInput.fontSize + }, + // 输入框的大小，宽等于高 + size: { + type: [String, Number], + default: () => defProps.codeInput.size + }, + // 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true + disabledKeyboard: { + type: Boolean, + default: () => defProps.codeInput.disabledKeyboard + }, + // 边框和线条颜色 + borderColor: { + type: String, + default: () => defProps.codeInput.borderColor + }, + // 是否禁止输入"."符号 + disabledDot: { + type: Boolean, + default: () => defProps.codeInput.disabledDot + } + } +}) diff --git a/uview-plus/components/u-code-input/u-code-input.vue b/uview-plus/components/u-code-input/u-code-input.vue new file mode 100644 index 0000000..bde4cda --- /dev/null +++ b/uview-plus/components/u-code-input/u-code-input.vue @@ -0,0 +1,300 @@ + + + + + diff --git a/uview-plus/components/u-code/code.js b/uview-plus/components/u-code/code.js new file mode 100644 index 0000000..233a269 --- /dev/null +++ b/uview-plus/components/u-code/code.js @@ -0,0 +1,21 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:55:27 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/code.js + */ + +export default { + // code 组件 + code: { + seconds: 60, + startText: '获取验证码', + changeText: 'X秒重新获取', + endText: '重新获取', + keepRunning: false, + uniqueKey: '' + } +} diff --git a/uview-plus/components/u-code/props.js b/uview-plus/components/u-code/props.js new file mode 100644 index 0000000..b7c88a5 --- /dev/null +++ b/uview-plus/components/u-code/props.js @@ -0,0 +1,36 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 倒计时总秒数 + seconds: { + type: [String, Number], + default: () => defProps.code.seconds + }, + // 尚未开始时提示 + startText: { + type: String, + default: () => defProps.code.startText + }, + // 正在倒计时中的提示 + changeText: { + type: String, + default: () => defProps.code.changeText + }, + // 倒计时结束时的提示 + endText: { + type: String, + default: () => defProps.code.endText + }, + // 是否在H5刷新或各端返回再进入时继续倒计时 + keepRunning: { + type: Boolean, + default: () => defProps.code.keepRunning + }, + // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了 + uniqueKey: { + type: String, + default: () => defProps.code.uniqueKey + } + } +}) diff --git a/uview-plus/components/u-code/u-code.vue b/uview-plus/components/u-code/u-code.vue new file mode 100644 index 0000000..c3b69e7 --- /dev/null +++ b/uview-plus/components/u-code/u-code.vue @@ -0,0 +1,132 @@ + + + + + diff --git a/uview-plus/components/u-col/col.js b/uview-plus/components/u-col/col.js new file mode 100644 index 0000000..cd1edf3 --- /dev/null +++ b/uview-plus/components/u-col/col.js @@ -0,0 +1,19 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:56:12 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/col.js + */ +export default { + // col 组件 + col: { + span: 12, + offset: 0, + justify: 'start', + align: 'stretch', + textAlign: 'left' + } +} diff --git a/uview-plus/components/u-col/props.js b/uview-plus/components/u-col/props.js new file mode 100644 index 0000000..79845ec --- /dev/null +++ b/uview-plus/components/u-col/props.js @@ -0,0 +1,31 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 占父容器宽度的多少等分，总分为12份 + span: { + type: [String, Number], + default: () => defProps.col.span + }, + // 指定栅格左侧的间隔数(总12栏) + offset: { + type: [String, Number], + default: () => defProps.col.offset + }, + // 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`) + justify: { + type: String, + default: () => defProps.col.justify + }, + // 垂直对齐方式，可选值为top、center、bottom、stretch + align: { + type: String, + default: () => defProps.col.align + }, + // 文字对齐方式 + textAlign: { + type: String, + default: () => defProps.col.textAlign + } + } +}) diff --git a/uview-plus/components/u-col/u-col.vue b/uview-plus/components/u-col/u-col.vue new file mode 100644 index 0000000..c356cc1 --- /dev/null +++ b/uview-plus/components/u-col/u-col.vue @@ -0,0 +1,170 @@ + + + + + diff --git a/uview-plus/components/u-collapse-item/collapseItem.js b/uview-plus/components/u-collapse-item/collapseItem.js new file mode 100644 index 0000000..8b4665b --- /dev/null +++ b/uview-plus/components/u-collapse-item/collapseItem.js @@ -0,0 +1,26 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:56:42 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/collapseItem.js + */ +export default { + // collapseItem 组件 + collapseItem: { + title: '', + value: '', + label: '', + disabled: false, + isLink: true, + clickable: true, + border: true, + align: 'left', + name: '', + icon: '', + duration: 300, + showRight: true + } +} diff --git a/uview-plus/components/u-collapse-item/props.js b/uview-plus/components/u-collapse-item/props.js new file mode 100644 index 0000000..d6eff91 --- /dev/null +++ b/uview-plus/components/u-collapse-item/props.js @@ -0,0 +1,66 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 标题 + title: { + type: String, + default: () => defProps.collapseItem.title + }, + // 标题右侧内容 + value: { + type: String, + default: () => defProps.collapseItem.value + }, + // 标题下方的描述信息 + label: { + type: String, + default: () => defProps.collapseItem.label + }, + // 是否禁用折叠面板 + disabled: { + type: Boolean, + default: () => defProps.collapseItem.disabled + }, + // 是否展示右侧箭头并开启点击反馈 + isLink: { + type: Boolean, + default: () => defProps.collapseItem.isLink + }, + // 是否开启点击反馈 + clickable: { + type: Boolean, + default: () => defProps.collapseItem.clickable + }, + // 是否显示内边框 + border: { + type: Boolean, + default: () => defProps.collapseItem.border + }, + // 标题的对齐方式 + align: { + type: String, + default: () => defProps.collapseItem.align + }, + // 唯一标识符 + name: { + type: [String, Number], + default: () => defProps.collapseItem.name + }, + // 标题左侧图片，可为绝对路径的图片或内置图标 + icon: { + type: String, + default: () => defProps.collapseItem.icon + }, + // 面板展开收起的过渡时间，单位ms + duration: { + type: Number, + default: () => defProps.collapseItem.duration + }, + // 显示右侧图标 + showRight: { + type: Boolean, + default: () => defProps.collapseItem.showRight + }, + } +}) diff --git a/uview-plus/components/u-collapse-item/u-collapse-item.vue b/uview-plus/components/u-collapse-item/u-collapse-item.vue new file mode 100644 index 0000000..9e7354c --- /dev/null +++ b/uview-plus/components/u-collapse-item/u-collapse-item.vue @@ -0,0 +1,242 @@ + + + + + diff --git a/uview-plus/components/u-collapse/collapse.js b/uview-plus/components/u-collapse/collapse.js new file mode 100644 index 0000000..d8c7017 --- /dev/null +++ b/uview-plus/components/u-collapse/collapse.js @@ -0,0 +1,17 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:56:30 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/collapse.js + */ +export default { + // collapse 组件 + collapse: { + value: null, + accordion: false, + border: true + } +} diff --git a/uview-plus/components/u-collapse/props.js b/uview-plus/components/u-collapse/props.js new file mode 100644 index 0000000..ea1523b --- /dev/null +++ b/uview-plus/components/u-collapse/props.js @@ -0,0 +1,21 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 当前展开面板的name，非手风琴模式：[]，手风琴模式：string | number + value: { + type: [String, Number, Array, null], + default: () => defProps.collapse.value + }, + // 是否手风琴模式 + accordion: { + type: Boolean, + default: () => defProps.collapse.accordion + }, + // 是否显示外边框 + border: { + type: Boolean, + default: () => defProps.collapse.border + } + } +}) diff --git a/uview-plus/components/u-collapse/u-collapse.vue b/uview-plus/components/u-collapse/u-collapse.vue new file mode 100644 index 0000000..8befb2d --- /dev/null +++ b/uview-plus/components/u-collapse/u-collapse.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/uview-plus/components/u-column-notice/columnNotice.js b/uview-plus/components/u-column-notice/columnNotice.js new file mode 100644 index 0000000..81f63ac --- /dev/null +++ b/uview-plus/components/u-column-notice/columnNotice.js @@ -0,0 +1,25 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:57:16 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/columnNotice.js + */ +export default { + // columnNotice 组件 + columnNotice: { + text: '', + icon: 'volume', + mode: '', + color: '#f9ae3d', + bgColor: '#fdf6ec', + fontSize: 14, + speed: 80, + step: false, + duration: 1500, + disableTouch: true, + justifyContent: 'flex-start' + } +} diff --git a/uview-plus/components/u-column-notice/props.js b/uview-plus/components/u-column-notice/props.js new file mode 100644 index 0000000..02c9200 --- /dev/null +++ b/uview-plus/components/u-column-notice/props.js @@ -0,0 +1,61 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 显示的内容，字符串 + text: { + type: [Array], + default: () => defProps.columnNotice.text + }, + // 是否显示左侧的音量图标 + icon: { + type: String, + default: () => defProps.columnNotice.icon + }, + // 通告模式，link-显示右箭头，closable-显示右侧关闭图标 + mode: { + type: String, + default: () => defProps.columnNotice.mode + }, + // 文字颜色，各图标也会使用文字颜色 + color: { + type: String, + default: () => defProps.columnNotice.color + }, + // 背景颜色 + bgColor: { + type: String, + default: () => defProps.columnNotice.bgColor + }, + // 字体大小，单位px + fontSize: { + type: [String, Number], + default: () => defProps.columnNotice.fontSize + }, + // 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 + speed: { + type: [String, Number], + default: () => defProps.columnNotice.speed + }, + // direction = row时，是否使用步进形式滚动 + step: { + type: Boolean, + default: () => defProps.columnNotice.step + }, + // 滚动一个周期的时间长，单位ms + duration: { + type: [String, Number], + default: () => defProps.columnNotice.duration + }, + // 是否禁止用手滑动切换 + // 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 + disableTouch: { + type: Boolean, + default: () => defProps.columnNotice.disableTouch + }, + justifyContent: { + type: String, + default: () => defProps.columnNotice.justifyContent + } + } +}) diff --git a/uview-plus/components/u-column-notice/u-column-notice.vue b/uview-plus/components/u-column-notice/u-column-notice.vue new file mode 100644 index 0000000..27e6b9c --- /dev/null +++ b/uview-plus/components/u-column-notice/u-column-notice.vue @@ -0,0 +1,166 @@ + + + + + diff --git a/uview-plus/components/u-copy/u-copy.vue b/uview-plus/components/u-copy/u-copy.vue new file mode 100644 index 0000000..302282f --- /dev/null +++ b/uview-plus/components/u-copy/u-copy.vue @@ -0,0 +1,70 @@ + + + + diff --git a/uview-plus/components/u-count-down/countDown.js b/uview-plus/components/u-count-down/countDown.js new file mode 100644 index 0000000..fc43be3 --- /dev/null +++ b/uview-plus/components/u-count-down/countDown.js @@ -0,0 +1,18 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:11:29 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/countDown.js + */ +export default { + // u-count-down 计时器组件 + countDown: { + time: 0, + format: 'HH:mm:ss', + autoStart: true, + millisecond: false + } +} diff --git a/uview-plus/components/u-count-down/props.js b/uview-plus/components/u-count-down/props.js new file mode 100644 index 0000000..0601d32 --- /dev/null +++ b/uview-plus/components/u-count-down/props.js @@ -0,0 +1,26 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 倒计时时长，单位ms + time: { + type: [String, Number], + default: () => defProps.countDown.time + }, + // 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 + format: { + type: String, + default: () => defProps.countDown.format + }, + // 是否自动开始倒计时 + autoStart: { + type: Boolean, + default: () => defProps.countDown.autoStart + }, + // 是否展示毫秒倒计时 + millisecond: { + type: Boolean, + default: () => defProps.countDown.millisecond + } + } +}) diff --git a/uview-plus/components/u-count-down/u-count-down.vue b/uview-plus/components/u-count-down/u-count-down.vue new file mode 100644 index 0000000..fe034aa --- /dev/null +++ b/uview-plus/components/u-count-down/u-count-down.vue @@ -0,0 +1,166 @@ + + + + + diff --git a/uview-plus/components/u-count-down/utils.js b/uview-plus/components/u-count-down/utils.js new file mode 100644 index 0000000..4cde64d --- /dev/null +++ b/uview-plus/components/u-count-down/utils.js @@ -0,0 +1,62 @@ +// 补0，如1 -> 01 +function padZero(num, targetLength = 2) { + let str = `${num}` + while (str.length < targetLength) { + str = `0${str}` + } + return str +} +const SECOND = 1000 +const MINUTE = 60 * SECOND +const HOUR = 60 * MINUTE +const DAY = 24 * HOUR +export function parseTimeData(time) { + const days = Math.floor(time / DAY) + const hours = Math.floor((time % DAY) / HOUR) + const minutes = Math.floor((time % HOUR) / MINUTE) + const seconds = Math.floor((time % MINUTE) / SECOND) + const milliseconds = Math.floor(time % SECOND) + return { + days, + hours, + minutes, + seconds, + milliseconds + } +} +export function parseFormat(format, timeData) { + let { + days, + hours, + minutes, + seconds, + milliseconds + } = timeData + // 如果格式化字符串中不存在DD(天)，则将天的时间转为小时中去 + if (format.indexOf('DD') === -1) { + hours += days * 24 + } else { + // 对天补0 + format = format.replace('DD', padZero(days)) + } + // 其他同理于DD的格式化处理方式 + if (format.indexOf('HH') === -1) { + minutes += hours * 60 + } else { + format = format.replace('HH', padZero(hours)) + } + if (format.indexOf('mm') === -1) { + seconds += minutes * 60 + } else { + format = format.replace('mm', padZero(minutes)) + } + if (format.indexOf('ss') === -1) { + milliseconds += seconds * 1000 + } else { + format = format.replace('ss', padZero(seconds)) + } + return format.replace('SSS', padZero(milliseconds, 3)) +} +export function isSameSecond(time1, time2) { + return Math.floor(time1 / 1000) === Math.floor(time2 / 1000) +} diff --git a/uview-plus/components/u-count-to/countTo.js b/uview-plus/components/u-count-to/countTo.js new file mode 100644 index 0000000..ce76b54 --- /dev/null +++ b/uview-plus/components/u-count-to/countTo.js @@ -0,0 +1,25 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:57:32 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/countTo.js + */ +export default { + // countTo 组件 + countTo: { + startVal: 0, + endVal: 0, + duration: 2000, + autoplay: true, + decimals: 0, + useEasing: true, + decimal: '.', + color: '#606266', + fontSize: 22, + bold: false, + separator: '' + } +} diff --git a/uview-plus/components/u-count-to/props.js b/uview-plus/components/u-count-to/props.js new file mode 100644 index 0000000..d487e88 --- /dev/null +++ b/uview-plus/components/u-count-to/props.js @@ -0,0 +1,61 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 开始的数值，默认从0增长到某一个数 + startVal: { + type: [String, Number], + default: () => defProps.countTo.startVal + }, + // 要滚动的目标数值，必须 + endVal: { + type: [String, Number], + default: () => defProps.countTo.endVal + }, + // 滚动到目标数值的动画持续时间，单位为毫秒（ms） + duration: { + type: [String, Number], + default: () => defProps.countTo.duration + }, + // 设置数值后是否自动开始滚动 + autoplay: { + type: Boolean, + default: () => defProps.countTo.autoplay + }, + // 要显示的小数位数 + decimals: { + type: [String, Number], + default: () => defProps.countTo.decimals + }, + // 是否在即将到达目标数值的时候，使用缓慢滚动的效果 + useEasing: { + type: Boolean, + default: () => defProps.countTo.useEasing + }, + // 十进制分割 + decimal: { + type: [String, Number], + default: () => defProps.countTo.decimal + }, + // 字体颜色 + color: { + type: String, + default: () => defProps.countTo.color + }, + // 字体大小 + fontSize: { + type: [String, Number], + default: () => defProps.countTo.fontSize + }, + // 是否加粗字体 + bold: { + type: Boolean, + default: () => defProps.countTo.bold + }, + // 千位分隔符，类似金额的分割(￥23,321.05中的",") + separator: { + type: String, + default: () => defProps.countTo.separator + } + } +}) diff --git a/uview-plus/components/u-count-to/u-count-to.vue b/uview-plus/components/u-count-to/u-count-to.vue new file mode 100644 index 0000000..fd6294b --- /dev/null +++ b/uview-plus/components/u-count-to/u-count-to.vue @@ -0,0 +1,189 @@ + + + + + diff --git a/uview-plus/components/u-datetime-picker/datetimePicker.js b/uview-plus/components/u-datetime-picker/datetimePicker.js new file mode 100644 index 0000000..ad9dc82 --- /dev/null +++ b/uview-plus/components/u-datetime-picker/datetimePicker.js @@ -0,0 +1,37 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:57:48 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/datetimePicker.js + */ +export default { + // datetimePicker 组件 + datetimePicker: { + show: false, + popupMode: 'bottom', + showToolbar: true, + value: '', + title: '', + mode: 'datetime', + maxDate: new Date(new Date().getFullYear() + 10, 0, 1).getTime(), + minDate: new Date(new Date().getFullYear() - 10, 0, 1).getTime(), + minHour: 0, + maxHour: 23, + minMinute: 0, + maxMinute: 59, + filter: null, + formatter: null, + loading: false, + itemHeight: 44, + cancelText: '取消', + confirmText: '确认', + cancelColor: '#909193', + confirmColor: '#3c9cff', + visibleItemCount: 5, + closeOnClickOverlay: false, + defaultIndex: [] + } +} diff --git a/uview-plus/components/u-datetime-picker/props.js b/uview-plus/components/u-datetime-picker/props.js new file mode 100644 index 0000000..e9362ee --- /dev/null +++ b/uview-plus/components/u-datetime-picker/props.js @@ -0,0 +1,158 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 是否显示input + hasInput: { + type: Boolean, + default: () => false + }, + disabled: { + type: Boolean, + default: () => false + }, + disabledColor:{ + type: String, + default: () => defProps.input.disabledColor + }, + placeholder: { + type: String, + default: () => '请选择' + }, + format: { + type: String, + default: () => '' + }, + // 是否打开组件 + show: { + type: Boolean, + default: () => defProps.datetimePicker.show + }, + // 弹出的方向，可选值为 top bottom right left center + popupMode: { + type: String, + default: () => defProps.picker.popupMode + }, + // 是否展示顶部的操作栏 + showToolbar: { + type: Boolean, + default: () => defProps.datetimePicker.showToolbar + }, + // 工具栏右侧内容 + toolbarRightSlot:{ + type: Boolean, + default: false + }, + // #ifdef VUE2 + // 绑定值 + value: { + type: [String, Number], + default: () => defProps.datetimePicker.value + }, + // #endif + // #ifdef VUE3 + // 绑定值 + modelValue: { + type: [String, Number], + default: () => defProps.datetimePicker.value + }, + // #endif + // 顶部标题 + title: { + type: String, + default: () => defProps.datetimePicker.title + }, + // 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择 + mode: { + type: String, + default: () => defProps.datetimePicker.mode + }, + // 可选的最大时间 + maxDate: { + type: Number, + // 最大默认值为后10年 + default: () => defProps.datetimePicker.maxDate + }, + // 可选的最小时间 + minDate: { + type: Number, + // 最小默认值为前10年 + default: () => defProps.datetimePicker.minDate + }, + // 可选的最小小时，仅mode=time有效 + minHour: { + type: Number, + default: () => defProps.datetimePicker.minHour + }, + // 可选的最大小时，仅mode=time有效 + maxHour: { + type: Number, + default: () => defProps.datetimePicker.maxHour + }, + // 可选的最小分钟，仅mode=time有效 + minMinute: { + type: Number, + default: () => defProps.datetimePicker.minMinute + }, + // 可选的最大分钟，仅mode=time有效 + maxMinute: { + type: Number, + default: () => defProps.datetimePicker.maxMinute + }, + // 选项过滤函数 + filter: { + type: [Function, null], + default: () => defProps.datetimePicker.filter + }, + // 选项格式化函数 + formatter: { + type: [Function, null], + default: () => defProps.datetimePicker.formatter + }, + // 是否显示加载中状态 + loading: { + type: Boolean, + default: () => defProps.datetimePicker.loading + }, + // 各列中，单个选项的高度 + itemHeight: { + type: [String, Number], + default: () => defProps.datetimePicker.itemHeight + }, + // 取消按钮的文字 + cancelText: { + type: String, + default: () => defProps.datetimePicker.cancelText + }, + // 确认按钮的文字 + confirmText: { + type: String, + default: () => defProps.datetimePicker.confirmText + }, + // 取消按钮的颜色 + cancelColor: { + type: String, + default: () => defProps.datetimePicker.cancelColor + }, + // 确认按钮的颜色 + confirmColor: { + type: String, + default: () => defProps.datetimePicker.confirmColor + }, + // 每列中可见选项的数量 + visibleItemCount: { + type: [String, Number], + default: () => defProps.datetimePicker.visibleItemCount + }, + // 是否允许点击遮罩关闭选择器 + closeOnClickOverlay: { + type: Boolean, + default: () => defProps.datetimePicker.closeOnClickOverlay + }, + // 各列的默认索引 + defaultIndex: { + type: Array, + default: () => defProps.datetimePicker.defaultIndex + } + } +}) diff --git a/uview-plus/components/u-datetime-picker/u-datetime-picker.vue b/uview-plus/components/u-datetime-picker/u-datetime-picker.vue new file mode 100644 index 0000000..b2cbfa0 --- /dev/null +++ b/uview-plus/components/u-datetime-picker/u-datetime-picker.vue @@ -0,0 +1,505 @@ + + + + + diff --git a/uview-plus/components/u-divider/divider.js b/uview-plus/components/u-divider/divider.js new file mode 100644 index 0000000..bbe6d33 --- /dev/null +++ b/uview-plus/components/u-divider/divider.js @@ -0,0 +1,23 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 16:58:03 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/divider.js + */ +export default { + // divider组件 + divider: { + dashed: false, + hairline: true, + dot: false, + textPosition: 'center', + text: '', + textSize: 14, + textColor: '#909399', + lineColor: '#dcdfe6' + } + +} diff --git a/uview-plus/components/u-divider/props.js b/uview-plus/components/u-divider/props.js new file mode 100644 index 0000000..3a9a598 --- /dev/null +++ b/uview-plus/components/u-divider/props.js @@ -0,0 +1,46 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 是否虚线 + dashed: { + type: Boolean, + default: () => defProps.divider.dashed + }, + // 是否细线 + hairline: { + type: Boolean, + default: () => defProps.divider.hairline + }, + // 是否以点替代文字，优先于text字段起作用 + dot: { + type: Boolean, + default: () => defProps.divider.dot + }, + // 内容文本的位置，left-左边，center-中间，right-右边 + textPosition: { + type: String, + default: () => defProps.divider.textPosition + }, + // 文本内容 + text: { + type: [String, Number], + default: () => defProps.divider.text + }, + // 文本大小 + textSize: { + type: [String, Number], + default: () => defProps.divider.textSize + }, + // 文本颜色 + textColor: { + type: String, + default: () => defProps.divider.textColor + }, + // 线条颜色 + lineColor: { + type: String, + default: () => defProps.divider.lineColor + } + } +}) diff --git a/uview-plus/components/u-divider/u-divider.vue b/uview-plus/components/u-divider/u-divider.vue new file mode 100644 index 0000000..18f7b67 --- /dev/null +++ b/uview-plus/components/u-divider/u-divider.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/uview-plus/components/u-dropdown-item/props.js b/uview-plus/components/u-dropdown-item/props.js new file mode 100644 index 0000000..0f852db --- /dev/null +++ b/uview-plus/components/u-dropdown-item/props.js @@ -0,0 +1,47 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // #ifdef VUE3 + // 当前选中项的value值 + modelValue: { + type: [Number, String, Array], + default: '' + }, + // #endif + // #ifdef VUE2 + // 当前选中项的value值 + value: { + type: [Number, String, Array], + default: '' + }, + // #endif + // 菜单项标题 + title: { + type: [String, Number], + default: '' + }, + // 选项数据，如果传入了默认slot，此参数无效 + options: { + type: Array, + default() { + return [] + } + }, + // 是否禁用此菜单项 + disabled: { + type: Boolean, + default: false + }, + // 下拉弹窗的高度 + height: { + type: [Number, String], + default: 'auto' + }, + // 点击遮罩是否可以收起弹窗 + closeOnClickOverlay: { + type: Boolean, + default: true + } + } +}) diff --git a/uview-plus/components/u-dropdown-item/u-dropdown-item.vue b/uview-plus/components/u-dropdown-item/u-dropdown-item.vue new file mode 100644 index 0000000..35f92bb --- /dev/null +++ b/uview-plus/components/u-dropdown-item/u-dropdown-item.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/uview-plus/components/u-dropdown/props.js b/uview-plus/components/u-dropdown/props.js new file mode 100644 index 0000000..82a3976 --- /dev/null +++ b/uview-plus/components/u-dropdown/props.js @@ -0,0 +1,61 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 菜单标题和选项的激活态颜色 + activeColor: { + type: String, + default: '#2979ff' + }, + // 菜单标题和选项的未激活态颜色 + inactiveColor: { + type: String, + default: '#606266' + }, + // 点击遮罩是否关闭菜单 + closeOnClickMask: { + type: Boolean, + default: true + }, + // 点击当前激活项标题是否关闭菜单 + closeOnClickSelf: { + type: Boolean, + default: true + }, + // 过渡时间 + duration: { + type: [Number, String], + default: 300 + }, + // 标题菜单的高度 + height: { + type: [Number, String], + default: 40 + }, + // 是否显示下边框 + borderBottom: { + type: Boolean, + default: false + }, + // 标题的字体大小 + titleSize: { + type: [Number, String], + default: 14 + }, + // 下拉出来的内容部分的圆角值 + borderRadius: { + type: [Number, String], + default: 0 + }, + // 菜单右侧的icon图标 + menuIcon: { + type: String, + default: 'arrow-down' + }, + // 菜单右侧图标的大小 + menuIconSize: { + type: [Number, String], + default: 14 + } + } +}) diff --git a/uview-plus/components/u-dropdown/u-dropdown.vue b/uview-plus/components/u-dropdown/u-dropdown.vue new file mode 100644 index 0000000..414ec41 --- /dev/null +++ b/uview-plus/components/u-dropdown/u-dropdown.vue @@ -0,0 +1,254 @@ + + + + + diff --git a/uview-plus/components/u-empty/empty.js b/uview-plus/components/u-empty/empty.js new file mode 100644 index 0000000..b00de16 --- /dev/null +++ b/uview-plus/components/u-empty/empty.js @@ -0,0 +1,26 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:03:27 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/empty.js + */ +export default { + // empty组件 + empty: { + icon: '', + text: '', + textColor: '#c0c4cc', + textSize: 14, + iconColor: '#c0c4cc', + iconSize: 90, + mode: 'data', + width: 160, + height: 160, + show: true, + marginTop: 0 + } + +} diff --git a/uview-plus/components/u-empty/props.js b/uview-plus/components/u-empty/props.js new file mode 100644 index 0000000..966d910 --- /dev/null +++ b/uview-plus/components/u-empty/props.js @@ -0,0 +1,61 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 内置图标名称，或图片路径，建议绝对路径 + icon: { + type: String, + default: () => defProps.empty.icon + }, + // 提示文字 + text: { + type: String, + default: () => defProps.empty.text + }, + // 文字颜色 + textColor: { + type: String, + default: () => defProps.empty.textColor + }, + // 文字大小 + textSize: { + type: [String, Number], + default: () => defProps.empty.textSize + }, + // 图标的颜色 + iconColor: { + type: String, + default: () => defProps.empty.iconColor + }, + // 图标的大小 + iconSize: { + type: [String, Number], + default: () => defProps.empty.iconSize + }, + // 选择预置的图标类型 + mode: { + type: String, + default: () => defProps.empty.mode + }, + // 图标宽度，单位px + width: { + type: [String, Number], + default: () => defProps.empty.width + }, + // 图标高度，单位px + height: { + type: [String, Number], + default: () => defProps.empty.height + }, + // 是否显示组件 + show: { + type: Boolean, + default: () => defProps.empty.show + }, + // 组件距离上一个元素之间的距离，默认px单位 + marginTop: { + type: [String, Number], + default: () => defProps.empty.marginTop + } + } +}) diff --git a/uview-plus/components/u-empty/u-empty.vue b/uview-plus/components/u-empty/u-empty.vue new file mode 100644 index 0000000..a76e9cc --- /dev/null +++ b/uview-plus/components/u-empty/u-empty.vue @@ -0,0 +1,133 @@ + + + + + diff --git a/uview-plus/components/u-float-button/u-float-button.vue b/uview-plus/components/u-float-button/u-float-button.vue new file mode 100644 index 0000000..9ed76f2 --- /dev/null +++ b/uview-plus/components/u-float-button/u-float-button.vue @@ -0,0 +1,167 @@ + + + + + diff --git a/uview-plus/components/u-form-item/formItem.js b/uview-plus/components/u-form-item/formItem.js new file mode 100644 index 0000000..898771c --- /dev/null +++ b/uview-plus/components/u-form-item/formItem.js @@ -0,0 +1,24 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:04:32 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/formItem.js + */ +export default { + // formItem 组件 + formItem: { + label: '', + prop: '', + rules: [], + borderBottom: '', + labelPosition: '', + labelWidth: '', + rightIcon: '', + leftIcon: '', + required: false, + leftIconStyle: '', + } +} diff --git a/uview-plus/components/u-form-item/props.js b/uview-plus/components/u-form-item/props.js new file mode 100644 index 0000000..79445f3 --- /dev/null +++ b/uview-plus/components/u-form-item/props.js @@ -0,0 +1,55 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // input的label提示语 + label: { + type: String, + default: () => defProps.formItem.label + }, + // 绑定的值 + prop: { + type: String, + default: () => defProps.formItem.prop + }, + // 绑定的规则 + rules: { + type: Array, + default: () => defProps.formItem.rules + }, + // 是否显示表单域的下划线边框 + borderBottom: { + type: [String, Boolean], + default: () => defProps.formItem.borderBottom + }, + // label的位置，left-左边，top-上边 + labelPosition: { + type: String, + default: () => defProps.formItem.labelPosition + }, + // label的宽度，单位px + labelWidth: { + type: [String, Number], + default: () => defProps.formItem.labelWidth + }, + // 右侧图标 + rightIcon: { + type: String, + default: () => defProps.formItem.rightIcon + }, + // 左侧图标 + leftIcon: { + type: String, + default: () => defProps.formItem.leftIcon + }, + // 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 + required: { + type: Boolean, + default: () => defProps.formItem.required + }, + leftIconStyle: { + type: [String, Object], + default: () => defProps.formItem.leftIconStyle, + } + } +}) diff --git a/uview-plus/components/u-form-item/u-form-item.vue b/uview-plus/components/u-form-item/u-form-item.vue new file mode 100644 index 0000000..a93d055 --- /dev/null +++ b/uview-plus/components/u-form-item/u-form-item.vue @@ -0,0 +1,262 @@ + + + + + diff --git a/uview-plus/components/u-form/form.js b/uview-plus/components/u-form/form.js new file mode 100644 index 0000000..015bd37 --- /dev/null +++ b/uview-plus/components/u-form/form.js @@ -0,0 +1,22 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:03:49 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/form.js + */ +export default { + // form 组件 + form: { + model: {}, + rules: {}, + errorType: 'message', + borderBottom: true, + labelPosition: 'left', + labelWidth: 45, + labelAlign: 'left', + labelStyle: {} + } +} diff --git a/uview-plus/components/u-form/props.js b/uview-plus/components/u-form/props.js new file mode 100644 index 0000000..949eb1c --- /dev/null +++ b/uview-plus/components/u-form/props.js @@ -0,0 +1,47 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 当前form的需要验证字段的集合 + model: { + type: Object, + default: () => defProps.form.model + }, + // 验证规则 + rules: { + type: [Object, Function, Array], + default: () => defProps.form.rules + }, + // 有错误时的提示方式，message-提示信息，toast-进行toast提示 + // border-bottom-下边框呈现红色，none-无提示 + errorType: { + type: String, + default: () => defProps.form.errorType + }, + // 是否显示表单域的下划线边框 + borderBottom: { + type: Boolean, + default: () => defProps.form.borderBottom + }, + // label的位置，left-左边，top-上边 + labelPosition: { + type: String, + default: () => defProps.form.labelPosition + }, + // label的宽度，单位px + labelWidth: { + type: [String, Number], + default: () => defProps.form.labelWidth + }, + // lable字体的对齐方式 + labelAlign: { + type: String, + default: () => defProps.form.labelAlign + }, + // lable的样式，对象形式 + labelStyle: { + type: Object, + default: () => defProps.form.labelStyle + } + } +}) diff --git a/uview-plus/components/u-form/u-form.vue b/uview-plus/components/u-form/u-form.vue new file mode 100644 index 0000000..4811004 --- /dev/null +++ b/uview-plus/components/u-form/u-form.vue @@ -0,0 +1,258 @@ + + + + + diff --git a/uview-plus/components/u-gap/gap.js b/uview-plus/components/u-gap/gap.js new file mode 100644 index 0000000..5f729fa --- /dev/null +++ b/uview-plus/components/u-gap/gap.js @@ -0,0 +1,19 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:05:25 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/gap.js + */ +export default { + // gap组件 + gap: { + bgColor: 'transparent', + height: 20, + marginTop: 0, + marginBottom: 0, + customStyle: {} + } +} diff --git a/uview-plus/components/u-gap/props.js b/uview-plus/components/u-gap/props.js new file mode 100644 index 0000000..c050c43 --- /dev/null +++ b/uview-plus/components/u-gap/props.js @@ -0,0 +1,26 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 背景颜色（默认transparent） + bgColor: { + type: String, + default: () => defProps.gap.bgColor + }, + // 分割槽高度，单位px（默认30） + height: { + type: [String, Number], + default: () => defProps.gap.height + }, + // 与上一个组件的距离 + marginTop: { + type: [String, Number], + default: () => defProps.gap.marginTop + }, + // 与下一个组件的距离 + marginBottom: { + type: [String, Number], + default: () => defProps.gap.marginBottom + } + } +}) diff --git a/uview-plus/components/u-gap/u-gap.vue b/uview-plus/components/u-gap/u-gap.vue new file mode 100644 index 0000000..dad81b9 --- /dev/null +++ b/uview-plus/components/u-gap/u-gap.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/uview-plus/components/u-grid-item/gridItem.js b/uview-plus/components/u-grid-item/gridItem.js new file mode 100644 index 0000000..47babd7 --- /dev/null +++ b/uview-plus/components/u-grid-item/gridItem.js @@ -0,0 +1,16 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:06:13 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/gridItem.js + */ +export default { + // grid-item组件 + gridItem: { + name: null, + bgColor: 'transparent' + } +} diff --git a/uview-plus/components/u-grid-item/props.js b/uview-plus/components/u-grid-item/props.js new file mode 100644 index 0000000..ab7161f --- /dev/null +++ b/uview-plus/components/u-grid-item/props.js @@ -0,0 +1,16 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 宫格的name + name: { + type: [String, Number, null], + default: () => defProps.gridItem.name + }, + // 背景颜色 + bgColor: { + type: String, + default: () => defProps.gridItem.bgColor + } + } +}) diff --git a/uview-plus/components/u-grid-item/u-grid-item.vue b/uview-plus/components/u-grid-item/u-grid-item.vue new file mode 100644 index 0000000..4fdb579 --- /dev/null +++ b/uview-plus/components/u-grid-item/u-grid-item.vue @@ -0,0 +1,219 @@ + + + + + diff --git a/uview-plus/components/u-grid/grid.js b/uview-plus/components/u-grid/grid.js new file mode 100644 index 0000000..4064bd0 --- /dev/null +++ b/uview-plus/components/u-grid/grid.js @@ -0,0 +1,17 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:05:57 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/grid.js + */ +export default { + // grid组件 + grid: { + col: 3, + border: false, + align: 'left' + } +} diff --git a/uview-plus/components/u-grid/props.js b/uview-plus/components/u-grid/props.js new file mode 100644 index 0000000..61d0903 --- /dev/null +++ b/uview-plus/components/u-grid/props.js @@ -0,0 +1,26 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 分成几列 + col: { + type: [String, Number], + default: () => defProps.grid.col + }, + // 是否显示边框 + border: { + type: Boolean, + default: () => defProps.grid.border + }, + // 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 + align: { + type: String, + default: () => defProps.grid.align + }, + // 间隔 + gap: { + type: String, + default: '0px' + } + } +}) diff --git a/uview-plus/components/u-grid/u-grid.vue b/uview-plus/components/u-grid/u-grid.vue new file mode 100644 index 0000000..a895058 --- /dev/null +++ b/uview-plus/components/u-grid/u-grid.vue @@ -0,0 +1,114 @@ + + + + + diff --git a/uview-plus/components/u-icon/icon.js b/uview-plus/components/u-icon/icon.js new file mode 100644 index 0000000..e115a45 --- /dev/null +++ b/uview-plus/components/u-icon/icon.js @@ -0,0 +1,36 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 18:00:14 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/icon.js + */ +import config from '../../libs/config/config' + +const { + color +} = config +export default { + // icon组件 + icon: { + name: '', + color: color['u-content-color'], + size: '16px', + bold: false, + index: '', + hoverClass: '', + customPrefix: 'uicon', + label: '', + labelPos: 'right', + labelSize: '15px', + labelColor: color['u-content-color'], + space: '3px', + imgMode: '', + width: '', + height: '', + top: 0, + stop: false + } +} diff --git a/uview-plus/components/u-icon/icons.js b/uview-plus/components/u-icon/icons.js new file mode 100644 index 0000000..5d6ca28 --- /dev/null +++ b/uview-plus/components/u-icon/icons.js @@ -0,0 +1,214 @@ +export default { + 'uicon-level': '\ue693', + 'uicon-column-line': '\ue68e', + 'uicon-checkbox-mark': '\ue807', + 'uicon-folder': '\ue7f5', + 'uicon-movie': '\ue7f6', + 'uicon-star-fill': '\ue669', + 'uicon-star': '\ue65f', + 'uicon-phone-fill': '\ue64f', + 'uicon-phone': '\ue622', + 'uicon-apple-fill': '\ue881', + 'uicon-chrome-circle-fill': '\ue885', + 'uicon-backspace': '\ue67b', + 'uicon-attach': '\ue632', + 'uicon-cut': '\ue948', + 'uicon-empty-car': '\ue602', + 'uicon-empty-coupon': '\ue682', + 'uicon-empty-address': '\ue646', + 'uicon-empty-favor': '\ue67c', + 'uicon-empty-permission': '\ue686', + 'uicon-empty-news': '\ue687', + 'uicon-empty-search': '\ue664', + 'uicon-github-circle-fill': '\ue887', + 'uicon-rmb': '\ue608', + 'uicon-person-delete-fill': '\ue66a', + 'uicon-reload': '\ue788', + 'uicon-order': '\ue68f', + 'uicon-server-man': '\ue6bc', + 'uicon-search': '\ue62a', + 'uicon-fingerprint': '\ue955', + 'uicon-more-dot-fill': '\ue630', + 'uicon-scan': '\ue662', + 'uicon-share-square': '\ue60b', + 'uicon-map': '\ue61d', + 'uicon-map-fill': '\ue64e', + 'uicon-tags': '\ue629', + 'uicon-tags-fill': '\ue651', + 'uicon-bookmark-fill': '\ue63b', + 'uicon-bookmark': '\ue60a', + 'uicon-eye': '\ue613', + 'uicon-eye-fill': '\ue641', + 'uicon-mic': '\ue64a', + 'uicon-mic-off': '\ue649', + 'uicon-calendar': '\ue66e', + 'uicon-calendar-fill': '\ue634', + 'uicon-trash': '\ue623', + 'uicon-trash-fill': '\ue658', + 'uicon-play-left': '\ue66d', + 'uicon-play-right': '\ue610', + 'uicon-minus': '\ue618', + 'uicon-plus': '\ue62d', + 'uicon-info': '\ue653', + 'uicon-info-circle': '\ue7d2', + 'uicon-info-circle-fill': '\ue64b', + 'uicon-question': '\ue715', + 'uicon-error': '\ue6d3', + 'uicon-close': '\ue685', + 'uicon-checkmark': '\ue6a8', + 'uicon-android-circle-fill': '\ue67e', + 'uicon-android-fill': '\ue67d', + 'uicon-ie': '\ue87b', + 'uicon-IE-circle-fill': '\ue889', + 'uicon-google': '\ue87a', + 'uicon-google-circle-fill': '\ue88a', + 'uicon-setting-fill': '\ue872', + 'uicon-setting': '\ue61f', + 'uicon-minus-square-fill': '\ue855', + 'uicon-plus-square-fill': '\ue856', + 'uicon-heart': '\ue7df', + 'uicon-heart-fill': '\ue851', + 'uicon-camera': '\ue7d7', + 'uicon-camera-fill': '\ue870', + 'uicon-more-circle': '\ue63e', + 'uicon-more-circle-fill': '\ue645', + 'uicon-chat': '\ue620', + 'uicon-chat-fill': '\ue61e', + 'uicon-bag-fill': '\ue617', + 'uicon-bag': '\ue619', + 'uicon-error-circle-fill': '\ue62c', + 'uicon-error-circle': '\ue624', + 'uicon-close-circle': '\ue63f', + 'uicon-close-circle-fill': '\ue637', + 'uicon-checkmark-circle': '\ue63d', + 'uicon-checkmark-circle-fill': '\ue635', + 'uicon-question-circle-fill': '\ue666', + 'uicon-question-circle': '\ue625', + 'uicon-share': '\ue631', + 'uicon-share-fill': '\ue65e', + 'uicon-shopping-cart': '\ue621', + 'uicon-shopping-cart-fill': '\ue65d', + 'uicon-bell': '\ue609', + 'uicon-bell-fill': '\ue640', + 'uicon-list': '\ue650', + 'uicon-list-dot': '\ue616', + 'uicon-zhihu': '\ue6ba', + 'uicon-zhihu-circle-fill': '\ue709', + 'uicon-zhifubao': '\ue6b9', + 'uicon-zhifubao-circle-fill': '\ue6b8', + 'uicon-weixin-circle-fill': '\ue6b1', + 'uicon-weixin-fill': '\ue6b2', + 'uicon-twitter-circle-fill': '\ue6ab', + 'uicon-twitter': '\ue6aa', + 'uicon-taobao-circle-fill': '\ue6a7', + 'uicon-taobao': '\ue6a6', + 'uicon-weibo-circle-fill': '\ue6a5', + 'uicon-weibo': '\ue6a4', + 'uicon-qq-fill': '\ue6a1', + 'uicon-qq-circle-fill': '\ue6a0', + 'uicon-moments-circel-fill': '\ue69a', + 'uicon-moments': '\ue69b', + 'uicon-qzone': '\ue695', + 'uicon-qzone-circle-fill': '\ue696', + 'uicon-baidu-circle-fill': '\ue680', + 'uicon-baidu': '\ue681', + 'uicon-facebook-circle-fill': '\ue68a', + 'uicon-facebook': '\ue689', + 'uicon-car': '\ue60c', + 'uicon-car-fill': '\ue636', + 'uicon-warning-fill': '\ue64d', + 'uicon-warning': '\ue694', + 'uicon-clock-fill': '\ue638', + 'uicon-clock': '\ue60f', + 'uicon-edit-pen': '\ue612', + 'uicon-edit-pen-fill': '\ue66b', + 'uicon-email': '\ue611', + 'uicon-email-fill': '\ue642', + 'uicon-minus-circle': '\ue61b', + 'uicon-minus-circle-fill': '\ue652', + 'uicon-plus-circle': '\ue62e', + 'uicon-plus-circle-fill': '\ue661', + 'uicon-file-text': '\ue663', + 'uicon-file-text-fill': '\ue665', + 'uicon-pushpin': '\ue7e3', + 'uicon-pushpin-fill': '\ue86e', + 'uicon-grid': '\ue673', + 'uicon-grid-fill': '\ue678', + 'uicon-play-circle': '\ue647', + 'uicon-play-circle-fill': '\ue655', + 'uicon-pause-circle-fill': '\ue654', + 'uicon-pause': '\ue8fa', + 'uicon-pause-circle': '\ue643', + 'uicon-eye-off': '\ue648', + 'uicon-eye-off-outline': '\ue62b', + 'uicon-gift-fill': '\ue65c', + 'uicon-gift': '\ue65b', + 'uicon-rmb-circle-fill': '\ue657', + 'uicon-rmb-circle': '\ue677', + 'uicon-kefu-ermai': '\ue656', + 'uicon-server-fill': '\ue751', + 'uicon-coupon-fill': '\ue8c4', + 'uicon-coupon': '\ue8ae', + 'uicon-integral': '\ue704', + 'uicon-integral-fill': '\ue703', + 'uicon-home-fill': '\ue964', + 'uicon-home': '\ue965', + 'uicon-hourglass-half-fill': '\ue966', + 'uicon-hourglass': '\ue967', + 'uicon-account': '\ue628', + 'uicon-plus-people-fill': '\ue626', + 'uicon-minus-people-fill': '\ue615', + 'uicon-account-fill': '\ue614', + 'uicon-thumb-down-fill': '\ue726', + 'uicon-thumb-down': '\ue727', + 'uicon-thumb-up': '\ue733', + 'uicon-thumb-up-fill': '\ue72f', + 'uicon-lock-fill': '\ue979', + 'uicon-lock-open': '\ue973', + 'uicon-lock-opened-fill': '\ue974', + 'uicon-lock': '\ue97a', + 'uicon-red-packet-fill': '\ue690', + 'uicon-photo-fill': '\ue98b', + 'uicon-photo': '\ue98d', + 'uicon-volume-off-fill': '\ue659', + 'uicon-volume-off': '\ue644', + 'uicon-volume-fill': '\ue670', + 'uicon-volume': '\ue633', + 'uicon-red-packet': '\ue691', + 'uicon-download': '\ue63c', + 'uicon-arrow-up-fill': '\ue6b0', + 'uicon-arrow-down-fill': '\ue600', + 'uicon-play-left-fill': '\ue675', + 'uicon-play-right-fill': '\ue676', + 'uicon-rewind-left-fill': '\ue679', + 'uicon-rewind-right-fill': '\ue67a', + 'uicon-arrow-downward': '\ue604', + 'uicon-arrow-leftward': '\ue601', + 'uicon-arrow-rightward': '\ue603', + 'uicon-arrow-upward': '\ue607', + 'uicon-arrow-down': '\ue60d', + 'uicon-arrow-right': '\ue605', + 'uicon-arrow-left': '\ue60e', + 'uicon-arrow-up': '\ue606', + 'uicon-skip-back-left': '\ue674', + 'uicon-skip-forward-right': '\ue672', + 'uicon-rewind-right': '\ue66f', + 'uicon-rewind-left': '\ue671', + 'uicon-arrow-right-double': '\ue68d', + 'uicon-arrow-left-double': '\ue68c', + 'uicon-wifi-off': '\ue668', + 'uicon-wifi': '\ue667', + 'uicon-empty-data': '\ue62f', + 'uicon-empty-history': '\ue684', + 'uicon-empty-list': '\ue68b', + 'uicon-empty-page': '\ue627', + 'uicon-empty-order': '\ue639', + 'uicon-man': '\ue697', + 'uicon-woman': '\ue69c', + 'uicon-man-add': '\ue61c', + 'uicon-man-add-fill': '\ue64c', + 'uicon-man-delete': '\ue61a', + 'uicon-man-delete-fill': '\ue66a', + 'uicon-zh': '\ue70a', + 'uicon-en': '\ue692' +} diff --git a/uview-plus/components/u-icon/props.js b/uview-plus/components/u-icon/props.js new file mode 100644 index 0000000..eb7604e --- /dev/null +++ b/uview-plus/components/u-icon/props.js @@ -0,0 +1,91 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 图标类名 + name: { + type: String, + default: () => defProps.icon.name + }, + // 图标颜色，可接受主题色 + color: { + type: String, + default: () => defProps.icon.color + }, + // 字体大小，单位px + size: { + type: [String, Number], + default: () => defProps.icon.size + }, + // 是否显示粗体 + bold: { + type: Boolean, + default: () => defProps.icon.bold + }, + // 点击图标的时候传递事件出去的index（用于区分点击了哪一个） + index: { + type: [String, Number], + default: () => defProps.icon.index + }, + // 触摸图标时的类名 + hoverClass: { + type: String, + default: () => defProps.icon.hoverClass + }, + // 自定义扩展前缀，方便用户扩展自己的图标库 + customPrefix: { + type: String, + default: () => defProps.icon.customPrefix + }, + // 图标右边或者下面的文字 + label: { + type: [String, Number], + default: () => defProps.icon.label + }, + // label的位置，只能右边或者下边 + labelPos: { + type: String, + default: () => defProps.icon.labelPos + }, + // label的大小 + labelSize: { + type: [String, Number], + default: () => defProps.icon.labelSize + }, + // label的颜色 + labelColor: { + type: String, + default: () => defProps.icon.labelColor + }, + // label与图标的距离 + space: { + type: [String, Number], + default: () => defProps.icon.space + }, + // 图片的mode + imgMode: { + type: String, + default: () => defProps.icon.imgMode + }, + // 用于显示图片小图标时，图片的宽度 + width: { + type: [String, Number], + default: () => defProps.icon.width + }, + // 用于显示图片小图标时，图片的高度 + height: { + type: [String, Number], + default: () => defProps.icon.height + }, + // 用于解决某些情况下，让图标垂直居中的用途 + top: { + type: [String, Number], + default: () => defProps.icon.top + }, + // 是否阻止事件传播 + stop: { + type: Boolean, + default: () => defProps.icon.stop + } + } +}) diff --git a/uview-plus/components/u-icon/u-icon.vue b/uview-plus/components/u-icon/u-icon.vue new file mode 100644 index 0000000..65d85b7 --- /dev/null +++ b/uview-plus/components/u-icon/u-icon.vue @@ -0,0 +1,254 @@ + + + + + diff --git a/uview-plus/components/u-image/image.js b/uview-plus/components/u-image/image.js new file mode 100644 index 0000000..a32242b --- /dev/null +++ b/uview-plus/components/u-image/image.js @@ -0,0 +1,30 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:01:51 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/image.js + */ +export default { + // image组件 + image: { + src: '', + mode: 'aspectFill', + width: '300', + height: '225', + shape: 'square', + radius: 0, + lazyLoad: true, + showMenuByLongpress: true, + loadingIcon: 'photo', + errorIcon: 'error-circle', + showLoading: true, + showError: true, + fade: true, + webp: false, + duration: 500, + bgColor: '#f3f4f6' + } +} diff --git a/uview-plus/components/u-image/props.js b/uview-plus/components/u-image/props.js new file mode 100644 index 0000000..9f02d6e --- /dev/null +++ b/uview-plus/components/u-image/props.js @@ -0,0 +1,86 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 图片地址 + src: { + type: String, + default: () => defProps.image.src + }, + // 裁剪模式 + mode: { + type: String, + default: () => defProps.image.mode + }, + // 宽度，单位任意 + width: { + type: [String, Number], + default: () => defProps.image.width + }, + // 高度，单位任意 + height: { + type: [String, Number], + default: () => defProps.image.height + }, + // 图片形状，circle-圆形，square-方形 + shape: { + type: String, + default: () => defProps.image.shape + }, + // 圆角，单位任意 + radius: { + type: [String, Number], + default: () => defProps.image.radius + }, + // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序 + lazyLoad: { + type: Boolean, + default: () => defProps.image.lazyLoad + }, + // 开启长按图片显示识别微信小程序码菜单 + showMenuByLongpress: { + type: Boolean, + default: () => defProps.image.showMenuByLongpress + }, + // 加载中的图标，或者小图片 + loadingIcon: { + type: String, + default: () => defProps.image.loadingIcon + }, + // 加载失败的图标，或者小图片 + errorIcon: { + type: String, + default: () => defProps.image.errorIcon + }, + // 是否显示加载中的图标或者自定义的slot + showLoading: { + type: Boolean, + default: () => defProps.image.showLoading + }, + // 是否显示加载错误的图标或者自定义的slot + showError: { + type: Boolean, + default: () => defProps.image.showError + }, + // 是否需要淡入效果 + fade: { + type: Boolean, + default: () => defProps.image.fade + }, + // 只支持网络资源，只对微信小程序有效 + webp: { + type: Boolean, + default: () => defProps.image.webp + }, + // 过渡时间，单位ms + duration: { + type: [String, Number], + default: () => defProps.image.duration + }, + // 背景颜色，用于深色页面加载图片时，为了和背景色融合 + bgColor: { + type: String, + default: () => defProps.image.bgColor + } + } +}) diff --git a/uview-plus/components/u-image/u-image.vue b/uview-plus/components/u-image/u-image.vue new file mode 100644 index 0000000..49da30b --- /dev/null +++ b/uview-plus/components/u-image/u-image.vue @@ -0,0 +1,266 @@ + + + + + diff --git a/uview-plus/components/u-index-anchor/indexAnchor.js b/uview-plus/components/u-index-anchor/indexAnchor.js new file mode 100644 index 0000000..2541600 --- /dev/null +++ b/uview-plus/components/u-index-anchor/indexAnchor.js @@ -0,0 +1,19 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:13:15 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/indexAnchor.js + */ +export default { + // indexAnchor 组件 + indexAnchor: { + text: '', + color: '#606266', + size: 14, + bgColor: '#dedede', + height: 32 + } +} diff --git a/uview-plus/components/u-index-anchor/props.js b/uview-plus/components/u-index-anchor/props.js new file mode 100644 index 0000000..41c2f74 --- /dev/null +++ b/uview-plus/components/u-index-anchor/props.js @@ -0,0 +1,31 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 列表锚点文本内容 + text: { + type: [String, Number], + default: () => defProps.indexAnchor.text + }, + // 列表锚点文字颜色 + color: { + type: String, + default: () => defProps.indexAnchor.color + }, + // 列表锚点文字大小，单位默认px + size: { + type: [String, Number], + default: () => defProps.indexAnchor.size + }, + // 列表锚点背景颜色 + bgColor: { + type: String, + default: () => defProps.indexAnchor.bgColor + }, + // 列表锚点高度，单位默认px + height: { + type: [String, Number], + default: () => defProps.indexAnchor.height + } + } +}) diff --git a/uview-plus/components/u-index-anchor/u-index-anchor.vue b/uview-plus/components/u-index-anchor/u-index-anchor.vue new file mode 100644 index 0000000..f86c383 --- /dev/null +++ b/uview-plus/components/u-index-anchor/u-index-anchor.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/uview-plus/components/u-index-item/props.js b/uview-plus/components/u-index-item/props.js new file mode 100644 index 0000000..fd42caa --- /dev/null +++ b/uview-plus/components/u-index-item/props.js @@ -0,0 +1,8 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const props = defineMixin({ + props: { + + } +}) diff --git a/uview-plus/components/u-index-item/u-index-item.vue b/uview-plus/components/u-index-item/u-index-item.vue new file mode 100644 index 0000000..4f01989 --- /dev/null +++ b/uview-plus/components/u-index-item/u-index-item.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/uview-plus/components/u-index-list/indexList.js b/uview-plus/components/u-index-list/indexList.js new file mode 100644 index 0000000..015a2f9 --- /dev/null +++ b/uview-plus/components/u-index-list/indexList.js @@ -0,0 +1,20 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:13:35 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/indexList.js + */ +export default { + // indexList 组件 + indexList: { + inactiveColor: '#606266', + activeColor: '#5677fc', + indexList: [], + sticky: true, + customNavHeight: 0, + safeBottomFix: false + } +} diff --git a/uview-plus/components/u-index-list/props.js b/uview-plus/components/u-index-list/props.js new file mode 100644 index 0000000..b27935a --- /dev/null +++ b/uview-plus/components/u-index-list/props.js @@ -0,0 +1,36 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 右边锚点非激活的颜色 + inactiveColor: { + type: String, + default: () => defProps.indexList.inactiveColor + }, + // 右边锚点激活的颜色 + activeColor: { + type: String, + default: () => defProps.indexList.activeColor + }, + // 索引字符列表，数组形式 + indexList: { + type: Array, + default: () => defProps.indexList.indexList + }, + // 是否开启锚点自动吸顶 + sticky: { + type: Boolean, + default: () => defProps.indexList.sticky + }, + // 自定义导航栏的高度 + customNavHeight: { + type: [String, Number], + default: () => defProps.indexList.customNavHeight + }, + // 是否开启底部安全距离适配 + safeBottomFix: { + type: Boolean, + default: () => defProps.indexList.safeBottomFix + }, + } +}) diff --git a/uview-plus/components/u-index-list/u-index-list.vue b/uview-plus/components/u-index-list/u-index-list.vue new file mode 100644 index 0000000..cd244b9 --- /dev/null +++ b/uview-plus/components/u-index-list/u-index-list.vue @@ -0,0 +1,589 @@ + + + + + diff --git a/uview-plus/components/u-input/input.js b/uview-plus/components/u-input/input.js new file mode 100644 index 0000000..8a66233 --- /dev/null +++ b/uview-plus/components/u-input/input.js @@ -0,0 +1,48 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:13:55 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/input.js + */ +export default { + // index 组件 + input: { + value: '', + type: 'text', + fixed: false, + disabled: false, + disabledColor: '#f5f7fa', + clearable: false, + password: false, + maxlength: 140, + placeholder: null, + placeholderClass: 'input-placeholder', + placeholderStyle: 'color: #c0c4cc', + showWordLimit: false, + confirmType: 'done', + confirmHold: false, + holdKeyboard: false, + focus: false, + autoBlur: false, + disableDefaultPadding: false, + cursor: -1, + cursorSpacing: 30, + selectionStart: -1, + selectionEnd: -1, + adjustPosition: true, + inputAlign: 'left', + fontSize: '15px', + color: '#303133', + prefixIcon: '', + prefixIconStyle: '', + suffixIcon: '', + suffixIconStyle: '', + border: 'surround', + readonly: false, + shape: 'square', + formatter: null + } +} diff --git a/uview-plus/components/u-input/props.js b/uview-plus/components/u-input/props.js new file mode 100644 index 0000000..32528f5 --- /dev/null +++ b/uview-plus/components/u-input/props.js @@ -0,0 +1,198 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const props = defineMixin({ + props: { + // #ifdef VUE3 + // 绑定的值 + modelValue: { + type: [String, Number], + default: () => defProps.input.value + }, + // #endif + // #ifdef VUE2 + // 绑定的值 + value: { + type: [String, Number], + default: () => defProps.input.value + }, + // #endif + // number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数 + // idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序 + // digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序 + // text-文本输入键盘 + type: { + type: String, + default: () => defProps.input.type + }, + // 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true， + // 兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序 + fixed: { + type: Boolean, + default: () => defProps.input.fixed + }, + // 是否禁用输入框 + disabled: { + type: Boolean, + default: () => defProps.input.disabled + }, + // 禁用状态时的背景色 + disabledColor: { + type: String, + default: () => defProps.input.disabledColor + }, + // 是否显示清除控件 + clearable: { + type: Boolean, + default: () => defProps.input.clearable + }, + // 是否密码类型 + password: { + type: Boolean, + default: () => defProps.input.password + }, + // 最大输入长度，设置为 -1 的时候不限制最大长度 + maxlength: { + type: [String, Number], + default: () => defProps.input.maxlength + }, + // 输入框为空时的占位符 + placeholder: { + type: String, + default: () => defProps.input.placeholder + }, + // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/ + placeholderClass: { + type: String, + default: () => defProps.input.placeholderClass + }, + // 指定placeholder的样式 + placeholderStyle: { + type: [String, Object], + default: () => defProps.input.placeholderStyle + }, + // 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效 + showWordLimit: { + type: Boolean, + default: () => defProps.input.showWordLimit + }, + // 设置右下角按钮的文字，有效值：send|search|next|go|done，兼容性详见uni-app文档 + // https://uniapp.dcloud.io/component/input + // https://uniapp.dcloud.io/component/textarea + confirmType: { + type: String, + default: () => defProps.input.confirmType + }, + // 点击键盘右下角按钮时是否保持键盘不收起，H5无效 + confirmHold: { + type: Boolean, + default: () => defProps.input.confirmHold + }, + // focus时，点击页面的时候不收起键盘，微信小程序有效 + holdKeyboard: { + type: Boolean, + default: () => defProps.input.holdKeyboard + }, + // 自动获取焦点 + // 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点 + focus: { + type: Boolean, + default: () => defProps.input.focus + }, + // 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效 + autoBlur: { + type: Boolean, + default: () => defProps.input.autoBlur + }, + // 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效 + disableDefaultPadding: { + type: Boolean, + default: () => defProps.input.disableDefaultPadding + }, + // 指定focus时光标的位置 + cursor: { + type: [String, Number], + default: () => defProps.input.cursor + }, + // 输入框聚焦时底部与键盘的距离 + cursorSpacing: { + type: [String, Number], + default: () => defProps.input.cursorSpacing + }, + // 光标起始位置，自动聚集时有效，需与selection-end搭配使用 + selectionStart: { + type: [String, Number], + default: () => defProps.input.selectionStart + }, + // 光标结束位置，自动聚集时有效，需与selection-start搭配使用 + selectionEnd: { + type: [String, Number], + default: () => defProps.input.selectionEnd + }, + // 键盘弹起时，是否自动上推页面 + adjustPosition: { + type: Boolean, + default: () => defProps.input.adjustPosition + }, + // 输入框内容对齐方式，可选值为：left|center|right + inputAlign: { + type: String, + default: () => defProps.input.inputAlign + }, + // 输入框字体的大小 + fontSize: { + type: [String, Number], + default: () => defProps.input.fontSize + }, + // 输入框字体颜色 + color: { + type: String, + default: () => defProps.input.color + }, + // 输入框前置图标 + prefixIcon: { + type: String, + default: () => defProps.input.prefixIcon + }, + // 前置图标样式，对象或字符串 + prefixIconStyle: { + type: [String, Object], + default: () => defProps.input.prefixIconStyle + }, + // 输入框后置图标 + suffixIcon: { + type: String, + default: () => defProps.input.suffixIcon + }, + // 后置图标样式，对象或字符串 + suffixIconStyle: { + type: [String, Object], + default: () => defProps.input.suffixIconStyle + }, + // 边框类型，surround-四周边框，bottom-底部边框，none-无边框 + border: { + type: String, + default: () => defProps.input.border + }, + // 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会 + readonly: { + type: Boolean, + default: () => defProps.input.readonly + }, + // 输入框形状，circle-圆形，square-方形 + shape: { + type: String, + default: () => defProps.input.shape + }, + // 用于处理或者过滤输入框内容的方法 + formatter: { + type: [Function, null], + default: () => defProps.input.formatter + }, + // 是否忽略组件内对文本合成系统事件的处理 + ignoreCompositionEvent: { + type: Boolean, + default: true + } + } +}) diff --git a/uview-plus/components/u-input/u-input.vue b/uview-plus/components/u-input/u-input.vue new file mode 100644 index 0000000..4771d31 --- /dev/null +++ b/uview-plus/components/u-input/u-input.vue @@ -0,0 +1,401 @@ + + + + + diff --git a/uview-plus/components/u-keyboard/keyboard.js b/uview-plus/components/u-keyboard/keyboard.js new file mode 100644 index 0000000..71d8f24 --- /dev/null +++ b/uview-plus/components/u-keyboard/keyboard.js @@ -0,0 +1,30 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:07:49 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/keyboard.js + */ +export default { + // 键盘组件 + keyboard: { + mode: 'number', + dotDisabled: false, + tooltip: true, + showTips: true, + tips: '', + showCancel: true, + showConfirm: true, + random: false, + safeAreaInsetBottom: true, + closeOnClickOverlay: true, + show: false, + overlay: true, + zIndex: 10075, + cancelText: '取消', + confirmText: '确定', + autoChange: false + } +} diff --git a/uview-plus/components/u-keyboard/props.js b/uview-plus/components/u-keyboard/props.js new file mode 100644 index 0000000..f7eddbe --- /dev/null +++ b/uview-plus/components/u-keyboard/props.js @@ -0,0 +1,86 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 键盘的类型，number-数字键盘，card-身份证键盘，car-车牌号键盘 + mode: { + type: String, + default: () => defProps.keyboard.mode + }, + // 是否显示键盘的"."符号 + dotDisabled: { + type: Boolean, + default: () => defProps.keyboard.dotDisabled + }, + // 是否显示顶部工具条 + tooltip: { + type: Boolean, + default: () => defProps.keyboard.tooltip + }, + // 是否显示工具条中间的提示 + showTips: { + type: Boolean, + default: () => defProps.keyboard.showTips + }, + // 工具条中间的提示文字 + tips: { + type: String, + default: () => defProps.keyboard.tips + }, + // 是否显示工具条左边的"取消"按钮 + showCancel: { + type: Boolean, + default: () => defProps.keyboard.showCancel + }, + // 是否显示工具条右边的"完成"按钮 + showConfirm: { + type: Boolean, + default: () => defProps.keyboard.showConfirm + }, + // 是否打乱键盘按键的顺序 + random: { + type: Boolean, + default: () => defProps.keyboard.random + }, + // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 + safeAreaInsetBottom: { + type: Boolean, + default: () => defProps.keyboard.safeAreaInsetBottom + }, + // 是否允许通过点击遮罩关闭键盘 + closeOnClickOverlay: { + type: Boolean, + default: () => defProps.keyboard.closeOnClickOverlay + }, + // 控制键盘的弹出与收起 + show: { + type: Boolean, + default: () => defProps.keyboard.show + }, + // 是否显示遮罩，某些时候数字键盘时，用户希望看到自己的数值，所以可能不想要遮罩 + overlay: { + type: Boolean, + default: () => defProps.keyboard.overlay + }, + // z-index值 + zIndex: { + type: [String, Number], + default: () => defProps.keyboard.zIndex + }, + // 取消按钮的文字 + cancelText: { + type: String, + default: () => defProps.keyboard.cancelText + }, + // 确认按钮的文字 + confirmText: { + type: String, + default: () => defProps.keyboard.confirmText + }, + // 输入一个中文后，是否自动切换到英文 + autoChange: { + type: Boolean, + default: () => defProps.keyboard.autoChange + } + } +}) diff --git a/uview-plus/components/u-keyboard/u-keyboard.vue b/uview-plus/components/u-keyboard/u-keyboard.vue new file mode 100644 index 0000000..ab9a6a2 --- /dev/null +++ b/uview-plus/components/u-keyboard/u-keyboard.vue @@ -0,0 +1,167 @@ + + + + + diff --git a/uview-plus/components/u-lazy-load/u-lazy-load.vue b/uview-plus/components/u-lazy-load/u-lazy-load.vue new file mode 100644 index 0000000..b8414e8 --- /dev/null +++ b/uview-plus/components/u-lazy-load/u-lazy-load.vue @@ -0,0 +1,258 @@ + + + + + \ No newline at end of file diff --git a/uview-plus/components/u-line-progress/lineProgress.js b/uview-plus/components/u-line-progress/lineProgress.js new file mode 100644 index 0000000..66c689f --- /dev/null +++ b/uview-plus/components/u-line-progress/lineProgress.js @@ -0,0 +1,19 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:14:11 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/lineProgress.js + */ +export default { + // lineProgress 组件 + lineProgress: { + activeColor: '#19be6b', + inactiveColor: '#ececec', + percentage: 0, + showText: true, + height: 12 + } +} diff --git a/uview-plus/components/u-line-progress/props.js b/uview-plus/components/u-line-progress/props.js new file mode 100644 index 0000000..c84d0de --- /dev/null +++ b/uview-plus/components/u-line-progress/props.js @@ -0,0 +1,30 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 激活部分的颜色 + activeColor: { + type: String, + default: () => defProps.lineProgress.activeColor + }, + inactiveColor: { + type: String, + default: () => defProps.lineProgress.color + }, + // 进度百分比，数值 + percentage: { + type: [String, Number], + default: () => defProps.lineProgress.inactiveColor + }, + // 是否在进度条内部显示百分比的值 + showText: { + type: Boolean, + default: () => defProps.lineProgress.showText + }, + // 进度条的高度，单位px + height: { + type: [String, Number], + default: () => defProps.lineProgress.height + } + } +}) diff --git a/uview-plus/components/u-line-progress/u-line-progress.vue b/uview-plus/components/u-line-progress/u-line-progress.vue new file mode 100644 index 0000000..5023020 --- /dev/null +++ b/uview-plus/components/u-line-progress/u-line-progress.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/uview-plus/components/u-line/line.js b/uview-plus/components/u-line/line.js new file mode 100644 index 0000000..48c964f --- /dev/null +++ b/uview-plus/components/u-line/line.js @@ -0,0 +1,20 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:04:49 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/line.js + */ +export default { + // line组件 + line: { + color: '#d6d7d9', + length: '100%', + direction: 'row', + hairline: true, + margin: 0, + dashed: false + } +} diff --git a/uview-plus/components/u-line/props.js b/uview-plus/components/u-line/props.js new file mode 100644 index 0000000..df4392e --- /dev/null +++ b/uview-plus/components/u-line/props.js @@ -0,0 +1,35 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + color: { + type: String, + default: () => defProps.line.color + }, + // 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 + length: { + type: [String, Number], + default: () => defProps.line.length + }, + // 线条方向，col-竖向，row-横向 + direction: { + type: String, + default: () => defProps.line.direction + }, + // 是否显示细边框 + hairline: { + type: Boolean, + default: () => defProps.line.hairline + }, + // 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px" + margin: { + type: [String, Number], + default: () => defProps.line.margin + }, + // 是否虚线，true-虚线，false-实线 + dashed: { + type: Boolean, + default: () => defProps.line.dashed + } + } +}) diff --git a/uview-plus/components/u-line/u-line.vue b/uview-plus/components/u-line/u-line.vue new file mode 100644 index 0000000..85292a4 --- /dev/null +++ b/uview-plus/components/u-line/u-line.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/uview-plus/components/u-link/link.js b/uview-plus/components/u-link/link.js new file mode 100644 index 0000000..0ba3e47 --- /dev/null +++ b/uview-plus/components/u-link/link.js @@ -0,0 +1,26 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:45:36 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/link.js + */ +import config from '../../libs/config/config' + +const { + color +} = config +export default { + // link超链接组件props参数 + link: { + color: color['u-primary'], + fontSize: 15, + underLine: false, + href: '', + mpTips: '链接已复制，请在浏览器打开', + lineColor: '', + text: '' + } +} diff --git a/uview-plus/components/u-link/props.js b/uview-plus/components/u-link/props.js new file mode 100644 index 0000000..e8a514d --- /dev/null +++ b/uview-plus/components/u-link/props.js @@ -0,0 +1,41 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 文字颜色 + color: { + type: String, + default: () => defProps.link.color + }, + // 字体大小，单位px + fontSize: { + type: [String, Number], + default: () => defProps.link.fontSize + }, + // 是否显示下划线 + underLine: { + type: Boolean, + default: () => defProps.link.underLine + }, + // 要跳转的链接 + href: { + type: String, + default: () => defProps.link.href + }, + // 小程序中复制到粘贴板的提示语 + mpTips: { + type: String, + default: () => defProps.link.mpTips + }, + // 下划线颜色 + lineColor: { + type: String, + default: () => defProps.link.lineColor + }, + // 超链接的问题，不使用slot形式传入，是因为nvue下无法修改颜色 + text: { + type: String, + default: () => defProps.link.text + } + } +}) diff --git a/uview-plus/components/u-link/u-link.vue b/uview-plus/components/u-link/u-link.vue new file mode 100644 index 0000000..0451b87 --- /dev/null +++ b/uview-plus/components/u-link/u-link.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/uview-plus/components/u-list-item/listItem.js b/uview-plus/components/u-list-item/listItem.js new file mode 100644 index 0000000..1891d3f --- /dev/null +++ b/uview-plus/components/u-list-item/listItem.js @@ -0,0 +1,15 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:15:40 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/listItem.js + */ +export default { + // listItem 组件 + listItem: { + anchor: '' + } +} diff --git a/uview-plus/components/u-list-item/props.js b/uview-plus/components/u-list-item/props.js new file mode 100644 index 0000000..d557da3 --- /dev/null +++ b/uview-plus/components/u-list-item/props.js @@ -0,0 +1,11 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 用于滚动到指定item + anchor: { + type: [String, Number], + default: () => defProps.listItem.anchor + } + } +}) diff --git a/uview-plus/components/u-list-item/u-list-item.vue b/uview-plus/components/u-list-item/u-list-item.vue new file mode 100644 index 0000000..544bc69 --- /dev/null +++ b/uview-plus/components/u-list-item/u-list-item.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/uview-plus/components/u-list/list.js b/uview-plus/components/u-list/list.js new file mode 100644 index 0000000..447fbb1 --- /dev/null +++ b/uview-plus/components/u-list/list.js @@ -0,0 +1,28 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:14:53 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/list.js + */ +export default { + // list 组件 + list: { + showScrollbar: false, + lowerThreshold: 50, + upperThreshold: 0, + scrollTop: 0, + offsetAccuracy: 10, + enableFlex: false, + pagingEnabled: false, + scrollable: true, + scrollIntoView: '', + scrollWithAnimation: false, + enableBackToTop: false, + height: 0, + width: 0, + preLoadScreen: 1 + } +} diff --git a/uview-plus/components/u-list/props.js b/uview-plus/components/u-list/props.js new file mode 100644 index 0000000..863bf96 --- /dev/null +++ b/uview-plus/components/u-list/props.js @@ -0,0 +1,101 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 控制是否出现滚动条，仅nvue有效 + showScrollbar: { + type: Boolean, + default: () => defProps.list.showScrollbar + }, + // 距底部多少时触发scrolltolower事件 + lowerThreshold: { + type: [String, Number], + default: () => defProps.list.lowerThreshold + }, + // 距顶部多少时触发scrolltoupper事件，非nvue有效 + upperThreshold: { + type: [String, Number], + default: () => defProps.list.upperThreshold + }, + // 设置竖向滚动条位置 + scrollTop: { + type: [String, Number], + default: () => defProps.list.scrollTop + }, + // 控制 onscroll 事件触发的频率，仅nvue有效 + offsetAccuracy: { + type: [String, Number], + default: () => defProps.list.offsetAccuracy + }, + // 启用 flexbox 布局。开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点，仅微信小程序有效 + enableFlex: { + type: Boolean, + default: () => defProps.list.enableFlex + }, + // 是否按分页模式显示List，默认值false + pagingEnabled: { + type: Boolean, + default: () => defProps.list.pagingEnabled + }, + // 是否允许List滚动 + scrollable: { + type: Boolean, + default: () => defProps.list.scrollable + }, + // 值应为某子元素id（id不能以数字开头） + scrollIntoView: { + type: String, + default: () => defProps.list.scrollIntoView + }, + // 在设置滚动条位置时使用动画过渡 + scrollWithAnimation: { + type: Boolean, + default: () => defProps.list.scrollWithAnimation + }, + // iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效 + enableBackToTop: { + type: Boolean, + default: () => defProps.list.enableBackToTop + }, + // 列表的高度 + height: { + type: [String, Number], + default: () => defProps.list.height + }, + // 列表宽度 + width: { + type: [String, Number], + default: () => defProps.list.width + }, + // 列表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度 + preLoadScreen: { + type: [String, Number], + default: () => defProps.list.preLoadScreen + }, + // 开启自定义下拉刷新 + refresherEnabled: { + type: Boolean, + default: () => false + }, + // 设置自定义下拉刷新阈值 + refresherThreshold: { + type: Number, + default: () => 45 + }, + // 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式 + refresherDefaultStyle: { + type: String, + default: () => 'black' + }, + // 设置自定义下拉刷新区域背景颜色 + refresherBackground: { + type: String, + default: () => '#FFF' + }, + // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 + refresherTriggered: { + type: Boolean, + default: () => false + } + } +}) diff --git a/uview-plus/components/u-list/u-list.vue b/uview-plus/components/u-list/u-list.vue new file mode 100644 index 0000000..c549014 --- /dev/null +++ b/uview-plus/components/u-list/u-list.vue @@ -0,0 +1,183 @@ + + + + + diff --git a/uview-plus/components/u-loading-icon/loadingIcon.js b/uview-plus/components/u-loading-icon/loadingIcon.js new file mode 100644 index 0000000..f6c146d --- /dev/null +++ b/uview-plus/components/u-loading-icon/loadingIcon.js @@ -0,0 +1,30 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:45:47 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/loadingIcon.js + */ +import config from '../../libs/config/config' + +const { + color +} = config +export default { + // loading-icon加载中图标组件 + loadingIcon: { + show: true, + color: color['u-tips-color'], + textColor: color['u-tips-color'], + vertical: false, + mode: 'spinner', + size: 24, + textSize: 15, + text: '', + timingFunction: 'ease-in-out', + duration: 1200, + inactiveColor: '' + } +} diff --git a/uview-plus/components/u-loading-icon/props.js b/uview-plus/components/u-loading-icon/props.js new file mode 100644 index 0000000..893b351 --- /dev/null +++ b/uview-plus/components/u-loading-icon/props.js @@ -0,0 +1,61 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 是否显示组件 + show: { + type: Boolean, + default: () => defProps.loadingIcon.show + }, + // 颜色 + color: { + type: String, + default: () => defProps.loadingIcon.color + }, + // 提示文字颜色 + textColor: { + type: String, + default: () => defProps.loadingIcon.textColor + }, + // 文字和图标是否垂直排列 + vertical: { + type: Boolean, + default: () => defProps.loadingIcon.vertical + }, + // 模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形 + mode: { + type: String, + default: () => defProps.loadingIcon.mode + }, + // 图标大小，单位默认px + size: { + type: [String, Number], + default: () => defProps.loadingIcon.size + }, + // 文字大小 + textSize: { + type: [String, Number], + default: () => defProps.loadingIcon.textSize + }, + // 文字内容 + text: { + type: [String, Number], + default: () => defProps.loadingIcon.text + }, + // 动画模式 + timingFunction: { + type: String, + default: () => defProps.loadingIcon.timingFunction + }, + // 动画执行周期时间 + duration: { + type: [String, Number], + default: () => defProps.loadingIcon.duration + }, + // mode=circle时的暗边颜色 + inactiveColor: { + type: String, + default: () => defProps.loadingIcon.inactiveColor + } + } +}) diff --git a/uview-plus/components/u-loading-icon/u-loading-icon.vue b/uview-plus/components/u-loading-icon/u-loading-icon.vue new file mode 100644 index 0000000..9048974 --- /dev/null +++ b/uview-plus/components/u-loading-icon/u-loading-icon.vue @@ -0,0 +1,349 @@ + + + + + diff --git a/uview-plus/components/u-loading-page/loadingPage.js b/uview-plus/components/u-loading-page/loadingPage.js new file mode 100644 index 0000000..73a8233 --- /dev/null +++ b/uview-plus/components/u-loading-page/loadingPage.js @@ -0,0 +1,24 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:00:23 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/loadingPage.js + */ +export default { + // loading-page组件 + loadingPage: { + loadingText: '正在加载', + image: '', + loadingMode: 'circle', + loading: false, + bgColor: '#ffffff', + color: '#C8C8C8', + fontSize: 19, + iconSize: 28, + loadingColor: '#C8C8C8', + zIndex: 10 + } +} diff --git a/uview-plus/components/u-loading-page/props.js b/uview-plus/components/u-loading-page/props.js new file mode 100644 index 0000000..bedd59b --- /dev/null +++ b/uview-plus/components/u-loading-page/props.js @@ -0,0 +1,57 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const props = defineMixin({ + props: { + // 提示内容 + loadingText: { + type: [String, Number], + default: () => defProps.loadingPage.loadingText + }, + // 文字上方用于替换loading动画的图片 + image: { + type: String, + default: () => defProps.loadingPage.image + }, + // 加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形 + loadingMode: { + type: String, + default: () => defProps.loadingPage.loadingMode + }, + // 是否加载中 + loading: { + type: Boolean, + default: () => defProps.loadingPage.loading + }, + // 背景色 + bgColor: { + type: String, + default: () => defProps.loadingPage.bgColor + }, + // 文字颜色 + color: { + type: String, + default: () => defProps.loadingPage.color + }, + // 文字大小 + fontSize: { + type: [String, Number], + default: () => defProps.loadingPage.fontSize + }, + // 图标大小 + iconSize: { + type: [String, Number], + default: () => defProps.loadingPage.fontSize + }, + // 加载中图标的颜色，只能rgb或者十六进制颜色值 + loadingColor: { + type: String, + default: () => defProps.loadingPage.loadingColor + }, + // 层级 + zIndex: { + type: [Number], + default: () => defProps.loadingPage.zIndex + }, + } +}) diff --git a/uview-plus/components/u-loading-page/u-loading-page.vue b/uview-plus/components/u-loading-page/u-loading-page.vue new file mode 100644 index 0000000..a3c3705 --- /dev/null +++ b/uview-plus/components/u-loading-page/u-loading-page.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/uview-plus/components/u-loadmore/loadmore.js b/uview-plus/components/u-loadmore/loadmore.js new file mode 100644 index 0000000..5b9d4c9 --- /dev/null +++ b/uview-plus/components/u-loadmore/loadmore.js @@ -0,0 +1,32 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:15:26 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/loadmore.js + */ +export default { + // loadmore 组件 + loadmore: { + status: 'loadmore', + bgColor: 'transparent', + icon: true, + fontSize: 14, + iconSize: 17, + color: '#606266', + loadingIcon: 'spinner', + loadmoreText: '加载更多', + loadingText: '正在加载...', + nomoreText: '没有更多了', + isDot: false, + iconColor: '#b7b7b7', + marginTop: 10, + marginBottom: 10, + height: 'auto', + line: false, + lineColor: '#E6E8EB', + dashed: false, + } +} diff --git a/uview-plus/components/u-loadmore/props.js b/uview-plus/components/u-loadmore/props.js new file mode 100644 index 0000000..bb0bc65 --- /dev/null +++ b/uview-plus/components/u-loadmore/props.js @@ -0,0 +1,96 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 组件状态，loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态 + status: { + type: String, + default: () => defProps.loadmore.status + }, + // 组件背景色 + bgColor: { + type: String, + default: () => defProps.loadmore.bgColor + }, + // 是否显示加载中的图标 + icon: { + type: Boolean, + default: () => defProps.loadmore.icon + }, + // 字体大小 + fontSize: { + type: [String, Number], + default: () => defProps.loadmore.fontSize + }, + // 图标大小 + iconSize: { + type: [String, Number], + default: () => defProps.loadmore.iconSize + }, + // 字体颜色 + color: { + type: String, + default: () => defProps.loadmore.color + }, + // 加载中状态的图标，spinner-花朵状图标，circle-圆圈状，semicircle-半圆 + loadingIcon: { + type: String, + default: () => defProps.loadmore.loadingIcon + }, + // 加载前的提示语 + loadmoreText: { + type: String, + default: () => defProps.loadmore.loadmoreText + }, + // 加载中提示语 + loadingText: { + type: String, + default: () => defProps.loadmore.loadingText + }, + // 没有更多的提示语 + nomoreText: { + type: String, + default: () => defProps.loadmore.nomoreText + }, + // 在“没有更多”状态下，是否显示粗点 + isDot: { + type: Boolean, + default: () => defProps.loadmore.isDot + }, + // 加载中图标的颜色 + iconColor: { + type: String, + default: () => defProps.loadmore.iconColor + }, + // 上边距 + marginTop: { + type: [String, Number], + default: () => defProps.loadmore.marginTop + }, + // 下边距 + marginBottom: { + type: [String, Number], + default: () => defProps.loadmore.marginBottom + }, + // 高度，单位px + height: { + type: [String, Number], + default: () => defProps.loadmore.height + }, + // 是否显示左边分割线 + line: { + type: Boolean, + default: () => defProps.loadmore.line + }, + // 线条颜色 + lineColor: { + type: String, + default: () => defProps.loadmore.lineColor + }, + // 是否虚线，true-虚线，false-实线 + dashed: { + type: Boolean, + default: () => defProps.loadmore.dashed + } + } +}) diff --git a/uview-plus/components/u-loadmore/u-loadmore.vue b/uview-plus/components/u-loadmore/u-loadmore.vue new file mode 100644 index 0000000..8cb69c5 --- /dev/null +++ b/uview-plus/components/u-loadmore/u-loadmore.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/uview-plus/components/u-message-input/u-message-input.vue b/uview-plus/components/u-message-input/u-message-input.vue new file mode 100644 index 0000000..686ecfe --- /dev/null +++ b/uview-plus/components/u-message-input/u-message-input.vue @@ -0,0 +1,318 @@ + + + + + diff --git a/uview-plus/components/u-modal/modal.js b/uview-plus/components/u-modal/modal.js new file mode 100644 index 0000000..10be090 --- /dev/null +++ b/uview-plus/components/u-modal/modal.js @@ -0,0 +1,31 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:15:59 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/modal.js + */ +export default { + // modal 组件 + modal: { + show: false, + title: '', + content: '', + confirmText: '确认', + cancelText: '取消', + showConfirmButton: true, + showCancelButton: false, + confirmColor: '#2979ff', + cancelColor: '#606266', + buttonReverse: false, + zoom: true, + asyncClose: false, + closeOnClickOverlay: false, + negativeTop: 0, + width: '650rpx', + confirmButtonShape: '', + contentTextAlign: 'left' + } +} diff --git a/uview-plus/components/u-modal/props.js b/uview-plus/components/u-modal/props.js new file mode 100644 index 0000000..20bb064 --- /dev/null +++ b/uview-plus/components/u-modal/props.js @@ -0,0 +1,91 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 是否展示modal + show: { + type: Boolean, + default: () => defProps.modal.show + }, + // 标题 + title: { + type: [String], + default: () => defProps.modal.title + }, + // 弹窗内容 + content: { + type: String, + default: () => defProps.modal.content + }, + // 确认文案 + confirmText: { + type: String, + default: () => defProps.modal.confirmText + }, + // 取消文案 + cancelText: { + type: String, + default: () => defProps.modal.cancelText + }, + // 是否显示确认按钮 + showConfirmButton: { + type: Boolean, + default: () => defProps.modal.showConfirmButton + }, + // 是否显示取消按钮 + showCancelButton: { + type: Boolean, + default: () => defProps.modal.showCancelButton + }, + // 确认按钮颜色 + confirmColor: { + type: String, + default: () => defProps.modal.confirmColor + }, + // 取消文字颜色 + cancelColor: { + type: String, + default: () => defProps.modal.cancelColor + }, + // 对调确认和取消的位置 + buttonReverse: { + type: Boolean, + default: () => defProps.modal.buttonReverse + }, + // 是否开启缩放效果 + zoom: { + type: Boolean, + default: () => defProps.modal.zoom + }, + // 是否异步关闭，只对确定按钮有效 + asyncClose: { + type: Boolean, + default: () => defProps.modal.asyncClose + }, + // 是否允许点击遮罩关闭modal + closeOnClickOverlay: { + type: Boolean, + default: () => defProps.modal.closeOnClickOverlay + }, + // 给一个负的margin-top，往上偏移，避免和键盘重合的情况 + negativeTop: { + type: [String, Number], + default: () => defProps.modal.negativeTop + }, + // modal宽度，不支持百分比，可以数值，px，rpx单位 + width: { + type: [String, Number], + default: () => defProps.modal.width + }, + // 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮 + confirmButtonShape: { + type: String, + default: () => defProps.modal.confirmButtonShape + }, + // 文案对齐方式 + contentTextAlign: { + type: String, + default: () => defProps.modal.contentTextAlign + }, + } +}) diff --git a/uview-plus/components/u-modal/u-modal.vue b/uview-plus/components/u-modal/u-modal.vue new file mode 100644 index 0000000..9fbf85e --- /dev/null +++ b/uview-plus/components/u-modal/u-modal.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/uview-plus/components/u-navbar-mini/props.js b/uview-plus/components/u-navbar-mini/props.js new file mode 100644 index 0000000..09f49e0 --- /dev/null +++ b/uview-plus/components/u-navbar-mini/props.js @@ -0,0 +1,51 @@ +import { defineMixin } from '../../libs/vue' + +export const props = defineMixin({ + props: { + // 是否开启顶部安全区适配 + safeAreaInsetTop: { + type: Boolean, + default: () => true + }, + // 是否固定在顶部 + fixed: { + type: Boolean, + default: () => true + }, + // 左边的图标 + leftIcon: { + type: String, + default: 'arrow-leftward' + }, + // 背景颜色 + bgColor: { + type: String, + default: () => 'rgba(0,0,0,.15)' + }, + // 导航栏高度 + height: { + type: [String, Number], + default: () => '32px' + }, + // 图标的大小 + iconSize: { + type: [String, Number], + default: '20px' + }, + // 图标的颜色 + iconColor: { + type: String, + default: '#fff' + }, + // 点击左侧区域(返回图标)，是否自动返回上一页 + autoBack: { + type: Boolean, + default: () => true + }, + // 首页路径 + homeUrl: { + type: [String], + default: '' + } + } +}) diff --git a/uview-plus/components/u-navbar-mini/u-navbar-mini.vue b/uview-plus/components/u-navbar-mini/u-navbar-mini.vue new file mode 100644 index 0000000..5313a53 --- /dev/null +++ b/uview-plus/components/u-navbar-mini/u-navbar-mini.vue @@ -0,0 +1,139 @@ + + + + + diff --git a/uview-plus/components/u-navbar/navbar.js b/uview-plus/components/u-navbar/navbar.js new file mode 100644 index 0000000..06ce1c9 --- /dev/null +++ b/uview-plus/components/u-navbar/navbar.js @@ -0,0 +1,33 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:16:18 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/navbar.js + */ +import color from '../../libs/config/color' +export default { + // navbar 组件 + navbar: { + safeAreaInsetTop: true, + placeholder: false, + fixed: true, + border: false, + leftIcon: 'arrow-left', + leftText: '', + rightText: '', + rightIcon: '', + title: '', + titleColor: '', + bgColor: '#ffffff', + titleWidth: '400rpx', + height: '44px', + leftIconSize: 20, + leftIconColor: color.mainColor, + autoBack: false, + titleStyle: '' + } + +} diff --git a/uview-plus/components/u-navbar/props.js b/uview-plus/components/u-navbar/props.js new file mode 100644 index 0000000..7265ef7 --- /dev/null +++ b/uview-plus/components/u-navbar/props.js @@ -0,0 +1,92 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' + +export const props = defineMixin({ + props: { + // 是否开启顶部安全区适配 + safeAreaInsetTop: { + type: Boolean, + default: () => defProps.navbar.safeAreaInsetTop + }, + // 固定在顶部时，是否生成一个等高元素，以防止塌陷 + placeholder: { + type: Boolean, + default: () => defProps.navbar.placeholder + }, + // 是否固定在顶部 + fixed: { + type: Boolean, + default: () => defProps.navbar.fixed + }, + // 是否显示下边框 + border: { + type: Boolean, + default: () => defProps.navbar.border + }, + // 左边的图标 + leftIcon: { + type: String, + default: () => defProps.navbar.leftIcon + }, + // 左边的提示文字 + leftText: { + type: String, + default: () => defProps.navbar.leftText + }, + // 左右的提示文字 + rightText: { + type: String, + default: () => defProps.navbar.rightText + }, + // 右边的图标 + rightIcon: { + type: String, + default: () => defProps.navbar.rightIcon + }, + // 标题 + title: { + type: [String, Number], + default: () => defProps.navbar.title + }, + // 标题颜色 + titleColor: { + type: String, + default: () => defProps.navbar.titleColor + }, + // 背景颜色 + bgColor: { + type: String, + default: () => defProps.navbar.bgColor + }, + // 标题的宽度 + titleWidth: { + type: [String, Number], + default: () => defProps.navbar.titleWidth + }, + // 导航栏高度 + height: { + type: [String, Number], + default: () => defProps.navbar.height + }, + // 左侧返回图标的大小 + leftIconSize: { + type: [String, Number], + default: () => defProps.navbar.leftIconSize + }, + // 左侧返回图标的颜色 + leftIconColor: { + type: String, + default: () => defProps.navbar.leftIconColor + }, + // 点击左侧区域(返回图标)，是否自动返回上一页 + autoBack: { + type: Boolean, + default: () => defProps.navbar.autoBack + }, + // 标题的样式，对象或字符串 + titleStyle: { + type: [String, Object], + default: () => defProps.navbar.titleStyle + } + } +}) diff --git a/uview-plus/components/u-navbar/u-navbar.vue b/uview-plus/components/u-navbar/u-navbar.vue new file mode 100644 index 0000000..2882548 --- /dev/null +++ b/uview-plus/components/u-navbar/u-navbar.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/uview-plus/components/u-no-network/noNetwork.js b/uview-plus/components/u-no-network/noNetwork.js new file mode 100644 index 0000000..f7d8009 --- /dev/null +++ b/uview-plus/components/u-no-network/noNetwork.js @@ -0,0 +1,18 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:16:39 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/noNetwork.js + */ +export default { + // noNetwork + noNetwork: { + tips: '哎呀，网络信号丢失', + zIndex: '', + image: 'data:image/png;base64,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' + } + +} diff --git a/uview-plus/components/u-no-network/props.js b/uview-plus/components/u-no-network/props.js new file mode 100644 index 0000000..e5ac24a --- /dev/null +++ b/uview-plus/components/u-no-network/props.js @@ -0,0 +1,21 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 页面文字提示 + tips: { + type: String, + default: () => defProps.noNetwork.tips + }, + // 一个z-index值，用于设置没有网络这个组件的层次，因为页面可能会有其他定位的元素层级过高，导致此组件被覆盖 + zIndex: { + type: [String, Number], + default: () => defProps.noNetwork.zIndex + }, + // image 没有网络的图片提示 + image: { + type: String, + default: () => defProps.noNetwork.image + } + } +}) diff --git a/uview-plus/components/u-no-network/u-no-network.vue b/uview-plus/components/u-no-network/u-no-network.vue new file mode 100644 index 0000000..06a8944 --- /dev/null +++ b/uview-plus/components/u-no-network/u-no-network.vue @@ -0,0 +1,223 @@ + + + + + diff --git a/uview-plus/components/u-notice-bar/noticeBar.js b/uview-plus/components/u-notice-bar/noticeBar.js new file mode 100644 index 0000000..f7e44e5 --- /dev/null +++ b/uview-plus/components/u-notice-bar/noticeBar.js @@ -0,0 +1,28 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:17:13 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/noticeBar.js + */ +export default { + // noticeBar + noticeBar: { + text: [], + direction: 'row', + step: false, + icon: 'volume', + mode: '', + color: '#f9ae3d', + bgColor: '#fdf6ec', + speed: 80, + fontSize: 14, + duration: 2000, + disableTouch: true, + url: '', + linkType: 'navigateTo', + justifyContent: 'flex-start' + } +} diff --git a/uview-plus/components/u-notice-bar/props.js b/uview-plus/components/u-notice-bar/props.js new file mode 100644 index 0000000..dd37ae5 --- /dev/null +++ b/uview-plus/components/u-notice-bar/props.js @@ -0,0 +1,76 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 显示的内容，数组 + text: { + type: [Array, String], + default: () => defProps.noticeBar.text + }, + // 通告滚动模式，row-横向滚动，column-竖向滚动 + direction: { + type: String, + default: () => defProps.noticeBar.direction + }, + // direction = row时，是否使用步进形式滚动 + step: { + type: Boolean, + default: () => defProps.noticeBar.step + }, + // 是否显示左侧的音量图标 + icon: { + type: String, + default: () => defProps.noticeBar.icon + }, + // 通告模式，link-显示右箭头，closable-显示右侧关闭图标 + mode: { + type: String, + default: () => defProps.noticeBar.mode + }, + // 文字颜色，各图标也会使用文字颜色 + color: { + type: String, + default: () => defProps.noticeBar.color + }, + // 背景颜色 + bgColor: { + type: String, + default: () => defProps.noticeBar.bgColor + }, + // 水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 + speed: { + type: [String, Number], + default: () => defProps.noticeBar.speed + }, + // 字体大小 + fontSize: { + type: [String, Number], + default: () => defProps.noticeBar.fontSize + }, + // 滚动一个周期的时间长，单位ms + duration: { + type: [String, Number], + default: () => defProps.noticeBar.duration + }, + // 是否禁止用手滑动切换 + // 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序 + disableTouch: { + type: Boolean, + default: () => defProps.noticeBar.disableTouch + }, + // 跳转的页面路径 + url: { + type: String, + default: () => defProps.noticeBar.url + }, + // 页面跳转的类型 + linkType: { + type: String, + default: () => defProps.noticeBar.linkType + }, + justifyContent: { + type: String, + default: () => defProps.noticeBar.justifyContent + }, + } +}) diff --git a/uview-plus/components/u-notice-bar/u-notice-bar.vue b/uview-plus/components/u-notice-bar/u-notice-bar.vue new file mode 100644 index 0000000..2f395fc --- /dev/null +++ b/uview-plus/components/u-notice-bar/u-notice-bar.vue @@ -0,0 +1,106 @@ + + + + diff --git a/uview-plus/components/u-notify/notify.js b/uview-plus/components/u-notify/notify.js new file mode 100644 index 0000000..82d095d --- /dev/null +++ b/uview-plus/components/u-notify/notify.js @@ -0,0 +1,22 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:10:21 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/notify.js + */ +export default { + // notify组件 + notify: { + top: 0, + type: 'primary', + color: '#ffffff', + bgColor: '', + message: '', + duration: 3000, + fontSize: 15, + safeAreaInsetTop: false + } +} diff --git a/uview-plus/components/u-notify/props.js b/uview-plus/components/u-notify/props.js new file mode 100644 index 0000000..6f7c1ee --- /dev/null +++ b/uview-plus/components/u-notify/props.js @@ -0,0 +1,51 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 到顶部的距离 + top: { + type: [String, Number], + default: () => defProps.notify.top + }, + // 是否展示组件 + // show: { + // type: Boolean, + // default: () => defProps.notify.show + // }, + // type主题，primary，success，warning，error + type: { + type: String, + default: () => defProps.notify.type + }, + // 字体颜色 + color: { + type: String, + default: () => defProps.notify.color + }, + // 背景颜色 + bgColor: { + type: String, + default: () => defProps.notify.bgColor + }, + // 展示的文字内容 + message: { + type: String, + default: () => defProps.notify.message + }, + // 展示时长，为0时不消失，单位ms + duration: { + type: [String, Number], + default: () => defProps.notify.duration + }, + // 字体大小 + fontSize: { + type: [String, Number], + default: () => defProps.notify.fontSize + }, + // 是否留出顶部安全距离（状态栏高度） + safeAreaInsetTop: { + type: Boolean, + default: () => defProps.notify.safeAreaInsetTop + } + } +}) diff --git a/uview-plus/components/u-notify/u-notify.vue b/uview-plus/components/u-notify/u-notify.vue new file mode 100644 index 0000000..40f041c --- /dev/null +++ b/uview-plus/components/u-notify/u-notify.vue @@ -0,0 +1,217 @@ + + + + + diff --git a/uview-plus/components/u-number-box/numberBox.js b/uview-plus/components/u-number-box/numberBox.js new file mode 100644 index 0000000..511ccc8 --- /dev/null +++ b/uview-plus/components/u-number-box/numberBox.js @@ -0,0 +1,39 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:11:46 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/numberBox.js + */ +export default { + // 步进器组件 + numberBox: { + name: '', + value: 0, + min: 1, + max: Number.MAX_SAFE_INTEGER, + step: 1, + integer: false, + disabled: false, + disabledInput: false, + asyncChange: false, + inputWidth: 35, + showMinus: true, + showPlus: true, + decimalLength: null, + longPress: true, + color: '#323233', + buttonWidth: 30, + buttonSize: 30, + buttonRadius: '0px', + bgColor: '#EBECEE', + inputBgColor: '#EBECEE', + cursorSpacing: 100, + disableMinus: false, + disablePlus: false, + iconStyle: '', + miniMode: false + } +} diff --git a/uview-plus/components/u-number-box/props.js b/uview-plus/components/u-number-box/props.js new file mode 100644 index 0000000..a20e9f5 --- /dev/null +++ b/uview-plus/components/u-number-box/props.js @@ -0,0 +1,140 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 步进器标识符，在change回调返回 + name: { + type: [String, Number], + default: () => defProps.numberBox.name + }, + // #ifdef VUE2 + // 用于双向绑定的值，初始化时设置设为默认min值(最小值) + value: { + type: [String, Number], + default: () => defProps.numberBox.value + }, + // #endif + // #ifdef VUE3 + // 用于双向绑定的值，初始化时设置设为默认min值(最小值) + modelValue: { + type: [String, Number], + default: () => defProps.numberBox.value + }, + // #endif + // 最小值 + min: { + type: [String, Number], + default: () => defProps.numberBox.min + }, + // 最大值 + max: { + type: [String, Number], + default: () => defProps.numberBox.max + }, + // 加减的步长，可为小数 + step: { + type: [String, Number], + default: () => defProps.numberBox.step + }, + // 是否只允许输入整数 + integer: { + type: Boolean, + default: () => defProps.numberBox.integer + }, + // 是否禁用，包括输入框，加减按钮 + disabled: { + type: Boolean, + default: () => defProps.numberBox.disabled + }, + // 是否禁用输入框 + disabledInput: { + type: Boolean, + default: () => defProps.numberBox.disabledInput + }, + // 是否开启异步变更，开启后需要手动控制输入值 + asyncChange: { + type: Boolean, + default: () => defProps.numberBox.asyncChange + }, + // 输入框宽度，单位为px + inputWidth: { + type: [String, Number], + default: () => defProps.numberBox.inputWidth + }, + // 是否显示减少按钮 + showMinus: { + type: Boolean, + default: () => defProps.numberBox.showMinus + }, + // 是否显示增加按钮 + showPlus: { + type: Boolean, + default: () => defProps.numberBox.showPlus + }, + // 显示的小数位数 + decimalLength: { + type: [String, Number, null], + default: () => defProps.numberBox.decimalLength + }, + // 是否开启长按加减手势 + longPress: { + type: Boolean, + default: () => defProps.numberBox.longPress + }, + // 输入框文字和加减按钮图标的颜色 + color: { + type: String, + default: () => defProps.numberBox.color + }, + // 按钮宽度 + buttonWidth: { + type: [String, Number], + default: () => defProps.numberBox.buttonWidth + }, + // 按钮大小，宽高等于此值，单位px，输入框高度和此值保持一致 + buttonSize: { + type: [String, Number], + default: () => defProps.numberBox.buttonSize + }, + // 按钮圆角 + buttonRadius: { + type: [String], + default: () => defProps.numberBox.buttonRadius + }, + // 输入框和按钮的背景颜色 + bgColor: { + type: String, + default: () => defProps.numberBox.bgColor + }, + // 输入框背景颜色 + inputBgColor: { + type: String, + default: () => defProps.numberBox.inputBgColor + }, + // 指定光标于键盘的距离，避免键盘遮挡输入框，单位px + cursorSpacing: { + type: [String, Number], + default: () => defProps.numberBox.cursorSpacing + }, + // 是否禁用增加按钮 + disablePlus: { + type: Boolean, + default: () => defProps.numberBox.disablePlus + }, + // 是否禁用减少按钮 + disableMinus: { + type: Boolean, + default: () => defProps.numberBox.disableMinus + }, + // 加减按钮图标的样式 + iconStyle: { + type: [Object, String], + default: () => defProps.numberBox.iconStyle + }, + // 迷你模式 + miniMode: { + type: Boolean, + default: () => defProps.numberBox.miniMode + }, + } +}) diff --git a/uview-plus/components/u-number-box/u-number-box.vue b/uview-plus/components/u-number-box/u-number-box.vue new file mode 100644 index 0000000..3e55745 --- /dev/null +++ b/uview-plus/components/u-number-box/u-number-box.vue @@ -0,0 +1,475 @@ + + + + + diff --git a/uview-plus/components/u-number-keyboard/numberKeyboard.js b/uview-plus/components/u-number-keyboard/numberKeyboard.js new file mode 100644 index 0000000..95bf8de --- /dev/null +++ b/uview-plus/components/u-number-keyboard/numberKeyboard.js @@ -0,0 +1,17 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:08:05 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/numberKeyboard.js + */ +export default { + // 数字键盘 + numberKeyboard: { + mode: 'number', + dotDisabled: false, + random: false + } +} diff --git a/uview-plus/components/u-number-keyboard/props.js b/uview-plus/components/u-number-keyboard/props.js new file mode 100644 index 0000000..5f7de17 --- /dev/null +++ b/uview-plus/components/u-number-keyboard/props.js @@ -0,0 +1,21 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 键盘的类型，number-数字键盘，card-身份证键盘 + mode: { + type: String, + default: () => defProps.numberKeyboard.value + }, + // 是否显示键盘的"."符号 + dotDisabled: { + type: Boolean, + default: () => defProps.numberKeyboard.dotDisabled + }, + // 是否打乱键盘按键的顺序 + random: { + type: Boolean, + default: () => defProps.numberKeyboard.random + } + } +}) diff --git a/uview-plus/components/u-number-keyboard/u-number-keyboard.vue b/uview-plus/components/u-number-keyboard/u-number-keyboard.vue new file mode 100644 index 0000000..f002a01 --- /dev/null +++ b/uview-plus/components/u-number-keyboard/u-number-keyboard.vue @@ -0,0 +1,199 @@ + + + + + diff --git a/uview-plus/components/u-overlay/overlay.js b/uview-plus/components/u-overlay/overlay.js new file mode 100644 index 0000000..05da8b9 --- /dev/null +++ b/uview-plus/components/u-overlay/overlay.js @@ -0,0 +1,18 @@ +/* + * @Author : LQ + * @Description : + * @version : 1.0 + * @Date : 2021-08-20 16:44:21 + * @LastAuthor : LQ + * @lastTime : 2021-08-20 17:06:50 + * @FilePath : /u-view2.0/uview-ui/libs/config/props/overlay.js + */ +export default { + // overlay组件 + overlay: { + show: false, + zIndex: 10070, + duration: 300, + opacity: 0.5 + } +} diff --git a/uview-plus/components/u-overlay/props.js b/uview-plus/components/u-overlay/props.js new file mode 100644 index 0000000..2807fab --- /dev/null +++ b/uview-plus/components/u-overlay/props.js @@ -0,0 +1,26 @@ +import { defineMixin } from '../../libs/vue' +import defProps from '../../libs/config/props.js' +export const props = defineMixin({ + props: { + // 是否显示遮罩 + show: { + type: Boolean, + default: () => defProps.overlay.show + }, + // 层级z-index + zIndex: { + type: [String, Number], + default: () => defProps.overlay.zIndex + }, + // 遮罩的过渡时间，单位为ms + duration: { + type: [String, Number], + default: () => defProps.overlay.duration + }, + // 不透明度值，当做rgba的第四个参数 + opacity: { + type: [String, Number], + default: () => defProps.overlay.opacity + } + } +}) diff --git a/uview-plus/components/u-overlay/u-overlay.vue b/uview-plus/components/u-overlay/u-overlay.vue new file mode 100644 index 0000000..a4e1319 --- /dev/null +++ b/uview-plus/components/u-overlay/u-overlay.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/uview-plus/components/u-parse/node/node.vue b/uview-plus/components/u-parse/node/node.vue new file mode 100644 index 0000000..c87d069 --- /dev/null +++ b/uview-plus/components/u-parse/node/node.vue @@ -0,0 +1,584 @@ +