├── .all-contributorsrc ├── .babelrc ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── gulpfile.js ├── package.json ├── src ├── LICENSE ├── assets │ └── style │ │ ├── _prefix.less │ │ ├── avatar.less │ │ ├── badge.less │ │ ├── button.less │ │ ├── checkbox.less │ │ ├── color.less │ │ ├── common.less │ │ ├── font.less │ │ ├── form.less │ │ ├── icon.less │ │ ├── img-filter.less │ │ ├── layout.less │ │ ├── loading.less │ │ ├── main.less │ │ ├── progress.less │ │ ├── radio.less │ │ ├── reset.less │ │ ├── switch.less │ │ └── tag.less ├── components │ ├── calendar │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ └── locale │ │ │ ├── en.js │ │ │ ├── es-us.js │ │ │ ├── zh-cn.js │ │ │ ├── zh-hk.js │ │ │ ├── zh-tw.js │ │ │ └── zh.js │ ├── card │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ ├── common.less │ ├── config.js │ ├── custom-bar │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ ├── grid │ │ ├── grid-item │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ └── index.wxml │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ ├── menu-bar │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ ├── modal │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ └── modal.js │ ├── notice │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ ├── search │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ ├── steps │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ ├── swiper │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ ├── tab │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml │ └── time-line │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ └── time-line-item │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ └── index.wxml ├── mixins │ └── open-type.js └── utils.js ├── test ├── index.test.js ├── utils.js └── wx.test.js └── tools ├── assetsLessEntry.js ├── build.js ├── checkcomponents.js ├── checkwxss.js ├── config.js ├── demo ├── LICENSE ├── app.js ├── app.json ├── app.wxss ├── cloud_function │ └── getGithubInfo │ │ ├── config.json │ │ ├── index.js │ │ └── package.json ├── package.json ├── pages │ ├── about │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ └── index.wxss │ ├── basic │ │ ├── avatar │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── badge │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── box-shadow │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── button │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── color │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── css3-filter │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── icon │ │ │ ├── icon.js │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ ├── index.wxss │ │ ├── layout │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── loading │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── progress │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── tag │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ └── text │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ ├── component │ │ ├── calendar │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── card │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── custom-bar │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── form │ │ │ ├── checkbox │ │ │ │ ├── index.js │ │ │ │ ├── index.json │ │ │ │ ├── index.less │ │ │ │ ├── index.wxml │ │ │ │ └── index.wxss │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ ├── index.wxss │ │ │ ├── radio │ │ │ │ ├── index.js │ │ │ │ ├── index.json │ │ │ │ ├── index.less │ │ │ │ ├── index.wxml │ │ │ │ └── index.wxss │ │ │ └── switch │ │ │ │ ├── index.js │ │ │ │ ├── index.json │ │ │ │ ├── index.less │ │ │ │ ├── index.wxml │ │ │ │ └── index.wxss │ │ ├── grid │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ ├── index.wxss │ │ ├── menu-bar │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── modal │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── steps │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── swiper │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── tab │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ └── time-line │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.less │ │ │ ├── index.wxml │ │ │ └── index.wxss │ └── solution │ │ ├── index.js │ │ ├── index.json │ │ ├── index.less │ │ ├── index.wxml │ │ └── index.wxss ├── project.config.json ├── sitemap.json └── utils │ ├── colour.js │ ├── config.js │ ├── gradual-colour.js │ └── storage.js ├── entry.js └── utils.js /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "huarxia", 10 | "name": " 花夏", 11 | "avatar_url": "https://avatars0.githubusercontent.com/u/11221788?v=4", 12 | "profile": "https://huarxia.github.io/blog/", 13 | "contributions": [ 14 | "design" 15 | ] 16 | } 17 | ], 18 | "contributorsPerLine": 7, 19 | "projectName": "wechat-miniprogram", 20 | "projectOwner": "AnimaUI", 21 | "repoType": "github", 22 | "repoHost": "https://github.com", 23 | "skipCi": true 24 | } 25 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | [ 4 | "module-resolver", 5 | { 6 | "root": [ 7 | "./src" 8 | ], 9 | "alias": {} 10 | } 11 | ] 12 | ], 13 | "presets": [ 14 | [ 15 | "env", 16 | { 17 | "loose": true, 18 | "modules": "commonjs" 19 | } 20 | ] 21 | ] 22 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .eslintrc.js 2 | /node_modules/ 3 | /.git/ 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | package-lock.json 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | miniprogram_dist 10 | miniprogram_dev 11 | node_modules 12 | coverage 13 | animaUi -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | package-lock.json 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | test 10 | tools 11 | docs 12 | miniprogram_dev 13 | node_modules 14 | coverage -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const clean = require('gulp-clean'); 3 | const config = require('./tools/config'); 4 | const BuildTask = require('./tools/build'); 5 | const id = require('./package.json').name || 'miniprogram-custom-component'; 6 | 7 | // 构建任务实例 8 | // eslint-disable-next-line no-new 9 | new BuildTask(id, config.entry); 10 | 11 | // 清空生成目录和文件 12 | gulp.task( 13 | 'clean', 14 | gulp.series( 15 | () => 16 | gulp 17 | .src(config.distPath, { read: false, allowEmpty: true }) 18 | .pipe(clean()), 19 | (done) => { 20 | if (config.isDev) { 21 | return gulp 22 | .src(config.demoDist, { read: false, allowEmpty: true }) 23 | .pipe(clean()); 24 | } 25 | return done(); 26 | } 27 | ) 28 | ); 29 | // 监听文件变化并进行开发模式构建 30 | gulp.task('watch', gulp.series(`${id}-watch`)); 31 | // 开发模式构建 32 | gulp.task('dev', gulp.series(`${id}-dev`)); 33 | // 生产模式构建 34 | gulp.task('default', gulp.series(`${id}-default`)); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wechat-miniprogram", 3 | "version": "1.0.0", 4 | "description": "anima(灵动，animation简写，(灵动UI)主要包含各种动画效果，小程序插件解决方案)", 5 | "main": "miniprogram_dist/index.js", 6 | "scripts": { 7 | "dev": "gulp dev --develop", 8 | "watch": "gulp watch --develop --watch", 9 | "build": "gulp", 10 | "dist": "npm run build", 11 | "clean-dev": "gulp clean --develop", 12 | "clean": "gulp clean", 13 | "test": "jest --bail", 14 | "test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --bail", 15 | "coverage": "jest ./test/* --coverage --bail", 16 | "lint": "eslint \"src/**/*.js\" --fix", 17 | "lint-tools": "eslint \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\" --fix" 18 | }, 19 | "miniprogram": "miniprogram_dist", 20 | "jest": { 21 | "testEnvironment": "jsdom", 22 | "testURL": "https://jest.test", 23 | "collectCoverageFrom": [ 24 | "src/**/*.js" 25 | ], 26 | "moduleDirectories": [ 27 | "node_modules", 28 | "src" 29 | ] 30 | }, 31 | "repository": { 32 | "type": "git", 33 | "url": "https://github.com/huarxia/animaUI.git" 34 | }, 35 | "author": "huaxia", 36 | "license": "GPL-3.0", 37 | "devDependencies": { 38 | "all-contributors-cli": "^6.16.0", 39 | "babel-core": "^6.26.3", 40 | "babel-loader": "^7.1.5", 41 | "babel-plugin-module-resolver": "^3.2.0", 42 | "babel-preset-env": "^1.7.0", 43 | "colors": "^1.4.0", 44 | "commitizen": "^4.0.3", 45 | "cz-conventional-changelog": "^3.1.0", 46 | "eslint": "^5.16.0", 47 | "eslint-config-airbnb-base": "^13.1.0", 48 | "eslint-loader": "^2.2.1", 49 | "eslint-plugin-import": "^2.20.1", 50 | "eslint-plugin-node": "^7.0.1", 51 | "eslint-plugin-promise": "^3.8.0", 52 | "glob": "^7.1.6", 53 | "gulp": "^4.0.2", 54 | "gulp-clean": "^0.4.0", 55 | "gulp-clean-css": "^4.3.0", 56 | "gulp-htmlmin": "^5.0.1", 57 | "gulp-if": "^2.0.2", 58 | "gulp-install": "^1.1.0", 59 | "gulp-less": "^4.0.1", 60 | "gulp-rename": "^1.4.0", 61 | "gulp-sourcemaps": "^2.6.5", 62 | "jest": "^23.5.0", 63 | "miniprogram-simulate": "^1.0.0", 64 | "module-resolver": "^1.0.0", 65 | "through2": "^2.0.3", 66 | "vinyl": "^2.2.0", 67 | "webpack": "^4.42.0", 68 | "webpack-node-externals": "^1.7.2" 69 | }, 70 | "dependencies": { 71 | "dayjs": "^1.8.29", 72 | "miniprogram-computed": "^2.1.1" 73 | }, 74 | "config": { 75 | "commitizen": { 76 | "path": "./node_modules/cz-conventional-changelog" 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/assets/style/_prefix.less: -------------------------------------------------------------------------------- 1 | @prefix: ani; -------------------------------------------------------------------------------- /src/assets/style/avatar.less: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | avatar |\ 4 | | ~~~~~~~ |_\ 5 | | 👩‍🚒 | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | @import './_prefix.less'; 11 | .@{prefix}-avatar { 12 | display: inline-flex; 13 | font-variant: small-caps; 14 | margin: 0; 15 | padding: 0; 16 | background-color: var(--grey); 17 | color: var(--white); 18 | text-align: center; 19 | justify-content: center; 20 | align-items: center; 21 | white-space: nowrap; 22 | position: relative; 23 | width: 64rpx; 24 | height: 64rpx; 25 | background-size: cover; 26 | background-position: center; 27 | vertical-align: middle; 28 | font-size: 48rpx; 29 | border-radius: 6rpx; 30 | &.sm { 31 | width: 48rpx; 32 | height: 48rpx; 33 | font-size: 36rpx; 34 | } 35 | &.xl { 36 | width: 96rpx; 37 | height: 96rpx; 38 | font-size: 36rpx; 39 | } 40 | &.xxl { 41 | width: 128rpx; 42 | height: 128rpx; 43 | font-size: 36rpx; 44 | } 45 | } 46 | .@{prefix}-avatar-group { 47 | direction: rtl; 48 | unicode-bidi: bidi-override; 49 | padding: 0 10rpx 0 60rpx; 50 | display: inline-block; 51 | .@{prefix}-avatar { 52 | margin-left: -30rpx; 53 | border: 4rpx solid var(--ghost-white); 54 | vertical-align: middle; 55 | } 56 | } -------------------------------------------------------------------------------- /src/assets/style/badge.less: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | 🚥 |\ 4 | | ~~~~~~~ |_\ 5 | | badge | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | @import './_prefix.less'; 11 | .@{prefix}-badge { 12 | width: 20rpx; 13 | height: 20rpx; 14 | display: inline-flex; 15 | justify-content: center; 16 | align-items: center; 17 | border-radius: 50%; 18 | vertical-align: middle; 19 | background-color: currentColor; 20 | position: relative; 21 | font-size: 18rpx; 22 | &.max { 23 | width: 34rpx; 24 | height: 34rpx; 25 | line-height: 34rpx; 26 | } 27 | &.dot { 28 | width: 16rpx; 29 | height: 16rpx; 30 | } 31 | &:not([class*='@{prefix}-icon-'])::before { 32 | content: attr(data-text); 33 | color: #fff; 34 | } 35 | &[class*='@{prefix}-icon-'] { 36 | background-color: transparent; 37 | font-size: 24rpx; 38 | &::before { 39 | color: currentColor; 40 | } 41 | } 42 | &.animation { 43 | &::after { 44 | content: ''; 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | right: 0; 49 | bottom: 0; 50 | border-radius: 50%; 51 | border: 1rpx solid currentColor; 52 | animation: badge-animation 1.2s infinite ease-in-out; 53 | } 54 | @keyframes badge-animation { 55 | from { 56 | transform: scale(.8); 57 | opacity: 1 58 | } 59 | to { 60 | transform: scale(2.4); 61 | opacity: 0 62 | } 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /src/assets/style/checkbox.less: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | ⚽️ |\ 4 | | ~~~~~~~ |_\ 5 | | switch | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | @import './_prefix.less'; 11 | @switch-fusion-blue-grey: #bdc7d2; 12 | /* switchColor */ 13 | checkbox { 14 | position: relative; 15 | color: var(--green); 16 | &.round .wx-checkbox-input { 17 | border-radius: 9999rpx; 18 | } 19 | &::before { 20 | font-family: '@{prefix}-icon'; 21 | content: '\e759'; 22 | position: absolute; 23 | color: var(--white) !important; 24 | top: 0%; 25 | right: auto; 26 | bottom: 0; 27 | left: 0; 28 | font-size: 16rpx; 29 | height: 52rpx; 30 | line-height: 52rpx; 31 | width: 50%; 32 | text-align: center; 33 | pointer-events: none; 34 | transform: scale(0, 0); 35 | transition: all .3s ease-in-out 0s; 36 | z-index: 9; 37 | margin: auto; 38 | } 39 | &[checked] { 40 | &::before { 41 | right: auto; 42 | left: 10rpx; 43 | font-size: 20rpx; 44 | transform: scale(1, 1); 45 | } 46 | .wx-checkbox-input { 47 | border-color: currentColor; 48 | background-color: currentColor; 49 | color: inherit !important; 50 | } 51 | } 52 | } -------------------------------------------------------------------------------- /src/assets/style/font.less: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | 🤹‍♀️ |\ 4 | | ~~~~~~~ |_\ 5 | | font | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | @import './_prefix.less'; 11 | /* 字体粗细 */ 12 | .fontWeight(700); 13 | .fontWeight(@fw, @i: 400) when (@i =< @fw) { 14 | .fw-@{i} { 15 | font-weight: 0 + @i; 16 | } 17 | .fontWeight(@fw, (@i + 100)); 18 | } 19 | 20 | /* 字体大小 */ 21 | .fontSize(100); 22 | .fontSize(@fs, @i: 20) when (@i =< @fs) { 23 | .fs-@{i} { 24 | font-size: 0rpx + @i; 25 | } 26 | .fontSize(@fs, (@i + 2)); 27 | } 28 | 29 | /* 首字母大写 */ 30 | .capitalize { 31 | text-transform: Capitalize; 32 | } 33 | 34 | /* 全大写 */ 35 | .uppercase { 36 | text-transform: uppercase; 37 | } 38 | 39 | /* 全小写 */ 40 | .lowercase { 41 | text-transform: lowercase; 42 | } 43 | 44 | .text-gradual { 45 | -webkit-background-clip: text; 46 | background-clip: text; 47 | } 48 | .text-cut { 49 | text-overflow: ellipsis; 50 | white-space: nowrap; 51 | overflow: hidden; 52 | } 53 | .text-wire { 54 | position: relative; 55 | text-align: center; 56 | margin: 0 auto; 57 | text { 58 | color: var(--grey); 59 | } 60 | text:before, 61 | text:after { 62 | content: ''; 63 | position: absolute; // 定位背景横线的位置 64 | top: 50%; 65 | background: var(--grey); // 背景横线颜色 66 | width: 35%; // 单侧横线的长度 67 | height: 2rpx; 68 | } 69 | text:before { 70 | left: 2%; // 调整背景横线的左右距离 71 | } 72 | text:after { 73 | right: 2%; 74 | } 75 | } -------------------------------------------------------------------------------- /src/assets/style/form.less: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | form |\ 4 | | ~~~~~~~ |_\ 5 | | 🐹 | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | @import './_prefix.less'; 11 | .@{prefix}-form-group { 12 | background-color: var(--white); 13 | padding: 8rpx 50rpx 8rpx 30rpx; 14 | display: flex; 15 | align-items: center; 16 | min-height: 96rpx; 17 | justify-content: space-between; 18 | & + & { 19 | border-top: 1rpx solid var(--gray); 20 | } 21 | .title { 22 | padding-right: 28rpx; 23 | } 24 | &.text-left { 25 | .title { 26 | min-width: ~'calc(4.2em + 28rpx)'; 27 | } 28 | } 29 | picker { 30 | flex: 1; 31 | position: relative; 32 | padding-right: 30rpx; 33 | line-height: 96rpx; 34 | overflow: hidden; 35 | .picker { 36 | width: 100%; 37 | line-height: 96rpx; 38 | text-overflow: ellipsis; 39 | white-space: nowrap; 40 | overflow: hidden; 41 | text-align: right; 42 | } 43 | } 44 | input { 45 | flex: 1; 46 | font-size: 28rpx; 47 | color: var(--dark-gray); 48 | padding-right: 36rpx; 49 | } 50 | .choose-img, 51 | .bg-img { 52 | height: 150rpx; 53 | line-height: 150rpx; 54 | text-align: center; 55 | border-radius: 8rpx; 56 | overflow: hidden; 57 | } 58 | .choose-img { 59 | width: 150rpx; 60 | } 61 | .bg-img { 62 | margin-right: 20rpx; 63 | position: relative; 64 | image { 65 | width: 100%; 66 | height: 100%; 67 | position: relative; 68 | } 69 | .close-img { 70 | opacity: .6; 71 | position: absolute; 72 | right: 0; 73 | top: 0; 74 | border-radius: 3px; 75 | padding: 8rpx; 76 | height: 42rpx; 77 | display: inline-flex; 78 | align-items: center; 79 | justify-content: center; 80 | } 81 | } 82 | } 83 | .calc-num { 84 | position: relative; 85 | &::before { 86 | content: attr(data-num); 87 | position: absolute; 88 | bottom: 10rpx; 89 | right: 10rpx; 90 | color: var(--dark-gray); 91 | font-size: 24rpx; 92 | } 93 | } -------------------------------------------------------------------------------- /src/assets/style/img-filter.less: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | 🍿 |\ 4 | | ~~~~~~~ |_\ 5 | | loading | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | @import './_prefix.less'; 11 | .@{prefix}-grayscale { 12 | filter: grayscale(50%); 13 | } 14 | .@{prefix}-saturate { 15 | filter: saturate(360%); 16 | } 17 | .@{prefix}-sepia { 18 | filter: sepia(100%); 19 | } 20 | .@{prefix}-invert { 21 | filter: invert(100%); 22 | } 23 | .@{prefix}-opacity { 24 | filter: opacity(50%); 25 | } 26 | .@{prefix}-brightness { 27 | filter: brightness(120%); 28 | } 29 | .@{prefix}-contrast { 30 | filter: contrast(160%); 31 | } 32 | .@{prefix}-hue-rotate { 33 | filter: hue-rotate(160deg); 34 | } 35 | .@{prefix}-blur { 36 | filter: blur(4rpx); 37 | } 38 | .@{prefix}-normal { 39 | /* 啥也没有 */ 40 | } -------------------------------------------------------------------------------- /src/assets/style/main.less: -------------------------------------------------------------------------------- 1 | /*! 2 | code is far away from bug with the animal protecting 3 | _ _ _ _____ 4 | /\ (_) | | | ||_ _| 5 | / \ _ __ _ _ __ ___ __ _ | | | | | | 6 | / /\ \ | '_ \ | || '_ ` _ \ / _` || | | | | | 7 | / ____ \ | | | || || | | | | || (_| || |__| | _| |_ 8 | /_/ \_\|_| |_||_||_| |_| |_| \__,_| \____/ |_____| 9 | 10 | AnimaUI for wechat-miniprogram v1.0.0 | by 花夏(huaxia@animaui.com) 2020-03-25 18:10:37 11 | 仅供学习交流，如作它用所承受的法律责任一概与作者无关 12 | 代码不易，使用AnimaUI开发微信小程序时，请注明基于 13 | AnimaUI开发，谢谢~~ QQ交流群：183167955 14 | */ 15 | @import './reset.less'; 16 | @import './icon.less'; 17 | @import './color.less'; 18 | @import './font.less'; 19 | @import './tag.less'; 20 | @import './avatar.less'; 21 | @import './progress.less'; 22 | @import './button.less'; 23 | @import './loading.less'; 24 | @import './badge.less'; 25 | @import './img-filter.less'; 26 | @import './form.less'; 27 | @import './switch.less'; 28 | @import './radio.less'; 29 | @import './checkbox.less'; 30 | @import './layout.less'; 31 | @import './common.less'; -------------------------------------------------------------------------------- /src/assets/style/radio.less: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | ⚽️ |\ 4 | | ~~~~~~~ |_\ 5 | | radio | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | @import './_prefix.less'; 11 | radio { 12 | position: relative; 13 | color: var(--green); 14 | &::before { 15 | font-family: '@{prefix}-icon'; 16 | content: '\e759'; 17 | position: absolute; 18 | color: var(--white) !important; 19 | top: 0%; 20 | right: auto; 21 | bottom: 0; 22 | left: 10rpx; 23 | font-size: 16rpx; 24 | height: 52rpx; 25 | line-height: 52rpx; 26 | width: 50%; 27 | text-align: center; 28 | pointer-events: none; 29 | transform: scale(0, 0); 30 | transition: all .3s ease-in-out 0s; 31 | z-index: 9; 32 | margin: auto;; 33 | } 34 | .wx-radio-input.wx-radio-input-checked::before { 35 | content: ''; 36 | } 37 | &.radio::before { 38 | display: none; 39 | } 40 | &.radio[checked]::after { 41 | content: ''; 42 | background-color: transparent; 43 | display: block; 44 | position: absolute; 45 | width: 16rpx; 46 | height: 16rpx; 47 | z-index: 999; 48 | top: 0; 49 | left: 0; 50 | right: 10rpx; 51 | bottom: 0; 52 | margin: auto; 53 | border-radius: 9999rpx; 54 | border: 14rpx solid var(--white) !important; 55 | } 56 | &[checked] { 57 | animation: boom .2s ease-in; 58 | animation-iteration-count: 1; 59 | .wx-radio-input { 60 | color: inherit !important; 61 | background-color: currentColor !important; 62 | border-color: currentColor !important; 63 | } 64 | &::before { 65 | transform: scale(1, 1); 66 | font-size: 20rpx; 67 | } 68 | } 69 | } 70 | @keyframes boom { 71 | 0% { 72 | opacity: .2; 73 | transform: scale(2); 74 | } 75 | 90% { 76 | opacity: .01; 77 | transform: scale(3); 78 | } 79 | 100% { 80 | transform: none; 81 | } 82 | } -------------------------------------------------------------------------------- /src/assets/style/reset.less: -------------------------------------------------------------------------------- 1 | @import './_prefix.less'; 2 | ::-webkit-scrollbar { 3 | display: none; 4 | } 5 | page { 6 | font-family: Helvetica Neue, Helvetica, sans-serif; 7 | } 8 | view, 9 | scroll-view, 10 | swiper, 11 | button, 12 | input, 13 | textarea, 14 | label, 15 | navigator, 16 | image { 17 | box-sizing: border-box; 18 | } 19 | [class*='@{prefix}-icon-'] { 20 | font-family: '@{prefix}-icon'!important; 21 | font-style: normal; 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | vertical-align: middle; 25 | font-size: 24rpx; 26 | } 27 | -------------------------------------------------------------------------------- /src/assets/style/tag.less: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | tag |\ 4 | | ~~~~~~~ |_\ 5 | | 🎟 | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | @import './_prefix.less'; 11 | .@{prefix}-tag { 12 | background-color: var(--gray); 13 | font-size: 24rpx; 14 | vertical-align: middle; 15 | position: relative; 16 | display: inline-flex; 17 | align-items: center; 18 | justify-content: center; 19 | box-sizing: border-box; 20 | padding: 0rpx 16rpx; 21 | height: 48rpx; 22 | white-space: nowrap; 23 | &.sm { 24 | font-size: 20rpx; 25 | padding: 0rpx 12rpx; 26 | height: 32rpx; 27 | } 28 | &[class*="line"] { 29 | background-color: transparent; 30 | } 31 | &[class*="line"]::after { 32 | content: ' '; 33 | display: block; 34 | width: 200%; 35 | height: 200%; 36 | position: absolute; 37 | top: 0; 38 | left: 0; 39 | border: 1rpx solid currentColor; 40 | transform: scale(0.5); 41 | transform-origin: 0 0; 42 | box-sizing: border-box; 43 | border-radius: 12rpx; 44 | z-index: 1; 45 | pointer-events: none; 46 | } 47 | } -------------------------------------------------------------------------------- /src/components/calendar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/calendar/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | /* latin */ 3 | @font-face { 4 | font-family: 'Monoton'; 5 | font-style: normal; 6 | font-weight: 400; 7 | src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.com/s/monoton/v9/5h1aiZUrOngCibe4TkHLQka4BU4.woff2) format('woff2'); 8 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 9 | } 10 | .@{prefix}-calendar { 11 | width: 100%; 12 | max-height: 100%; 13 | padding-bottom: 20rpx; 14 | position: fixed; 15 | bottom: 0; 16 | left: 0; 17 | overflow-y: auto; 18 | font-size: 28rpx; 19 | background-color: var(--white); 20 | border-radius: 56rpx 56rpx 0 0; 21 | transition: transform .3s; 22 | -webkit-overflow-scrolling: touch; 23 | &__header { 24 | position: relative; 25 | box-shadow: 0 4rpx 12rpx rgba(51, 51, 51, .2); 26 | &-title { 27 | text-align: center; 28 | height: 72rpx; 29 | line-height: 72rpx; 30 | font-weight: 500; 31 | color: var(--black); 32 | } 33 | .icon-close { 34 | position: absolute; 35 | top: 30rpx; 36 | right: 30rpx; 37 | } 38 | } 39 | &__weekdays { 40 | .@{prefix}-calendar__weekday { 41 | font-size: 24rpx; 42 | text-align: center; 43 | line-height: 60rpx; 44 | } 45 | } 46 | &__action { 47 | padding: 0 0 30rpx; 48 | .@{prefix}-calendar__header-subdate { 49 | text-align: center; 50 | font-size: 24rpx; 51 | height: 48rpx; 52 | line-height: 48rpx; 53 | font-weight: 500; 54 | margin: 0 30rpx; 55 | color: var(--black); 56 | } 57 | &-icon { 58 | margin: 0 10rpx; 59 | } 60 | } 61 | &__body { 62 | margin-top: 24rpx; 63 | &-month { 64 | .@{prefix}-calendar__days { 65 | position: relative; 66 | .@{prefix}-calendar__day { 67 | position: relative; 68 | width: 14.285%; 69 | height: 108rpx; 70 | font-size: 32rpx; 71 | z-index: 10; 72 | &.active { 73 | border-radius: 8rpx; 74 | } 75 | } 76 | .@{prefix}-calendar__month-mark { 77 | position: absolute; 78 | top: 50%; 79 | left: 50%; 80 | z-index: 0; 81 | color: rgba(0, 0, 0, .08); 82 | font-size: 320rpx; 83 | transform: translate(-50%, -50%); 84 | pointer-events: none; 85 | font-family: 'Monoton', cursive; 86 | } 87 | } 88 | } 89 | } 90 | &__footer { 91 | &-choose { 92 | text-align: center; 93 | margin: 24rpx auto; 94 | } 95 | .confirm-btn { 96 | width: 96%; 97 | margin: 0 auto; 98 | } 99 | } 100 | } 101 | .@{prefix}-overlay { 102 | width: 100%; 103 | height: 100%; 104 | position: fixed; 105 | top: 0; 106 | left: 0; 107 | z-index: 1; 108 | background-color: rgba(0, 0, 0, .7); 109 | } 110 | -------------------------------------------------------------------------------- /src/components/calendar/index.wxml: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | {{title}} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | {{subDateStr}} 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | {{item}} 27 | 28 | 29 | 30 | 31 | 32 | 33 | {{item.day}} 40 | {{curMonth}} 41 | 42 | 43 | 44 | 45 | 46 | {{mode == 'date' ? activeDateStr : startDate}} 47 | 至{{endDate}} 48 | 49 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/components/calendar/locale/en.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.dayjs_locale_en=n()}(this,function(){"use strict";return{name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")}}); 2 | -------------------------------------------------------------------------------- /src/components/calendar/locale/es-us.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s(require("dayjs")):"function"==typeof define&&define.amd?define(["dayjs"],s):e.dayjs_locale_es_us=s(e.dayjs)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var s={name:"es-us",weekdays:"domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),weekdaysShort:"dom._lun._mar._mié._jue._vie._sáb.".split("_"),weekdaysMin:"do_lu_ma_mi_ju_vi_sá".split("_"),months:"Enero_Febrero_Marzo_Abril_Mayo_Junio_Julio_Agosto_Septiembre_Octubre_Noviembre_Diciembre".split("_"),monthsShort:"ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_"),relativeTime:{future:"en %s",past:"hace %s",s:"unos segundos",m:"un minuto",mm:"%d minutos",h:"una hora",hh:"%d horas",d:"un día",dd:"%d días",M:"un mes",MM:"%d meses",y:"un año",yy:"%d años"},ordinal:function(e){return e+"º"},formats:{LT:"h:mm A",LTS:"h:mm:ss A",L:"MM/DD/YYYY",LL:"D [de] MMMM [de] YYYY",LLL:"D [de] MMMM [de] YYYY h:mm A",LLLL:"dddd, D [de] MMMM [de] YYYY h:mm A"}};return e.locale(s,null,!0),s}); 2 | -------------------------------------------------------------------------------- /src/components/calendar/locale/zh-cn.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */!function(_,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("dayjs")):"function"==typeof define&&define.amd?define(["dayjs"],e):_.dayjs_locale_zh_cn=e(_.dayjs)}(this,function(_){"use strict";_=_&&_.hasOwnProperty("default")?_.default:_;var e={name:"zh-cn",weekdays:"星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),weekdaysShort:"周日_周一_周二_周三_周四_周五_周六".split("_"),weekdaysMin:"日_一_二_三_四_五_六".split("_"),months:"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),monthsShort:"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),ordinal:function(_,e){switch(e){case"W":return _+"周";default:return _+"日"}},weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"YYYY/MM/DD",LL:"YYYY年M月D日",LLL:"YYYY年M月D日Ah点mm分",LLLL:"YYYY年M月D日ddddAh点mm分",l:"YYYY/M/D",ll:"YYYY年M月D日",lll:"YYYY年M月D日 HH:mm",llll:"YYYY年M月D日dddd HH:mm"},relativeTime:{future:"%s内",past:"%s前",s:"几秒",m:"1 分钟",mm:"%d 分钟",h:"1 小时",hh:"%d 小时",d:"1 天",dd:"%d 天",M:"1 个月",MM:"%d 个月",y:"1 年",yy:"%d 年"},meridiem:function(_,e){var t=100*_+e;return t<600?"凌晨":t<900?"早上":t<1130?"上午":t<1230?"中午":t<1800?"下午":"晚上"}};return _.locale(e,null,!0),e}); 2 | -------------------------------------------------------------------------------- /src/components/calendar/locale/zh-hk.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */!function(_,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("dayjs")):"function"==typeof define&&define.amd?define(["dayjs"],e):_.dayjs_locale_zh_hk=e(_.dayjs)}(this,function(_){"use strict";_=_&&_.hasOwnProperty("default")?_.default:_;var e={name:"zh-hk",months:"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),monthsShort:"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),weekdays:"星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),weekdaysShort:"週日_週一_週二_週三_週四_週五_週六".split("_"),weekdaysMin:"日_一_二_三_四_五_六".split("_"),ordinal:function(_){return _+"日"},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"YYYY/MM/DD",LL:"YYYY年M月D日",LLL:"YYYY年M月D日 HH:mm",LLLL:"YYYY年M月D日dddd HH:mm"},relativeTime:{future:"%s內",past:"%s前",s:"幾秒",m:"一分鐘",mm:"%d 分鐘",h:"一小時",hh:"%d 小時",d:"一天",dd:"%d 天",M:"一個月",MM:"%d 個月",y:"一年",yy:"%d 年"}};return _.locale(e,null,!0),e}); 2 | -------------------------------------------------------------------------------- /src/components/calendar/locale/zh-tw.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */!function(_,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("dayjs")):"function"==typeof define&&define.amd?define(["dayjs"],e):_.dayjs_locale_zh_tw=e(_.dayjs)}(this,function(_){"use strict";_=_&&_.hasOwnProperty("default")?_.default:_;var e={name:"zh-tw",weekdays:"星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),weekdaysShort:"週日_週一_週二_週三_週四_週五_週六".split("_"),weekdaysMin:"日_一_二_三_四_五_六".split("_"),months:"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),monthsShort:"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),ordinal:function(_){return _+"日"},formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"YYYY/MM/DD",LL:"YYYY年M月D日",LLL:"YYYY年M月D日 HH:mm",LLLL:"YYYY年M月D日dddd HH:mm",l:"YYYY/M/D",ll:"YYYY年M月D日",lll:"YYYY年M月D日 HH:mm",llll:"YYYY年M月D日dddd HH:mm"},relativeTime:{future:"%s內",past:"%s前",s:"幾秒",m:"1 分鐘",mm:"%d 分鐘",h:"1 小時",hh:"%d 小時",d:"1 天",dd:"%d 天",M:"1 個月",MM:"%d 個月",y:"1 年",yy:"%d 年"}};return _.locale(e,null,!0),e}); 2 | -------------------------------------------------------------------------------- /src/components/calendar/locale/zh.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */!function(_,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("dayjs")):"function"==typeof define&&define.amd?define(["dayjs"],e):_.dayjs_locale_zh=e(_.dayjs)}(this,function(_){"use strict";_=_&&_.hasOwnProperty("default")?_.default:_;var e={name:"zh",weekdays:"星期日_星期一_星期二_星期三_星期四_星期五_星期六".split("_"),weekdaysShort:"周日_周一_周二_周三_周四_周五_周六".split("_"),weekdaysMin:"日_一_二_三_四_五_六".split("_"),months:"一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split("_"),monthsShort:"1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split("_"),ordinal:function(_,e){switch(e){case"W":return _+"周";default:return _+"日"}},weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"YYYY/MM/DD",LL:"YYYY年M月D日",LLL:"YYYY年M月D日Ah点mm分",LLLL:"YYYY年M月D日ddddAh点mm分",l:"YYYY/M/D",ll:"YYYY年M月D日",lll:"YYYY年M月D日 HH:mm",llll:"YYYY年M月D日dddd HH:mm"},relativeTime:{future:"%s后",past:"%s前",s:"几秒",m:"1 分钟",mm:"%d 分钟",h:"1 小时",hh:"%d 小时",d:"1 天",dd:"%d 天",M:"1 个月",MM:"%d 个月",y:"1 年",yy:"%d 年"},meridiem:function(_,e){var t=100*_+e;return t<600?"凌晨":t<900?"早上":t<1130?"上午":t<1230?"中午":t<1800?"下午":"晚上"}};return _.locale(e,null,!0),e}); 2 | -------------------------------------------------------------------------------- /src/components/card/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../config'; 2 | 3 | // const app = getApp(); 4 | Component({ 5 | options: { 6 | styleIsolation: 'apply-shared', 7 | multipleSlots: true 8 | }, 9 | behaviors: [], 10 | properties: { 11 | border: { 12 | type: Boolean, 13 | value: true 14 | }, 15 | hideTitle: { 16 | type: Boolean, 17 | value: false 18 | } 19 | }, 20 | data: { 21 | prefix 22 | }, 23 | methods: {} 24 | }); 25 | -------------------------------------------------------------------------------- /src/components/card/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/card/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | .@{prefix}-card { 3 | width: 99%; 4 | margin: 0 auto; 5 | border-radius: 8rpx; 6 | &__head { 7 | padding: 0 48rpx; 8 | height: 96rpx; 9 | line-height: 96rpx; 10 | position: relative; 11 | border-bottom: 2rpx solid rgba(0, 0, 0, .1); 12 | &::before { 13 | content: ''; 14 | width: 200%; 15 | height: 200%; 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | border-radius: inherit; 20 | transform: scale(0.5); 21 | transform-origin: 0 0; 22 | pointer-events: none; 23 | box-sizing: border-box; 24 | } 25 | .title { 26 | font-weight: 500; 27 | color: var(--black); 28 | } 29 | .extra { 30 | color: var(--sky-blue); 31 | font-size: 24rpx; 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /src/components/card/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/common.less: -------------------------------------------------------------------------------- 1 | @prefix: ani; -------------------------------------------------------------------------------- /src/components/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | prefix: 'ani' 3 | }; 4 | -------------------------------------------------------------------------------- /src/components/custom-bar/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../config'; 2 | 3 | const app = getApp(); 4 | Component({ 5 | /** 6 | * 组件的一些选项 7 | */ 8 | options: { 9 | addGlobalClass: true, 10 | multipleSlots: true 11 | }, 12 | /** 13 | * 组件的对外属性 14 | */ 15 | properties: { 16 | className: { 17 | type: String, 18 | default: '' 19 | }, 20 | isCustom: { 21 | type: [Boolean, String], 22 | default: false 23 | }, 24 | isBack: { 25 | type: [Boolean, String], 26 | default: false 27 | } 28 | }, 29 | /** 30 | * 组件的初始数据 31 | */ 32 | data: { 33 | prefix, 34 | statusBar: app.globalData.statusBar, 35 | customBar: app.globalData.customBar, 36 | custom: app.globalData.custom 37 | }, 38 | /** 39 | * 组件的方法列表 40 | */ 41 | methods: { 42 | backPage() { 43 | const pages = getCurrentPages(); 44 | if (pages.length > 1) { 45 | wx.navigateBack({ 46 | delta: 1 47 | }); 48 | } else { 49 | wx.reLaunch({ 50 | url: app.globalData.home || '/pages/index/index' 51 | }); 52 | } 53 | }, 54 | toHome() { 55 | wx.reLaunch({ 56 | url: app.globalData.home || '/pages/index/index' 57 | }); 58 | } 59 | } 60 | }); 61 | -------------------------------------------------------------------------------- /src/components/custom-bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /src/components/custom-bar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/grid/grid-item/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../../config'; 2 | 3 | Component({ 4 | options: { 5 | multipleSlots: true, 6 | styleIsolation: 'shared' 7 | }, 8 | properties: { 9 | customClass: { 10 | type: String, 11 | value: '' 12 | } 13 | }, 14 | data: { 15 | prefix 16 | }, 17 | /** 18 | * 声明周期函数 19 | */ 20 | lifetimes: { 21 | // 在组件实例被创建 22 | created() {}, 23 | // 在组件实例进入页面节点树时执行 24 | attached() {}, 25 | // 在组件实例被移动到节点树另一个位置时执行 26 | moved() {}, 27 | // 在组件实例被从页面节点树移除时执行 28 | detached() {} 29 | }, 30 | pageLifetimes: { 31 | // 页面被展示 32 | show() {} 33 | }, 34 | methods: {} 35 | }); 36 | -------------------------------------------------------------------------------- /src/components/grid/grid-item/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/grid/grid-item/index.less: -------------------------------------------------------------------------------- 1 | @import '../../common.less'; 2 | .@{prefix}-grid__item { 3 | padding: 20rpx 10rpx; 4 | } 5 | .grid-border { 6 | .@{prefix}-grid__item { 7 | position: relative; 8 | &::after { 9 | content: ''; 10 | width: 200%; 11 | height: 200%; 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | border-radius: inherit; 16 | border-right: 2rpx solid rgba(0, 0, 0, .1); 17 | border-bottom: 2rpx solid rgba(0, 0, 0, .1); 18 | transform: scale(.5); 19 | transform-origin: 0 0; 20 | pointer-events: none; 21 | box-sizing: border-box; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/components/grid/grid-item/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/grid/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../config'; 2 | 3 | Component({ 4 | options: { 5 | multipleSlots: true, 6 | styleIsolation: 'shared' 7 | }, 8 | properties: { 9 | gridBorder: { 10 | type: Boolean, 11 | value: true 12 | }, 13 | gridCol: { 14 | type: Number, 15 | value: 3, 16 | observer(col) { 17 | return col > 5 ? 5 : col; 18 | } 19 | }, 20 | customClass: { 21 | type: String, 22 | value: '' 23 | } 24 | }, 25 | data: { 26 | prefix 27 | }, 28 | /** 29 | * 声明周期函数 30 | */ 31 | lifetimes: { 32 | // 在组件实例被创建 33 | created() {}, 34 | // 在组件实例进入页面节点树时执行 35 | attached() {}, 36 | // 在组件实例被移动到节点树另一个位置时执行 37 | moved() {}, 38 | // 在组件实例被从页面节点树移除时执行 39 | detached() {} 40 | }, 41 | pageLifetimes: { 42 | // 页面被展示 43 | show() {} 44 | }, 45 | methods: {} 46 | }); 47 | -------------------------------------------------------------------------------- /src/components/grid/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/grid/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | .@{prefix}-grid { 3 | padding: 0 10rpx; 4 | &.grid-border { 5 | position: relative; 6 | &::after { 7 | content: ''; 8 | width: 200%; 9 | height: 200%; 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | border-radius: inherit; 14 | border-top: 2rpx solid rgba(0, 0, 0, .1); 15 | transform: scale(.5); 16 | transform-origin: 0 0; 17 | pointer-events: none; 18 | box-sizing: border-box; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/grid/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/menu-bar/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../config'; 2 | 3 | const app = getApp(); 4 | Component({ 5 | /** 6 | * 组件的一些选项 7 | */ 8 | options: { 9 | addGlobalClass: true, 10 | multipleSlots: true 11 | }, 12 | /** 13 | * 组件的对外属性 14 | */ 15 | properties: { 16 | // 当前索引 17 | current: { 18 | type: Number, 19 | value: 0 20 | }, 21 | // 字体颜色 22 | color: { 23 | type: String, 24 | value: '#888' 25 | }, 26 | // 字体选中颜色 27 | selectedColor: { 28 | type: String, 29 | value: '#f35352' 30 | }, 31 | // 背景颜色 32 | backgroundColor: { 33 | type: String, 34 | value: '#fff' 35 | }, 36 | // 固定在底部 37 | isFixed: { 38 | type: Boolean, 39 | value: true 40 | }, 41 | // tabbar列表 42 | list: { 43 | type: Array, 44 | value: [] 45 | }, 46 | // 去掉顶部细线 47 | unlined: { 48 | type: Boolean, 49 | value: false 50 | } 51 | }, 52 | /** 53 | * 组件的初始数据 54 | */ 55 | data: { 56 | prefix, 57 | statusBar: app.globalData.statusBar, 58 | customBar: app.globalData.customBar, 59 | custom: app.globalData.custom 60 | }, 61 | lifetimes: { 62 | attached() { 63 | // 在组件实例进入页面节点树时执行 64 | this.editMenuBar(); 65 | }, 66 | detached() { 67 | // 在组件实例被从页面节点树移除时执行 68 | } 69 | }, 70 | pageLifetimes: { 71 | show() {}, 72 | hide() {} 73 | }, 74 | /** 75 | * 组件的方法列表 76 | */ 77 | methods: { 78 | menuBarSwitch(e) { 79 | const DATASET = e.currentTarget.dataset; 80 | const INDEX = DATASET.index; 81 | const ACTION = DATASET.action; 82 | // const menuBar = app.globalData.menuBar; 83 | if (INDEX === this.current) { 84 | return; 85 | } 86 | if (ACTION === 'link') { 87 | wx.redirectTo({ 88 | url: this.data.list[INDEX].pagePath 89 | }); 90 | } else if (ACTION === 'click') { 91 | this.setData({ 92 | current: INDEX 93 | }); 94 | this.triggerEvent('menuBarSwitch', { 95 | index: INDEX 96 | }); 97 | } 98 | }, 99 | editMenuBar() { 100 | const curPageArr = getCurrentPages(); 101 | const curPage = curPageArr[curPageArr.length - 1]; 102 | let pagePath = curPage.route; 103 | if (pagePath.indexOf('/') !== 0) { 104 | pagePath = `/${pagePath}`; 105 | } 106 | const menuBar = app.globalData.menuBar; 107 | for (let i = 0; i < menuBar.list.length; i++) { 108 | if (menuBar.list[i].pagePath === pagePath) { 109 | menuBar.current = i; 110 | app.globalData.menuBar.current = i; 111 | break; 112 | } 113 | } 114 | curPage.setData({ 115 | menuBar 116 | }); 117 | } 118 | } 119 | }); 120 | -------------------------------------------------------------------------------- /src/components/menu-bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /src/components/menu-bar/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | .@{prefix}-tabbar { 3 | width: 100%; 4 | min-height: 100rpx; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | position: relative; 9 | box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1); 10 | &.@{prefix}-tabbar-fixed { 11 | position: fixed; 12 | z-index: 99999; 13 | left: 0; 14 | bottom: 0; 15 | padding-bottom: constant(safe-area-inset-bottom); 16 | padding-bottom: env(safe-area-inset-bottom); 17 | } 18 | &::before { 19 | content: ''; 20 | width: 100%; 21 | border-top: 1rpx solid #ccc; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | transform: scaleY(0.5); 26 | transform-origin: 0 100%; 27 | } 28 | .@{prefix}-tabbar-item { 29 | height: 100%; 30 | flex: 1; 31 | display: flex; 32 | text-align: center; 33 | align-items: center; 34 | flex-direction: column; 35 | justify-content: space-between; 36 | position: relative; 37 | padding: 10rpx 0; 38 | box-sizing: border-box; 39 | .@{prefix}-badge{ 40 | position: absolute; 41 | right: 44rpx; 42 | top: 4rpx; 43 | &.dot { 44 | right: 60rpx; 45 | top: 10rpx; 46 | } 47 | } 48 | .@{prefix}-icon-box { 49 | position: relative; 50 | } 51 | .@{prefix}-text-scale { 52 | transform: scale(0.8); 53 | line-height: 28rpx; 54 | transform-origin: center 100%; 55 | margin-top: 10rpx; 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/menu-bar/index.wxml: -------------------------------------------------------------------------------- 1 | 4 | 7 | 12 | 13 | 16 | 17 | 20 | {{item.text}} 21 | 22 | 26 | {{item.badge.num || ''}} 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/modal/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/modal/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | .@{prefix}-modal { 3 | position: fixed; 4 | top: 45%; 5 | left: 50%; 6 | width: 640rpx; 7 | overflow: hidden; 8 | font-size: 16px; 9 | background-color: var(--white); 10 | border-radius: 6px; 11 | transform: translate3d(-50%, -50%, 0); 12 | backface-visibility: hidden; 13 | transition: .3s; 14 | transition-property: transform, opacity; 15 | .@{prefix}-modal__title { 16 | font-weight: 500; 17 | line-height: 24px; 18 | } 19 | .@{prefix}-modal__content { 20 | .@{prefix}-modal__message { 21 | max-height: 60vh; 22 | overflow-y: auto; 23 | line-height: 20px; 24 | white-space: pre-wrap; 25 | text-align: center; 26 | word-wrap: break-word; 27 | -webkit-overflow-scrolling: touch; 28 | } 29 | } 30 | .@{prefix}-modal__footer { 31 | .@{prefix}-modal-btn { 32 | height: 82rpx; 33 | line-height: 2.6; 34 | background: none; 35 | &::after { 36 | border-radius: 0; 37 | border-top: 0; 38 | border-right: 0; 39 | border-bottom: 0; 40 | } 41 | .@{prefix}-modal-btn__loading { 42 | width: 42rpx; 43 | height: 42rpx; 44 | } 45 | } 46 | } 47 | } 48 | .@{prefix}-overlay { 49 | position: fixed; 50 | top: 0; 51 | left: 0; 52 | z-index: 1; 53 | width: 100%; 54 | height: 100%; 55 | background-color: rgba(0, 0, 0, .7); 56 | } 57 | @media (max-width: 321px) { 58 | .@{prefix}-modal { 59 | width: 90%; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/modal/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{title}} 4 | 5 | 6 | 7 | 8 | {{message}} 9 | 10 | 11 | 12 | 13 | 21 | 34 | 35 | 36 |
-------------------------------------------------------------------------------- /src/components/modal/modal.js: -------------------------------------------------------------------------------- 1 | /*! 2 | _________ 3 | | modal |\ 4 | | ~~~~~~~ |_\ 5 | | 直接使用 | 6 | | ~~~~~~~ | 7 | | ~~~~~~~ | 8 | |_________| 9 | */ 10 | import { prefix } from '../config'; 11 | 12 | let queue = []; 13 | function getContext() { 14 | const pages = getCurrentPages(); 15 | return pages[pages.length - 1]; 16 | } 17 | const Modal = options => { 18 | let optionsConfig = options; 19 | optionsConfig = Object.assign(Object.assign({}, Modal.currentOptions), optionsConfig); 20 | return new Promise((resolve, reject) => { 21 | const context = optionsConfig.context || getContext(); 22 | const modal = context.selectComponent(optionsConfig.selector); 23 | delete optionsConfig.context; 24 | delete optionsConfig.selector; 25 | if (modal) { 26 | modal.setData( 27 | Object.assign({ onCancel: reject, onConfirm: resolve }, optionsConfig) 28 | ); 29 | queue.push(modal); 30 | } else { 31 | console.warn( 32 | `未找到 ${prefix}-modal 节点，请确认 selector 及 context 是否正确,否则将无法使用` 33 | ); 34 | } 35 | }); 36 | }; 37 | Modal.defaultOptions = { 38 | show: true, 39 | title: '', 40 | width: null, 41 | message: '', 42 | zIndex: 9999, 43 | overlay: true, 44 | selector: `#${prefix}-modal`, 45 | className: '', 46 | asyncClose: false, 47 | messageAlign: '', 48 | confirmButtonText: '确认', 49 | cancelButtonText: '取消', 50 | showConfirmButton: true, 51 | showCancelButton: false, 52 | closeOnClickOverlay: false, 53 | confirmButtonOpenType: '' 54 | }; 55 | Modal.alert = Modal; 56 | Modal.confirm = options => Modal(Object.assign({ showCancelButton: true }, options)); 57 | Modal.close = () => { 58 | queue.forEach(modal => { 59 | modal.close(); 60 | }); 61 | queue = []; 62 | }; 63 | Modal.stopLoading = () => { 64 | queue.forEach(modal => { 65 | modal.stopLoading(); 66 | }); 67 | }; 68 | Modal.setDefaultOptions = options => { 69 | Object.assign(Modal.currentOptions, options); 70 | }; 71 | Modal.resetDefaultOptions = () => { 72 | Modal.currentOptions = Object.assign({}, Modal.defaultOptions); 73 | }; 74 | Modal.resetDefaultOptions(); 75 | export default Modal; 76 | -------------------------------------------------------------------------------- /src/components/notice/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../config'; 2 | 3 | // const app = getApp(); 4 | Component({ 5 | options: { 6 | styleIsolation: 'apply-shared' 7 | }, 8 | behaviors: [], 9 | properties: { 10 | scroll: { 11 | type: Boolean, 12 | value: false 13 | }, 14 | isShow: { 15 | type: Boolean, 16 | value: true 17 | }, 18 | notice: { 19 | type: String, 20 | value: '' 21 | }, 22 | bgColor: { 23 | type: String, 24 | value: '#ffecdb' // 通告栏背景色 25 | }, 26 | color: { 27 | type: String, 28 | value: '#f24849' // 文字颜色 29 | }, 30 | showIcon: { 31 | type: Boolean, 32 | value: false 33 | }, 34 | iconColor: { 35 | type: String, 36 | value: '#f24849' 37 | }, 38 | close: { 39 | type: Boolean, 40 | value: false 41 | }, 42 | closeColor: { 43 | type: String, 44 | value: '#f24849' 45 | }, 46 | bgRgba: { 47 | type: String, 48 | value: 'rgba(255, 236, 219, 1);' // 背景颜色的rgba形式，a的值为0，配合close使用 49 | } 50 | }, 51 | data: { 52 | prefix 53 | }, 54 | methods: { 55 | onDismissNotice(event) { 56 | this.setData({ 57 | isShow: false 58 | }); 59 | const detail = event.detail; 60 | const option = {}; 61 | this.triggerEvent('close', detail, option); 62 | } 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /src/components/notice/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } -------------------------------------------------------------------------------- /src/components/notice/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | @keyframes notice { 3 | 0% { 4 | transform: translateX(0); 5 | } 6 | 100% { 7 | transform: translateX(-50%); 8 | } 9 | } 10 | .@{prefix}-notice { 11 | display: flex; 12 | position: relative; 13 | height: 70rpx; 14 | padding: 0 30rpx; 15 | align-items: center; 16 | .@{prefix}-notice-icon { 17 | display: block; 18 | width: 36rpx; 19 | height: 30rpx; 20 | line-height: 30rpx; 21 | margin-right: 12rpx; 22 | } 23 | .@{prefix}-notice-text-wrap { 24 | flex: 1; 25 | overflow: hidden; 26 | .@{prefix}-notice-text { 27 | display: inline-block; 28 | margin-right: 30rpx; 29 | white-space: nowrap; 30 | font-size: 24rpx; 31 | line-height: 70rpx; 32 | .@{prefix}-notice-text-span { 33 | display: inline-block; 34 | margin-right: 18rpx; 35 | } 36 | } 37 | .@{prefix}-notice-text-animate { 38 | animation: notice 16s linear infinite; 39 | } 40 | } 41 | .@{prefix}-notice-text-overlay { 42 | position: absolute; 43 | width: 44rpx; 44 | top: 20rpx; 45 | right: 10rpx; 46 | z-index: 1; 47 | } 48 | .@{prefix}-notice-close { 49 | margin-left: 20rpx; 50 | color: #fff; 51 | font-size: 30rpx; 52 | } 53 | } -------------------------------------------------------------------------------- /src/components/notice/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{notice}} 6 | {{notice}} 7 | 8 | {{notice}} 9 | 10 | 11 | 12 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/search/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | import { prefix } from '../config'; 3 | 4 | Component({ 5 | options: { 6 | styleIsolation: 'apply-shared' 7 | }, 8 | /** 9 | * 组件的属性列表 10 | */ 11 | properties: { 12 | bgColor: { 13 | type: String, 14 | value: 'bg-white' 15 | }, 16 | placeholder: { 17 | type: String, 18 | value: '请输入搜索内容' 19 | } 20 | }, 21 | /** 22 | * 组件的初始数据 23 | */ 24 | data: { 25 | prefix, 26 | key: '' 27 | }, 28 | /** 29 | * 组件的方法列表 30 | */ 31 | methods: { 32 | changeValue(e) { 33 | const val = e.detail.value; 34 | this.setData({ 35 | key: val 36 | }); 37 | }, 38 | clear() { 39 | this.setData({ 40 | key: '' 41 | }); 42 | this.triggerEvent('search', ''); 43 | }, 44 | bindSearch() { 45 | this.triggerEvent('search', this.data.key); 46 | } 47 | } 48 | }); 49 | -------------------------------------------------------------------------------- /src/components/search/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } 5 | -------------------------------------------------------------------------------- /src/components/search/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | // @{prefix} 3 | .search { 4 | height: 72rpx; 5 | line-height: 40rpx; 6 | padding: 16rpx 22rpx; 7 | align-items: center; 8 | position: relative; 9 | border-radius: 4rpx; 10 | .icon-search { 11 | width: 28rpx; 12 | height: 28rpx; 13 | } 14 | .input { 15 | margin-left: 14rpx; 16 | flex: 1; 17 | } 18 | .icon-clear { 19 | position: absolute; 20 | right: 25rpx; 21 | top: 50%; 22 | transform: translateY(-50%); 23 | z-index: 999; 24 | } 25 | } -------------------------------------------------------------------------------- /src/components/search/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/steps/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../config'; 2 | 3 | // const app = getApp(); 4 | Component({ 5 | options: { 6 | styleIsolation: 'apply-shared' 7 | }, 8 | behaviors: [], 9 | properties: { 10 | type: { 11 | type: String, 12 | value: 'line' 13 | }, 14 | mode: { 15 | type: String, 16 | value: 'iconDefault' 17 | }, 18 | list: { 19 | type: Array, 20 | value: [ 21 | { 22 | icon: `${prefix}-icon-start`, 23 | name: '开始' 24 | }, 25 | { 26 | icon: `${prefix}-icon-wait`, 27 | name: '等待' 28 | }, 29 | { 30 | icon: `${prefix}-icon-close-fill`, 31 | name: '错误' 32 | }, 33 | { 34 | icon: `${prefix}-icon-checked-fill`, 35 | name: '结束' 36 | } 37 | ] 38 | }, 39 | activeColor: { 40 | type: String, 41 | value: 'var(--green)' 42 | }, 43 | step: { 44 | type: Number, 45 | value: 0 46 | } 47 | }, 48 | data: { 49 | prefix 50 | }, 51 | methods: {} 52 | }); 53 | -------------------------------------------------------------------------------- /src/components/steps/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/steps/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | var getClass = function(mode, item, index, step, prefix) { 3 | if (mode == 'iconDefault') { 4 | return index > step ? prefix + '-icon-title fs-20' : item.icon + ' fs-40'; 5 | } else if (mode == 'icon') { 6 | return item.icon + ' fs-40'; 7 | } else if (mode == 'num') { 8 | return index > step ? 'num' : item.icon + ' fs-40'; 9 | } 10 | } 11 | module.exports = { getClass: getClass}; 12 | 13 | 14 | 19 | 20 | {{item.name}} 21 | 22 | 23 | 29 | 35 | {{index + 1}} 36 | {{item}} 37 | 38 | 39 | 45 | 51 | 52 | {{item}} 53 | 54 | -------------------------------------------------------------------------------- /src/components/swiper/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/swiper/index.wxml: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 31 | 32 | 33 | 34 | 35 | 36 | 40 | 41 | 42 | 49 | 50 | 56 | 63 | 64 | -------------------------------------------------------------------------------- /src/components/tab/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../config'; 2 | 3 | Component({ 4 | options: { 5 | multipleSlots: true, 6 | styleIsolation: 'shared' 7 | }, 8 | behaviors: [], 9 | properties: { 10 | currentTab: { 11 | type: Number, 12 | value: 0 13 | }, 14 | color: { 15 | type: String, 16 | value: '' 17 | }, 18 | activeColor: { 19 | type: String, 20 | value: '' 21 | }, 22 | colorClass: { 23 | type: String, 24 | value: 'text-black' 25 | }, 26 | activeColorClass: { 27 | type: String, 28 | value: 'olive' 29 | }, 30 | tabBackground: { 31 | type: Object, 32 | value: {} 33 | }, 34 | tabData: { 35 | type: Array, 36 | value: [] 37 | } 38 | }, 39 | data: { 40 | prefix, 41 | swiperHeight: 0, 42 | pixelRatio: 1, 43 | windowWidth: 0, 44 | windowHeight: 0, 45 | singleNavWidth: 0 46 | }, 47 | /** 48 | * 声明周期函数 49 | */ 50 | lifetimes: { 51 | // 在组件实例被创建 52 | created() {}, 53 | // 在组件实例进入页面节点树时执行 54 | attached() { 55 | const me = this; 56 | wx.getSystemInfo({ 57 | success: res => { 58 | me.setData({ 59 | pixelRatio: res.pixelRatio, 60 | windowHeight: res.windowHeight, 61 | windowWidth: res.windowWidth, 62 | singleNavWidth: res.windowWidth / 5 63 | }); 64 | } 65 | }); 66 | }, 67 | // 在组件实例被移动到节点树另一个位置时执行 68 | moved() {}, 69 | // 在组件实例被从页面节点树移除时执行 70 | detached() {} 71 | }, 72 | pageLifetimes: { 73 | // 页面被展示 74 | show() {} 75 | }, 76 | methods: { 77 | // tab切换函数，让swiper当前滑块的current的index与tab头部index一一对应 78 | switchNav(e) { 79 | const index = e.currentTarget.dataset.current; 80 | // 设置data属性中的navbarActiveIndex为当前点击的navbar 81 | if (+this.data.currentTab === index) { 82 | return; 83 | } 84 | // 设置data属性中的currentTab为当前点击的navbar 85 | this.setData({ 86 | currentTab: index 87 | }); 88 | this.triggerEvent('changeEvent', index); 89 | }, 90 | getSelectedBg() { 91 | return 'red'; 92 | } 93 | } 94 | }); 95 | -------------------------------------------------------------------------------- /src/components/tab/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/tab/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | .@{prefix}-tab { 3 | white-space: nowrap; 4 | background: #fff; 5 | margin-bottom: 10rpx; 6 | .item, 7 | .selected { 8 | display: inline-block; 9 | height: 88rpx; 10 | line-height: 88rpx; 11 | margin: 0 10rpx; 12 | padding: 0 20rpx; 13 | position: relative; 14 | .icon { 15 | margin-right: 12rpx; 16 | font-size: 24rpx; 17 | } 18 | } 19 | .item { 20 | .@{prefix}-badge { 21 | top: 14rpx; 22 | right: -26rpx; 23 | position: absolute; 24 | &.dot { 25 | top: 24rpx; 26 | right: 0; 27 | } 28 | &[class*='@{prefix}-icon-'] { 29 | font-size: 24rpx; 30 | top: 24rpx; 31 | right: -6rpx; 32 | } 33 | &.animation { 34 | top: 22rpx; 35 | right: 0; 36 | } 37 | } 38 | } 39 | .selected { 40 | font-size: 28rpx; 41 | position: relative; 42 | &::after { 43 | content: ''; 44 | width: 100%; 45 | height: 4rpx; 46 | position: absolute; 47 | left: 50%; 48 | bottom: 0; 49 | background-color: var(--active-line); 50 | transform: translate(-50%, 0); 51 | } 52 | } 53 | } 54 | .@{prefix}-swiper { 55 | background: #fff; 56 | .@{prefix}-swiper-item { 57 | height: auto!important; 58 | overflow-y: scroll; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/components/tab/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | var getSelectedClass = function(index, currentTab, activeColorClass) { 3 | if (+currentTab === +index) { 4 | return activeColorClass; 5 | } 6 | return ''; 7 | } 8 | module.exports = { getSelectedClass: getSelectedClass }; 9 | 10 | 11 | 17 | 24 | 25 | {{item.name}} 26 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/time-line/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../config'; 2 | 3 | Component({ 4 | options: { 5 | multipleSlots: true, 6 | styleIsolation: 'shared' 7 | }, 8 | behaviors: [], 9 | properties: {}, 10 | data: { 11 | prefix 12 | }, 13 | /** 14 | * 声明周期函数 15 | */ 16 | lifetimes: { 17 | // 在组件实例被创建 18 | created() {}, 19 | // 在组件实例进入页面节点树时执行 20 | attached() {}, 21 | // 在组件实例被移动到节点树另一个位置时执行 22 | moved() {}, 23 | // 在组件实例被从页面节点树移除时执行 24 | detached() {} 25 | }, 26 | pageLifetimes: { 27 | // 页面被展示 28 | show() {} 29 | }, 30 | methods: {} 31 | }); 32 | -------------------------------------------------------------------------------- /src/components/time-line/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/time-line/index.less: -------------------------------------------------------------------------------- 1 | @import '../common.less'; 2 | .@{prefix}-timeline {} 3 | -------------------------------------------------------------------------------- /src/components/time-line/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/time-line/time-line-item/index.js: -------------------------------------------------------------------------------- 1 | import { prefix } from '../../config'; 2 | 3 | Component({ 4 | options: { 5 | multipleSlots: true, 6 | styleIsolation: 'shared' 7 | }, 8 | behaviors: [], 9 | properties: { 10 | color: { 11 | type: String, 12 | value: 'var(--blue)' 13 | }, 14 | custom: { 15 | type: Boolean, 16 | value: false 17 | } 18 | }, 19 | data: { 20 | prefix 21 | }, 22 | /** 23 | * 声明周期函数 24 | */ 25 | lifetimes: { 26 | // 在组件实例被创建 27 | created() {}, 28 | // 在组件实例进入页面节点树时执行 29 | attached() {}, 30 | // 在组件实例被移动到节点树另一个位置时执行 31 | moved() {}, 32 | // 在组件实例被从页面节点树移除时执行 33 | detached() {} 34 | }, 35 | pageLifetimes: { 36 | // 页面被展示 37 | show() {} 38 | }, 39 | methods: {} 40 | }); 41 | -------------------------------------------------------------------------------- /src/components/time-line/time-line-item/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "component": true 4 | } 5 | -------------------------------------------------------------------------------- /src/components/time-line/time-line-item/index.less: -------------------------------------------------------------------------------- 1 | @import '../../common.less'; 2 | timelineItem:last-child { 3 | .@{prefix}-timeline-item-tail { 4 | display: none; 5 | } 6 | } 7 | .@{prefix}-timeline-item { 8 | margin: 0; 9 | padding: 0 0 24rpx; 10 | position: relative; 11 | .@{prefix}-timeline-item-tail { 12 | height: 100%; 13 | border-left: 1px solid var(--grey); 14 | position: absolute; 15 | left: 6px; 16 | top: 0; 17 | } 18 | .@{prefix}-timeline-item-head { 19 | width: 26rpx; 20 | height: 26rpx; 21 | background-color: var(--white); 22 | border-radius: 50%; 23 | border: 1px solid currentColor; 24 | position: absolute; 25 | &.custom { 26 | border: 0; 27 | } 28 | } 29 | .@{prefix}-timeline-item-content { 30 | padding: 2rpx 2rpx 20rpx 48rpx; 31 | font-size: 28rpx; 32 | position: relative; 33 | top: -3px; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/time-line/time-line-item/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/mixins/open-type.js: -------------------------------------------------------------------------------- 1 | export const openType = Behavior({ 2 | properties: { 3 | openType: String 4 | }, 5 | methods: { 6 | bindGetUserInfo(event) { 7 | this.triggerEvent('getuserinfo', event.detail); 8 | }, 9 | bindContact(event) { 10 | this.triggerEvent('contact', event.detail); 11 | } 12 | } 13 | }); 14 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | const _ = require('./utils') 2 | 3 | test('render', async () => { 4 | const componentId = _.load('index', 'comp') 5 | const component = _.render(componentId, {prop: 'index.test.properties'}) 6 | 7 | const parent = document.createElement('parent-wrapper') 8 | component.attach(parent) 9 | 10 | expect(_.match(component.dom, 'index.test.properties-false')).toBe(true) 11 | 12 | await _.sleep(10) 13 | 14 | expect(_.match(component.dom, 'index.test.properties-true')).toBe(true) 15 | }) 16 | -------------------------------------------------------------------------------- /test/utils.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const simulate = require('miniprogram-simulate') 3 | 4 | const config = require('../tools/config') 5 | 6 | const srcPath = config.srcPath 7 | const oldLoad = simulate.load 8 | simulate.load = function (componentPath, ...args) { 9 | if (typeof componentPath === 'string') componentPath = path.join(srcPath, componentPath) 10 | return oldLoad(componentPath, ...args) 11 | } 12 | 13 | module.exports = simulate 14 | 15 | // adjust the simulated wx api 16 | const oldGetSystemInfoSync = global.wx.getSystemInfoSync 17 | global.wx.getSystemInfoSync = function() { 18 | const res = oldGetSystemInfoSync() 19 | res.SDKVersion = '2.4.1' 20 | 21 | return res 22 | } 23 | -------------------------------------------------------------------------------- /test/wx.test.js: -------------------------------------------------------------------------------- 1 | const _ = require('./utils') 2 | 3 | test('wx.getSystemInfo', async () => { 4 | wx.getSystemInfo({ 5 | success(res) { 6 | expect(res.errMsg).toBe('getSystemInfo:ok') 7 | }, 8 | complete(res) { 9 | expect(res.errMsg).toBe('getSystemInfo:ok') 10 | }, 11 | }) 12 | }) 13 | 14 | test('wx.getSystemInfoSync', async () => { 15 | const info = wx.getSystemInfoSync() 16 | expect(info.SDKVersion).toBe('2.4.1') 17 | expect(info.version).toBe('6.6.3') 18 | }) 19 | -------------------------------------------------------------------------------- /tools/assetsLessEntry.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file: assetsLess entery 3 | * @author: 花夏(huaxia@animaui.com) 4 | * @version: V1.0.0 5 | * @date: 2020-04-16 10:39:57 6 | */ 7 | const glob = require('glob'); 8 | // module.exports = ['components/custom-bar/index', 'components/tab-bar/index']; 9 | const getEntry = () => { 10 | // 匹配src目录下的所有文件夹中的less文件 11 | const globPath = 'src/assets/style/**/*.less'; 12 | // (\/|\\\\) 这种写法是为了兼容 windows和 mac系统目录路径的不同写法 13 | /* eslint-disable no-useless-escape */ 14 | const pathDir = 'src(/|\\\\)(.*?)(/|\\\\)'; // 路径为src目录下的所有文件夹 15 | const files = glob.sync(globPath); 16 | const entries = []; 17 | const _prefix_index_ = files.indexOf('src/assets/style/_prefix.less'); 18 | files.splice(_prefix_index_, _prefix_index_ + 1); 19 | const reg = new RegExp('^' + pathDir); 20 | for (let i = 0; i < files.length; i++) { 21 | entries.push( 22 | 'assets/' + files[i].replace(reg, '$`') 23 | ); 24 | } 25 | return entries; 26 | }; 27 | module.exports = getEntry(); -------------------------------------------------------------------------------- /tools/checkcomponents.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const _ = require('./utils'); 4 | const config = require('./config'); 5 | 6 | const srcPath = config.srcPath; 7 | 8 | /** 9 | * 获取 json 路径相关信息 10 | */ 11 | function getJsonPathInfo(jsonPath) { 12 | const dirPath = path.dirname(jsonPath); 13 | const fileName = path.basename(jsonPath, '.json'); 14 | const relative = path.relative(srcPath, dirPath); 15 | const fileBase = path.join(relative, fileName); 16 | 17 | return { 18 | dirPath, 19 | fileName, 20 | relative, 21 | fileBase 22 | }; 23 | } 24 | 25 | /** 26 | * 检测是否包含其他自定义组件 27 | */ 28 | const checkProps = ['usingComponents', 'componentGenerics']; 29 | const hasCheckMap = {}; 30 | async function checkIncludedComponents(jsonPath, componentListMap) { 31 | const json = _.readJson(jsonPath); 32 | if (!json) throw new Error(`json is not valid: "${jsonPath}"`); 33 | 34 | const { dirPath, fileName, fileBase } = getJsonPathInfo(jsonPath); 35 | if (hasCheckMap[fileBase]) return; 36 | hasCheckMap[fileBase] = true; 37 | 38 | for (let i = 0, len = checkProps.length; i < len; i++) { 39 | const checkProp = checkProps[i]; 40 | const checkPropValue = json[checkProp] || {}; 41 | const keys = Object.keys(checkPropValue); 42 | 43 | for (let j = 0, jlen = keys.length; j < jlen; j++) { 44 | const key = keys[j]; 45 | let value = 46 | typeof checkPropValue[key] === 'object' ? 47 | checkPropValue[key].default : 48 | checkPropValue[key]; 49 | if (!value) continue; 50 | 51 | value = _.transformPath(value, path.sep); 52 | 53 | // 检查相对路径 54 | const componentPath = `${path.join(dirPath, value)}.json`; 55 | const isExists = await _.checkFileExists(componentPath); 56 | if (isExists) { 57 | await checkIncludedComponents(componentPath, componentListMap); 58 | } 59 | } 60 | } 61 | 62 | // 进入存储 63 | componentListMap.wxmlFileList.push(`${fileBase}.wxml`); 64 | componentListMap.wxssFileList.push(`${fileBase}.less`); 65 | componentListMap.jsonFileList.push(`${fileBase}.json`); 66 | componentListMap.jsFileList.push(`${fileBase}.js`); 67 | 68 | componentListMap.jsFileMap[fileBase] = `${path.join(dirPath, fileName)}.js`; 69 | } 70 | 71 | module.exports = async function(entry) { 72 | const componentListMap = { 73 | wxmlFileList: [], 74 | wxssFileList: [], 75 | jsonFileList: [], 76 | jsFileList: [], 77 | 78 | jsFileMap: {} // 为 webpack entry 所用 79 | }; 80 | 81 | const isExists = await _.checkFileExists(entry); 82 | if (!isExists) { 83 | const { dirPath, fileName, fileBase } = getJsonPathInfo(entry); 84 | 85 | componentListMap.jsFileList.push(`${fileBase}.js`); 86 | componentListMap.jsFileMap[fileBase] = `${path.join( 87 | dirPath, 88 | fileName 89 | )}.js`; 90 | 91 | return componentListMap; 92 | } 93 | 94 | await checkIncludedComponents(entry, componentListMap); 95 | 96 | return componentListMap; 97 | }; -------------------------------------------------------------------------------- /tools/config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const nodeExternals = require('webpack-node-externals'); 4 | const entry = require('./entry'); 5 | const assetsLessEntry = require('./assetsLessEntry'); 6 | const isDev = process.argv.indexOf('--develop') >= 0; 7 | const isWatch = process.argv.indexOf('--watch') >= 0; 8 | const demoSrc = path.resolve(__dirname, './demo'); 9 | const demoDist = path.resolve(__dirname, '../miniprogram_dev'); 10 | const src = path.resolve(__dirname, '../src'); 11 | const dev = path.join(demoDist, '/animaUi'); 12 | const dist = path.resolve(__dirname, '../animaUi'); 13 | 14 | module.exports = { 15 | entry: entry, 16 | isDev, 17 | isWatch, 18 | srcPath: src, // 源目录 19 | distPath: isDev ? dev : dist, // 目标目录 20 | demoSrc, // demo 源目录 21 | demoDist, // demo 目标目录 22 | assetsLessEntry, 23 | wxss: { 24 | less: true, // 使用 less 来编写 wxss 25 | sourcemap: false // 生成 less sourcemap 26 | }, 27 | js: { 28 | webpack: true // 使用 webpack 来构建 js 29 | }, 30 | webpack: { 31 | mode: 'production', 32 | output: { 33 | filename: '[name].js', 34 | libraryTarget: 'commonjs2' 35 | }, 36 | target: 'node', 37 | externals: [nodeExternals()], // 忽略 node_modules 38 | module: { 39 | rules: [{ 40 | test: /\.js$/i, 41 | use: ['babel-loader', 'eslint-loader'], 42 | exclude: /node_modules/ 43 | }] 44 | }, 45 | resolve: { 46 | modules: [src, 'node_modules'], 47 | extensions: ['.js', '.json'] 48 | }, 49 | plugins: [ 50 | new webpack.DefinePlugin({}), 51 | new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }), 52 | ], 53 | optimization: { 54 | minimize: true 55 | }, 56 | // devtool: 'nosources-source-map', // 生成 js sourcemap 57 | performance: { 58 | hints: 'warning', 59 | assetFilter: (assetFilename) => assetFilename.endsWith('.js') 60 | } 61 | }, 62 | copy: ['mixins', './assets/images', './utils.js', 'LICENSE'] // 将会复制到目标目录 63 | }; -------------------------------------------------------------------------------- /tools/demo/app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | const config = require('./utils/config'); 3 | App({ 4 | imgBaseUrl: config.imgBaseUrl, 5 | onLaunch: function () { 6 | wx.cloud.init({ 7 | traceUser: true 8 | }); 9 | wx.getSystemInfo({ 10 | success: (e) => { 11 | this.globalData.statusBar = e.statusBarHeight; 12 | let capsule = wx.getMenuButtonBoundingClientRect(); 13 | if (capsule) { 14 | this.globalData.custom = capsule; 15 | this.globalData.customBar = 16 | capsule.bottom + capsule.top - e.statusBarHeight + 4; 17 | } else { 18 | this.globalData.customBar = e.statusBarHeight + 54; 19 | } 20 | } 21 | }); 22 | }, 23 | globalData: { 24 | home: '/pages/basic/index', 25 | menuBar: { 26 | // 当前索引 27 | current: 0, 28 | // 字体颜色 29 | color: '#b4bbc8', 30 | // 字体选中颜色 31 | selectedColor: '#ce62d6', 32 | // 背景颜色 33 | backgroundColor: '#fff', 34 | // 固定在底部 35 | isFixed: true, 36 | // 角标字体颜色 37 | badgeColor: '#fff', 38 | // 角标背景颜色 39 | badgeBgColor: '#ce62d6', 40 | // 去掉顶部细线 41 | unlined: false, 42 | // tabbar列表 43 | list: [ 44 | { 45 | pagePath: '/pages/basic/index', 46 | action: 'link', 47 | text: '基础', 48 | icon: 'ani-icon-basic', 49 | className: 'menu-item', 50 | selectedColor: '#ce62d6', 51 | hump: false 52 | }, 53 | { 54 | pagePath: '/pages/component/index', 55 | action: 'link', 56 | text: '组件', 57 | icon: 'ani-icon-component', 58 | selectedColor: '#ce62d6', 59 | className: 'menu-item', 60 | hump: false, 61 | badge: { 62 | show: false, 63 | num: 16, 64 | class: 'bg-gradual-purple text-white', 65 | style: 'width: 32rpx; height: 32rpx' 66 | } 67 | }, 68 | { 69 | pagePath: '/pages/solution/index', 70 | action: 'link', 71 | text: '解决方案', 72 | icon: 'ani-icon-solution', 73 | selectedColor: '#ce62d6', 74 | className: 'menu-item', 75 | hump: false 76 | }, 77 | { 78 | pagePath: '/pages/about/index', 79 | action: 'link', 80 | text: '关于', 81 | icon: 'ani-icon-person', 82 | selectedColor: '#ce62d6', 83 | className: 'menu-item', 84 | hump: false 85 | } 86 | ] 87 | }, 88 | userInfo: null, 89 | auth: 1 90 | } 91 | }); -------------------------------------------------------------------------------- /tools/demo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/component/calendar/index", 4 | "pages/basic/index", 5 | "pages/basic/color/index", 6 | "pages/basic/layout/index", 7 | "pages/basic/icon/index", 8 | "pages/basic/button/index", 9 | "pages/basic/text/index", 10 | "pages/basic/tag/index", 11 | "pages/basic/avatar/index", 12 | "pages/basic/progress/index", 13 | "pages/basic/box-shadow/index", 14 | "pages/basic/loading/index", 15 | "pages/basic/badge/index", 16 | "pages/basic/css3-filter/index", 17 | "pages/component/index", 18 | "pages/component/custom-bar/index", 19 | "pages/component/menu-bar/index", 20 | "pages/component/tab/index", 21 | "pages/component/form/index", 22 | "pages/component/form/switch/index", 23 | "pages/component/form/radio/index", 24 | "pages/component/form/checkbox/index", 25 | "pages/component/swiper/index", 26 | "pages/component/steps/index", 27 | "pages/component/card/index", 28 | "pages/component/time-line/index", 29 | "pages/component/modal/index", 30 | "pages/component/grid/index", 31 | "pages/solution/index", 32 | "pages/about/index" 33 | ], 34 | "window": { 35 | "backgroundTextStyle": "light", 36 | "navigationBarBackgroundColor": "#fff", 37 | "navigationStyle": "custom", 38 | "navigationBarTextStyle": "black" 39 | }, 40 | "usingComponents": { 41 | "CustomBar": "./animaUi/components/custom-bar/index", 42 | "MenuBar": "./animaUi/components/menu-bar/index" 43 | } 44 | } -------------------------------------------------------------------------------- /tools/demo/app.wxss: -------------------------------------------------------------------------------- 1 | @import './animaUi/assets/style/main.wxss'; 2 | .swatch { 3 | border-radius: 10rpx; 4 | overflow: hidden; 5 | } 6 | 7 | .swatch .swatch-color { 8 | position: relative; 9 | width: 100%; 10 | } 11 | 12 | .swatch .swatch-color:after { 13 | position: absolute; 14 | content: ''; 15 | top: 0; 16 | right: 0; 17 | height: 100%; 18 | width: 50%; 19 | background-color: rgba(0, 0, 0, 0.1); 20 | } -------------------------------------------------------------------------------- /tools/demo/cloud_function/getGithubInfo/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "permissions": { 3 | "openapi": [ 4 | ] 5 | } 6 | } -------------------------------------------------------------------------------- /tools/demo/cloud_function/getGithubInfo/index.js: -------------------------------------------------------------------------------- 1 | // 云函数入口文件 2 | const cloud = require('wx-server-sdk'); 3 | const got = require('got'); 4 | cloud.init(); 5 | // cloud.init(); 6 | 7 | // 云函数入口函数 8 | exports.main = async(event, context) => { 9 | const response = await got( 10 | 'https://api.github.com/repos/AnimaUI/wechat-miniprogram' 11 | ); 12 | return { 13 | getGithubInfo: JSON.parse(response.body) 14 | }; 15 | };; -------------------------------------------------------------------------------- /tools/demo/cloud_function/getGithubInfo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "getGithubInfo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "got": "^9.6.0", 13 | "wx-server-sdk": "~1.8.3" 14 | } 15 | } -------------------------------------------------------------------------------- /tools/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "anima(灵动，animation简写，(灵动UI)主要包含各种动画效果，小程序插件解决方案)", 3 | "license": "GPL-3.0", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/huarxia/animaUI.git" 7 | } 8 | } -------------------------------------------------------------------------------- /tools/demo/pages/about/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/avatar/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour, 5 | basicColor, 6 | gradualColor 7 | } = require('../../../utils/colour'); 8 | gradualColor = gradualColor.map((item) => `gradual-${item}`); 9 | basicColor = basicColor.slice(0, 5); 10 | Page({ 11 | data: { 12 | imgBaseUrl: app.imgBaseUrl, 13 | colour, 14 | basicColor, 15 | gradualColor 16 | }, 17 | onLoad() {}, 18 | onShareAppMessage() {}, 19 | onShow() {} 20 | }); 21 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/avatar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/avatar/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/avatar/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/badge/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour, 5 | colourText, 6 | basicColor, 7 | basicColorText, 8 | gradualColor, 9 | gradualColorText 10 | } = require('../../../utils/colour'); 11 | basicColor = basicColor.slice(0, 3); 12 | Page({ 13 | data: { 14 | imgBaseUrl: app.imgBaseUrl, 15 | colour, 16 | colourText, 17 | basicColor, 18 | basicColorText, 19 | gradualColor, 20 | gradualColorText 21 | }, 22 | onLoad() {}, 23 | onShareAppMessage() {}, 24 | onShow() {} 25 | }); 26 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/badge/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Notice": "../../../animaUi/components/notice/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/badge/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | .box { 9 | .cell { 10 | padding: 40rpx 10rpx; 11 | text { 12 | font-size: 24rpx; 13 | } 14 | &.clear { 15 | height: 0; 16 | padding: 0; 17 | } 18 | .ani-badge.animation { 19 | &::before { 20 | content: ''; 21 | } 22 | } 23 | } 24 | .other { 25 | width: 33.33%; 26 | height: 140rpx; 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/badge/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | .main .item .box .cell { 7 | padding: 40rpx 10rpx; 8 | } 9 | .main .item .box .cell text { 10 | font-size: 24rpx; 11 | } 12 | .main .item .box .cell.clear { 13 | height: 0; 14 | padding: 0; 15 | } 16 | .main .item .box .cell .ani-badge.animation::before { 17 | content: ''; 18 | } 19 | .main .item .box .other { 20 | width: 33.33%; 21 | height: 140rpx; 22 | } 23 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/box-shadow/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { shadowColor, shadowColorText } = require('../../../utils/colour'); 4 | Page({ 5 | data: { 6 | imgBaseUrl: app.imgBaseUrl, 7 | shadowColor, 8 | shadowColorText 9 | }, 10 | onLoad() {}, 11 | onShareAppMessage() {}, 12 | onShow() {} 13 | }); 14 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/box-shadow/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/box-shadow/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | .box { 9 | width: 180rpx; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/box-shadow/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | box-shadow 4 | 5 | 6 | 7 | 8 | 9 | 10 | 彩色阴影 11 | 12 | 13 | 17 | {{shadowColorText[index]}} 18 | 19 | 20 | 21 | 22 | 23 | 24 | 其他阴影 25 | 26 | 27 | 28 | 曲线阴影 29 | 30 | 31 | 翘边阴影 32 | 33 | 34 | 透视阴影 35 | 36 | 39 | 背景图片阴影 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/box-shadow/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | .main .item .box { 7 | width: 180rpx; 8 | } 9 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/button/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | const { 4 | colour, 5 | colourText, 6 | basicColor, 7 | basicColorText, 8 | gradualColor, 9 | gradualColorText 10 | } = require('../../../utils/colour'); 11 | Page({ 12 | data: { 13 | colour, 14 | colourText, 15 | basicColor, 16 | basicColorText, 17 | gradualColor, 18 | gradualColorText, 19 | swiperHeight: 0, 20 | currentTab: 0, 21 | activeColorClass: 'cyan', 22 | tabData: [ 23 | { 24 | name: '背景色', 25 | icon: 'background' 26 | }, 27 | { 28 | name: '线框', 29 | icon: 'border' 30 | }, 31 | { 32 | name: '图标', 33 | icon: 'icon' 34 | }, 35 | { 36 | name: '其他', 37 | icon: 'other' 38 | } 39 | ] 40 | }, 41 | onLoad() {}, 42 | onShareAppMessage() {}, 43 | onShow() { 44 | this.setSwiperHeight(this.data.currentTab); 45 | }, 46 | // 滑动swiper切换，让swiper当前滑块的current的index与tab头部index一一对应 47 | switchTabContent(e) { 48 | const index = e.detail.current; 49 | this.setData({ 50 | currentTab: e.detail.current 51 | }); 52 | this.setSwiperHeight(index); 53 | }, 54 | /** 55 | * setSwiperHeight 动态设置swiper 高度 56 | * @param {*} index 57 | */ 58 | setSwiperHeight(index) { 59 | const query = wx.createSelectorQuery().in(this); 60 | const select = '.ani-swiper-item'; 61 | const that = this; 62 | this.setData({ 63 | currentTab: index 64 | }); 65 | query 66 | .selectAll(select) 67 | .boundingClientRect(function (rect) { 68 | that.setData({ 69 | swiperHeight: rect[index].height 70 | }); 71 | }) 72 | .exec(); 73 | }, 74 | changeEvent({ detail }) { 75 | this.switchTabContent({ 76 | detail: { 77 | current: detail 78 | } 79 | }); 80 | }, 81 | copyText(e) { 82 | const text = e.currentTarget.dataset.text; 83 | wx.setClipboardData({ 84 | data: text, 85 | success(res) { 86 | wx.getClipboardData({ 87 | success(res) { 88 | wx.showToast({ 89 | title: '复制成功' 90 | }); 91 | } 92 | }); 93 | } 94 | }); 95 | } 96 | }); 97 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/button/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Tab": "../../../animaUi/components/tab/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/button/index.less: -------------------------------------------------------------------------------- 1 | .button-box { 2 | .ani-tab { 3 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 4 | } 5 | .item { 6 | .box-bar { 7 | height: 100rpx; 8 | line-height: 100rpx; 9 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/button/index.wxss: -------------------------------------------------------------------------------- 1 | .button-box .ani-tab { 2 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 3 | } 4 | .button-box .item .box-bar { 5 | height: 100rpx; 6 | line-height: 100rpx; 7 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 8 | } 9 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/color/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour, 5 | basicColor, 6 | colourText, 7 | basicColorText, 8 | gradualColor, 9 | gradualColorText 10 | } = require('../../../utils/colour'); 11 | let bgColors = ['', 'dark', 'disabled', 'light'].map((item) => { 12 | let prefix = 'bg'; 13 | let prefix2 = ''; 14 | if (item !== '') { 15 | prefix2 = '-'; 16 | } 17 | prefix = prefix + prefix2 + item; 18 | return colour.map((color) => { 19 | return `${prefix}-${color}`; 20 | }); 21 | }); 22 | let prefix = 'bg'; 23 | basicColor = basicColor.map((item) => `${prefix}-${item}`); 24 | gradualColor = gradualColor.map((item) => `${prefix}-gradual-${item}`); 25 | Page({ 26 | data: { 27 | imgBaseUrl: app.imgBaseUrl, 28 | bgColors, 29 | basicColor, 30 | colourText, 31 | basicColorText, 32 | gradualColor, 33 | gradualColorText, 34 | notice: '仅支持 bg- 和 text- 前缀' 35 | }, 36 | onLoad() {}, 37 | onShareAppMessage() {}, 38 | onShow() {}, 39 | copyText(e) { 40 | const COLOR = e.currentTarget.dataset.text; 41 | wx.setClipboardData({ 42 | data: COLOR, 43 | success(res) { 44 | wx.getClipboardData({ 45 | success(res) { 46 | wx.showToast({ 47 | title: '复制成功' 48 | }); 49 | } 50 | }); 51 | } 52 | }); 53 | } 54 | }); -------------------------------------------------------------------------------- /tools/demo/pages/basic/color/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Notice": "../../../animaUi/components/notice/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/color/index.less: -------------------------------------------------------------------------------- 1 | .bgColor { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | .color-box { 9 | .bg-item { 10 | width: 46%; 11 | line-height: 2; 12 | border-radius: 6rpx; 13 | &:nth-of-type(1), 14 | &:nth-of-type(2) { 15 | margin-top: 0; 16 | } 17 | text { 18 | display: block; 19 | width: 100%; 20 | } 21 | } 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/color/index.wxss: -------------------------------------------------------------------------------- 1 | .bgColor .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | .bgColor .item .color-box .bg-item { 7 | width: 46%; 8 | line-height: 2; 9 | border-radius: 6rpx; 10 | } 11 | .bgColor .item .color-box .bg-item:nth-of-type(1), 12 | .bgColor .item .color-box .bg-item:nth-of-type(2) { 13 | margin-top: 0; 14 | } 15 | .bgColor .item .color-box .bg-item text { 16 | display: block; 17 | width: 100%; 18 | } 19 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/css3-filter/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour, 5 | colourText, 6 | basicColor, 7 | basicColorText, 8 | gradualColor, 9 | gradualColorText 10 | } = require('../../../utils/colour'); 11 | basicColor = basicColor.slice(0, 3); 12 | Page({ 13 | data: { 14 | imgBaseUrl: app.imgBaseUrl, 15 | colour, 16 | colourText, 17 | basicColor, 18 | basicColorText, 19 | gradualColor, 20 | gradualColorText 21 | }, 22 | onLoad() {}, 23 | onShareAppMessage() {}, 24 | onShow() {} 25 | }); 26 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/css3-filter/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/css3-filter/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | .box { 9 | padding: 0 20rpx; 10 | .cell { 11 | margin: 20rpx 0 0 20rpx; 12 | position: relative; 13 | &:nth-of-type(2n + 1) { 14 | margin-left: 0; 15 | } 16 | image { 17 | width: 100%; 18 | height: 320rpx; 19 | } 20 | text { 21 | font-size: 28rpx; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | padding: 20rpx; 26 | color: #fff; 27 | background-color: var(--red); 28 | opacity: .8; 29 | z-index: 1; 30 | } 31 | &.clear { 32 | height: 0; 33 | padding: 0; 34 | } 35 | } 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/css3-filter/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | 4 | css3 filters 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | css3 filters 13 | 14 | 15 | 16 | normal 17 | 18 | 19 | 20 | grayscale 21 | 22 | 23 | 24 | saturate 25 | 26 | 27 | 28 | sepia 29 | 30 | 31 | 32 | invert 33 | 34 | 35 | 36 | opacity 37 | 38 | 39 | 40 | brightness 41 | 42 | 43 | 44 | contrast 45 | 46 | 47 | 48 | hue-rotate 49 | 50 | 51 | 52 | blur 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/css3-filter/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | .main .item .box { 7 | padding: 0 20rpx; 8 | } 9 | .main .item .box .cell { 10 | margin: 20rpx 0 0 20rpx; 11 | position: relative; 12 | } 13 | .main .item .box .cell:nth-of-type(2n + 1) { 14 | margin-left: 0; 15 | } 16 | .main .item .box .cell image { 17 | width: 100%; 18 | height: 320rpx; 19 | } 20 | .main .item .box .cell text { 21 | font-size: 28rpx; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | padding: 20rpx; 26 | color: #fff; 27 | background-color: var(--red); 28 | opacity: 0.8; 29 | z-index: 1; 30 | } 31 | .main .item .box .cell.clear { 32 | height: 0; 33 | padding: 0; 34 | } 35 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/icon/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let icon = require('./icon'); 4 | icon = icon.map(item => { 5 | return { 6 | iconName: item, 7 | isShow: true 8 | } 9 | }); 10 | Page({ 11 | data: { 12 | imgBaseUrl: app.imgBaseUrl, 13 | icon, 14 | searchInfo: '' 15 | }, 16 | onLoad() {}, 17 | onShareAppMessage() {}, 18 | onShow() {}, 19 | search(e) { 20 | const key = e.detail.toLowerCase(); 21 | let list = this.data.icon; 22 | this.setData({ 23 | searchInfo: key 24 | }); 25 | list = list.map(item => { 26 | let iconName = item.iconName.toLowerCase(); 27 | item.isShow = iconName.search(key) != -1; 28 | return item; 29 | }); 30 | this.setData({ 31 | icon: list 32 | }); 33 | }, 34 | copyText(e) { 35 | const text = e.currentTarget.dataset.text; 36 | wx.setClipboardData({ 37 | data: text, 38 | success(res) { 39 | wx.getClipboardData({ 40 | success(res) { 41 | wx.showToast({ 42 | title: '复制成功' 43 | }); 44 | } 45 | }); 46 | } 47 | }); 48 | } 49 | }); 50 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/icon/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Search": "../../../animaUi/components/search/index", 4 | "Grid": "../../../animaUi/components/grid/index", 5 | "GridItem": "../../../animaUi/components/grid/grid-item/index" 6 | }, 7 | "navigationBarBackgroundColor": "#ffffff", 8 | "navigationBarTextStyle": "white" 9 | } 10 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/icon/index.less: -------------------------------------------------------------------------------- 1 | page { 2 | background: #fff; 3 | } 4 | .icon-box { 5 | .search-box { 6 | width: 100%; 7 | top: 64px; 8 | z-index: 999; 9 | .search-el { 10 | display: block; 11 | margin: 20rpx auto 20rpx; 12 | padding: 0 26rpx; 13 | } 14 | } 15 | .main { 16 | margin-top: 112rpx; 17 | padding: 0; 18 | .item { 19 | padding: 40rpx 10rpx; 20 | max-height: 220rpx; 21 | height: 220rpx; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/icon/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | var getIconText = function(str) { 3 | return str.split('ani-icon-')[1]; 4 | } 5 | module.exports = { getIconText: getIconText }; 6 | 7 | 8 | 返回 9 | icon 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 | 24 | {{module.getIconText(item.iconName)}} 25 | 26 | 27 | 39 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/icon/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background: #fff; 3 | } 4 | .icon-box .search-box { 5 | width: 100%; 6 | top: 64px; 7 | z-index: 999; 8 | } 9 | .icon-box .search-box .search-el { 10 | display: block; 11 | margin: 20rpx auto 20rpx; 12 | padding: 0 26rpx; 13 | } 14 | .icon-box .main { 15 | margin-top: 112rpx; 16 | padding: 0; 17 | } 18 | .icon-box .main .item { 19 | padding: 40rpx 10rpx; 20 | max-height: 220rpx; 21 | height: 220rpx; 22 | } 23 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | // 获取应用实例 3 | const app = getApp(); 4 | const { colour } = require('../../utils/colour'); 5 | Page({ 6 | data: { 7 | imgBaseUrl: app.imgBaseUrl, 8 | menuBar: app.globalData.menuBar, 9 | colour, 10 | list: [ 11 | { 12 | icon: 'ani-icon-color', 13 | en: 'color', 14 | cn: '色彩', 15 | url: '/pages/basic/color/index' 16 | }, 17 | { 18 | icon: 'ani-icon-layout-fill', 19 | en: 'layout', 20 | cn: '布局', 21 | url: '/pages/basic/layout/index' 22 | }, 23 | { 24 | icon: 'ani-icon-icon', 25 | en: 'icon', 26 | cn: '图标', 27 | url: '/pages/basic/icon/index' 28 | }, 29 | { 30 | icon: 'ani-icon-btn', 31 | en: 'button', 32 | cn: '按钮', 33 | url: '/pages/basic/button/index' 34 | }, 35 | { 36 | icon: 'ani-icon-text', 37 | en: 'text', 38 | cn: '文本', 39 | url: '/pages/basic/text/index' 40 | }, 41 | { 42 | icon: 'ani-icon-tag', 43 | en: 'tag', 44 | cn: '标签', 45 | url: '/pages/basic/tag/index' 46 | }, 47 | { 48 | icon: 'ani-icon-portrait', 49 | en: 'avatar', 50 | cn: '头像', 51 | url: '/pages/basic/avatar/index' 52 | }, 53 | { 54 | icon: 'ani-icon-progress', 55 | en: 'progress', 56 | cn: '进度条', 57 | url: '/pages/basic/progress/index' 58 | }, 59 | { 60 | icon: 'ani-icon-box-shadow', 61 | en: 'boxShadow', 62 | cn: '边框阴影', 63 | url: '/pages/basic/box-shadow/index' 64 | }, 65 | { 66 | icon: 'ani-icon-loading3', 67 | en: 'loading', 68 | cn: '加载', 69 | url: '/pages/basic/loading/index' 70 | }, 71 | { 72 | icon: 'ani-icon-badge', 73 | en: 'badge', 74 | cn: '徽标', 75 | url: '/pages/basic/badge/index' 76 | }, 77 | { 78 | icon: 'ani-icon-css', 79 | en: 'css3-filter', 80 | cn: 'css3滤镜', 81 | url: '/pages/basic/css3-filter/index' 82 | } 83 | ] 84 | }, 85 | onLoad() {}, 86 | onShareAppMessage() {}, 87 | onShow() {}, 88 | link(e) { 89 | const url = e.currentTarget.dataset.url; 90 | wx.navigateTo({ 91 | url, 92 | success: function (res) {}, 93 | fail: function (res) {}, 94 | complete: function (res) {} 95 | }); 96 | } 97 | }); -------------------------------------------------------------------------------- /tools/demo/pages/basic/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/layout/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | Page({ 4 | data: { 5 | imgBaseUrl: app.imgBaseUrl, 6 | swiperHeight: 0, 7 | currentTab: 0, 8 | activeColorClass: 'olive', 9 | tabData: [ 10 | { 11 | name: 'Flex布局', 12 | icon: 'flex' 13 | }, 14 | { 15 | name: 'Grid布局', 16 | icon: 'grid' 17 | }, 18 | { 19 | name: '辅助布局', 20 | icon: 'auxiliary' 21 | } 22 | ] 23 | }, 24 | onLoad() {}, 25 | onShareAppMessage() {}, 26 | onShow() { 27 | this.setSwiperHeight(this.data.currentTab); 28 | }, 29 | // 滑动swiper切换，让swiper当前滑块的current的index与tab头部index一一对应 30 | switchTabContent(e) { 31 | const index = e.detail.current; 32 | this.setData({ 33 | currentTab: e.detail.current 34 | }); 35 | this.setSwiperHeight(index); 36 | }, 37 | /** 38 | * setSwiperHeight 动态设置swiper 高度 39 | * @param {*} index 40 | */ 41 | setSwiperHeight(index) { 42 | const query = wx.createSelectorQuery().in(this); 43 | const select = '.ani-swiper-item'; 44 | const that = this; 45 | this.setData({ 46 | currentTab: index 47 | }); 48 | query 49 | .selectAll(select) 50 | .boundingClientRect(function (rect) { 51 | that.setData({ 52 | swiperHeight: rect[index].height 53 | }); 54 | }) 55 | .exec(); 56 | }, 57 | changeEvent({ detail }) { 58 | this.switchTabContent({ 59 | detail: { 60 | current: detail 61 | } 62 | }); 63 | } 64 | }); -------------------------------------------------------------------------------- /tools/demo/pages/basic/layout/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Tab": "../../../animaUi/components/tab/index", 4 | "Notice": "../../../animaUi/components/notice/index" 5 | }, 6 | "navigationBarBackgroundColor": "#ffffff", 7 | "navigationBarTextStyle": "white" 8 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/layout/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | --grid-row-gap: 30rpx; 3 | --grid-column-gap: 30rpx; 4 | .item { 5 | .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 9 | } 10 | .color-box { 11 | .bg-item { 12 | width: 46%; 13 | line-height: 2; 14 | border-radius: 6rpx; 15 | &:nth-of-type(1), 16 | &:nth-of-type(2) { 17 | margin-top: 0; 18 | } 19 | text { 20 | display: block; 21 | width: 100%; 22 | } 23 | } 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/layout/index.wxss: -------------------------------------------------------------------------------- 1 | .main { 2 | --grid-row-gap: 30rpx; 3 | --grid-column-gap: 30rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | .main .item .color-box .bg-item { 11 | width: 46%; 12 | line-height: 2; 13 | border-radius: 6rpx; 14 | } 15 | .main .item .color-box .bg-item:nth-of-type(1), 16 | .main .item .color-box .bg-item:nth-of-type(2) { 17 | margin-top: 0; 18 | } 19 | .main .item .color-box .bg-item text { 20 | display: block; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/loading/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { shadowColor, shadowColorText } = require('../../../utils/colour'); 4 | Page({ 5 | data: { 6 | imgBaseUrl: app.imgBaseUrl, 7 | shadowColor, 8 | shadowColorText 9 | }, 10 | onLoad() {}, 11 | onShareAppMessage() {}, 12 | onShow() {} 13 | }); 14 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/loading/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Notice": "../../../animaUi/components/notice/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/loading/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | .box { 9 | .cell { 10 | padding: 40rpx 10rpx; 11 | text { 12 | font-size: 48rpx; 13 | } 14 | &.clear { 15 | height: 0; 16 | padding: 0; 17 | } 18 | } 19 | .other { 20 | width: 33.33%; 21 | height: 140rpx; 22 | } 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/loading/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | .main .item .box .cell { 7 | padding: 40rpx 10rpx; 8 | } 9 | .main .item .box .cell text { 10 | font-size: 48rpx; 11 | } 12 | .main .item .box .cell.clear { 13 | height: 0; 14 | padding: 0; 15 | } 16 | .main .item .box .other { 17 | width: 33.33%; 18 | height: 140rpx; 19 | } 20 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/progress/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour, 5 | gradualColor 6 | } = require('../../../utils/colour'); 7 | let prefix = 'bg'; 8 | gradualColor = gradualColor.map((item) => `${prefix}-gradual-${item}`); 9 | Page({ 10 | data: { 11 | imgBaseUrl: app.imgBaseUrl, 12 | colour, 13 | gradualColor 14 | }, 15 | onLoad() {}, 16 | onShareAppMessage() {}, 17 | onShow() {} 18 | }); 19 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/progress/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/progress/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/progress/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | var getRandom = function (){ 3 | var iChoice = 10 - 100 + 1; 4 | return Math.abs(Math.floor(Math.random() * iChoice)) + 10; 5 | } 6 | module.exports = { getRandom: getRandom}; 7 | 8 | 9 | 返回 10 | progress 11 | 12 | 13 | 14 | 15 | 16 | 17 | 基础形状 18 | 19 | 20 | 21 | 61.8% 22 | 23 | 24 | 61.8% 25 | 26 | 27 | 61.8% 28 | 29 | 30 | 31 | 32 | 33 | 34 | 尺寸 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 斑马纹 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 彩色渐变气泡 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/progress/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/tag/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour, 5 | colourText, 6 | gradualColor, 7 | gradualColorText 8 | } = require('../../../utils/colour'); 9 | gradualColor = gradualColor.map((item) => `gradual-${item}`); 10 | Page({ 11 | data: { 12 | imgBaseUrl: app.imgBaseUrl, 13 | colour, 14 | colourText, 15 | gradualColor, 16 | gradualColorText 17 | }, 18 | onLoad() {}, 19 | onShareAppMessage() {}, 20 | onShow() {} 21 | }); 22 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/tag/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/tag/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/tag/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | tag 4 | 5 | 6 | 7 | 8 | 9 | 10 | 基础形状 11 | 12 | 13 | 默认 14 | 圆角 15 | 胶囊 16 | 17 | 18 | 19 | 20 | 21 | 尺大小 22 | 23 | 24 | 小尺寸 25 | 基础尺寸 26 | 27 | 28 | 29 | 30 | 31 | 基础颜色 32 | 33 | 34 | {{colourText[index]}} 35 | 36 | 37 | 38 | 39 | 40 | 渐变色 41 | 42 | 43 | {{gradualColorText[index]}} 44 | 45 | 46 | 47 | 48 | 49 | 线框 50 | 51 | 52 | {{colourText[index]}} 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/tag/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/text/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour, 5 | basicColor, 6 | colourText, 7 | basicColorText, 8 | gradualColor, 9 | gradualColorText 10 | } = require('../../../utils/colour'); 11 | let textColors = ['', 'dark', 'disabled', 'light'].map((item) => { 12 | let prefix = 'text'; 13 | let prefix2 = ''; 14 | if (item !== '') { 15 | prefix2 = '-'; 16 | } 17 | prefix = prefix + prefix2 + item; 18 | return colour.map((color) => { 19 | return `${prefix}-${color}`; 20 | }); 21 | }); 22 | basicColor = basicColor.slice(0, basicColor.length - 1); 23 | let basicColorShadow = basicColor.slice(0, 5); 24 | gradualColor = gradualColor.map((item) => `gradual-${item}`); 25 | Page({ 26 | data: { 27 | imgBaseUrl: app.imgBaseUrl, 28 | textColors, 29 | colourText, 30 | basicColor, 31 | basicColorText, 32 | gradualColor, 33 | gradualColorText, 34 | basicColorShadow 35 | }, 36 | onLoad() {}, 37 | onShareAppMessage() {}, 38 | onShow() {} 39 | }); 40 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/text/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Notice": "../../../animaUi/components/notice/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/basic/text/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | --grid-row-gap: 30rpx; 3 | --grid-column-gap: 30rpx; 4 | .item { 5 | .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 9 | } 10 | .color-box { 11 | .color-item { 12 | width: 46%; 13 | line-height: 2; 14 | border-radius: 6rpx; 15 | &:nth-of-type(1), 16 | &:nth-of-type(2) { 17 | margin-top: 0; 18 | } 19 | text { 20 | display: block; 21 | width: 100%; 22 | } 23 | } 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /tools/demo/pages/basic/text/index.wxss: -------------------------------------------------------------------------------- 1 | .main { 2 | --grid-row-gap: 30rpx; 3 | --grid-column-gap: 30rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | .main .item .color-box .color-item { 11 | width: 46%; 12 | line-height: 2; 13 | border-radius: 6rpx; 14 | } 15 | .main .item .color-box .color-item:nth-of-type(1), 16 | .main .item .color-box .color-item:nth-of-type(2) { 17 | margin-top: 0; 18 | } 19 | .main .item .color-box .color-item text { 20 | display: block; 21 | width: 100%; 22 | } 23 | -------------------------------------------------------------------------------- /tools/demo/pages/component/calendar/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | import Modal from '../../../animaUi/components/modal/modal'; 4 | 5 | Page({ 6 | data: { 7 | imgBaseUrl: app.imgBaseUrl, 8 | show1: false, 9 | show2: false, 10 | date1: '2020年07月07日', 11 | date2: '2020年07月07日' 12 | }, 13 | onLoad() {}, 14 | onShareAppMessage() {}, 15 | onShow() {}, 16 | tap1() { 17 | this.setData({ 18 | show1: true 19 | }); 20 | }, 21 | tap2() { 22 | this.setData({ 23 | show2: true 24 | }); 25 | }, 26 | changeDate(e) { 27 | Modal.alert({ 28 | message: `选择时间: ${e.detail.date}\n时间戳: ${e.detail.timeStamp}\n点击确定2S后该弹窗关闭` 29 | }).then(() => { 30 | // on close 31 | Modal.close(); 32 | setTimeout(() => { 33 | Modal.close(); 34 | }, 1000); 35 | }) 36 | .catch(() => { 37 | // on cancel 38 | Modal.close(); 39 | setTimeout(() => { 40 | Modal.close(); 41 | }, 1000); 42 | }); 43 | }, 44 | confirmCalendar(e) { 45 | const DETAIL = e.detail; 46 | const CALENDAR = DETAIL.calendar; 47 | Modal.alert({ 48 | message: `选择时间: ${e.detail.date}\n时间戳: ${e.detail.timeStamp}\n点击确定2S后日历关闭`, 49 | asyncClose: true 50 | }).then(() => { 51 | Modal.close(); 52 | this.setData({ 53 | date1: DETAIL.date 54 | }); 55 | setTimeout(() => { 56 | CALENDAR.close(); 57 | }, 1000); 58 | }) 59 | .catch(() => { 60 | Modal.close(); 61 | setTimeout(() => { 62 | CALENDAR.close(); 63 | }, 1000); 64 | }); 65 | }, 66 | changeMultipleDate() {}, 67 | confirmMultipleCalendar() {} 68 | }); 69 | -------------------------------------------------------------------------------- /tools/demo/pages/component/calendar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Calendar": "../../../animaUi/components/calendar/index", 4 | "Modal": "../../../animaUi/components/modal/index" 5 | }, 6 | "navigationBarBackgroundColor": "#ffffff", 7 | "navigationBarTextStyle": "white" 8 | } 9 | -------------------------------------------------------------------------------- /tools/demo/pages/component/calendar/index.less: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main { 6 | .item { 7 | .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 11 | } 12 | .ani-icon { 13 | position: relative; 14 | .ani-badge { 15 | position: absolute; 16 | top: -14rpx; 17 | right: auto; 18 | left: 50%; 19 | margin-left: 20rpx; 20 | } 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/calendar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | calendar 4 | 5 | 6 | 7 | 8 | 9 | 10 | 基础用法 11 | 12 | 13 | 14 | 选择单个日期 15 | {{date1}} 16 | 17 | 18 | 19 | 20 | 选择单个日期 21 | {{date2}} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 35 | 43 | -------------------------------------------------------------------------------- /tools/demo/pages/component/calendar/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | .main .item .ani-icon { 11 | position: relative; 12 | } 13 | .main .item .ani-icon .ani-badge { 14 | position: absolute; 15 | top: -14rpx; 16 | right: auto; 17 | left: 50%; 18 | margin-left: 20rpx; 19 | } 20 | -------------------------------------------------------------------------------- /tools/demo/pages/component/card/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | Page({ 4 | data: { 5 | imgBaseUrl: app.imgBaseUrl 6 | }, 7 | onLoad() {}, 8 | onShareAppMessage() {}, 9 | onShow() {}, 10 | extra() { 11 | wx.showToast({ 12 | title: '点击了extra', 13 | icon: 'success', 14 | duration: 2000 15 | }); 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /tools/demo/pages/component/card/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Card": "../../../animaUi/components/card/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/component/card/index.less: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main { 6 | .item { 7 | .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/card/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | card 4 | 5 | 6 | 7 | 8 | 9 | 10 | 基础card 11 | 12 | 15 | Card Title 16 | Extra 17 | 18 | Card Content 19 | 20 | 21 | 22 | 23 | 24 | 25 | 按钮card 26 | 27 | 30 | Card Title 31 | 32 | 33 | 34 | 35 | Card Content 36 | 37 | 38 | 39 | 40 | 41 | 42 | 无外边框card 43 | 44 | 47 | Card Title 48 | 49 | 50 | 51 | 52 | Card Content 53 | 54 | 55 | 56 | 57 | 58 | 59 | 只包含内容区card 60 | 61 | 64 | 65 | 66 | 67 | AnimaUI 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /tools/demo/pages/component/card/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | -------------------------------------------------------------------------------- /tools/demo/pages/component/custom-bar/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour, 5 | colourText, 6 | basicColor, 7 | basicColorText, 8 | gradualColor, 9 | gradualColorText 10 | } = require('../../../utils/colour'); 11 | basicColor = basicColor.slice(0, 3); 12 | Page({ 13 | data: { 14 | imgBaseUrl: app.imgBaseUrl, 15 | colour, 16 | colourText, 17 | basicColor, 18 | basicColorText, 19 | gradualColor, 20 | gradualColorText 21 | }, 22 | onLoad() {}, 23 | onShareAppMessage() {}, 24 | onShow() {} 25 | }); 26 | -------------------------------------------------------------------------------- /tools/demo/pages/component/custom-bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/component/custom-bar/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | .box { 9 | .cell { 10 | margin-top: 20rpx; 11 | position: relative; 12 | z-index: 1; 13 | .ani-bar.fixed, 14 | .nav.fixed { 15 | position: relative; 16 | } 17 | } 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/custom-bar/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | .main .item .box .cell { 7 | margin-top: 20rpx; 8 | position: relative; 9 | z-index: 1; 10 | } 11 | .main .item .box .cell .ani-bar.fixed, 12 | .main .item .box .cell .nav.fixed { 13 | position: relative; 14 | } 15 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/checkbox/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour 5 | } = require('../../../../utils/colour'); 6 | let colors = ['', 'dark', 'disabled'].map((item) => { 7 | let prefix = 'text'; 8 | let prefix2 = ''; 9 | if (item !== '') { 10 | prefix2 = '-'; 11 | } 12 | prefix = prefix + prefix2 + item; 13 | return colour.map((color) => { 14 | return `${prefix}-${color}`; 15 | }); 16 | }); 17 | Page({ 18 | data: { 19 | imgBaseUrl: app.imgBaseUrl, 20 | colors, 21 | isRound: false 22 | }, 23 | onLoad() {}, 24 | onShareAppMessage() {}, 25 | onShow() { 26 | wx.setNavigationBarColor({ 27 | frontColor: '#ffffff', 28 | backgroundColor: 'rgba(0, 0, 0, 0)' 29 | }); 30 | }, 31 | changeRound(e) { 32 | this.setData({ 33 | isRound: e.detail.value 34 | }); 35 | } 36 | }); 37 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/checkbox/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/checkbox/index.less: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: var(--red); 3 | } 4 | .scroll-page { 5 | background-color: var(--ghost-white); 6 | } 7 | .main { 8 | .item { 9 | .box-bar { 10 | height: 100rpx; 11 | line-height: 100rpx; 12 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 13 | } 14 | .color-box { 15 | .bg-item { 16 | width: 46%; 17 | line-height: 2; 18 | border-radius: 6rpx; 19 | &:nth-of-type(1), 20 | &:nth-of-type(2) { 21 | margin-top: 0; 22 | } 23 | text { 24 | display: block; 25 | width: 100%; 26 | } 27 | } 28 | } 29 | } 30 | .box { 31 | margin-top: 20rpx; 32 | .ani-form-group { 33 | .tag-btn { 34 | line-height: 20rpx; 35 | font-size: 20rpx; 36 | } 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/form/checkbox/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | 4 | 是否round 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 基础 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | primary 23 | 24 | 25 | 26 | dark 27 | 28 | 29 | 30 | disabled 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/checkbox/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: var(--red); 3 | } 4 | .scroll-page { 5 | background-color: var(--ghost-white); 6 | } 7 | .main .item .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 11 | } 12 | .main .item .color-box .bg-item { 13 | width: 46%; 14 | line-height: 2; 15 | border-radius: 6rpx; 16 | } 17 | .main .item .color-box .bg-item:nth-of-type(1), 18 | .main .item .color-box .bg-item:nth-of-type(2) { 19 | margin-top: 0; 20 | } 21 | .main .item .color-box .bg-item text { 22 | display: block; 23 | width: 100%; 24 | } 25 | .main .box { 26 | margin-top: 20rpx; 27 | } 28 | .main .box .ani-form-group .tag-btn { 29 | line-height: 20rpx; 30 | font-size: 20rpx; 31 | } 32 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/index.less: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: var(--red); 3 | } 4 | .scroll-page { 5 | background-color: var(--ghost-white); 6 | } 7 | .main { 8 | .box { 9 | margin-top: 20rpx; 10 | .ani-form-group { 11 | .tag-btn { 12 | line-height: 20rpx; 13 | font-size: 20rpx; 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/form/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: var(--red); 3 | } 4 | .scroll-page { 5 | background-color: var(--ghost-white); 6 | } 7 | .main .box { 8 | margin-top: 20rpx; 9 | } 10 | .main .box .ani-form-group .tag-btn { 11 | line-height: 20rpx; 12 | font-size: 20rpx; 13 | } 14 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/radio/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour 5 | } = require('../../../../utils/colour'); 6 | let colors = ['', 'dark', 'disabled'].map((item) => { 7 | let prefix = 'text'; 8 | let prefix2 = ''; 9 | if (item !== '') { 10 | prefix2 = '-'; 11 | } 12 | prefix = prefix + prefix2 + item; 13 | return colour.map((color) => { 14 | return `${prefix}-${color}`; 15 | }); 16 | }); 17 | Page({ 18 | data: { 19 | imgBaseUrl: app.imgBaseUrl, 20 | colors, 21 | swiperHeight: 0, 22 | currentTab: 0, 23 | activeColorClass: 'red', 24 | tabData: [ 25 | { 26 | name: '基础' 27 | }, 28 | { 29 | name: '自定义形状' 30 | } 31 | ] 32 | }, 33 | onLoad() {}, 34 | onShareAppMessage() {}, 35 | onShow() { 36 | wx.setNavigationBarColor({ 37 | frontColor: '#ffffff', 38 | backgroundColor: 'rgba(0, 0, 0, 0)' 39 | }); 40 | this.setSwiperHeight(this.data.currentTab); 41 | }, 42 | // 滑动swiper切换，让swiper当前滑块的current的index与tab头部index一一对应 43 | switchTabContent(e) { 44 | const index = e.detail.current; 45 | this.setData({ 46 | currentTab: e.detail.current 47 | }); 48 | this.setSwiperHeight(index); 49 | }, 50 | /** 51 | * setSwiperHeight 动态设置swiper 高度 52 | * @param {*} index 53 | */ 54 | setSwiperHeight(index) { 55 | const query = wx.createSelectorQuery().in(this); 56 | const select = '.ani-swiper-item'; 57 | const that = this; 58 | this.setData({ 59 | currentTab: index 60 | }); 61 | query 62 | .selectAll(select) 63 | .boundingClientRect(function (rect) { 64 | that.setData({ 65 | swiperHeight: rect[index].height 66 | }); 67 | }) 68 | .exec(); 69 | }, 70 | changeEvent({ detail }) { 71 | this.switchTabContent({ 72 | detail: { 73 | current: detail 74 | } 75 | }); 76 | }, 77 | changeRadius(e) { 78 | this.setData({ 79 | isRadius: e.detail.value 80 | }); 81 | } 82 | }); 83 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/radio/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Tab": "../../../../animaUi/components/tab/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/radio/index.less: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: var(--red); 3 | } 4 | .scroll-page { 5 | background-color: var(--ghost-white); 6 | } 7 | .main { 8 | .item { 9 | .box-bar { 10 | height: 100rpx; 11 | line-height: 100rpx; 12 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 13 | } 14 | .color-box { 15 | .bg-item { 16 | width: 46%; 17 | line-height: 2; 18 | border-radius: 6rpx; 19 | &:nth-of-type(1), 20 | &:nth-of-type(2) { 21 | margin-top: 0; 22 | } 23 | text { 24 | display: block; 25 | width: 100%; 26 | } 27 | } 28 | } 29 | } 30 | .box { 31 | margin-top: 20rpx; 32 | .ani-form-group { 33 | .tag-btn { 34 | line-height: 20rpx; 35 | font-size: 20rpx; 36 | } 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/form/radio/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: var(--red); 3 | } 4 | .scroll-page { 5 | background-color: var(--ghost-white); 6 | } 7 | .main .item .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 11 | } 12 | .main .item .color-box .bg-item { 13 | width: 46%; 14 | line-height: 2; 15 | border-radius: 6rpx; 16 | } 17 | .main .item .color-box .bg-item:nth-of-type(1), 18 | .main .item .color-box .bg-item:nth-of-type(2) { 19 | margin-top: 0; 20 | } 21 | .main .item .color-box .bg-item text { 22 | display: block; 23 | width: 100%; 24 | } 25 | .main .box { 26 | margin-top: 20rpx; 27 | } 28 | .main .box .ani-form-group .tag-btn { 29 | line-height: 20rpx; 30 | font-size: 20rpx; 31 | } 32 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/switch/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let { 4 | colour 5 | } = require('../../../../utils/colour'); 6 | let colors = ['', 'dark', 'disabled'].map((item) => { 7 | let prefix = 'text'; 8 | let prefix2 = ''; 9 | if (item !== '') { 10 | prefix2 = '-'; 11 | } 12 | prefix = prefix + prefix2 + item; 13 | return colour.map((color) => { 14 | return `${prefix}-${color}`; 15 | }); 16 | }); 17 | Page({ 18 | data: { 19 | imgBaseUrl: app.imgBaseUrl, 20 | colors, 21 | isRadius: false, 22 | swiperHeight: 0, 23 | currentTab: 0, 24 | activeColorClass: 'red', 25 | tabData: [ 26 | { 27 | name: '基础' 28 | }, 29 | { 30 | name: '默认图标' 31 | } 32 | ] 33 | }, 34 | onLoad() {}, 35 | onShareAppMessage() {}, 36 | onShow() { 37 | wx.setNavigationBarColor({ 38 | frontColor: '#ffffff', 39 | backgroundColor: 'rgba(0, 0, 0, 0)' 40 | }); 41 | this.setSwiperHeight(this.data.currentTab); 42 | }, 43 | // 滑动swiper切换，让swiper当前滑块的current的index与tab头部index一一对应 44 | switchTabContent(e) { 45 | const index = e.detail.current; 46 | this.setData({ 47 | currentTab: e.detail.current 48 | }); 49 | this.setSwiperHeight(index); 50 | }, 51 | /** 52 | * setSwiperHeight 动态设置swiper 高度 53 | * @param {*} index 54 | */ 55 | setSwiperHeight(index) { 56 | const query = wx.createSelectorQuery().in(this); 57 | const select = '.ani-swiper-item'; 58 | const that = this; 59 | this.setData({ 60 | currentTab: index 61 | }); 62 | query 63 | .selectAll(select) 64 | .boundingClientRect(function (rect) { 65 | that.setData({ 66 | swiperHeight: rect[index].height 67 | }); 68 | }) 69 | .exec(); 70 | }, 71 | changeEvent({ detail }) { 72 | this.switchTabContent({ 73 | detail: { 74 | current: detail 75 | } 76 | }); 77 | }, 78 | changeRadius(e) { 79 | this.setData({ 80 | isRadius: e.detail.value 81 | }); 82 | } 83 | }); 84 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/switch/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Tab": "../../../../animaUi/components/tab/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/component/form/switch/index.less: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: var(--red); 3 | } 4 | .scroll-page { 5 | background-color: var(--ghost-white); 6 | } 7 | .main { 8 | .item { 9 | .box-bar { 10 | height: 100rpx; 11 | line-height: 100rpx; 12 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 13 | } 14 | .color-box { 15 | .bg-item { 16 | width: 46%; 17 | line-height: 2; 18 | border-radius: 6rpx; 19 | &:nth-of-type(1), 20 | &:nth-of-type(2) { 21 | margin-top: 0; 22 | } 23 | text { 24 | display: block; 25 | width: 100%; 26 | } 27 | } 28 | } 29 | } 30 | .box { 31 | margin-top: 20rpx; 32 | .ani-form-group { 33 | .tag-btn { 34 | line-height: 20rpx; 35 | font-size: 20rpx; 36 | } 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/form/switch/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: var(--red); 3 | } 4 | .scroll-page { 5 | background-color: var(--ghost-white); 6 | } 7 | .main .item .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 11 | } 12 | .main .item .color-box .bg-item { 13 | width: 46%; 14 | line-height: 2; 15 | border-radius: 6rpx; 16 | } 17 | .main .item .color-box .bg-item:nth-of-type(1), 18 | .main .item .color-box .bg-item:nth-of-type(2) { 19 | margin-top: 0; 20 | } 21 | .main .item .color-box .bg-item text { 22 | display: block; 23 | width: 100%; 24 | } 25 | .main .box { 26 | margin-top: 20rpx; 27 | } 28 | .main .box .ani-form-group .tag-btn { 29 | line-height: 20rpx; 30 | font-size: 20rpx; 31 | } 32 | -------------------------------------------------------------------------------- /tools/demo/pages/component/grid/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | Page({ 4 | data: { 5 | imgBaseUrl: app.imgBaseUrl, 6 | iconList: [ 7 | { 8 | icon: 'ani-icon-apple', 9 | color: 'dark-gray', 10 | badge: 120, 11 | name: 'IPhone' 12 | }, 13 | { 14 | icon: 'ani-icon-android', 15 | color: 'green', 16 | badge: 89, 17 | name: '安卓' 18 | }, 19 | { 20 | icon: 'ani-icon-applepay', 21 | color: 'dark-gray', 22 | badge: 120, 23 | name: '苹果支付' 24 | }, 25 | { 26 | icon: 'ani-icon-appstore-fill-round', 27 | color: 'blue', 28 | badge: 22, 29 | name: 'appstore' 30 | }, 31 | { 32 | icon: 'ani-icon-baidu', 33 | color: 'sky-blue', 34 | badge: 0, 35 | name: '百度' 36 | }, 37 | { 38 | icon: 'ani-icon-bytedance', 39 | color: 'orange', 40 | badge: 0, 41 | name: '字节跳动' 42 | }, 43 | { 44 | icon: 'ani-icon-bitcoin', 45 | color: 'fusion-orange', 46 | badge: 0, 47 | name: '比特币' 48 | }, 49 | { 50 | icon: 'ani-icon-chrome', 51 | color: 'red', 52 | badge: 0, 53 | name: 'chrome' 54 | }, 55 | { 56 | icon: 'ani-icon-dribbble', 57 | color: 'pink', 58 | badge: 0, 59 | name: 'dribbble' 60 | }, 61 | { 62 | icon: 'ani-icon-facebook', 63 | color: 'dark-blue', 64 | badge: 0, 65 | name: 'facebook' 66 | }, 67 | { 68 | icon: 'ani-icon-dts', 69 | color: 'orange', 70 | badge: 0, 71 | name: 'dts' 72 | }, 73 | { 74 | icon: 'ani-icon-dropbox', 75 | color: 'dark-blue', 76 | badge: 0, 77 | name: 'dropbox' 78 | }, 79 | { 80 | icon: 'ani-icon-github-fill-round', 81 | color: 'dark-gray', 82 | badge: 0, 83 | name: 'github' 84 | }, 85 | { 86 | icon: 'ani-icon-iqiyi', 87 | color: 'green', 88 | badge: 0, 89 | name: '爱奇艺' 90 | }, 91 | { 92 | icon: 'ani-icon-netease-fill-square', 93 | color: 'red', 94 | badge: 0, 95 | name: 'netease' 96 | } 97 | ], 98 | gridCol: 3, 99 | gridBorder: true 100 | }, 101 | onLoad() {}, 102 | onShareAppMessage() {}, 103 | onShow() {}, 104 | radioChange(e) { 105 | console.log('radio发生change事件，携带value值为：', e.detail.value); 106 | this.setData({ 107 | gridCol: e.detail.value 108 | }); 109 | }, 110 | switchChange(e) { 111 | console.log('switch发生change事件，携带value值为：', e.detail.value); 112 | this.setData({ 113 | gridBorder: e.detail.value 114 | }); 115 | } 116 | }); 117 | -------------------------------------------------------------------------------- /tools/demo/pages/component/grid/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Grid": "../../../animaUi/components/grid/index", 4 | "GridItem": "../../../animaUi/components/grid/grid-item/index" 5 | }, 6 | "navigationBarBackgroundColor": "#ffffff", 7 | "navigationBarTextStyle": "white" 8 | } 9 | -------------------------------------------------------------------------------- /tools/demo/pages/component/grid/index.less: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main { 6 | .item { 7 | .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 11 | } 12 | .ani-icon { 13 | position: relative; 14 | .ani-badge { 15 | position: absolute; 16 | top: -14rpx; 17 | right: auto; 18 | left: 50%; 19 | margin-left: 20rpx; 20 | } 21 | } 22 | .grid { 23 | padding: 0 0 20rpx 0; 24 | } 25 | .grid-item { 26 | padding: 40rpx 20rpx; 27 | max-height: 160rpx; 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/grid/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | grid 4 | 5 | 6 | 7 | 8 | 9 | 10 | 宫格 11 | 12 | 13 | 14 | 20 | 26 | 32 | 33 | 34 | 35 | 36 | 37 | 是否显示边框 38 | 39 | 40 | 41 | 42 | 43 | 46 | {{item.name}} 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /tools/demo/pages/component/grid/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | .main .item .ani-icon { 11 | position: relative; 12 | } 13 | .main .item .ani-icon .ani-badge { 14 | position: absolute; 15 | top: -14rpx; 16 | right: auto; 17 | left: 50%; 18 | margin-left: 20rpx; 19 | } 20 | .main .item .grid { 21 | padding: 0 0 20rpx 0; 22 | } 23 | .main .item .grid-item { 24 | padding: 40rpx 20rpx; 25 | max-height: 160rpx; 26 | } 27 | -------------------------------------------------------------------------------- /tools/demo/pages/component/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | // 获取应用实例 3 | const app = getApp(); 4 | const { colour } = require('../../utils/colour'); 5 | Page({ 6 | data: { 7 | imgBaseUrl: app.imgBaseUrl, 8 | menuBar: app.globalData.menuBar, 9 | colour, 10 | list: [ 11 | { 12 | icon: 'ani-icon-bar', 13 | en: 'topBar', 14 | cn: '顶部Bar', 15 | url: '/pages/component/custom-bar/index' 16 | }, 17 | { 18 | icon: 'ani-icon-menu', 19 | en: 'menuBar', 20 | cn: '底部Bar', 21 | url: '/pages/component/menu-bar/index' 22 | }, 23 | { 24 | icon: 'ani-icon-tab', 25 | en: 'tab', 26 | cn: 'tab导航', 27 | url: '/pages/component/tab/index' 28 | }, 29 | { 30 | icon: 'ani-icon-form', 31 | en: 'form', 32 | cn: '表 单', 33 | url: '/pages/component/form/index' 34 | }, 35 | { 36 | icon: 'ani-icon-carousel', 37 | en: 'swiper', 38 | cn: '轮 播', 39 | url: '/pages/component/swiper/index' 40 | }, 41 | { 42 | icon: 'ani-icon-steps', 43 | en: 'steps', 44 | cn: '步骤条', 45 | url: '/pages/component/steps/index' 46 | }, 47 | { 48 | icon: 'ani-icon-card', 49 | en: 'card', 50 | cn: '卡 片', 51 | url: '/pages/component/card/index' 52 | }, 53 | { 54 | icon: 'ani-icon-time-line', 55 | en: 'timeLine', 56 | cn: '时间轴', 57 | url: '/pages/component/time-line/index' 58 | }, 59 | { 60 | icon: 'ani-icon-modal', 61 | en: 'modal', 62 | cn: '模态框', 63 | url: '/pages/component/modal/index' 64 | }, 65 | { 66 | icon: 'ani-icon-grid', 67 | en: 'grid', 68 | cn: '宫格', 69 | url: '/pages/component/grid/index' 70 | }, 71 | { 72 | icon: 'ani-icon-date', 73 | en: 'calendar', 74 | cn: '日 历', 75 | url: '/pages/component/calendar/index' 76 | }, 77 | { 78 | icon: 'ani-icon-time2', 79 | en: 'time', 80 | cn: '时 间', 81 | url: '' 82 | }, 83 | { 84 | icon: 'ani-icon-slider', 85 | en: 'slider', 86 | cn: '滑 块', 87 | url: '' 88 | }, 89 | { 90 | icon: 'ani-icon-rate', 91 | en: 'rate', 92 | cn: '评 分', 93 | url: '' 94 | } 95 | ] 96 | }, 97 | onLoad() {}, 98 | onShareAppMessage() {}, 99 | onShow() {}, 100 | link(e) { 101 | const url = e.currentTarget.dataset.url; 102 | wx.navigateTo({ 103 | url, 104 | success: function (res) {}, 105 | fail: function (res) {}, 106 | complete: function (res) {} 107 | }); 108 | } 109 | }); -------------------------------------------------------------------------------- /tools/demo/pages/component/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/menu-bar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } 6 | -------------------------------------------------------------------------------- /tools/demo/pages/component/menu-bar/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | .box { 9 | .cell { 10 | margin: 20rpx 0; 11 | position: relative; 12 | z-index: 1; 13 | .ani-tabbar { 14 | position: static; 15 | } 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/menu-bar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | 4 | 底部bar 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 基础bar 13 | 14 | 15 | 16 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 带徽标bar 29 | 30 | 31 | 32 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 带小圆点bar 45 | 46 | 47 | 48 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 链接bar 61 | 62 | 63 | 64 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /tools/demo/pages/component/menu-bar/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | .main .item .box .cell { 7 | margin: 20rpx 0; 8 | position: relative; 9 | z-index: 1; 10 | } 11 | .main .item .box .cell .ani-tabbar { 12 | position: static; 13 | } 14 | -------------------------------------------------------------------------------- /tools/demo/pages/component/modal/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | import Modal from '../../../animaUi/components/modal/modal'; 4 | Page({ 5 | data: { 6 | imgBaseUrl: app.imgBaseUrl 7 | }, 8 | onLoad() {}, 9 | onShareAppMessage() {}, 10 | onShow() {}, 11 | tap1() { 12 | Modal.alert({ 13 | title: '标题', 14 | message: '代码是写给人看的，不是写给人算的~~' 15 | }).then(() => { 16 | // on close 17 | console.log('onClose'); 18 | }) 19 | .catch(() => { 20 | // on cancel 21 | console.log('onCancel'); 22 | }); 23 | }, 24 | tap2() { 25 | Modal.alert({ 26 | message: '代码是写给人看的，不是写给人算的~~' 27 | }).then(() => { 28 | // on close 29 | console.log('onClose'); 30 | }) 31 | .catch(() => { 32 | // on cancel 33 | console.log('onCancel'); 34 | }); 35 | }, 36 | tap3() { 37 | Modal.confirm({ 38 | title: '我才不写代码呢~', 39 | message: '代码是写给人看的，不是写给人算的~~' 40 | }).then(() => { 41 | // on close 42 | setTimeout(() => { 43 | Modal.close(); 44 | }, 1000); 45 | console.log('onClose'); 46 | }) 47 | .catch(() => { 48 | // on cancel 49 | console.log('onCancel'); 50 | }); 51 | }, 52 | tap4() { 53 | Modal.confirm({ 54 | title: '我才不写代码呢~', 55 | message: '代码是写给人看的，不是写给人算的~~', 56 | asyncClose: true 57 | }).then(() => { 58 | // on close 59 | setTimeout(() => { 60 | Modal.close(); 61 | }, 1000); 62 | console.log('onClose'); 63 | }) 64 | .catch(() => { 65 | // on cancel 66 | setTimeout(() => { 67 | Modal.close(); 68 | }, 1000); 69 | console.log('onCancel'); 70 | }); 71 | }, 72 | tap5() { 73 | this.setData({ show5: true }); 74 | }, 75 | tap6() { 76 | this.setData({ show6: true }); 77 | }, 78 | tap7() { 79 | this.setData({ show7: true }); 80 | }, 81 | tap8() { 82 | this.setData({ show8: true }); 83 | }, 84 | contact(e) { 85 | this.setData({ show7: false }); 86 | console.log('contact', e.detail); 87 | }, 88 | getuserinfo(e) { 89 | this.setData({ show8: false }); 90 | console.log('getuserinfo', e.detail); 91 | } 92 | }); 93 | -------------------------------------------------------------------------------- /tools/demo/pages/component/modal/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Modal": "../../../animaUi/components/modal/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/component/modal/index.less: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main { 6 | .item { 7 | .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 11 | } 12 | .time { 13 | font-size: 28rpx; 14 | font-weight: 700; 15 | margin: 0; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/modal/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | .main .item .time { 11 | font-size: 28rpx; 12 | font-weight: 700; 13 | margin: 0; 14 | } 15 | -------------------------------------------------------------------------------- /tools/demo/pages/component/steps/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | Page({ 4 | data: { 5 | imgBaseUrl: app.imgBaseUrl, 6 | type1: 'line', 7 | type2: 'arrow', 8 | mode1: 'iconDefault', 9 | mode2: 'icon', 10 | mode3: 'num', 11 | mode4: 'wizard', 12 | list: [ 13 | { 14 | icon: 'ani-icon-start', 15 | name: 'start' 16 | }, 17 | { 18 | icon: 'ani-icon-wait', 19 | name: 'wait' 20 | }, 21 | { 22 | icon: 'ani-icon-close-fill', 23 | name: 'error' 24 | }, 25 | { 26 | icon: 'ani-icon-checked-fill', 27 | name: 'finised' 28 | } 29 | ], 30 | activeColor1: 'var(--red)', 31 | activeColor2: 'var(--orange)', 32 | activeColor3: 'var(--yellow)', 33 | activeColor4: 'var(--green)', 34 | activeColor5: 'var(--cyan)', 35 | activeColor6: 'var(--fusion-sky-blue)', 36 | activeColor7: 'var(--purple)', 37 | activeColor8: 'var(--mauve)', 38 | step: 0, 39 | scrollList: [ 40 | 'step1', 41 | 'step2', 42 | 'step3', 43 | 'step4', 44 | 'step5', 45 | 'step6', 46 | 'step7', 47 | 'step8', 48 | 'step9', 49 | 'step10', 50 | 'step11', 51 | 'step12' 52 | ], 53 | scrollStep: 0, 54 | wizardStep: 0 55 | }, 56 | onLoad() {}, 57 | onShareAppMessage() {}, 58 | onShow() {}, 59 | next() { 60 | this.setData({ 61 | step: 62 | this.data.step == this.data.list.length - 1 63 | ? 0 64 | : this.data.step + 1 65 | }); 66 | }, 67 | scrollSteps() { 68 | this.setData({ 69 | scrollStep: 70 | this.data.scrollStep == this.data.scrollList.length - 1 71 | ? 0 72 | : this.data.scrollStep + 1 73 | }); 74 | }, 75 | wizardSteps() { 76 | this.setData({ 77 | wizardStep: 78 | this.data.wizardStep == this.data.scrollList.length - 1 79 | ? 0 80 | : this.data.wizardStep + 1 81 | }); 82 | } 83 | }); 84 | -------------------------------------------------------------------------------- /tools/demo/pages/component/steps/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Steps": "../../../animaUi/components/steps/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/component/steps/index.less: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main { 6 | .item { 7 | .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/steps/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | 步骤条 4 | 5 | 6 | 7 | 8 | 9 | 10 | 基础步骤条 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 方块箭头步骤条 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 无限步骤条 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /tools/demo/pages/component/steps/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | -------------------------------------------------------------------------------- /tools/demo/pages/component/swiper/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | let swiperList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'].map( 4 | (item, index) => { 5 | return { 6 | id: index, 7 | url: `${app.imgBaseUrl}/${item}` 8 | }; 9 | } 10 | ); 11 | Page({ 12 | data: { 13 | imgBaseUrl: app.imgBaseUrl, 14 | isSquare: false, 15 | swiperList 16 | }, 17 | onLoad() {}, 18 | onShareAppMessage() {}, 19 | onShow() {}, 20 | changeSquare(e) { 21 | this.setData({ 22 | isSquare: e.detail.value 23 | }); 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /tools/demo/pages/component/swiper/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Swiper": "../../../animaUi/components/swiper/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/component/swiper/index.less: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main { 6 | .item { 7 | .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/swiper/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 返回 3 | 4 | 是否方形 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 百分百限高轮播图 14 | 15 | 20 | 21 | 22 | 23 | 24 | 卡片轮播图 25 | 26 | 33 | 34 | 35 | 36 | 37 | 堆叠轮播图 38 | 39 | 45 | 46 | 47 | 48 | 49 | 3D切割轮播图(暂只支持4张图) 50 | 51 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /tools/demo/pages/component/swiper/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | -------------------------------------------------------------------------------- /tools/demo/pages/component/tab/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "Tab": "../../../animaUi/components/tab/index" 4 | }, 5 | "navigationBarBackgroundColor": "#ffffff", 6 | "navigationBarTextStyle": "white" 7 | } 8 | -------------------------------------------------------------------------------- /tools/demo/pages/component/tab/index.less: -------------------------------------------------------------------------------- 1 | .main { 2 | .item { 3 | .box-bar { 4 | height: 100rpx; 5 | line-height: 100rpx; 6 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 7 | } 8 | swiper-item { 9 | padding: 30rpx; 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/tab/index.wxss: -------------------------------------------------------------------------------- 1 | .main .item .box-bar { 2 | height: 100rpx; 3 | line-height: 100rpx; 4 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 5 | } 6 | .main .item swiper-item { 7 | padding: 30rpx; 8 | } 9 | -------------------------------------------------------------------------------- /tools/demo/pages/component/time-line/index.js: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp(); 3 | Page({ 4 | data: { 5 | imgBaseUrl: app.imgBaseUrl 6 | }, 7 | onLoad() {}, 8 | onShareAppMessage() {}, 9 | onShow() {} 10 | }); 11 | -------------------------------------------------------------------------------- /tools/demo/pages/component/time-line/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "TimeLine": "../../../animaUi/components/time-line/index", 4 | "TimeLineItem": "../../../animaUi/components/time-line/time-line-item/index" 5 | }, 6 | "navigationBarBackgroundColor": "#ffffff", 7 | "navigationBarTextStyle": "white" 8 | } 9 | -------------------------------------------------------------------------------- /tools/demo/pages/component/time-line/index.less: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main { 6 | .item { 7 | .box-bar { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, .1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, .1); 11 | } 12 | .time { 13 | font-size: 28rpx; 14 | font-weight: 700; 15 | margin: 0; 16 | } 17 | .content {} 18 | } 19 | } -------------------------------------------------------------------------------- /tools/demo/pages/component/time-line/index.wxss: -------------------------------------------------------------------------------- 1 | .scroll-page { 2 | background-color: var(--ghost-white); 3 | padding-bottom: 12rpx; 4 | } 5 | .main .item .box-bar { 6 | height: 100rpx; 7 | line-height: 100rpx; 8 | box-shadow: 0 14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1), 0 -14rpx 14rpx -14rpx rgba(0, 0, 0, 0.1); 9 | } 10 | .main .item .time { 11 | font-size: 28rpx; 12 | font-weight: 700; 13 | margin: 0; 14 | } 15 | -------------------------------------------------------------------------------- /tools/demo/pages/solution/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | // 获取应用实例 3 | const app = getApp(); 4 | const gradualColour = require('../../utils/gradual-colour'); 5 | Page({ 6 | data: { 7 | imgBaseUrl: app.imgBaseUrl, 8 | menuBar: app.globalData.menuBar, 9 | gradualColour, 10 | list: [{ 11 | icon: 'ani-icon-drawer', 12 | en: 'drawer', 13 | cn: '抽屉' 14 | }, 15 | { 16 | icon: 'ani-icon-animation', 17 | en: 'animation', 18 | cn: '动画' 19 | }, 20 | { 21 | icon: 'ani-icon-comic', 22 | en: 'comic', 23 | cn: '动漫' 24 | } 25 | ] 26 | }, 27 | onLoad() {}, 28 | onShareAppMessage() {}, 29 | onShow() {} 30 | }); -------------------------------------------------------------------------------- /tools/demo/pages/solution/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {}, 3 | "navigationBarBackgroundColor": "#ffffff", 4 | "navigationBarTextStyle": "white" 5 | } -------------------------------------------------------------------------------- /tools/demo/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [{ 5 | "type": "file", 6 | "value": "pages/**/*.less" 7 | }, 8 | { 9 | "type": "file", 10 | "value": "compenents/**/*.less" 11 | }, 12 | { 13 | "type": "file", 14 | "value": ".gitignore" 15 | }, 16 | { 17 | "type": "file", 18 | "value": "package.json" 19 | }, 20 | { 21 | "type": "file", 22 | "value": "package-lock.json" 23 | }, 24 | { 25 | "type": "file", 26 | "value": "README.json" 27 | }, 28 | { 29 | "type": "folder", 30 | "value": "node_modules" 31 | } 32 | ] 33 | }, 34 | "setting": { 35 | "urlCheck": true, 36 | "es6": true, 37 | "postcss": true, 38 | "minified": true, 39 | "newFeature": true, 40 | "nodeModules": true 41 | }, 42 | "compileType": "miniprogram", 43 | "libVersion": "2.10.2", 44 | "appid": "wxabc4a51d4df2d002", 45 | "projectname": "AnimaUI", 46 | "isGameTourist": false, 47 | "cloudfunctionRoot": "./cloud_function/", 48 | "condition": { 49 | "search": { 50 | "current": -1, 51 | "list": [] 52 | }, 53 | "conversation": { 54 | "current": -1, 55 | "list": [] 56 | }, 57 | "game": { 58 | "currentL": -1, 59 | "list": [] 60 | }, 61 | "miniprogram": { 62 | "current": -1, 63 | "list": [] 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /tools/demo/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /tools/demo/utils/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | imgBaseUrl: 'http://oos.animaui.com/mini/wechat/images' 3 | }; -------------------------------------------------------------------------------- /tools/demo/utils/gradual-colour.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'red', 3 | 'orange', 4 | 'yellow', 5 | 'olive', 6 | 'green', 7 | 'blue-green', 8 | 'cyan', 9 | 'sky-blue', 10 | 'blue', 11 | 'purple', 12 | 'light-purple', 13 | 'pink', 14 | 'mauve', 15 | 'brown', 16 | 'blue-grey' 17 | ]; -------------------------------------------------------------------------------- /tools/demo/utils/storage.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | setStorageSync: function(k, v, time) { 3 | var effTime = parseInt(Date.parse(new Date())) + 86400000 * time; //有效时期时间戳 4 | wx.setStorageSync(k, v ? v : effTime); 5 | }, 6 | openNotice: function() { 7 | this.setStorageSync('oldStorTime', '', 7); 8 | } 9 | }; -------------------------------------------------------------------------------- /tools/entry.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file: 组件 entery 3 | * @author: 花夏(huaxia@animaui.com) 4 | * @version: V1.0.0 5 | * @date: 2020-03-21 11:35:40 6 | */ 7 | const glob = require('glob'); 8 | // module.exports = ['components/custom-bar/index', 'components/tab-bar/index']; 9 | const getEntry = () => { 10 | // 匹配src目录下的所有文件夹中的js文件 11 | const globPath = 'src/components/**/*.js'; 12 | // (\/|\\\\) 这种写法是为了兼容 windows和 mac系统目录路径的不同写法 13 | /* eslint-disable no-useless-escape */ 14 | const pathDir = 'src(/|\\\\)(.*?)(/|\\\\)'; // 路径为src目录下的所有文件夹 15 | const files = glob.sync(globPath); 16 | const entries = []; 17 | const reg = new RegExp('^' + pathDir); 18 | for (let i = 0; i < files.length; i++) { 19 | entries.push('components/' + files[i].replace(reg, '$`').replace('.js', '')); 20 | } 21 | return entries; 22 | }; 23 | module.exports = getEntry(); --------------------------------------------------------------------------------