├── .babelrc ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── example ├── app.js ├── app.json ├── app.wxss ├── images │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── back_to_top.png │ ├── index.png │ ├── index_seled.png │ ├── jd-sprites.png │ ├── move.png │ ├── personal.png │ ├── personal_seled.png │ └── search.png ├── pages │ ├── avatar │ │ ├── avatar.js │ │ ├── avatar.json │ │ ├── avatar.wxml │ │ └── avatar.wxss │ ├── badge │ │ ├── badge.js │ │ ├── badge.json │ │ ├── badge.wxml │ │ └── badge.wxss │ ├── bottomBar │ │ ├── bottomBar.js │ │ ├── bottomBar.json │ │ ├── bottomBar.wxml │ │ └── bottomBar.wxss │ ├── button │ │ ├── button.js │ │ ├── button.json │ │ ├── button.wxml │ │ └── button.wxss │ ├── cell │ │ ├── cell.js │ │ ├── cell.json │ │ ├── cell.wxml │ │ └── cell.wxss │ ├── collapse │ │ ├── collapse.js │ │ ├── collapse.json │ │ ├── collapse.wxml │ │ └── collapse.wxss │ ├── countdown │ │ ├── countdown.js │ │ ├── countdown.json │ │ ├── countdown.wxml │ │ └── countdown.wxss │ ├── counter │ │ ├── counter.js │ │ ├── counter.json │ │ ├── counter.wxml │ │ └── counter.wxss │ ├── demos_ui │ │ ├── demos_ui.js │ │ ├── demos_ui.json │ │ ├── demos_ui.wxml │ │ └── demos_ui.wxss │ ├── dialog │ │ ├── dialog.js │ │ ├── dialog.json │ │ ├── dialog.wxml │ │ └── dialog.wxss │ ├── divider │ │ ├── divider.js │ │ ├── divider.json │ │ ├── divider.wxml │ │ └── divider.wxss │ ├── drag │ │ ├── drag.js │ │ ├── drag.json │ │ ├── drag.wxml │ │ └── drag.wxss │ ├── dropMenu │ │ ├── dropMenu.js │ │ ├── dropMenu.json │ │ ├── dropMenu.wxml │ │ └── dropMenu.wxss │ ├── elevator │ │ ├── elevator.js │ │ ├── elevator.json │ │ ├── elevator.wxml │ │ └── elevator.wxss │ ├── elip │ │ ├── elip.js │ │ ├── elip.json │ │ ├── elip.wxml │ │ └── elip.wxss │ ├── goTop │ │ ├── goTop.js │ │ ├── goTop.json │ │ ├── goTop.wxml │ │ └── goTop.wxss │ ├── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── infiniteScroll │ │ ├── infiniteScroll.js │ │ ├── infiniteScroll.json │ │ ├── infiniteScroll.wxml │ │ └── infiniteScroll.wxss │ ├── keyboard │ │ ├── keyboard.js │ │ ├── keyboard.json │ │ ├── keyboard.wxml │ │ └── keyboard.wxss │ ├── loading │ │ ├── loading.js │ │ ├── loading.json │ │ ├── loading.wxml │ │ └── loading.wxss │ ├── message │ │ ├── message.js │ │ ├── message.json │ │ ├── message.wxml │ │ └── message.wxss │ ├── mine │ │ ├── mine.js │ │ ├── mine.json │ │ ├── mine.wxml │ │ └── mine.wxss │ ├── notice │ │ ├── notice.js │ │ ├── notice.json │ │ ├── notice.wxml │ │ └── notice.wxss │ ├── page │ │ ├── page.js │ │ ├── page.json │ │ ├── page.wxml │ │ └── page.wxss │ ├── panel │ │ ├── panel.js │ │ ├── panel.json │ │ ├── panel.wxml │ │ └── panel.wxss │ ├── password │ │ ├── password.js │ │ ├── password.json │ │ ├── password.wxml │ │ └── password.wxss │ ├── popup │ │ ├── popup.js │ │ ├── popup.json │ │ ├── popup.wxml │ │ └── popup.wxss │ ├── price │ │ ├── price.js │ │ ├── price.json │ │ ├── price.wxml │ │ └── price.wxss │ ├── progress │ │ ├── progress.js │ │ ├── progress.json │ │ ├── progress.wxml │ │ └── progress.wxss │ ├── rate │ │ ├── rate.js │ │ ├── rate.json │ │ ├── rate.wxml │ │ └── rate.wxss │ ├── stickyHeader │ │ ├── stickyHeader.js │ │ ├── stickyHeader.json │ │ ├── stickyHeader.wxml │ │ └── stickyHeader.wxss │ ├── swipeAction │ │ ├── swipeAction.js │ │ ├── swipeAction.json │ │ ├── swipeAction.wxml │ │ └── swipeAction.wxss │ ├── switch │ │ ├── switch.js │ │ ├── switch.json │ │ ├── switch.wxml │ │ └── switch.wxss │ └── tab │ │ ├── tab.js │ │ ├── tab.json │ │ ├── tab.wxml │ │ └── tab.wxss ├── project.config.json └── sitemap.json ├── gulpfile.js ├── package.json ├── src ├── avatar │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── badge │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── bottomBar │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── button │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── cell │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── collapse │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── countdown │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── counter │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── dialog │ ├── index.json │ ├── index.ts │ ├── index.wxml │ └── index.wxss ├── divider │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── drag │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── dragTemp │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── dropMenu │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── elevator │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── elip │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── goTop │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── infiniteScroll │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── keyboard │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── loading │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── message │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── notice │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── panel │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── password │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── popup │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── price │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── progress │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── rate │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── stickyHeader │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── swipeAction │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── switch │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── tab │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── tools ├── build.js ├── checkcomponents.js ├── config.js └── utils.js ├── tsconfig.json ├── typings ├── index.d.ts ├── lib.wa.es6.d.ts └── wx │ ├── index.d.ts │ ├── lib.wx.api.d.ts │ ├── lib.wx.app.d.ts │ ├── lib.wx.cloud.d.ts │ ├── lib.wx.component.d.ts │ └── lib.wx.page.d.ts └── 开发手册.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | ["module-resolver", { 4 | "root": ["./src"], 5 | "alias": {} 6 | }] 7 | ], 8 | "presets": [ 9 | ["env", {"loose": true, "modules": "commonjs"}] 10 | ] 11 | } -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["airbnb-base", "plugin:promise/recommended"], 3 | parserOptions: { 4 | ecmaVersion: 9, 5 | ecmaFeatures: { 6 | jsx: false 7 | }, 8 | sourceType: "module" 9 | }, 10 | env: { 11 | es6: true, 12 | node: true, 13 | jest: true 14 | }, 15 | plugins: ["import", "node", "promise"], 16 | rules: { 17 | "arrow-parens": "off", 18 | "comma-dangle": ["error", "only-multiline"], 19 | complexity: ["error", 10], 20 | "func-names": "off", 21 | "global-require": "off", 22 | "handle-callback-err": ["error", "^(err|error)$"], 23 | "import/no-unresolved": [ 24 | "error", 25 | { 26 | caseSensitive: true, 27 | commonjs: true, 28 | ignore: ["^[^.]"] 29 | } 30 | ], 31 | "import/prefer-default-export": "off", 32 | "linebreak-style": "off", 33 | "no-catch-shadow": "error", 34 | "no-continue": "off", 35 | "no-div-regex": "warn", 36 | "no-else-return": "off", 37 | "no-param-reassign": "off", 38 | "no-plusplus": "off", 39 | "no-shadow": "off", 40 | "no-multi-assign": "off", 41 | "no-underscore-dangle": "off", 42 | "node/no-deprecated-api": "error", 43 | "node/process-exit-as-throw": "error", 44 | "object-curly-spacing": ["error", "never"], 45 | "operator-linebreak": [ 46 | "error", 47 | "after", 48 | { 49 | overrides: { 50 | ":": "before", 51 | "?": "before" 52 | } 53 | } 54 | ], 55 | "prefer-arrow-callback": "off", 56 | "prefer-destructuring": "off", 57 | "prefer-template": "off", 58 | "quote-props": [ 59 | 1, 60 | "as-needed", 61 | { 62 | unnecessary: true 63 | } 64 | ], 65 | semi: ["error", "never"] 66 | }, 67 | globals: { 68 | window: true, 69 | document: true, 70 | App: true, 71 | Page: true, 72 | Component: true, 73 | Behavior: true, 74 | wx: true, 75 | getCurrentPages: true 76 | } 77 | }; 78 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | miniprogram_dist 3 | miniprogram_dev 4 | node_modules 5 | coverage 6 | example/components 7 | package-lock.json -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | package-lock.json 4 | 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | test 12 | tools 13 | miniprogram_dev 14 | node_modules 15 | example 16 | typings 17 | 开发手册.md 18 | tsconfig.json 19 | src -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 codeww 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 一、组件库使用说明 2 | 3 | （1）安装： 4 | 5 | ``` 6 | npm install @jdcfe/yep-mp-com 7 | 或者(指定 npm 源) 8 | npm install @jdcfe/yep-mp-com --registry=https://registry.npmjs.org/ 9 | ``` 10 | 11 | （2）构建: 12 | 13 | 在小程序开发工具里，打开当前要引用组件库的项目，点击“工具”->“构建 npm”，构建完毕后，在文件夹中会出现“miniprogram_npm”文件夹，则表示构建成功。 14 | 15 | （3）使用(详细请参看说明文档): 16 | 17 | 在相应页面的 .json 文件中引入次组件，以 dialog 弹框组件为例： 18 | 19 | ``` 20 | { 21 | "usingComponents": { 22 | "dialog":"@jdcfe/yep-mp-com/dialog" 23 | } 24 | } 25 | ``` 26 | 27 | ### 二、说明文档 28 | 29 | **http://yep-mp.jd.com** 30 | 31 | ![](https://img13.360buyimg.com/imagetools/jfs/t1/42279/5/10568/69342/5d3fa408Eb69c4270/eb6c6e3717cc6d00.png) 32 | 33 | ### 三、小程序 demo 示例 34 | 35 | 微信搜索 **YepMP** 小程序 36 | 37 | ![](https://img14.360buyimg.com/imagetools/jfs/t1/78606/20/5883/45474/5d3fa3afEa3dbc35b/f631c9b98948c72f.jpg) 38 | -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch(options) { 3 | // 调用API从本地缓存中获取数据 4 | const logs = wx.getStorageSync("logs") || []; 5 | logs.unshift(Date.now()); 6 | wx.setStorageSync("logs", logs); 7 | }, 8 | 9 | onShow(options) { 10 | console.log("app onShow", options); 11 | this.globalData.shareTicket = options.shareTicket; 12 | }, 13 | 14 | getUserInfo(cb) { 15 | const that = this; 16 | if (this.globalData.userInfo) { 17 | typeof cb === "function" && cb(this.globalData.userInfo); 18 | } else { 19 | // 调用登录接口 20 | wx.getUserInfo({ 21 | withCredentials: false, 22 | success(res) { 23 | that.globalData.userInfo = res.userInfo; 24 | typeof cb === "function" && cb(that.globalData.userInfo); 25 | } 26 | }); 27 | } 28 | }, 29 | 30 | globalData: { 31 | userInfo: null, 32 | shareTicket: "" 33 | } 34 | }); 35 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/mine/mine", 5 | "pages/avatar/avatar", 6 | "pages/badge/badge", 7 | "pages/bottomBar/bottomBar", 8 | "pages/button/button", 9 | "pages/collapse/collapse", 10 | "pages/countdown/countdown", 11 | "pages/counter/counter", 12 | "pages/demos_ui/demos_ui", 13 | "pages/dialog/dialog", 14 | "pages/drag/drag", 15 | "pages/elevator/elevator", 16 | "pages/goTop/goTop", 17 | "pages/infiniteScroll/infiniteScroll", 18 | "pages/keyboard/keyboard", 19 | "pages/loading/loading", 20 | "pages/message/message", 21 | "pages/notice/notice", 22 | "pages/popup/popup", 23 | "pages/price/price", 24 | "pages/password/password", 25 | "pages/rate/rate", 26 | "pages/stickyHeader/stickyHeader", 27 | "pages/swipeAction/swipeAction", 28 | "pages/switch/switch", 29 | "pages/tab/tab", 30 | "pages/cell/cell", 31 | "pages/dropMenu/dropMenu", 32 | "pages/elip/elip", 33 | "pages/panel/panel", 34 | "pages/divider/divider", 35 | "pages/progress/progress", 36 | "pages/page/page" 37 | ], 38 | "window": { 39 | "backgroundTextStyle": "light", 40 | "navigationBarBackgroundColor": "#f9f9f9", 41 | "navigationBarTitleText": "WeChat", 42 | "navigationBarTextStyle": "black" 43 | }, 44 | "tabBar": { 45 | "color": "#333333", 46 | "selectedColor": "#f04848", 47 | "backgroundColor": "#ffffff", 48 | "borderStyle": "black", 49 | "list": [ 50 | { 51 | "pagePath": "pages/index/index", 52 | "text": "首页", 53 | "iconPath": "images/index.png", 54 | "selectedIconPath": "images/index_seled.png" 55 | }, 56 | { 57 | "pagePath": "pages/mine/mine", 58 | "text": "关于我们", 59 | "iconPath": "images/personal.png", 60 | "selectedIconPath": "images/personal_seled.png" 61 | } 62 | ], 63 | "position": "bottom" 64 | }, 65 | "sitemapLocation": "sitemap.json" 66 | } -------------------------------------------------------------------------------- /example/app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | page{ 3 | background-color: #f9f9f9; 4 | } 5 | .container { 6 | padding: 20rpx; 7 | font-size: 24rpx; 8 | } 9 | 10 | .content-body{ 11 | padding: 10rpx 20rpx; 12 | } 13 | 14 | .tip{ 15 | padding: 20rpx; 16 | font-size: 28rpx; 17 | margin-bottom: 20rpx; 18 | } 19 | 20 | .tip .title{ 21 | font-size: 36rpx; 22 | font-weight: 600; 23 | } 24 | 25 | .tip .content{ 26 | white-space: pre-wrap; 27 | text-align: left; 28 | } 29 | 30 | 31 | .box { 32 | margin-bottom: 20rpx; 33 | padding: 20rpx; 34 | /*border: 1rpx solid #ddd;*/ 35 | border-radius: 10rpx; 36 | background-color: #FFF; 37 | } 38 | 39 | .box .title{ 40 | font-size: 28rpx; 41 | font-weight: 600; 42 | line-height: 50rpx; 43 | border-bottom: 1rpx solid #f1f1f1; 44 | margin-bottom: 20rpx; 45 | } 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /example/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/1.png -------------------------------------------------------------------------------- /example/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/2.png -------------------------------------------------------------------------------- /example/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/3.png -------------------------------------------------------------------------------- /example/images/back_to_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/back_to_top.png -------------------------------------------------------------------------------- /example/images/index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/index.png -------------------------------------------------------------------------------- /example/images/index_seled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/index_seled.png -------------------------------------------------------------------------------- /example/images/jd-sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/jd-sprites.png -------------------------------------------------------------------------------- /example/images/move.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/move.png -------------------------------------------------------------------------------- /example/images/personal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/personal.png -------------------------------------------------------------------------------- /example/images/personal_seled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/personal_seled.png -------------------------------------------------------------------------------- /example/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/images/search.png -------------------------------------------------------------------------------- /example/pages/avatar/avatar.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | } 4 | }); -------------------------------------------------------------------------------- /example/pages/avatar/avatar.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "Avatar", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yep-avatar": "../../components/avatar/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/avatar/avatar.wxss: -------------------------------------------------------------------------------- 1 | .box-body{ 2 | display: flex; 3 | justify-content: flex-start; 4 | } 5 | 6 | .box-body-item{ 7 | margin-right: 30rpx; 8 | } 9 | -------------------------------------------------------------------------------- /example/pages/badge/badge.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | } 4 | }); -------------------------------------------------------------------------------- /example/pages/badge/badge.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "Badge", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yepBadge": "../../components/badge/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/badge/badge.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Badge 徽标 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 | 57 | 58 | 59 | 60 | 独立使用的徽标 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /example/pages/badge/badge.wxss: -------------------------------------------------------------------------------- 1 | .box-body{ 2 | display: flex; 3 | justify-content: flex-start; 4 | } 5 | 6 | .box-body-item{ 7 | display: flex; 8 | flex: 1; 9 | align-items: center; 10 | font-size: 24rpx; 11 | } 12 | 13 | .box-body-item image{ 14 | width: 100rpx; 15 | height: 100rpx; 16 | } 17 | 18 | .my-cls{ 19 | width: 100rpx; 20 | height: 100rpx; 21 | text-align: center; 22 | line-height: 100rpx; 23 | background-color: #ccc; 24 | border-radius: 20rpx; 25 | } 26 | 27 | .my-badge .my-badge-msg-coupon{ 28 | background-color: rgb(241, 151, 54); 29 | border-radius: 4rpx; 30 | padding: 0 6rpx; 31 | } 32 | 33 | .my-badge .my-badge-msg-tip{ 34 | background-color: #F94c00; 35 | border-radius: 4rpx; 36 | padding: 0 6rpx; 37 | } 38 | .my-badge .my-badge-msg-new{ 39 | height: 22rpx; 40 | width: 48rpx; 41 | line-height: 18rpx; 42 | background-color: #e4393c; 43 | border-radius: 2rpx; 44 | padding: 0 4rpx; 45 | } 46 | .my-badge .my-badge-msg-btn{ 47 | background-color: #FFF; 48 | border: 1rpx solid rgb(241, 151, 54); 49 | color: rgb(241, 151, 54); 50 | border-radius: 4rpx; 51 | padding: 0 6rpx; 52 | } 53 | .my-badge .rec{ 54 | border-radius: 0; 55 | } 56 | 57 | -------------------------------------------------------------------------------- /example/pages/bottomBar/bottomBar.js: -------------------------------------------------------------------------------- 1 | // pages/bottomBar/bottomBar.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /example/pages/bottomBar/bottomBar.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "BottomBar", 3 | "usingComponents": { 4 | "bottom-bar": "../../components/bottomBar/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/bottomBar/bottomBar.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 可以是tabbar/功能栏，兼容iPhoneX 6 | 7 | -------------------------------------------------------------------------------- /example/pages/bottomBar/bottomBar.wxss: -------------------------------------------------------------------------------- 1 | /* pages/bottomBar/bottomBar.wxss */ -------------------------------------------------------------------------------- /example/pages/button/button.js: -------------------------------------------------------------------------------- 1 | // var WXBizDataCrypt = require('../../utils/WXBizDataCrypt') 2 | 3 | //获取应用实例 4 | var app = getApp(); 5 | Page({ 6 | data: { 7 | 8 | }, 9 | onMyEvent: function (e) { 10 | console.log('butten onMyEvent', e); 11 | }, 12 | onGotUserInfo: function (e) { 13 | console.log('onGotUserInfo', e); 14 | }, 15 | onGetPhoneNum: function (e) { 16 | console.log('onGetPhoneNum', e); 17 | }, 18 | onLaunchApp: function (e) { 19 | console.log('onLaunchApp', e); 20 | }, 21 | onOpenSetting: function (e) { 22 | console.log('onOpenSetting', e); 23 | } 24 | }); -------------------------------------------------------------------------------- /example/pages/button/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "Button", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yepButton": "../../components/button/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/button/button.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Button 按钮 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 小尺寸的各类图标 14 | 按这里 15 | 你好 16 | 按钮 17 | 18 | 透明的 19 | 20 | 21 | 22 | 23 | 中尺寸的各类图标 24 | ok 25 | 确认 26 | 知道了 27 | 28 | 取消 29 | 30 | 31 | 32 | 33 | 大尺寸的各类图标 34 | 好的 35 | 再看看 36 | 看一看 37 | 38 | 去绑定 39 | 40 | 41 | 42 | 43 | 自定义图标 44 | type=search搜索 45 | 46 | 47 | 自定义图标搜索 48 | 49 | 50 | -------------------------------------------------------------------------------- /example/pages/button/button.wxss: -------------------------------------------------------------------------------- 1 | /**loadmore.wxss**/ 2 | 3 | yepButton{ 4 | margin: 10rpx 5rpx; 5 | } 6 | 7 | .icon{ 8 | display: inline-block; 9 | width: 32rpx; 10 | height: 32rpx; 11 | vertical-align: middle; 12 | margin-right: 10rpx; 13 | background-image: url('http://img11.360buyimg.com/uba/jfs/t24649/2/2684526444/453/688f845d/5bed2a70Nf4033c58.png'); 14 | background-repeat: no-repeat; 15 | background-size: 32rpx 32rpx; 16 | } 17 | 18 | .txt{ 19 | display: inline-block; 20 | vertical-align: middle; 21 | } -------------------------------------------------------------------------------- /example/pages/cell/cell.js: -------------------------------------------------------------------------------- 1 | // pages/cell/cell.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | boxType: 'input' 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad() { 15 | 16 | }, 17 | }) 18 | -------------------------------------------------------------------------------- /example/pages/cell/cell.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "cell", 3 | "usingComponents": { 4 | "cell":"../../components/cell/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/cell/cell.wxml: -------------------------------------------------------------------------------- 1 | 2 |
只有标题：
3 | 4 |
标题与描述：
5 | 6 |
标题与子标题：
7 | 8 |
自定义右侧内容：
9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /example/pages/cell/cell.wxss: -------------------------------------------------------------------------------- 1 | .cell-title{ 2 | font-size: 28rpx; 3 | margin-left:32rpx; 4 | } -------------------------------------------------------------------------------- /example/pages/collapse/collapse.js: -------------------------------------------------------------------------------- 1 | // pages/dialog/dialog.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | boxType: 'input', 9 | itemList:[{ 10 | title:"李白", 11 | content:'李白（701年－762年）[1]，字太白，号青莲居士，中国唐朝诗人，自言祖籍陇西成纪（今甘肃省天水市秦安县），先世西凉武昭王李嵩之后，与李唐皇室同宗。幼时内迁，寄籍剑南道绵州（今四川省江油昌隆县）。另郭沫若考证李白出生于吉尔吉斯碎叶河上的碎叶城，属唐安西都护府（今楚河州托克马克市）[2]。有“诗仙”、“诗侠”、“酒仙”、“谪仙人”等称呼，活跃于盛唐[3]，为杰出的浪漫主义诗人。与杜甫合称“李杜”[4]。被贺知章惊呼为“天上谪仙”' 12 | },{ 13 | title:"杜甫", 14 | content:'杜甫（712年2月12日－770年），字子美，号少陵野老，一号杜陵野客、杜陵布衣，唐朝现实主义诗人，其著作以弘大的社会写实著称。杜甫家族出于京兆杜氏的分支，唐朝时京兆杜氏都多自称为杜陵人，所以杜甫晚号杜陵。因其曾任左拾遗、检校工部员外郎，因此后世称其杜拾遗、杜工部；又称杜少陵、杜草堂（曾隐居于成都杜甫草堂）' 15 | },{ 16 | title:"李商隐", 17 | content:'李商隐（813年1—约858年），字义山，号玉谿生、樊南生。晚唐诗人，祖籍陇西狄道（今甘肃省临洮县），祖辈迁荥阳（今河南郑州）。诗作文学价值很高，他和杜牧合称“小李杜”，与温庭筠合称为“温李”，与同时期的段成式、温庭筠风格相近，且都在家族里排行十六，故并称为三十六体。在《唐诗三百首》中，李商隐的诗作占廿二首，数量位列第四' 18 | },{ 19 | title:"白居易", 20 | content:'白居易（772年2月28日－846年9月8日）[2]，字乐天，晚号香山居士、醉吟先生，在诗界有广大教化主的称号。祖籍山西太原，生于河南新郑，唐代文学家，文章精切，特别擅长写诗，是中唐最具代表性的诗人之一。作品平易近人，乃至于有“老妪能解”的说法' 21 | }] 22 | }, 23 | 24 | /** 25 | * 生命周期函数--监听页面加载 26 | */ 27 | onLoad() { 28 | 29 | }, 30 | /** 31 | * 手风琴选择 32 | */ 33 | accordion:function(e){ 34 | let _this = this; 35 | const curIndex = e.currentTarget.dataset.index; 36 | this.data.itemList.map((item,index)=>{ 37 | if(index !== curIndex){ 38 | _this.selectComponent("#collapse_"+index).closeInfo(); 39 | } 40 | }) 41 | } 42 | }) 43 | -------------------------------------------------------------------------------- /example/pages/collapse/collapse.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "折叠组件", 3 | "usingComponents": { 4 | "collapse":"../../components/collapse/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/collapse/collapse.wxml: -------------------------------------------------------------------------------- 1 | 2 | 单列表项: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 多列表: 13 | 14 | {{item.content}} 15 | 16 | 17 | 18 | 多列表-手风琴: 19 | 20 | {{item.content}} 21 | 22 | -------------------------------------------------------------------------------- /example/pages/collapse/collapse.wxss: -------------------------------------------------------------------------------- 1 | .imglist{ 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-around; 5 | } 6 | .collapse{ 7 | font-size: 30rpx; 8 | margin-top:50rpx; 9 | margin-bottom: 5rpx; 10 | } 11 | .list-img{ 12 | width: 100rpx; 13 | height: 100rpx; 14 | } 15 | 16 | .item-content{ 17 | font-size: 24rpx; 18 | color: #666; 19 | background-color: #fff; 20 | text-indent: 2em; 21 | } -------------------------------------------------------------------------------- /example/pages/countdown/countdown.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | myStatus: 'ing' 4 | }, 5 | 6 | cb(){ 7 | this.setData({ 8 | myStatus: 'end' 9 | }) 10 | console.log('ok') 11 | } 12 | }) -------------------------------------------------------------------------------- /example/pages/countdown/countdown.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "Countdown", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yepCountdown": "../../components/countdown/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/countdown/countdown.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CountDown 倒计时 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 | 36 | 37 | 38 | 39 | 40 | 41 | 展示中文倒计时 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 展示中文倒计时：自定义样式 51 | 52 | 53 | 56 | 57 | 58 | 59 | 60 | 61 | 展示中文倒计时 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 展示中文倒计时 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 展示中文倒计时 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 倒计时回调 89 | 90 | 91 | 92 | 倒计时：{{myStatus}} 93 | 94 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /example/pages/countdown/countdown.wxss: -------------------------------------------------------------------------------- 1 | 2 | .my-countdown{ 3 | font-size: 24rpx; 4 | color: #3CB371; 5 | } 6 | .my-countdown-item{ 7 | padding: 4rpx 8rpx; 8 | background-color: #ccc; 9 | color: #FFF; 10 | border-radius: 4rpx; 11 | } 12 | 13 | .my-countdown-colon{ 14 | margin: 0 8rpx; 15 | } 16 | -------------------------------------------------------------------------------- /example/pages/counter/counter.js: -------------------------------------------------------------------------------- 1 | // pages/dialog/dialog.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | boxType: 'input' 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad() { 15 | 16 | }, 17 | /** 18 | * 展示pop 19 | */ 20 | showPop:function(e){ 21 | let type = e.target.dataset.type; 22 | switch(type){ 23 | case 'center': 24 | this.selectComponent("#center").togglePop(); 25 | break; 26 | case 'top': 27 | this.selectComponent("#top").togglePop(); 28 | break; 29 | case 'bottom': 30 | this.selectComponent("#bottom").togglePop(); 31 | break; 32 | case 'right': 33 | this.selectComponent("#right").togglePop(); 34 | break; 35 | } 36 | } 37 | }) 38 | -------------------------------------------------------------------------------- /example/pages/counter/counter.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "counter计数器", 3 | "usingComponents": { 4 | "counter":"../../components/counter/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/counter/counter.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 标准计数器 4 | 5 | 6 | 7 | 设定最大最小值（1-5） 8 | 9 | 10 | 11 | 步幅设定（2） 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /example/pages/counter/counter.wxss: -------------------------------------------------------------------------------- 1 | .item{ 2 | font-size: 30rpx; 3 | margin-top:80rpx; 4 | margin-left:40rpx; 5 | } -------------------------------------------------------------------------------- /example/pages/demos_ui/demos_ui.js: -------------------------------------------------------------------------------- 1 | // var WXBizDataCrypt = require('../../utils/WXBizDataCrypt') 2 | 3 | Page({ 4 | data: { 5 | pageList: { 6 | showButton: '../button/button', 7 | showAvatar: '../avatar/avatar', 8 | showBadge: '../badge/badge', 9 | showPrice: '../price/price', 10 | showLoading: '../loading/loading', 11 | showNotice: '../notice/notice', 12 | showCountdown: '../countdown/countdown', 13 | showInfiniteScroll: '../infiniteScroll/infiniteScroll', 14 | showTab: '../tab/tab', 15 | showGoTop: '../goTop/goTop', 16 | showBottomBar: '../bottomBar/bottomBar', 17 | showStickyHeader: '../stickyHeader/stickyHeader', 18 | showElevator: '../elevator/elevator', 19 | showSwipeAction: '../swipeAction/swipeAction', 20 | showRate: '../rate/rate', 21 | showModelDialog: '../dialog/dialog', 22 | showPopup: '../popup/popup', 23 | showSwitch: '../switch/switch', 24 | showMask: '../mask/mask', 25 | showSwiper: '../swiper/swiper', 26 | showDrag: '../drag/drag', 27 | showCounter:'../counter/counter', 28 | showCollapse:'../collapse/collapse', 29 | showKeyboard: '../keyboard/keyboard', 30 | showSearch: '../searchbar/searchbar', 31 | showCoupon: '../coupon/coupon', 32 | showMessage:'../message/message', 33 | showCell:'../cell/cell', 34 | showDrapMenu:'../dropMenu/dropMenu', 35 | showElip:'../elip/elip', 36 | showPassword:'../password/password', 37 | showPanel:"../panel/panel", 38 | showDivider:"../divider/divider", 39 | showProgress:"../progress/progress", 40 | showPage:"../page/page" 41 | } 42 | }, 43 | showPage(event) { 44 | const title = event.currentTarget.dataset.title 45 | wx.navigateTo({ 46 | url: this.data.pageList[title] 47 | }) 48 | } 49 | }) 50 | -------------------------------------------------------------------------------- /example/pages/demos_ui/demos_ui.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTextStyle": "black", 3 | "navigationBarTitleText": "YepUI", 4 | "backgroundColor": "#eeeeee", 5 | "backgroundTextStyle": "light" 6 | } -------------------------------------------------------------------------------- /example/pages/demos_ui/demos_ui.wxss: -------------------------------------------------------------------------------- 1 | /**uidemos.wxss**/ 2 | 3 | .view-box{ 4 | height: auto; 5 | line-height: 40rpx; 6 | margin-bottom: 60rpx; 7 | font-size: 28rpx; 8 | color: #333; 9 | } 10 | 11 | .item{ 12 | background-color: #FFFFFF; 13 | position: relative; 14 | height: 90rpx; 15 | line-height: 90rpx; 16 | padding: 0 30rpx 0 40rpx; 17 | border-bottom: 1rpx solid #efefef; 18 | color: #ddd; 19 | display: flex; 20 | align-items: center; 21 | justify-content: space-between; 22 | } 23 | 24 | .item-ok{ 25 | color: #000; 26 | } 27 | 28 | .item-ing{ 29 | color: #999; 30 | } 31 | 32 | .item-todo{ 33 | /*display: none;*/ 34 | } 35 | 36 | .title{ 37 | display: flex; 38 | justify-content: space-between; 39 | align-items: center; 40 | height: 120rpx; 41 | line-height: 120rpx; 42 | font-size: 30rpx; 43 | font-weight: 600; 44 | padding: 0 30rpx 0 40rpx; 45 | } 46 | 47 | .title image{ 48 | width: 40rpx; 49 | height: 40rpx; 50 | } 51 | 52 | .item .name{ 53 | width: 360rpx; 54 | } 55 | 56 | .item image{ 57 | width: 30rpx; 58 | height: 30rpx; 59 | background: url("http://img20.360buyimg.com/uba/jfs/t28903/76/216734276/364/57d4f9dd/5bf67a45Ne47b0c2c.png") no-repeat; 60 | background-size: 30rpx 30rpx; 61 | } 62 | 63 | .developer{ 64 | display:none; 65 | } 66 | 67 | .status{ 68 | /* display: none; */ 69 | font-size: 20rpx; 70 | height: 30rpx; 71 | line-height: 30rpx; 72 | border: 1rpx solid #efefef; 73 | padding: 0 10rpx; 74 | margin-right: 20rpx; 75 | } 76 | 77 | .status-ing{ 78 | display: block; 79 | } 80 | 81 | .status-tobeok{ 82 | display: block; 83 | background-color: #1890ff; 84 | color: #FFF; 85 | } 86 | .status-ok{ 87 | display: block; 88 | background-color: #1AAC19; 89 | color: #FFF; 90 | } 91 | 92 | .deadline{ 93 | width: 80rpx; 94 | font-size: 22rpx; 95 | } 96 | 97 | .developer{ 98 | position: absolute; 99 | right: 10rpx; 100 | top: 0; 101 | font-size: 22rpx; 102 | } 103 | 104 | button{ 105 | float: left; 106 | width: 200rpx; 107 | height: 60rpx; 108 | margin: 10rpx; 109 | } 110 | -------------------------------------------------------------------------------- /example/pages/dialog/dialog.js: -------------------------------------------------------------------------------- 1 | // pages/dialog/dialog.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | boxType: 'input' 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad() { 15 | 16 | }, 17 | /** 18 | * 展示弹框 19 | */ 20 | toggleDialog(e) { 21 | const id = '#dialogBox' + e.target.dataset.index 22 | this.dialogBox = this.selectComponent(id) 23 | this.dialogBox.toggle(false) 24 | }, 25 | // 确认事件 26 | _dialogConfirm() { 27 | console.info('_dialogConfirm event trggle') 28 | this.dialogBox.toggle(true) 29 | }, 30 | // 取消事件 31 | _dialogCancel() { 32 | console.info('_dialogConfirm event trggle') 33 | } 34 | }) 35 | -------------------------------------------------------------------------------- /example/pages/dialog/dialog.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "ModalDialog", 3 | "usingComponents": { 4 | "dialog":"../../components/dialog/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/dialog/dialog.wxss: -------------------------------------------------------------------------------- 1 | /* pages/dialog/dialog.wxss */ 2 | .btn-item{ 3 | width:100%; 4 | border-radius:10rpx; 5 | height:100rpx; 6 | background-color:#ddd; 7 | color:#fff; 8 | margin-top:30rpx; 9 | line-height:100rpx; 10 | text-align:center; 11 | } 12 | /*demo1*/ 13 | .box1-first-btn{ 14 | color:red; 15 | } 16 | /*demo2*/ 17 | .input-con{ 18 | margin-left:50%; 19 | transform:translateX(-50%); 20 | width:490rpx; 21 | height:90rpx; 22 | border:1px solid #999999; 23 | text-align:center; 24 | } 25 | /*demo3*/ 26 | .box3-first-btn{ 27 | color:#909cb3; 28 | } 29 | .secondBtn{ 30 | color:#448aff; 31 | background-color:#fff; 32 | border-bottom-right-radius:20rpx; 33 | } 34 | 35 | 36 | /*demo5*/ 37 | .block{ 38 | width:100%; 39 | height:1rpx; 40 | } 41 | .box6-first-btn{ 42 | background-color:red; 43 | color:#fff; 44 | border-bottom-left-radius:20rpx; 45 | border-bottom-right-radius:20rpx; 46 | } 47 | .dialog5_cancle{ 48 | color:#909cb3; 49 | } 50 | .dialog5_confirm{ 51 | color:#448aff; 52 | background-color:#fff; 53 | border-bottom-right-radius:20rpx; 54 | } 55 | /*demo6*/ 56 | .cont-main{ 57 | box-sizing:border-box; 58 | width:100%; 59 | padding:0 20rpx 0 20rpx; 60 | } 61 | .cont-top{ 62 | display:flex; 63 | flex-direction:column; 64 | flex-wrap:nowrap; 65 | } 66 | .cont-top-item{ 67 | width:100%; 68 | font-size:28rpx; 69 | line-height:40rpx; 70 | height:40rpx; 71 | } 72 | .cont-top-item-left{ 73 | width:35%; 74 | float:left; 75 | } 76 | .cont-top-item-right{ 77 | float:left; 78 | } 79 | .cont-top-line{ 80 | width:100%; 81 | height:1px; 82 | background-color:#eee; 83 | margin-top:10rpx; 84 | margin-bottom:50rpx; 85 | } 86 | .cont-bottom{ 87 | font-size:28rpx; 88 | } 89 | /*demo7*/ 90 | .cont-info{ 91 | font-size:28rpx; 92 | } 93 | .cont-btn{ 94 | margin-top:40rpx; 95 | font-size:26rpx; 96 | width:200rpx; 97 | height:60rpx; 98 | background:#f6cb46; 99 | line-height:60rpx; 100 | border-radius:8rpx; 101 | margin-left:185rpx; 102 | } 103 | /*demo8*/ 104 | .cont-btn-item{ 105 | width:200rpx; 106 | height:90rpx; 107 | line-height:95rpx; 108 | text-align:center; 109 | font-size:26rpx; 110 | color:#fff; 111 | background-color:#e45469; 112 | } 113 | .cont-close{ 114 | position:absolute; 115 | top:-420rpx; 116 | right:-10rpx; 117 | width:40rpx; 118 | height:40rpx; 119 | background-color:red; 120 | } 121 | .cont-btn-list{ 122 | box-sizing:border-box; 123 | padding:0 40rpx; 124 | display:flex; 125 | flex-direction:row; 126 | justify-content: space-around; 127 | align-item:center; 128 | } -------------------------------------------------------------------------------- /example/pages/divider/divider.js: -------------------------------------------------------------------------------- 1 | // pages/divider/divider.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /example/pages/divider/divider.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Divider 分隔符", 3 | "usingComponents": { 4 | "yep-divider": "../../components/divider/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/divider/divider.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 基本用法 4 | 注: 如果同时存在slot和传递内容两个参数只有传递参数content生效 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 | -------------------------------------------------------------------------------- /example/pages/divider/divider.wxss: -------------------------------------------------------------------------------- 1 | /* pages/divider/divider.wxss */ 2 | .yep-divider-demo,page{ 3 | width:100%; 4 | height:100%; 5 | background:#fff; 6 | } 7 | .yep-divider-mart{ 8 | 9 | } 10 | .one-tag{ 11 | font-size:14px; 12 | margin:30px 20px 0 20px; 13 | } 14 | .yep-divider-demo-des{ 15 | padding:0 20px; 16 | margin-top:5px; 17 | font-size:12px; 18 | color:#ff9900; 19 | } -------------------------------------------------------------------------------- /example/pages/drag/drag.js: -------------------------------------------------------------------------------- 1 | // 拖拽实例页面 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | items:[{ 9 | name:'腾讯传（1998-2016）', 10 | desc:'中国互联网发展史，荡气回肠，值得品味。对创业者也很有启发。', 11 | image:'https://img12.360buyimg.com/n7/jfs/t3946/50/446886753/186144/18672b2c/584fb368Nb5005598.jpg!q50.jpg', 12 | id:1001 13 | },{ 14 | name: '文学名家名著：史蒂夫·乔布斯传', 15 | desc: '漫漫冬日，读书相伴。', 16 | image: 'https://img12.360buyimg.com/n7/jfs/t5635/11/1977127270/601721/21a50175/592bf165N13d3930f.jpg!q50.jpg', 17 | id: 1002 18 | }, { 19 | name: '乔纳森传', 20 | desc: '比乔布斯传更震撼，真正懂得了设计改变一个公司，合作的真正意义', 21 | image: 'https://img12.360buyimg.com/n7/jfs/t1234/127/18857706/554566/4a6e2ce2/54e19ed3N9efd7a4a.jpg!q50.jpg', 22 | id: 1003 23 | }, { 24 | name: '变革中国：市场经济的中国之路', 25 | desc: '自由思想启蒙之作，当年在地铁十三号线上读完的，如醍醐灌顶。', 26 | image: 'https://img12.360buyimg.com/n7/g8/M01/10/0F/rBEHaFDGm10IAAAAAADVhEsRHzMAADN6APTXh0AANWc874.jpg', 27 | id: 1004 28 | }] 29 | }, 30 | /** 31 | * 生命周期函数--监听页面显示 32 | */ 33 | onShow: function () { 34 | }, 35 | 36 | /** 37 | * 用户点击右上角分享 38 | */ 39 | onShareAppMessage: function () { 40 | 41 | } 42 | }) -------------------------------------------------------------------------------- /example/pages/drag/drag.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "拖拽组件", 3 | "usingComponents": { 4 | "drag": "../../components/drag/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/drag/drag.wxml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 拖拽组件实例如下： 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example/pages/drag/drag.wxss: -------------------------------------------------------------------------------- 1 | /* pages/drag/drag.wxss */ 2 | .drag-title{ 3 | font-size: 32rpx; 4 | margin-bottom: 40rpx; 5 | } -------------------------------------------------------------------------------- /example/pages/dropMenu/dropMenu.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | dropMenuData:[ 4 | {val: '苹果', isSel: false}, 5 | {val: '橘子', isSel: false}, 6 | {val: '香蕉', isSel: false} 7 | ], 8 | labelTxt: "水果：", 9 | selVal: '请选择类型', 10 | isDropMenu: true, 11 | curIndex: null 12 | }, 13 | isDropDownShow: function (e) { 14 | let self = this; 15 | setTimeout(function () { 16 | self.setData({ 17 | isDropDownShow: !self.data.isDropDownShow 18 | }) 19 | }, 0); 20 | }, 21 | select: function (e) { 22 | let selValue = e.currentTarget.dataset.item.val; 23 | let curIndex = e.currentTarget.dataset.index; 24 | this.setData({ 25 | selVal: selValue, 26 | curIndex: curIndex, 27 | isDropDownShow: false 28 | }); 29 | } 30 | }) -------------------------------------------------------------------------------- /example/pages/dropMenu/dropMenu.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "DropMenu", 3 | "usingComponents": { 4 | "yepDropMenu": "../../components/dropMenu/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/dropMenu/dropMenu.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /example/pages/dropMenu/dropMenu.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/pages/dropMenu/dropMenu.wxss -------------------------------------------------------------------------------- /example/pages/elevator/elevator.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "elevator", 3 | "usingComponents": { 4 | "yepElevator": "../../components/elevator/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/pages/elevator/elevator.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /example/pages/elevator/elevator.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | 3 | -------------------------------------------------------------------------------- /example/pages/elip/elip.js: -------------------------------------------------------------------------------- 1 | // pages/dialog/dialog.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | }, 9 | 10 | /** 11 | * 生命周期函数--监听页面加载 12 | */ 13 | onLoad() { 14 | 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /example/pages/elip/elip.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "elip", 3 | "usingComponents": { 4 | "elip":"../../components/elip/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/elip/elip.wxml: -------------------------------------------------------------------------------- 1 | 2 | 单行文本: 3 | 这是单行文本的断行，这是单行文本的断行，这是单行文本的断行，这是单行文本的断行，这是单行文本的断行，这是单行文本的断行，这是单行文本的断行 4 | 两行文本: 5 | 这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行 6 | 三行文本: 7 | 这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行，这是多行文本的断行 8 | 9 | -------------------------------------------------------------------------------- /example/pages/elip/elip.wxss: -------------------------------------------------------------------------------- 1 | .elip{ 2 | font-size:28rpx; 3 | color: #111; 4 | } 5 | .elip_title{ 6 | font-size: 30rpx; 7 | color: #000; 8 | padding: 50rpx 0 20rpx 0rpx; 9 | } -------------------------------------------------------------------------------- /example/pages/goTop/goTop.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | setScrollTop: 150, 4 | width:74, 5 | height:74 6 | } 7 | }) 8 | -------------------------------------------------------------------------------- /example/pages/goTop/goTop.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "goTop", 3 | "usingComponents": { 4 | "yepGoTop": "../../components/goTop/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/pages/goTop/goTop.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 |
  • 2
    • 6 |
  • 2
    • 7 |
  • 2
    • 8 |
  • 2
    • 9 |
  • 2
    • 10 |
  • 2
    • 11 |
  • 2
    • 12 |
  • 2
    • 13 |
  • 2
    • 14 |
  • 2
    • 15 |
  • 2
    • 16 |
  • 2
    • 17 |
  • 2
    • 18 |
  • 2
    • 19 |
  • 2
    • 20 |
  • 2
    • 21 |
  • 2
    • 22 |
  • 2
    • 23 |
  • 2
    • 24 |
  • 2
    • 25 |
  • 2
    • 26 |
  • 2
    • 27 |
  • 2
    • 28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /example/pages/goTop/goTop.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | 3 | .reportTypeScroll { 4 | margin: 40px 0px 20px 0px; 5 | white-space: nowrap; 6 | display: flex; 7 | } 8 | 9 | .clickSel { 10 | color: red; 11 | } 12 | 13 | .removeSel { 14 | color: black; 15 | } 16 | 17 | text { 18 | height: 150rpx; 19 | display: inline-block; 20 | text-align: center; 21 | } 22 | -------------------------------------------------------------------------------- /example/pages/index/index.js: -------------------------------------------------------------------------------- 1 | //案例首页 2 | const app = getApp() 3 | Page({ 4 | data: { 5 | motto: 'Hello World to yourself', 6 | userInfo: {} 7 | }, 8 | 9 | // 事件处理函数 10 | 11 | gotoAPIDemos() { 12 | console.log('gotoAPIDemos') 13 | wx.navigateTo({ 14 | url: '../demos_api/demos_api' 15 | }) 16 | }, 17 | 18 | gotoUIDemos() { 19 | wx.navigateTo({ 20 | url: '../demos_ui/demos_ui' 21 | }) 22 | }, 23 | 24 | bindViewTap() { 25 | wx.navigateTo({ 26 | url: '../logs/logs' 27 | }) 28 | }, 29 | 30 | onLoad() { 31 | console.log('onLoad') 32 | const that = this 33 | // 调用应用实例的方法获取全局数据 34 | app.getUserInfo(function (userInfo) { 35 | // 更新数据 36 | that.setData({ 37 | userInfo 38 | }) 39 | }) 40 | } 41 | }) 42 | -------------------------------------------------------------------------------- /example/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "YepUI" 3 | } -------------------------------------------------------------------------------- /example/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JDC前端小程序组件库，为用户提供简洁、易用的小程序组件，方便应用到自己的开发中。 7 | 8 | 9 | 10 | 11 | 12 | Yep UI 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | 3 | .container{ 4 | padding-top: 128rpx; 5 | font-size: 28rpx; 6 | } 7 | 8 | .title{ 9 | text-align: center; 10 | margin: 0 auto; 11 | width: 600rpx; 12 | margin-bottom: 40rpx; 13 | } 14 | 15 | .title .icon{ 16 | width: 256rpx; 17 | height: 256rpx; 18 | margin-bottom: 80rpx; 19 | } 20 | 21 | .list{ 22 | /*border: 1rpx solid #b8b8b8;*/ 23 | padding: 20rpx; 24 | text-align: left; 25 | } 26 | 27 | .item{ 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | height: 100rpx; 32 | line-height: 100rpx; 33 | border: 1rpx solid #efefef; 34 | border-radius: 10rpx; 35 | margin-bottom: 20rpx; 36 | padding-left: 10%; 37 | padding-right: 10%; 38 | } 39 | 40 | .item image{ 41 | width: 48rpx; 42 | height: 48rpx; 43 | } 44 | 45 | .footer{ 46 | /*position: fixed;*/ 47 | /*bottom: 40rpx;*/ 48 | text-align: center; 49 | } 50 | 51 | -------------------------------------------------------------------------------- /example/pages/infiniteScroll/infiniteScroll.js: -------------------------------------------------------------------------------- 1 | // pages/infiniteScroll/infiniteScroll.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | loading: true, 9 | isEnd: false, 10 | page: 1, 11 | list: [1,2,3,4,5], 12 | }, 13 | 14 | resetFetch({detail}) { 15 | setTimeout(() => { 16 | this.setData({ 17 | isEnd: false, 18 | page: 1, 19 | list: [1,2,3,4,5], 20 | }); 21 | detail.resolve(); 22 | console.log('done') 23 | }, 1500); 24 | }, 25 | 26 | scrollToFetch() { 27 | setTimeout(() => { 28 | if (this.data.page === 7) { 29 | this.setData({ 30 | isEnd: true, 31 | }); 32 | } 33 | this.setData({ 34 | page: this.data.page+1, 35 | list: [...this.data.list, 1,2,3] 36 | }); 37 | }, Math.random(0,1)*2000); 38 | }, 39 | 40 | /** 41 | * 生命周期函数--监听页面加载 42 | */ 43 | onLoad: function (options) { 44 | setTimeout(() => { 45 | this.setData({ 46 | loading: false, 47 | }); 48 | }, 1500); 49 | }, 50 | 51 | /** 52 | * 生命周期函数--监听页面初次渲染完成 53 | */ 54 | onReady: function () { 55 | 56 | }, 57 | 58 | /** 59 | * 生命周期函数--监听页面显示 60 | */ 61 | onShow: function () { 62 | 63 | }, 64 | 65 | /** 66 | * 生命周期函数--监听页面隐藏 67 | */ 68 | onHide: function () { 69 | 70 | }, 71 | 72 | /** 73 | * 生命周期函数--监听页面卸载 74 | */ 75 | onUnload: function () { 76 | 77 | }, 78 | 79 | /** 80 | * 页面相关事件处理函数--监听用户下拉动作 81 | */ 82 | onPullDownRefresh: function () { 83 | 84 | }, 85 | 86 | /** 87 | * 页面上拉触底事件的处理函数 88 | */ 89 | onReachBottom: function () { 90 | 91 | }, 92 | 93 | /** 94 | * 用户点击右上角分享 95 | */ 96 | onShareAppMessage: function () { 97 | 98 | } 99 | }) -------------------------------------------------------------------------------- /example/pages/infiniteScroll/infiniteScroll.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Infinite Scroll 无限加载", 3 | "usingComponents": { 4 | "infinite-scroll": "../../components/infiniteScroll/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/infiniteScroll/infiniteScroll.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Infinite Scroll 无限加载 9 | 10 | 11 | 12 | 默认 13 | 14 | 15 | 22 | 自定义加载中动画 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /example/pages/infiniteScroll/infiniteScroll.wxss: -------------------------------------------------------------------------------- 1 | /* pages/infiniteScroll/infiniteScroll.wxss */ 2 | .pd-20 { 3 | padding: 0 20rpx; 4 | background: #eee; 5 | height: 600rpx; 6 | box-sizing: border-box; 7 | } 8 | .li-item { 9 | height: 200rpx; 10 | background: linear-gradient(hsl(200, 10%, 100%), hsl(208, 20%, 80%)); 11 | } -------------------------------------------------------------------------------- /example/pages/keyboard/keyboard.js: -------------------------------------------------------------------------------- 1 | // pages/keyboard/keyboard.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | argument:{ 9 | priceFixFlag:true,//小键盘是否展开收起 10 | keyBoardTitle: "键盘弹窗标题", 11 | inputTitle:"输入框标题", 12 | dealPayFeeShipping: "5.00", //输入框内容，Number类型 13 | submit:function(){ 14 | console.log("确定回调函数") 15 | }, 16 | } 17 | }, 18 | 19 | /** 20 | * 生命周期函数--监听页面加载 21 | */ 22 | onLoad: function (options) { 23 | 24 | }, 25 | 26 | /** 27 | * 生命周期函数--监听页面初次渲染完成 28 | */ 29 | onReady: function () { 30 | this.yepKeyboard = this.selectComponent("#keyboard"); 31 | //that.yepKeyboard.keybordEventHide(); //关闭弹层 32 | }, 33 | 34 | /** 35 | * 生命周期函数--监听页面显示 36 | */ 37 | onShow: function () { 38 | setTimeout(function(){ 39 | console.log("ssss") 40 | },5000) 41 | }, 42 | 43 | /** 44 | * 生命周期函数--监听页面隐藏 45 | */ 46 | onHide: function () { 47 | 48 | }, 49 | 50 | /** 51 | * 生命周期函数--监听页面卸载 52 | */ 53 | onUnload: function () { 54 | 55 | }, 56 | 57 | /** 58 | * 页面相关事件处理函数--监听用户下拉动作 59 | */ 60 | onPullDownRefresh: function () { 61 | 62 | }, 63 | 64 | /** 65 | * 页面上拉触底事件的处理函数 66 | */ 67 | onReachBottom: function () { 68 | 69 | }, 70 | 71 | /** 72 | * 用户点击右上角分享 73 | */ 74 | onShareAppMessage: function () { 75 | 76 | } 77 | }) -------------------------------------------------------------------------------- /example/pages/keyboard/keyboard.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "keyboard", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yepKeyboard": "../../components/keyboard/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/keyboard/keyboard.wxml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /example/pages/keyboard/keyboard.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/example/pages/keyboard/keyboard.wxss -------------------------------------------------------------------------------- /example/pages/loading/loading.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | 3 | /** 4 | * 页面的初始数据 5 | */ 6 | data: { 7 | 8 | }, 9 | 10 | /** 11 | * 生命周期函数--监听页面加载 12 | */ 13 | onLoad: function (options) { 14 | 15 | }, 16 | 17 | /** 18 | * 生命周期函数--监听页面初次渲染完成 19 | */ 20 | onReady: function () { 21 | 22 | }, 23 | 24 | /** 25 | * 生命周期函数--监听页面显示 26 | */ 27 | onShow: function () { 28 | 29 | }, 30 | 31 | /** 32 | * 生命周期函数--监听页面隐藏 33 | */ 34 | onHide: function () { 35 | 36 | }, 37 | 38 | /** 39 | * 生命周期函数--监听页面卸载 40 | */ 41 | onUnload: function () { 42 | 43 | }, 44 | 45 | /** 46 | * 页面相关事件处理函数--监听用户下拉动作 47 | */ 48 | onPullDownRefresh: function () { 49 | 50 | }, 51 | 52 | /** 53 | * 页面上拉触底事件的处理函数 54 | */ 55 | onReachBottom: function () { 56 | 57 | }, 58 | 59 | /** 60 | * 用户点击右上角分享 61 | */ 62 | onShareAppMessage: function () { 63 | 64 | } 65 | }) -------------------------------------------------------------------------------- /example/pages/loading/loading.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "Loading", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yeploading": "../../components/loading/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/loading/loading.wxml: -------------------------------------------------------------------------------- 1 | 2 | queue 3 | 4 | 5 | queue 6 | 7 | 8 | 9 | 10 | 11 | wave 12 | 13 | 14 | wave 15 | 16 | 17 | 18 | 19 | ball 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | jump 28 | 29 | 30 | jump 31 | 32 | 33 | 34 | 35 | lineup 36 | 37 | 38 | lineup 39 | 40 | 41 | 42 | 43 | spread 44 | 45 | 46 | lineup 47 | 48 | 49 | -------------------------------------------------------------------------------- /example/pages/loading/loading.wxss: -------------------------------------------------------------------------------- 1 | .box { 2 | margin: 50rpx 0; 3 | position: relative; 4 | } 5 | 6 | .box-body { 7 | height: 100rpx; 8 | } -------------------------------------------------------------------------------- /example/pages/message/message.js: -------------------------------------------------------------------------------- 1 | // pages/dialog/dialog.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | msg:{ 9 | info:{ 10 | info:'这是一条消息', 11 | level:'info', 12 | time:2000 13 | }, 14 | err:{ 15 | info:'这是一条错误消息', 16 | level:'err', 17 | time:2000 18 | }, 19 | suc:{ 20 | info:'这是一条成功消息', 21 | level:'suc', 22 | time:2000 23 | }, 24 | warn:{ 25 | info:'这是一条警告消息', 26 | level:'warn', 27 | time:2000 28 | }, 29 | time:{ 30 | info:'信息展示时间为 4 秒钟', 31 | level:'info', 32 | time:4000 33 | } 34 | } 35 | }, 36 | 37 | /** 38 | * 生命周期函数--监听页面加载 39 | */ 40 | onLoad() { 41 | 42 | }, 43 | /** 44 | * 展示meessage组件 45 | */ 46 | showMsg:function(e){ 47 | let type = e.target.dataset.level; 48 | this.selectComponent("#"+type).showMsg(); 49 | } 50 | }) 51 | -------------------------------------------------------------------------------- /example/pages/message/message.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Message", 3 | "usingComponents": { 4 | "message":"../../components/message/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/message/message.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 普通提示 8 | 成功提示 9 | 警告提示 10 | 错误提示 11 | 自定义持续时间 12 | -------------------------------------------------------------------------------- /example/pages/message/message.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #fff; 3 | } 4 | .content{ 5 | width: 100%; 6 | margin-top: 200rpx; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | } 11 | .btn{ 12 | width: 90%; 13 | height: 60rpx; 14 | margin-bottom: 30rpx; 15 | font-size: 30rpx; 16 | line-height: 30rpx; 17 | color: #000; 18 | background-color: #eee; 19 | text-align: center; 20 | line-height: 60rpx; 21 | border-radius: 8rpx; 22 | } -------------------------------------------------------------------------------- /example/pages/mine/mine.js: -------------------------------------------------------------------------------- 1 | 2 | // 关于我们页面 3 | const app = getApp() 4 | Page({ 5 | data: { 6 | motto: 'Hello World to yourself', 7 | userInfo: {} 8 | }, 9 | 10 | onLoad() { 11 | console.log('onLoad') 12 | const that = this 13 | // 调用应用实例的方法获取全局数据 14 | app.getUserInfo(function (userInfo) { 15 | // 更新数据 16 | that.setData({ 17 | userInfo 18 | }) 19 | }) 20 | } 21 | }) 22 | -------------------------------------------------------------------------------- /example/pages/mine/mine.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "关于我们" 3 | } -------------------------------------------------------------------------------- /example/pages/mine/mine.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | 3 | .container{ 4 | padding: 0; 5 | padding-top: 100rpx; 6 | font-size: 28rpx; 7 | } 8 | 9 | .title .img{ 10 | width: 100%; 11 | height: 120rpx; 12 | } 13 | 14 | .cont{ 15 | padding: 0 30rpx; 16 | } 17 | 18 | .cont-list{ 19 | margin-bottom: 20rpx; 20 | } 21 | 22 | .cont-item{ 23 | padding-bottom: 40rpx; 24 | } 25 | 26 | .cont-item .label{ 27 | text-align: left; 28 | font-size: 28rpx; 29 | font-weight: 600; 30 | height: 100rpx; 31 | line-height: 100rpx; 32 | border-top: 1rpx solid #e8e8e8; 33 | border-bottom: 1rpx solid #e8e8e8; 34 | } 35 | 36 | .cont-item .list { 37 | display: flex; 38 | justify-content: space-between; 39 | flex-wrap: wrap; 40 | } 41 | 42 | .cont-item .item{ 43 | text-align: center; 44 | } 45 | 46 | .cont-item .item-img{ 47 | width: 200rpx; 48 | height: 200rpx; 49 | border-radius: 100rpx; 50 | margin: 20rpx 0; 51 | } 52 | 53 | .cont-item .item-img2{ 54 | width: 200rpx; 55 | height: 200rpx; 56 | margin: 20rpx 0; 57 | } 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /example/pages/notice/notice.js: -------------------------------------------------------------------------------- 1 | // let timer= null; 2 | Page({ 3 | data: { 4 | animationData: {} 5 | }, 6 | onShow() { 7 | var animation = wx.createAnimation({ 8 | duration: 1000, 9 | timingFunction: 'ease', 10 | }); 11 | animation.scale(2,2).rotate(45).step(); 12 | this.setData({ 13 | animationData:animation.export() 14 | }) 15 | }, 16 | closeNotice: function (e) { 17 | console.log('closeNotice', e); 18 | } 19 | }) -------------------------------------------------------------------------------- /example/pages/notice/notice.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Notice", 3 | "backgroundColor": "#eeeeee", 4 | "backgroundTextStyle": "light", 5 | "usingComponents": { 6 | "yepNotice": "../../components/notice/index" 7 | } 8 | } -------------------------------------------------------------------------------- /example/pages/notice/notice.wxss: -------------------------------------------------------------------------------- 1 | .content-page{ 2 | padding: 10rpx 0; 3 | } 4 | 5 | .content-page .box{ 6 | padding: 20rpx 0; 7 | } 8 | 9 | .content-page .title{ 10 | padding-left: 30rpx; 11 | } 12 | 13 | .my-notice { 14 | background-color: #eee!important; 15 | } 16 | 17 | .my-notice .my-notice-icon{ 18 | width: 40rpx; 19 | height: 40rpx; 20 | } 21 | 22 | .my-notice-content-wrap view{ 23 | display: inline-block; 24 | margin-right: 100rpx; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /example/pages/page/page.js: -------------------------------------------------------------------------------- 1 | // pages/page/page.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | current: 1 9 | }, 10 | 11 | handleChange({ detail }) { 12 | const type = detail.type; 13 | if (type === 'next') { 14 | this.setData({ 15 | current: this.data.current + 1 16 | }); 17 | } else if (type === 'prev') { 18 | this.setData({ 19 | current: this.data.current - 1 20 | }); 21 | } 22 | }, 23 | /** 24 | * 生命周期函数--监听页面加载 25 | */ 26 | onLoad: function (options) { 27 | 28 | }, 29 | 30 | /** 31 | * 生命周期函数--监听页面初次渲染完成 32 | */ 33 | onReady: function () { 34 | 35 | }, 36 | 37 | /** 38 | * 生命周期函数--监听页面显示 39 | */ 40 | onShow: function () { 41 | 42 | }, 43 | 44 | /** 45 | * 生命周期函数--监听页面隐藏 46 | */ 47 | onHide: function () { 48 | 49 | }, 50 | 51 | /** 52 | * 生命周期函数--监听页面卸载 53 | */ 54 | onUnload: function () { 55 | 56 | }, 57 | 58 | /** 59 | * 页面相关事件处理函数--监听用户下拉动作 60 | */ 61 | onPullDownRefresh: function () { 62 | 63 | }, 64 | 65 | /** 66 | * 页面上拉触底事件的处理函数 67 | */ 68 | onReachBottom: function () { 69 | 70 | }, 71 | 72 | /** 73 | * 用户点击右上角分享 74 | */ 75 | onShareAppMessage: function () { 76 | 77 | } 78 | }) -------------------------------------------------------------------------------- /example/pages/page/page.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "yep-page": "../../components/page/index" 4 | } 5 | } -------------------------------------------------------------------------------- /example/pages/page/page.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 带有文字的按钮 5 | 6 | Prev 7 | Next 8 | 9 | 10 | 11 | 只显示数字 12 | 13 | 14 | 15 | 显示点 16 | -------------------------------------------------------------------------------- /example/pages/page/page.wxss: -------------------------------------------------------------------------------- 1 | /* pages/page/page.wxss */ -------------------------------------------------------------------------------- /example/pages/panel/panel.js: -------------------------------------------------------------------------------- 1 | // pages/panel/panel.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /example/pages/panel/panel.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Panel 面板", 3 | "usingComponents": { 4 | "yepPanel": "../../components/panel/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/panel/panel.wxml: -------------------------------------------------------------------------------- 1 | 2 | 头部距离为 0 的 Panel 3 | 4 | 5 | 6 | 带有标题的 Panel 7 | 8 | 9 | 10 | 无边框的 Panel 11 | -------------------------------------------------------------------------------- /example/pages/panel/panel.wxss: -------------------------------------------------------------------------------- 1 | /* pages/panel/panel.wxss */ 2 | .content { 3 | padding: 20px; 4 | font-size: 16px; 5 | } 6 | 7 | .footer { 8 | text-align: right; 9 | } 10 | -------------------------------------------------------------------------------- /example/pages/password/password.js: -------------------------------------------------------------------------------- 1 | // pages/keyboard/keyboard.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | inputData1: { 9 | input_value: "", //输入框的初始内容 10 | value_length: 0, //输入框密码位数 11 | isNext: true, //是否有下一步的按钮，有的话输入完成后不清空内容 12 | get_focus: true, //输入框的聚焦状态 13 | focus_class: false, //输入框聚焦样式 14 | value_num: [1, 2, 3, 4, 5, 6], //输入框格子数 15 | height: "76rpx", //输入框高度 16 | width: "604rpx", //输入框宽度 17 | see: false, //是否明文展示 18 | hasGap: false//是否显示间隔格子, 19 | }, 20 | inputData2: { 21 | input_value: "", //输入框的初始内容 22 | value_length: 0, //输入框密码位数 23 | isNext: true, //是否有下一步的按钮 24 | get_focus: false, //输入框的聚焦状态 25 | focus_class: false, //输入框聚焦样式 26 | value_num: [1, 2, 3, 4], //输入框格子数 27 | height: "76rpx", //输入框高度 28 | width: "650rpx", //输入框宽度 29 | see: true, //是否明文展示 30 | hasGap: false//是否显示间隔格子, 31 | } 32 | }, 33 | //输入完成回调 34 | complete: function(p) { 35 | //p 为回调函数携带参数，p.detail是输入的密码值 36 | wx.showToast({ 37 | title: p.detail, 38 | duration: 2000 39 | }) 40 | }, 41 | /** 42 | * 生命周期函数--监听页面加载 43 | */ 44 | onLoad: function (options) { 45 | 46 | }, 47 | 48 | /** 49 | * 生命周期函数--监听页面初次渲染完成 50 | */ 51 | onReady: function () { 52 | 53 | }, 54 | 55 | /** 56 | * 生命周期函数--监听页面显示 57 | */ 58 | onShow: function () { 59 | 60 | }, 61 | 62 | /** 63 | * 生命周期函数--监听页面隐藏 64 | */ 65 | onHide: function () { 66 | 67 | }, 68 | 69 | /** 70 | * 生命周期函数--监听页面卸载 71 | */ 72 | onUnload: function () { 73 | 74 | }, 75 | 76 | /** 77 | * 页面相关事件处理函数--监听用户下拉动作 78 | */ 79 | onPullDownRefresh: function () { 80 | 81 | }, 82 | 83 | /** 84 | * 页面上拉触底事件的处理函数 85 | */ 86 | onReachBottom: function () { 87 | 88 | }, 89 | 90 | /** 91 | * 用户点击右上角分享 92 | */ 93 | onShareAppMessage: function () { 94 | 95 | } 96 | }) -------------------------------------------------------------------------------- /example/pages/password/password.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "password", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yepPassword": "../../components/password/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/password/password.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | password 密码 5 | 6 | 7 | 6位密码、不可见且自动获取焦点 8 | 9 | 22 | 23 | 24 | 25 | 26 | 4位密码、可见且不自动获取焦点 27 | 28 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /example/pages/password/password.wxss: -------------------------------------------------------------------------------- 1 | .box-body{ 2 | display: flex; 3 | justify-content: flex-start; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /example/pages/popup/popup.js: -------------------------------------------------------------------------------- 1 | // pages/dialog/dialog.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | boxType: 'input' 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad() { 15 | 16 | }, 17 | /** 18 | * 展示pop 19 | */ 20 | showPop:function(e){ 21 | let type = e.target.dataset.type; 22 | switch(type){ 23 | case 'center': 24 | this.selectComponent("#center").togglePop(); 25 | break; 26 | case 'top': 27 | this.selectComponent("#top").togglePop(); 28 | break; 29 | case 'bottom': 30 | this.selectComponent("#bottom").togglePop(); 31 | break; 32 | case 'right': 33 | this.selectComponent("#right").togglePop(); 34 | break; 35 | } 36 | } 37 | }) 38 | -------------------------------------------------------------------------------- /example/pages/popup/popup.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "popup", 3 | "usingComponents": { 4 | "popup":"../../components/popup/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/popup/popup.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 点击下方按钮测试 popup 4 | 5 | 标准pop 6 | 上方pop 7 | 底部pop 8 | 右侧pop 9 | 10 | 11 | 12 | 标准popUp 13 | 14 | 15 | 16 | popUp从上方出现 17 | 18 | 19 | 20 | popup从底部出现 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /example/pages/popup/popup.wxss: -------------------------------------------------------------------------------- 1 | 2 | .pop{ 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | flex-direction: column; 12 | } 13 | 14 | .content{ 15 | margin-top:80rpx; 16 | width: 70%; 17 | height: 400rpx; 18 | border:8rpx solid #eee; 19 | position: relative; 20 | } 21 | .btn{ 22 | width: 140rpx; 23 | height: 50rpx; 24 | border-radius: 10rpx; 25 | background-color: aquamarine; 26 | text-align: center; 27 | font-size: 30rpx; 28 | height: 56rpx; 29 | color: #666; 30 | line-height: 50rpx; 31 | } 32 | .cont-cent{ 33 | position: absolute; 34 | top:50%; 35 | left: 50%; 36 | transform: translate(-50%,-50%); 37 | } 38 | .cont-top{ 39 | position: absolute; 40 | top: -30rpx; 41 | left: 50%; 42 | transform: translateX(-50%); 43 | } 44 | .cont-bottom{ 45 | position: absolute; 46 | left: 50%; 47 | bottom: -30rpx; 48 | transform: translateX(-50%); 49 | } 50 | .cont-right{ 51 | position: absolute; 52 | right: -70rpx; 53 | top: 50%; 54 | transform: translateY(-50%); 55 | } 56 | .center-text{ 57 | width: 300rpx; 58 | height: 100rpx; 59 | text-align: center; 60 | line-height: 150rpx; 61 | height: 150rpx; 62 | font-size: 36rpx; 63 | } 64 | .top-text{ 65 | height: 100rpx; 66 | text-align: center; 67 | font-size: 36rpx; 68 | line-height: 100rpx; 69 | } 70 | .bottom-text{ 71 | height: 250rpx; 72 | text-align: left; 73 | font-size: 36rpx; 74 | line-height: 60rpx; 75 | } 76 | .right-text{ 77 | width: 120rpx; 78 | height: 100%; 79 | display: flex; 80 | flex-direction: column; 81 | justify-content: flex-start; 82 | align-items: center; 83 | } 84 | .right-text image{ 85 | width: 100rpx; 86 | height: 100rpx; 87 | margin-top: 60rpx; 88 | } -------------------------------------------------------------------------------- /example/pages/price/price.js: -------------------------------------------------------------------------------- 1 | // var WXBizDataCrypt = require('../../utils/WXBizDataCrypt') 2 | 3 | 4 | Page({ 5 | 6 | }); -------------------------------------------------------------------------------- /example/pages/price/price.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "Price", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yepPrice": "../../components/price/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/price/price.wxss: -------------------------------------------------------------------------------- 1 | .box-body{ 2 | display: flex; 3 | justify-content: flex-start; 4 | } 5 | 6 | .box-body-item{ 7 | display: flex; 8 | flex: 1; 9 | align-items: center; 10 | font-size: 24rpx; 11 | } 12 | 13 | .my-price{ 14 | color: #999; 15 | } 16 | 17 | .my-price .my-price-symbol{ 18 | color: #999; 19 | font-size: 20rpx; 20 | font-weight: 400; 21 | text-decoration: line-through; 22 | padding-right: 0; 23 | } 24 | .my-price .my-price-value{ 25 | color: #999; 26 | font-size: 20rpx; 27 | font-weight: 400; 28 | text-decoration: line-through; 29 | } 30 | .my-price .my-price-decimal{ 31 | color: #999; 32 | font-size: 20rpx; 33 | font-weight: 400; 34 | text-decoration: line-through; 35 | } 36 | .my-price2{ 37 | background-color: #999; 38 | color: #FFF; 39 | padding: 0 10rpx; 40 | } 41 | .my-price2 .my-price-symbol2{ 42 | padding-right: 0; 43 | color: #FFF; 44 | } 45 | .my-price2 .my-price-value2{ 46 | color: #FFF; 47 | } 48 | .my-price2 .my-price-decimal2{ 49 | color: #FFF; 50 | } 51 | .my-price3 .my-price-decimal3{ 52 | font-size: 30rpx; 53 | font-weight: 400; 54 | } -------------------------------------------------------------------------------- /example/pages/progress/progress.js: -------------------------------------------------------------------------------- 1 | // pages/progress/progress.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | percent: 0, 9 | status: 'normal' 10 | }, 11 | handleAdd() { 12 | if (this.data.percent === 100) return; 13 | this.setData({ 14 | percent: this.data.percent + 10 15 | }); 16 | if (this.data.percent === 100) { 17 | this.setData({ 18 | status: 'success' 19 | }); 20 | } 21 | }, 22 | handleReduce() { 23 | if (this.data.percent === 0) return; 24 | this.setData({ 25 | percent: this.data.percent - 10, 26 | status: 'normal' 27 | }); 28 | }, 29 | 30 | /** 31 | * 生命周期函数--监听页面加载 32 | */ 33 | onLoad: function (options) { 34 | 35 | }, 36 | 37 | /** 38 | * 生命周期函数--监听页面初次渲染完成 39 | */ 40 | onReady: function () { 41 | 42 | }, 43 | 44 | /** 45 | * 生命周期函数--监听页面显示 46 | */ 47 | onShow: function () { 48 | 49 | }, 50 | 51 | /** 52 | * 生命周期函数--监听页面隐藏 53 | */ 54 | onHide: function () { 55 | 56 | }, 57 | 58 | /** 59 | * 生命周期函数--监听页面卸载 60 | */ 61 | onUnload: function () { 62 | 63 | }, 64 | 65 | /** 66 | * 页面相关事件处理函数--监听用户下拉动作 67 | */ 68 | onPullDownRefresh: function () { 69 | 70 | }, 71 | 72 | /** 73 | * 页面上拉触底事件的处理函数 74 | */ 75 | onReachBottom: function () { 76 | 77 | }, 78 | 79 | /** 80 | * 用户点击右上角分享 81 | */ 82 | onShareAppMessage: function () { 83 | 84 | } 85 | }) -------------------------------------------------------------------------------- /example/pages/progress/progress.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Progress 进度条", 3 | "usingComponents": { 4 | "yepProgress": "../../components/progress/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/progress/progress.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /example/pages/progress/progress.wxss: -------------------------------------------------------------------------------- 1 | /* pages/progress/progress.wxss */ 2 | .progress-item{ 3 | padding: 12px; 4 | } -------------------------------------------------------------------------------- /example/pages/rate/rate.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data:{ 3 | rate_1:[1], 4 | rate_2:[1,1,1], 5 | rate_3:[1,1,1], 6 | rate_test:'1级', 7 | colorArr:['#3C3C3C','#8c8c00','#c4c400','#FF1493','#DC143C'], 8 | descArr:['极差！！','失望！','一般~','满意~~','惊喜！！~'] 9 | }, 10 | onLoad: function(options){ 11 | 12 | }, 13 | onShow: function(){ 14 | 15 | }, 16 | //触发事件 17 | rateChange:function(value){ 18 | console.log("rateChange",value) 19 | }, 20 | }) -------------------------------------------------------------------------------- /example/pages/rate/rate.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#ffffff", 3 | "navigationBarTextStyle": "black", 4 | "navigationBarTitleText": "Rate", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light", 7 | "usingComponents": { 8 | "yepRate": "../../components/rate/index" 9 | } 10 | } -------------------------------------------------------------------------------- /example/pages/rate/rate.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 | -------------------------------------------------------------------------------- /example/pages/rate/rate.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | background: #efefef; 3 | } 4 | .example-title { 5 | font-size: 28rpx; 6 | line-height:60rpx; 7 | border-top:1rpx solid #efefef; 8 | padding: 20rpx 40rpx; 9 | background:#fff; 10 | } 11 | .sub-title{ 12 | padding-left: 80rpx; 13 | } -------------------------------------------------------------------------------- /example/pages/stickyHeader/stickyHeader.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | 3 | /** 4 | * 页面的初始数据 5 | */ 6 | data: { 7 | 8 | }, 9 | 10 | /** 11 | * 生命周期函数--监听页面加载 12 | */ 13 | onLoad: function (options) { 14 | 15 | }, 16 | 17 | /** 18 | * 生命周期函数--监听页面初次渲染完成 19 | */ 20 | onReady: function () { 21 | 22 | }, 23 | 24 | /** 25 | * 生命周期函数--监听页面显示 26 | */ 27 | onShow: function () { 28 | 29 | }, 30 | 31 | /** 32 | * 生命周期函数--监听页面隐藏 33 | */ 34 | onHide: function () { 35 | 36 | }, 37 | 38 | /** 39 | * 生命周期函数--监听页面卸载 40 | */ 41 | onUnload: function () { 42 | 43 | }, 44 | 45 | /** 46 | * 页面相关事件处理函数--监听用户下拉动作 47 | */ 48 | onPullDownRefresh: function () { 49 | 50 | }, 51 | 52 | /** 53 | * 页面上拉触底事件的处理函数 54 | */ 55 | onReachBottom: function () { 56 | 57 | }, 58 | 59 | /** 60 | * 用户点击右上角分享 61 | */ 62 | onShareAppMessage: function () { 63 | 64 | } 65 | }) -------------------------------------------------------------------------------- /example/pages/stickyHeader/stickyHeader.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "stickyHeader", 3 | "usingComponents": { 4 | "sticky-header": "../../components/stickyHeader/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/stickyHeader/stickyHeader.wxml: -------------------------------------------------------------------------------- 1 | 2 | 往下滚动 3 | 4 | 5 | 6 | sticky header 7 | 8 | 9 | 10 | content 11 | -------------------------------------------------------------------------------- /example/pages/stickyHeader/stickyHeader.wxss: -------------------------------------------------------------------------------- 1 | text { 2 | padding-left: 20rpx; 3 | font-size: 28rpx; 4 | } -------------------------------------------------------------------------------- /example/pages/swipeAction/swipeAction.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | btnList1: [ 4 | { 5 | text: '取消', 6 | style: 7 | ` 8 | width: 120rpx; 9 | height: 100%; 10 | background-color: #ddd; 11 | text-align: center; 12 | font-size: 30rpx; 13 | color: #fff; 14 | `, 15 | autoClose: true, 16 | btnEvent: 'cancelClick' 17 | }, 18 | { 19 | text: '删除', 20 | style: 21 | ` 22 | width: 120rpx; 23 | height: 100%; 24 | background-color: #f23030; 25 | text-align: center; 26 | font-size: 30rpx; 27 | color: #fff; 28 | `, 29 | autoClose: true, 30 | btnEvent: 'deleteClick' 31 | } 32 | ], 33 | btnList2: [ 34 | { 35 | text: '短', 36 | style: 37 | ` 38 | width: 60rpx; 39 | height: 100%; 40 | background-color: #ddd; 41 | text-align: center; 42 | font-size: 30rpx; 43 | color: #fff; 44 | `, 45 | autoClose: true, 46 | }, 47 | { 48 | text: '长按钮', 49 | style: 50 | ` 51 | width: 180rpx; 52 | height: 100%; 53 | background-color: #f23030; 54 | text-align: center; 55 | font-size: 30rpx; 56 | color: #fff; 57 | `, 58 | autoClose: true, 59 | } 60 | ], 61 | btnList3: [ 62 | { 63 | text: '删除', 64 | style: 65 | ` 66 | width: 120rpx; 67 | height: 100%; 68 | background-color: #f23030; 69 | text-align: center; 70 | font-size: 30rpx; 71 | color: #fff; 72 | `, 73 | autoClose: true, 74 | btnEvent: 'deleteClick' 75 | } 76 | ], 77 | btnList4: [ 78 | { 79 | text: '提交', 80 | style: 81 | ` 82 | width: 120rpx; 83 | height: 100%; 84 | background-color: #108ee9; 85 | text-align: center; 86 | font-size: 30rpx; 87 | color: #fff; 88 | `, 89 | autoClose: true, 90 | btnEvent: 'submitClick' 91 | }, 92 | { 93 | text: '取消', 94 | style: 95 | ` 96 | width: 120rpx; 97 | height: 100%; 98 | background-color: #ddd; 99 | text-align: center; 100 | font-size: 30rpx; 101 | color: #fff; 102 | `, 103 | autoClose: true, 104 | btnEvent: 'cancelClick' 105 | } 106 | ] 107 | }, 108 | submitClick: function () { 109 | console.log('submitClick'); 110 | }, 111 | cancelClick: function () { 112 | console.log('cancelClick'); 113 | }, 114 | deleteClick: function () { 115 | console.log('deleteClick'); 116 | } 117 | }); -------------------------------------------------------------------------------- /example/pages/swipeAction/swipeAction.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "滑动操作", 3 | "usingComponents": { 4 | "swipe-action": "../../components/swipeAction/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/pages/swipeAction/swipeAction.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 左右两侧都有按钮 6 | 7 | 8 | 9 | 只有右侧有按钮 10 | 11 | 12 | 只有左侧有按钮 13 | 14 | 15 | 不同宽度的按钮 16 | 17 | 18 | 只有一个按钮 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /example/pages/swipeAction/swipeAction.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | background-color: #f0f2f5; 3 | } 4 | 5 | .item-wrap { 6 | margin-top: 20rpx; 7 | } 8 | 9 | .item { 10 | height: 80rpx; 11 | line-height: 80rpx; 12 | } 13 | 14 | .item-content { 15 | padding: 0 20rpx; 16 | height: 100%; 17 | background-color: #fff; 18 | font-size: 30rpx; 19 | } -------------------------------------------------------------------------------- /example/pages/switch/switch.js: -------------------------------------------------------------------------------- 1 | // pages/switch/switch.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | btnTap: function(){ 19 | this.switch = this.selectComponent("#switchEnable") 20 | this.switch.toggle(); 21 | }, 22 | //绑定时间出发 23 | _statusChange:function(options){ 24 | console.info('isClose',options.detail.isClose); 25 | } 26 | }) -------------------------------------------------------------------------------- /example/pages/switch/switch.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "YEPUI switch", 3 | "usingComponents": { 4 | "switch": "../../components/switch/index" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/pages/switch/switch.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 | 内容类型1 26 | 27 | 28 | 29 | 30 | 内容类型2 31 | 32 | 33 | 34 | 35 | 内容类型3 36 | 37 | 38 | 39 | 40 | 自定义switch样式 41 | 42 | 43 | -------------------------------------------------------------------------------- /example/pages/switch/switch.wxss: -------------------------------------------------------------------------------- 1 | /* pages/switch/switch.wxss */ 2 | .item{ 3 | display:block; 4 | text-align:left; 5 | padding:40rpx; 6 | border-bottom:1rpx solid #ddd; 7 | } 8 | .switch-bg{ 9 | background-color: red !important; 10 | } -------------------------------------------------------------------------------- /example/pages/tab/tab.js: -------------------------------------------------------------------------------- 1 | // var WXBizDataCrypt = require('../../utils/WXBizDataCrypt') 2 | 3 | 4 | Page({ 5 | data: { 6 | tabMessage: { 7 | type: 'message', 8 | tabs: [{ 9 | name: '物流', 10 | count: '100', 11 | icon: '', 12 | tabContent: '物流1' 13 | },{ 14 | name: '通知', 15 | count: '100', 16 | icon: '', 17 | tabContent: '物1' 18 | },{ 19 | name: '互动互动', 20 | count: '100', 21 | icon: '', 22 | tabContent: '物流2221' 23 | },{ 24 | name: '订订阅阅', 25 | count: '100', 26 | icon: '', 27 | tabContent: '物流2332323231' 28 | },{ 29 | name: '互动互动', 30 | count: '10', 31 | icon: '', 32 | tabContent: '物流1232323' 33 | }], 34 | currIdx: 0 35 | }, 36 | tabText: { 37 | type: 'text', 38 | tabs: [{ 39 | name: '精选', 40 | count: '', 41 | icon: '', 42 | tabContent: '物流1' 43 | },{ 44 | name: '图书文娱', 45 | count: '100', 46 | icon: '', 47 | tabContent: '物1' 48 | },{ 49 | name: '服饰内衣', 50 | count: '100', 51 | icon: '', 52 | tabContent: '物流2221' 53 | },{ 54 | name: '母婴玩具', 55 | count: '100', 56 | icon: '', 57 | tabContent: '物流2332323231' 58 | },{ 59 | name: '家具', 60 | count: '10', 61 | icon: '', 62 | tabContent: '物流1232323' 63 | },{ 64 | name: '服饰内衣', 65 | count: '100', 66 | icon: '', 67 | tabContent: '物流2221' 68 | },{ 69 | name: '母婴玩具', 70 | count: '100', 71 | icon: '', 72 | tabContent: '物流2332323231' 73 | },{ 74 | name: '家具', 75 | count: '10', 76 | icon: '', 77 | tabContent: '物流1232323' 78 | }], 79 | currIdx: 0 80 | } 81 | }, 82 | 83 | selectMessageTab: function (e) { 84 | console.log('selectTab', e); 85 | // 获取从组件过来的数据 86 | let me = this; 87 | // console.log('e.currentTarget.dataset.idx', e.currentTarget.dataset.idx, me.data.tabs[e.currentTarget.dataset.idx]); 88 | let currIdx = e.detail.key; 89 | 90 | console.log('currIdx', currIdx); 91 | let txt = 'tabMessage.currIdx'; 92 | 93 | this.setData({ 94 | [txt]: e.detail.key 95 | }); 96 | }, 97 | 98 | selectTextTab: function (e) { 99 | console.log('selectTab', e); 100 | // 获取从组件过来的数据 101 | let me = this; 102 | // console.log('e.currentTarget.dataset.idx', e.currentTarget.dataset.idx, me.data.tabs[e.currentTarget.dataset.idx]); 103 | let currIdx = e.detail.key; 104 | 105 | console.log('currIdx', currIdx); 106 | let txt = 'tabText.currIdx'; 107 | 108 | this.setData({ 109 | [txt]: e.detail.key 110 | }); 111 | } 112 | }); -------------------------------------------------------------------------------- /example/pages/tab/tab.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "Tabs", 3 | "usingComponents": { 4 | "yepTab": "../../components/tab/index" 5 | } 6 | } -------------------------------------------------------------------------------- /example/pages/tab/tab.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tabs 标签页 5 | 6 | 7 | 8 | 带有消息数字的 Tabs 9 | 10 | 11 | 12 | 13 | {{tabItem.tabContent}} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 只有文本的 Tabs 22 | 23 | 24 | 25 | 26 | {{tabItem.tabContent}} 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 横向滚动的 Tabs 35 | 36 | 37 | 38 | 39 | {{tabItem.tabContent}} 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /example/pages/tab/tab.wxss: -------------------------------------------------------------------------------- 1 | .content-page{ 2 | padding: 10rpx 0; 3 | } 4 | 5 | .content-page .box{ 6 | padding: 20rpx 0; 7 | } 8 | 9 | .content-page .title{ 10 | padding-left: 30rpx; 11 | } 12 | 13 | .tab-content{ 14 | margin-bottom: 100rpx; 15 | } -------------------------------------------------------------------------------- /example/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": false, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false 13 | }, 14 | "compileType": "miniprogram", 15 | "libVersion": "2.4.2", 16 | "appid": "wx6b455a756cd0a489", 17 | "projectname": "yep-mp-com-demo", 18 | "debugOptions": { 19 | "hidedInDevtools": [] 20 | }, 21 | "isGameTourist": false, 22 | "simulatorType": "wechat", 23 | "simulatorPluginLibVersion": {}, 24 | "condition": { 25 | "search": { 26 | "current": -1, 27 | "list": [] 28 | }, 29 | "conversation": { 30 | "current": -1, 31 | "list": [] 32 | }, 33 | "plugin": { 34 | "current": -1, 35 | "list": [] 36 | }, 37 | "game": { 38 | "currentL": -1, 39 | "list": [] 40 | }, 41 | "miniprogram": { 42 | "current": 8, 43 | "list": [ 44 | { 45 | "id": -1, 46 | "name": "弹框页面", 47 | "pathName": "pages/dialog/dialog", 48 | "query": "" 49 | }, 50 | { 51 | "id": -1, 52 | "name": "拖拽排序", 53 | "pathName": "pages/drag/drag", 54 | "query": "" 55 | }, 56 | { 57 | "id": -1, 58 | "name": "popup组件", 59 | "pathName": "pages/popup/popup", 60 | "query": "" 61 | }, 62 | { 63 | "id": -1, 64 | "name": "计数器组件", 65 | "pathName": "pages/counter/counter", 66 | "query": "" 67 | }, 68 | { 69 | "id": -1, 70 | "name": "折叠页面", 71 | "pathName": "pages/collapse/collapse", 72 | "query": "" 73 | }, 74 | { 75 | "id": -1, 76 | "name": "全局消息弹框", 77 | "pathName": "pages/message/message", 78 | "query": "" 79 | }, 80 | { 81 | "id": 6, 82 | "name": "开关", 83 | "pathName": "pages/switch/switch", 84 | "query": "" 85 | }, 86 | { 87 | "id": 7, 88 | "name": "cell", 89 | "pathName": "pages/cell/cell", 90 | "query": "" 91 | }, 92 | { 93 | "id": -1, 94 | "name": "断行组件", 95 | "pathName": "pages/elip/elip", 96 | "query": "" 97 | } 98 | ] 99 | } 100 | } 101 | } -------------------------------------------------------------------------------- /example/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const clean = require("gulp-clean"); 3 | 4 | const config = require("./tools/config"); 5 | const BuildTask = require("./tools/build"); 6 | const id = require("./package.json").name || "miniprogram-custom-component"; 7 | 8 | // 各种task都是在这里定义的 9 | new BuildTask(id, config.entry); 10 | 11 | // clean the generated folders and files 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 | 26 | return done(); 27 | } 28 | ) 29 | ); 30 | // watch 31 | gulp.task("watch", gulp.series(`${id}-watch`)); 32 | // build for develop 33 | gulp.task("dev", gulp.series(`${id}-dev`)); 34 | // build for publish 35 | gulp.task("default", gulp.series(`${id}-default`)); 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@jdcfe/yep-mp-com", 3 | "version": "0.2.6", 4 | "description": "yep-mp小程序组件库", 5 | "main": "miniprogram_dist/**/index.js", 6 | "scripts": { 7 | "dev": "gulp dev --develop", 8 | "build": "gulp", 9 | "dist": "npm run build", 10 | "clean": "gulp clean", 11 | "watch": "gulp watch --develop --watch", 12 | "test": "jest ./test/* --silent --bail", 13 | "coverage": "jest ./test/* --coverage --bail", 14 | "lint": "eslint --fix \"src/**/*.js\"", 15 | "lint-exam": "eslint --fix \"example/**/*.js\"", 16 | "lint-tools": "eslint --fix \"tools/**/*.js\" --rule \"import/no-extraneous-dependencies: false\"" 17 | }, 18 | "miniprogram": "miniprogram_dist", 19 | "jest": { 20 | "testEnvironment": "jsdom", 21 | "testURL": "https://jest.test", 22 | "collectCoverageFrom": [ 23 | "src/**/*.js" 24 | ], 25 | "moduleDirectories": [ 26 | "node_modules", 27 | "src" 28 | ] 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "https://github.com/jdf2e/yep-mp-com.git" 33 | }, 34 | "author": "codeww", 35 | "license": "MIT", 36 | "devDependencies": { 37 | "babel-core": "^6.26.3", 38 | "babel-loader": "^7.1.5", 39 | "babel-plugin-module-resolver": "^3.2.0", 40 | "babel-preset-env": "^1.7.0", 41 | "colors": "^1.3.3", 42 | "eslint": "^5.3.0", 43 | "eslint-config-airbnb-base": "^13.1.0", 44 | "eslint-loader": "^2.1.0", 45 | "eslint-plugin-import": "^2.14.0", 46 | "eslint-plugin-node": "^7.0.1", 47 | "eslint-plugin-promise": "^3.8.0", 48 | "gulp": "^4.0.2", 49 | "gulp-clean": "^0.4.0", 50 | "gulp-if": "^2.0.2", 51 | "gulp-install": "^1.1.0", 52 | "gulp-less": "^3.5.0", 53 | "gulp-rename": "^1.4.0", 54 | "gulp-sourcemaps": "^2.6.5", 55 | "jest": "^23.5.0", 56 | "miniprogram-simulate": "^0.1.3", 57 | "through2": "^2.0.3", 58 | "ts-jest": "^23.0.1", 59 | "ts-lint": "^4.5.1", 60 | "ts-loader": "^5.4.5", 61 | "tslint": "^5.11.0", 62 | "tslint-loader": "^3.5.4", 63 | "typescript": "^3.5.3", 64 | "webpack": "^4.39.1", 65 | "webpack-node-externals": "^1.7.2" 66 | }, 67 | "dependencies": {} 68 | } 69 | -------------------------------------------------------------------------------- /src/avatar/index.js: -------------------------------------------------------------------------------- 1 | 2 | Component({ 3 | externalClasses: ['yepc-avatar', 'yepc-avatar-msg'], // 拓展样式 4 | properties: { 5 | shape: { 6 | type: String, 7 | value: 'circle' // circle,square 8 | }, 9 | size: { 10 | type: String, 11 | Number, 12 | value: '', 13 | observer(newVal, oldVal) { 14 | if (newVal.indexOf('rpx') != -1) { 15 | this.setData({ 16 | _size: newVal 17 | }) 18 | } else { 19 | this.setData({ 20 | _size: parseInt(newVal) * 2 + 'rpx' 21 | }) 22 | } 23 | } 24 | }, 25 | count: { 26 | type: String, 27 | value: '', 28 | observer(newVal, oldVal) { 29 | if (newVal && parseInt(newVal) <= 0 || !newVal) { 30 | return 31 | } 32 | if (parseInt(newVal) < 10) { 33 | this.setData({ 34 | _msgCls: 'circle', 35 | _count: parseInt(newVal) 36 | }) 37 | } else { 38 | this.setData({ 39 | _msgCls: 'rec', 40 | _count: (parseInt(newVal) > 99 ? '99+' : parseInt(newVal)) 41 | }) 42 | } 43 | } 44 | }, 45 | src: { 46 | type: String, 47 | value: '' 48 | }, 49 | max: { 50 | type: Number, 51 | value: 99 52 | } 53 | }, 54 | data: { 55 | _msgCls: 'circle', 56 | _count: '', 57 | _size: '' 58 | }, 59 | attached() { 60 | if (this.data.count > this.data.max) { 61 | this.setData({ 62 | count: this.data.max + '+' 63 | }) 64 | } 65 | }, 66 | methods: { 67 | } 68 | }) 69 | -------------------------------------------------------------------------------- /src/avatar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/avatar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{count}} 5 | 6 | -------------------------------------------------------------------------------- /src/avatar/index.wxss: -------------------------------------------------------------------------------- 1 | 2 | .yep-avatar { 3 | width: 100rpx; 4 | height: 100rpx; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | background-color: #ccc; 9 | color: #FFF; 10 | position: relative; 11 | } 12 | 13 | .yep-avatar-square { 14 | width: 100rpx; 15 | height: 100rpx; 16 | border-radius: 10%; 17 | } 18 | 19 | .yep-avatar-circle{ 20 | width: 100rpx; 21 | height: 100rpx; 22 | border-radius: 50%; 23 | } 24 | 25 | .yep-avatar-msg { 26 | position: absolute; 27 | top: -10%; 28 | right: -10%; 29 | background: #f23030; 30 | border: 2rpx solid #FFF; 31 | text-align:center; 32 | font-size:24rpx; 33 | color:#fff; 34 | } 35 | 36 | .yep-avatar-msg.circle{ 37 | height: 40rpx; 38 | width: 40rpx; 39 | line-height: 40rpx; 40 | border-radius: 50%; 41 | } 42 | 43 | .yep-avatar-msg.rec{ 44 | height: 40rpx; 45 | line-height: 40rpx; 46 | padding: 0 10rpx; 47 | border-radius: 20rpx; 48 | } -------------------------------------------------------------------------------- /src/badge/index.js: -------------------------------------------------------------------------------- 1 | 2 | Component({ 3 | // 组件的对外属性，是属性名到属性设置的映射表 4 | externalClasses: ['yepc-badge', 'yepc-badge-msg'], // 拓展样式 5 | properties: { 6 | count: { 7 | type: String, 8 | value: '', 9 | observer(newVal, oldVal) { 10 | if (newVal && parseInt(newVal) <= 0 || !newVal) { 11 | return 12 | } 13 | if (parseInt(newVal) < 10) { 14 | this.setData({ 15 | _msgCls: 'circle', 16 | _count: parseInt(newVal) 17 | }) 18 | } else { 19 | console.log((parseInt(newVal) > 99 ? '99+' : parseInt(newVal))) 20 | this.setData({ 21 | _msgCls: 'rec', 22 | _count: (parseInt(newVal) > 99 ? '99+' : parseInt(newVal)) 23 | }) 24 | } 25 | } 26 | }, 27 | dot: { 28 | type: Boolean, 29 | value: false, 30 | observer(newVal, oldVal) { 31 | if (newVal) { 32 | this.setData({ 33 | _msgCls: 'dot' 34 | }) 35 | } else { 36 | this.setData({ 37 | _msgCls: '' 38 | }) 39 | } 40 | } 41 | }, 42 | text: { 43 | type: String, 44 | value: '' 45 | }, 46 | alone: { 47 | type: Boolean, 48 | value: false, 49 | observer(newVal, oldVal) { 50 | if (newVal) { 51 | this.setData({ 52 | _alone: 'alone' 53 | }) 54 | } else { 55 | this.setData({ 56 | _alone: '' 57 | }) 58 | } 59 | } 60 | } 61 | }, 62 | // 组件的内部数据，和 properties 一同用于组件的模版渲染 63 | data: { 64 | _msgCls: '', 65 | _count: '', 66 | _alone: '' 67 | }, 68 | attached() { 69 | }, 70 | methods: { 71 | } 72 | }) 73 | -------------------------------------------------------------------------------- /src/badge/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/badge/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | {{text || _count}} 8 | -------------------------------------------------------------------------------- /src/badge/index.wxss: -------------------------------------------------------------------------------- 1 | .yep-badge{ 2 | display: inline-block; 3 | position: relative; 4 | } 5 | 6 | /*dot临时方案*/ 7 | .yep-true{ 8 | width:20rpx; 9 | max-width: 20rpx !important; 10 | min-width: 20rpx !important; 11 | height:20rpx; 12 | border-radius:60%; 13 | top:-7rpx; 14 | right:-1rpx; 15 | padding: 0; 16 | } 17 | 18 | .yep-badge-msg { 19 | position: absolute; 20 | top: -10%; 21 | right: -10%; 22 | background: #f23030; 23 | border: 2rpx solid #FFF; 24 | text-align:center; 25 | font-size:24rpx; 26 | color:#fff; 27 | } 28 | 29 | .yep-badge-circle{ 30 | height: 40rpx; 31 | width: 40rpx; 32 | line-height: 40rpx; 33 | border-radius: 50%; 34 | } 35 | 36 | .yep-badge-rec{ 37 | height: 40rpx; 38 | line-height: 40rpx; 39 | padding: 0 10rpx; 40 | border-radius: 20rpx; 41 | } 42 | 43 | .yep-badge-dot{ 44 | height: 20rpx; 45 | width: 20rpx; 46 | border-radius: 50%; 47 | } 48 | 49 | .yep-badge-alone{ 50 | position: relative; 51 | } -------------------------------------------------------------------------------- /src/bottomBar/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | /** 3 | * 组件的属性列表 4 | */ 5 | properties: { 6 | height: { 7 | type: Number, 8 | default: 0, 9 | }, 10 | zIndex: { 11 | type: Number, 12 | default: 99 13 | }, 14 | bgColor: { 15 | type: String, 16 | default: '#fff' 17 | } 18 | }, 19 | 20 | /** 21 | * 组件的初始数据 22 | */ 23 | data: { 24 | isIPhoneX: false 25 | }, 26 | 27 | /** 28 | * 组件的方法列表 29 | */ 30 | methods: { 31 | 32 | }, 33 | attached() { 34 | wx.getSystemInfo({ 35 | success: res => { 36 | const modelmes = res.model 37 | if (modelmes.search('iPhone X') !== -1) { 38 | this.setData({ 39 | isIPhoneX: true 40 | }) 41 | } 42 | } 43 | }) 44 | } 45 | }) 46 | -------------------------------------------------------------------------------- /src/bottomBar/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/bottomBar/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/bottomBar/index.wxss: -------------------------------------------------------------------------------- 1 | /* yepCom/bottomBar/bottomBar.wxss */ 2 | .bar-wrap { 3 | position: fixed; 4 | bottom: 0; 5 | left: 0; 6 | width: 100%; 7 | } 8 | .ipx-holder { 9 | position: fixed; 10 | bottom: 0; 11 | left: 0; 12 | width: 100%; 13 | } -------------------------------------------------------------------------------- /src/button/index.js: -------------------------------------------------------------------------------- 1 | // var WXBizDataCrypt = require('../../utils/WXBizDataCrypt') 2 | 3 | // 获取应用实例 4 | const app = getApp() 5 | 6 | /* 按钮type: 7 | * normal\primary\disabled\ghost\small\large\ 8 | * search\download\upload\backward\forward\loading\ 9 | * addcart\addcarticon\easybuy\ 10 | */ 11 | Component({ 12 | // options: { 13 | // multipleSlots: true // 在组件定义时的选项中启用多slot支持 14 | // }, 15 | properties: { 16 | type: { 17 | type: String, 18 | value: 'easybuy' 19 | }, 20 | size: { 21 | type: String, 22 | value: 'normal' 23 | }, 24 | hoverclass: { 25 | type: String, 26 | value: 'hover-class' 27 | } 28 | }, 29 | data: { 30 | // 这里是一些组件内部数据 31 | someData: {} 32 | }, 33 | methods: { 34 | // 这里是一个自定义方法 35 | onTap() { 36 | console.log('onTap') 37 | const myEventDetail = {} // detail对象，提供给事件监听函数 38 | const myEventOption = {} // 触发事件的选项 39 | this.triggerEvent('btnEvent', myEventDetail, myEventOption) 40 | } 41 | } 42 | }) 43 | -------------------------------------------------------------------------------- /src/button/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/button/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 48 | -------------------------------------------------------------------------------- /src/cell/index.js: -------------------------------------------------------------------------------- 1 | 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | title: { 8 | type: String, 9 | value: '' 10 | }, 11 | subTitle: { 12 | type: String, 13 | value: '' 14 | }, 15 | desc: { 16 | type: String, 17 | value: '' 18 | } 19 | }, 20 | /** 21 | * 组件的内部数据 22 | */ 23 | data: { 24 | }, 25 | /** 26 | * 组件的方法列表 27 | */ 28 | methods: { 29 | 30 | } 31 | }) 32 | -------------------------------------------------------------------------------- /src/cell/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/cell/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
{{title}}
5 |
{{subTitle}}
6 |
7 |
8 | {{desc}} 9 | 10 |
11 | -------------------------------------------------------------------------------- /src/cell/index.wxss: -------------------------------------------------------------------------------- 1 | .cell{ 2 | padding: 14rpx 32rpx; 3 | font-size: 28rpx; 4 | color: #515a6e; 5 | display: flex; 6 | flex-direction: row; 7 | justify-content: space-between; 8 | align-items: center; 9 | background-color:#fff; 10 | } 11 | .cell-left{ 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: flex-start; 15 | align-items: flex-start; 16 | } 17 | .main-title{ 18 | height: 48rpx; 19 | line-height: 48rpx; 20 | } 21 | .sub-title{ 22 | color: #808695; 23 | font-size: 24rpx; 24 | height: 30rpx; 25 | line-height: 30rpx; 26 | } -------------------------------------------------------------------------------- /src/collapse/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | /** 3 | * 组件的属性列表 4 | */ 5 | properties: { 6 | title: {// 折叠部分标题 7 | type: String, 8 | value: '' 9 | } 10 | }, 11 | 12 | /** 13 | * 组件的初始数据 14 | */ 15 | data: { 16 | isOpen: false, // 是否展开 17 | }, 18 | lifetimes: { 19 | ready() { 20 | } 21 | }, 22 | /** 23 | * 组件的方法列表 24 | */ 25 | methods: { 26 | /** 27 | * 开启关闭折叠内容 28 | */ 29 | toggleInfo() { 30 | this.setData({ 31 | isOpen: !this.data.isOpen 32 | }) 33 | 34 | // this.setData({animation: this.animation.export()}) 35 | }, 36 | /** 37 | * 获取当前的状态 38 | */ 39 | getStatus() { 40 | return this.data.isOpen 41 | }, 42 | /** 43 | * 关闭折叠层 44 | */ 45 | closeInfo() { 46 | this.setData({ 47 | isOpen: false 48 | }) 49 | }, 50 | /** 51 | * 打开折叠层 52 | */ 53 | openInfo() { 54 | this.setData({ 55 | isOpen: true 56 | }) 57 | } 58 | } 59 | }) 60 | -------------------------------------------------------------------------------- /src/collapse/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/collapse/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{title}} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/collapse/index.wxss: -------------------------------------------------------------------------------- 1 | .collapse-box{ 2 | width: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | justify-content: flex-start; 6 | align-items: flex-start; 7 | border:1px solid #eee; 8 | min-height: 60rpx; 9 | } 10 | .collapse-title{ 11 | width: 100%; 12 | display: flex; 13 | flex-direction: row; 14 | justify-content: space-between; 15 | align-items: center; 16 | width: 100%; 17 | height: 60rpx; 18 | z-index: 2; 19 | background-color: #fff; 20 | } 21 | .title-text{ 22 | margin-left: 30rpx; 23 | width: 80%; 24 | overflow: hidden; 25 | text-overflow: ellipsis; 26 | white-space: nowrap; 27 | font-size: 28rpx; 28 | color: #000; 29 | } 30 | .title-img{ 31 | width:34rpx; 32 | height:34rpx; 33 | margin-right:30rpx; 34 | transition: all .3s ease; 35 | } 36 | .show-info{ 37 | transform: rotate(180deg); 38 | } 39 | .hide-info{ 40 | transform: rotate(0deg); 41 | } 42 | .box-detail{ 43 | z-index: -1; 44 | width: 100%; 45 | } -------------------------------------------------------------------------------- /src/countdown/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/countdown/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{_time}} 5 | 6 | 7 | {{_hour}} 8 | : 9 | {{_hour}} 10 | : 11 | {{_minute}} 12 | : 13 | {{_second}} 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/countdown/index.wxss: -------------------------------------------------------------------------------- 1 | .yep-countdown{ 2 | /*!*width:300rpx;*!*/ 3 | /*height: 56rpx;*/ 4 | /*background-color: #fff;*/ 5 | /*color: black;*/ 6 | /*font-size: 36rpx;*/ 7 | /*line-height: 56rpx;*/ 8 | } 9 | 10 | .yep-countdown { 11 | display: flex; 12 | align-items: center; 13 | } 14 | -------------------------------------------------------------------------------- /src/counter/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | // 最小值（计数值不得小于该值） 8 | min: { 9 | type: Number, 10 | value: 0 11 | }, 12 | // 最大值（计数值不得大于该值） 13 | max: { 14 | type: Number, 15 | value: 10000 16 | }, 17 | // 步幅 18 | step: { 19 | type: Number, 20 | value: 1 21 | } 22 | }, 23 | 24 | /** 25 | * 组件的初始数据 26 | */ 27 | data: { 28 | valiable: { 29 | add: true, 30 | sub: true 31 | } 32 | }, 33 | lifetimes: { 34 | ready() { 35 | const {min, max, step} = this.data 36 | if (min > max) { 37 | console.log('max值要比min大哦') 38 | } 39 | this.setData({ 40 | curNum: min + step 41 | }) 42 | } 43 | }, 44 | /** 45 | * 组件的方法列表 46 | */ 47 | methods: { 48 | /** 49 | * 执行计算 50 | */ 51 | doCount(e) { 52 | const type = e.currentTarget.dataset.type 53 | const { 54 | curNum, min, max, step 55 | } = this.data 56 | if (type == 'add') { // 加操作 57 | if (curNum < max) { 58 | if ((curNum + step) >= max) { 59 | this.setData({ 60 | 'valiable.add': false 61 | }) 62 | } 63 | this.setData({ 64 | curNum: curNum + step > max ? curNum : curNum + step, 65 | 'valiable.sub': true 66 | }) 67 | } 68 | } else if (type == 'sub') { // 减操作 69 | if (curNum > min) { 70 | if ((curNum - step) <= min) { 71 | this.setData({ 72 | 'valiable.sub': false 73 | }) 74 | } 75 | this.setData({ 76 | curNum: curNum - step < min ? curNum : curNum - step, 77 | 'valiable.add': true 78 | }) 79 | } 80 | } 81 | }, 82 | /** 83 | * 获取当前计数值 84 | */ 85 | getCurVal() { 86 | return this.data.curNum 87 | } 88 | } 89 | }) 90 | -------------------------------------------------------------------------------- /src/counter/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/counter/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | － 4 | {{curNum}} 5 | ＋ 6 | 7 | -------------------------------------------------------------------------------- /src/counter/index.wxss: -------------------------------------------------------------------------------- 1 | .counter-box{ 2 | height: 40rpx; 3 | width: 146rpx; 4 | background-color: #fff; 5 | display: flex; 6 | flex-direction: row; 7 | justify-content: flex-start; 8 | align-items: center; 9 | color: #777; 10 | font-size: 30rpx; 11 | } 12 | .counter-btn{ 13 | width:36rpx; 14 | height: 36rpx; 15 | border: 1px solid #ccc; 16 | font-size: 28rpx; 17 | line-height: 36rpx; 18 | text-align: center; 19 | } 20 | .counter-num{ 21 | border: 1px solid #ccc; 22 | border-width: 1rpx 0; 23 | margin:0 -1rpx 0 -1prx; 24 | flex:1; 25 | text-align: center; 26 | height: 36rpx; 27 | line-height: 36rpx; 28 | font-size: 26rpx; 29 | } 30 | .btn-unvaliable{ 31 | background-color:#eee; 32 | } 33 | -------------------------------------------------------------------------------- /src/dialog/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/dialog/index.ts: -------------------------------------------------------------------------------- 1 | Component({ 2 | externalClasses: ["box-bottom", "singleBtn"], // 拓展样式 3 | options: { 4 | multipleSlots: true // 在组件定义时的选项中启用多slot支持 5 | }, 6 | /** 7 | * 组件的属性列表 8 | */ 9 | properties: { 10 | btnType: { 11 | // 设置按钮类型: 0:无底部按钮 1：底部单按钮 2:底部双按钮 12 | type: Number, 13 | value: 2 14 | }, 15 | firstBtn: { 16 | type: String, 17 | value: "取消" 18 | }, 19 | secondBtn: { 20 | type: String, 21 | value: "确定" 22 | }, 23 | isSpecialBtn: { 24 | // 是否定制化底部按钮样式,如果该值为true时，需要填充按钮插槽中内容 25 | type: Boolean, 26 | value: false 27 | }, 28 | hasShade: { 29 | //是否有背景遮罩层 30 | type: Boolean, 31 | value: true 32 | } 33 | }, 34 | /** 35 | * 组件的内部数据 36 | */ 37 | data: { 38 | isClose: true // 弹框默认开启 39 | }, 40 | /** 41 | * 组件的方法列表 42 | */ 43 | methods: { 44 | toggle(): void { 45 | // 开启、关闭弹框 46 | this.setData({ 47 | isClose: !this.data.isClose 48 | }); 49 | }, 50 | confirm(): void { 51 | // 确认按钮 52 | this.triggerEvent( 53 | "dialogConfirm", 54 | { inputValue: this.data.inputValue }, 55 | {} 56 | ); 57 | }, 58 | cancel(): void { 59 | // 取消按钮 60 | this.triggerEvent("dialogCancel", {}, {}); 61 | this.toggle(); 62 | } 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /src/dialog/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {{firstBtn}} 15 | 16 | 17 | 18 | {{secondBtn}} 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/dialog/index.wxss: -------------------------------------------------------------------------------- 1 | /* components/dialogBox.wxss */ 2 | .box{ 3 | position: absolute; 4 | height: 100%; 5 | width: 100%; 6 | top: 0; 7 | left: 0; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | overflow: hidden; 12 | z-index: 10; 13 | } 14 | .box-shade{ 15 | position: absolute; 16 | height: 100%; 17 | width: 100%; 18 | top: 0; 19 | left: 0; 20 | background-color: rgba(0, 0, 0, 0.6); 21 | overflow: hidden; 22 | z-index: 0; 23 | } 24 | .box-container{ 25 | display: fixed; 26 | justify-content: center; 27 | align-items: center; 28 | background-color: #ffffff; 29 | border-radius: 20rpx; 30 | z-index:11; 31 | width: 570rpx; 32 | text-align:center; 33 | font-size: 36rpx; 34 | color: #232326; 35 | } 36 | .box-info-title{ 37 | margin-top:60rpx; 38 | line-height:40rpx; 39 | } 40 | .box-info-cont{ 41 | margin:30rpx 20rpx 40rpx; 42 | font-size: 30rpx; 43 | line-height: 40rpx; 44 | } 45 | .box-btn{ 46 | width:100%; 47 | height:108rpx; 48 | display:flex; 49 | justify-content:space-around; 50 | flex-direction:row; 51 | border-top:solid 1px #e1e1e1; 52 | } 53 | .btn-item{ 54 | flex:1; 55 | text-align:center; 56 | font-family:PingFangSC-Regular; 57 | font-size:36rpx; 58 | line-height:108rpx; 59 | height:108rpx; 60 | color:#232326; 61 | } 62 | .btn-item-rt{ 63 | border-left:solid 1px #e1e1e1; 64 | background-color:#f23030; 65 | color:#fff; 66 | border-bottom-right-radius:20rpx; 67 | } 68 | .singleBtn{ 69 | background-color: red; 70 | border-bottom-right-radius:20rpx; 71 | border-bottom-left-radius:20rpx; 72 | } -------------------------------------------------------------------------------- /src/divider/index.js: -------------------------------------------------------------------------------- 1 | // components/divider/divider.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | content: { 8 | type: String, 9 | value: '' 10 | }, 11 | height: { 12 | type: Number, 13 | value: 48 14 | }, 15 | color: { 16 | type: String, 17 | value: '#80848f' 18 | }, 19 | lineColor: { 20 | type: String, 21 | value: '#e9eaec' 22 | }, 23 | size: { 24 | type: String, 25 | value: 12 26 | } 27 | }, 28 | 29 | /** 30 | * 组件的初始数据 31 | */ 32 | data: { 33 | 34 | }, 35 | 36 | /** 37 | * 组件的方法列表 38 | */ 39 | methods: { 40 | 41 | } 42 | }) 43 | -------------------------------------------------------------------------------- /src/divider/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/divider/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{content}} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | module.exports = { 13 | getStyle : function(color,size,height){ 14 | var color = 'color:' + color +';'; 15 | var size = 'font-size:' + size + 'px;'; 16 | var height = 'height:' + height+'px;' 17 | return color + size + height; 18 | } 19 | } 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/divider/index.wxss: -------------------------------------------------------------------------------- 1 | /* components/divider/divider.wxss */ 2 | 3 | .yep-divider { 4 | width: 100%; 5 | text-align: center; 6 | font-size: 12px; 7 | position: relative; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .yep-divider-line { 14 | position: absolute; 15 | left: 0; 16 | width: 100%; 17 | height: 1rpx; 18 | background-color: #f7f7f7; 19 | top: 50%; 20 | } 21 | 22 | .yep-divider-content { 23 | background: #fff; 24 | position: relative; 25 | z-index: 1; 26 | display: inline-block; 27 | padding: 0 10px; 28 | } 29 | -------------------------------------------------------------------------------- /src/drag/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/drag/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/drag/index.wxss: -------------------------------------------------------------------------------- 1 | /* components/drag.wxss */ 2 | @import "../dragTemp/index.wxss"; 3 | .border{ 4 | border:1px solid #eee; 5 | position: relative; 6 | } 7 | .touchView { 8 | z-index: 20; 9 | width: 100rpx; 10 | height: 100%; 11 | position: absolute; 12 | top: 0; 13 | right: 0rpx; 14 | } 15 | .moveable_row { 16 | width: 100%; 17 | height: 100%; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | z-index: 40; 22 | } 23 | .dragSelected { 24 | background-color: #ccc !important; 25 | } 26 | .moveable_item{ 27 | width: 100%; 28 | background-color: #fff; 29 | } 30 | .hidden,.none{display: none!important;} 31 | .dragSelected { 32 | background-color: #ccc !important; 33 | } -------------------------------------------------------------------------------- /src/dragTemp/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jdf2e/yep-mp-com/fd46c3ec6731f686e8f1645900b4830dce90b2b7/src/dragTemp/index.js -------------------------------------------------------------------------------- /src/dragTemp/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /src/dragTemp/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /src/dragTemp/index.wxss: -------------------------------------------------------------------------------- 1 | .dragTemp{ 2 | width:100%; 3 | height:220rpx; 4 | display:flex; 5 | flex-direction:row; 6 | justify-content:space-around; 7 | align-items:center; 8 | margin-top:30rpx; 9 | background-color: #fff; 10 | } 11 | .drag-img{ 12 | width:210rpx; 13 | height:210rpx; 14 | border-radius:10rpx; 15 | } 16 | .drag-text{ 17 | width:460rpx; 18 | height:210rpx; 19 | display:flex; 20 | flex-direction:column; 21 | justify-content:space-between; 22 | align-items:flex-start; 23 | } 24 | .drag-text-title{ 25 | width:100%; 26 | height:40rpx; 27 | box-sizing:border-box; 28 | display:flex; 29 | flex-direction:row; 30 | justify-content:space-between; 31 | align-items:center; 32 | } 33 | .title-name{ 34 | width:410rpx; 35 | height:40rpx; 36 | font-size:30rpx; 37 | font-family:PingFangSC-Regular; 38 | font-weight:400; 39 | color:rgba(51,51,51,1); 40 | line-height:40rpx; 41 | overflow:hidden; 42 | text-overflow:ellipsis; 43 | white-space:nowrap; 44 | } 45 | .title-flag{ 46 | width:40rpx; 47 | height:40rpx; 48 | } 49 | .drag-text-desc{ 50 | position:relative; 51 | width:460rpx; 52 | height:116rpx; 53 | font-size:24rpx; 54 | font-family:PingFangSC-Regular; 55 | font-weight:400; 56 | color:rgba(102,102,102,1); 57 | line-height:30rpx; 58 | } -------------------------------------------------------------------------------- /src/dropMenu/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | labelTxt: { 4 | type: String, 5 | value: '分类：' 6 | }, 7 | isDropMenu: { 8 | type: Boolean, 9 | value: false 10 | }, 11 | dropMenuData: { 12 | type: Array, 13 | value: [{val: '我是选择1', isSel: false}, {val: '我是选择2', isSel: false}, {val: '我是选择3', isSel: false}] 14 | }, 15 | selVal: { 16 | type: String, 17 | value: '请选择类型' 18 | }, 19 | curIndex: { 20 | type: Number, 21 | value: '' 22 | }, 23 | icon: { 24 | type: String, 25 | value: 'http://img20.360buyimg.com/uba/jfs/t20959/196/687084072/15587/b595f4fa/5b14e462N1b76c89a.png' 26 | } 27 | }, 28 | methods: { 29 | select(e) { 30 | const selValue = e.currentTarget.dataset.item.val 31 | const curIndex = e.currentTarget.dataset.index 32 | this.setData({ 33 | selVal: selValue, 34 | curIndex, 35 | isDropMenu: false 36 | }) 37 | }, 38 | isDropMenuShow() { 39 | this.setData({ 40 | isDropMenu: !this.data.isDropMenu 41 | }) 42 | } 43 | } 44 | }) 45 | -------------------------------------------------------------------------------- /src/dropMenu/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component":true 3 | } -------------------------------------------------------------------------------- /src/dropMenu/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{labelTxt}} 4 | 5 | 6 | {{selVal}} 7 | 8 | 9 | 10 | 11 | 13 | {{item.val}} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/dropMenu/index.wxss: -------------------------------------------------------------------------------- 1 | view{ 2 | box-sizing: border-box; 3 | } 4 | 5 | .label { 6 | font-size: 30rpx; 7 | float: left; 8 | width: 100rpx; 9 | text-align: right; 10 | margin-right: 20rpx; 11 | line-height: 60rpx; 12 | height: 60rpx; 13 | } 14 | 15 | .yep-drop-box { 16 | float: left; 17 | } 18 | 19 | .yep-select-box { 20 | width: 240rpx; 21 | height: 60rpx; 22 | line-height: 38rpx; 23 | border: solid 1rpx #e3e5e9; 24 | font-size: 30rpx; 25 | padding: 10rpx; 26 | position: relative; 27 | } 28 | 29 | .yep-drop-list{ 30 | border: solid 1rpx #e3e5e9; 31 | border-top: none; 32 | width: 240rpx; 33 | } 34 | 35 | .yep-drop-item { 36 | width: 238rpx; 37 | padding: 10rpx; 38 | font-size: 30rpx; 39 | } 40 | 41 | .yep-drop-item.curr{ 42 | background-color: #f23030; 43 | color: #fff; 44 | } 45 | 46 | .clearfix:after { 47 | content: "."; 48 | display: block; 49 | height: 0; 50 | clear: both; 51 | visibility: hidden; 52 | } 53 | 54 | .border-bottom-none{ 55 | border-bottom: none; 56 | } 57 | 58 | .drop-icon{ 59 | position: absolute; 60 | transform: translate(-50%, -50%); 61 | width: 18rpx; 62 | height: 10rpx; 63 | top: 50%; 64 | right: 10rpx; 65 | } 66 | 67 | .drop-reverse{ 68 | transform: translate(-50%, -50%) rotate(180deg); 69 | } 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/elevator/index.js: -------------------------------------------------------------------------------- 1 | 2 | Component({ 3 | /* 数据格式 4 | elevatorList:[ 5 | { 6 | title:"A", 7 | cont:[ //可以为空 8 | { 9 | name:'American', 10 | id:'a1' //该字段可以没有 11 | }, 12 | { 13 | name:'Australian', 14 | id:'a2' 15 | } 16 | ] 17 | }, 18 | ] 19 | */ 20 | externalClasses: [], 21 | properties: { 22 | elevatorList: { 23 | type: Array, 24 | value: [] 25 | }, 26 | scrollHeight: { // 可视区域高度 27 | type: Number, 28 | value: 667, 29 | observer(newVal, oldVal) { 30 | console.log('observer', newVal, oldVal) 31 | if (newVal != null) { 32 | this.setData({ 33 | scrollHeight: newVal 34 | }) 35 | } else { 36 | // 获取屏幕高度 37 | const _this = this 38 | wx.getSystemInfo({ 39 | success(res) { 40 | _this.setData({ 41 | scrollHeight: res.screenHeight 42 | }) 43 | } 44 | }) 45 | } 46 | } 47 | }, 48 | showIndex: { // 是否显示索引toast 49 | type: Boolean, 50 | value: true 51 | }, 52 | IndexBgColor: { // 索引选中背景色 53 | type: String, 54 | value: '#e4393c' 55 | }, 56 | }, 57 | data: { 58 | scrollHeight: 0, 59 | toView: '', 60 | elevatorArray: [], 61 | letter: '', // 提示字母 62 | tab: -1, 63 | }, 64 | methods: { 65 | /** 66 | * 根据首字母 滚动页面某一位置 67 | */ 68 | chooseTab(e) { 69 | const index = e.currentTarget.dataset.index 70 | this.setData({ 71 | toView: 'list-' + index, 72 | tab: index, 73 | }) 74 | const _this = this 75 | setTimeout(function () { 76 | _this.setData({ 77 | tab: -1, 78 | }) 79 | }, 500) 80 | // 是否显示索引 81 | if (this.properties.showIndex) { 82 | this.setData({ 83 | letter: this.data.elevatorList[index].title, 84 | }) 85 | setTimeout(function () { 86 | _this.setData({ 87 | letter: '' 88 | }) 89 | }, 500) 90 | } 91 | }, 92 | /** 93 | * 获取当前选中项的值 94 | */ 95 | chooseItem(e) { 96 | this.triggerEvent('chooseItem', e.currentTarget.dataset.value) 97 | } 98 | } 99 | }) 100 | -------------------------------------------------------------------------------- /src/elevator/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/elevator/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{item.title}} 6 | 7 | {{item.name}} 8 | 9 | 10 | 11 | 12 | {{item.title}} 14 | 15 | 16 | {{letter}} 17 | 18 | -------------------------------------------------------------------------------- /src/elevator/index.wxss: -------------------------------------------------------------------------------- 1 | .elevator{ 2 | position: absolute; 3 | z-index:20; 4 | width: 100%; 5 | background: rgb(249,249,249); 6 | } 7 | .elevator-list .title{ 8 | padding-left:32rpx; 9 | font-size:36rpx; 10 | line-height: 52rpx; 11 | color:rgb(51,51,51); 12 | } 13 | .elevator-list .list-cont{ 14 | background:#fff; 15 | } 16 | .elevator-list .list-cont .item{ 17 | margin-left:32rpx; 18 | font-size:30rpx; 19 | line-height: 104rpx; 20 | color:rgb(102,102,102); 21 | border-bottom: 1rpx solid rgb(238,238,238); 22 | } 23 | .elevator-btn{ 24 | position: fixed; 25 | width:40rpx; 26 | top:80rpx; 27 | right:24rpx; 28 | } 29 | .elevator-btn .btn{ 30 | width:38rpx; 31 | height: 38rpx; 32 | border-radius: 19rpx; 33 | font-size:24rpx; 34 | line-height: 38rpx; 35 | color:rgb(153,153,153); 36 | text-align: center; 37 | } 38 | .elevator-btn .selected{ 39 | /*background: #e4393c;*/ 40 | color:#fff; 41 | } 42 | .btn-box{ 43 | position: fixed; 44 | top:40%; 45 | left:45%; 46 | width: 80rpx; 47 | height: 80rpx; 48 | line-height: 80rpx; 49 | font-size: 50rpx; 50 | background: rgba(51,51,51,0.3); 51 | text-align: center; 52 | border-radius: 10rpx; 53 | color:#fff; 54 | } -------------------------------------------------------------------------------- /src/elip/index.js: -------------------------------------------------------------------------------- 1 | 2 | Component({ 3 | externalClasses: [ 4 | 'switch-box' 5 | ], 6 | /** 7 | * 组件的属性列表 8 | */ 9 | properties: { 10 | line: { 11 | type: Number, 12 | value: 1 13 | } 14 | }, 15 | lifetimes: { 16 | ready() { 17 | const line = this.data.line <= 1 ? 1 : this.data.line 18 | this.setData({ 19 | line_number: line > 1 ? 'mult_line' : 'single_line' 20 | }) 21 | } 22 | }, 23 | /** 24 | * 组件的内部数据 25 | */ 26 | data: { 27 | }, 28 | /** 29 | * 组件的方法列表 30 | */ 31 | methods: { 32 | } 33 | }) 34 | -------------------------------------------------------------------------------- /src/elip/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/elip/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/elip/index.wxss: -------------------------------------------------------------------------------- 1 | .elip{ 2 | width: 100%; 3 | height: auto; 4 | } 5 | .single_line{ 6 | overflow: hidden; 7 | text-overflow: ellipsis; 8 | white-space: nowrap; 9 | } 10 | .mult_line{ 11 | overflow : hidden; 12 | text-overflow: ellipsis; 13 | display: -webkit-box; 14 | -webkit-box-orient: vertical; 15 | } -------------------------------------------------------------------------------- /src/goTop/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | options: { 3 | multipleSlots: true // 在组件定义时的选项中启用多slot支持 4 | }, 5 | properties: { 6 | // 这里定义的属性，属性值可以在组件使用时指定 7 | // 拉到什么位置时，回到顶部按钮展示 8 | setScrollTop: { 9 | type: Number, 10 | value: 100 11 | }, 12 | // 回到顶部按钮的宽 13 | width: { 14 | type: Number, 15 | value: 74 16 | }, 17 | // 回到顶部按钮的高 18 | height: { 19 | type: Number, 20 | value: 74 21 | } 22 | }, 23 | data: { 24 | // 这里是一些组件内部数据 25 | scrollTop: 0, 26 | isFloor: false 27 | }, 28 | methods: { 29 | // 这里是一个自定义方法 30 | scroll(e) { 31 | let isFloor 32 | // 触发回到顶部按钮显示的条件 33 | if (e.detail.scrollTop > this.data.setScrollTop) { 34 | isFloor = true 35 | } else { 36 | isFloor = false 37 | } 38 | this.setData({ 39 | isFloor 40 | }) 41 | }, 42 | goTop() { 43 | this.setData({ 44 | scrollTop: 0 45 | }) 46 | } 47 | } 48 | }) 49 | -------------------------------------------------------------------------------- /src/goTop/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /src/goTop/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/goTop/index.wxss: -------------------------------------------------------------------------------- 1 | page{ 2 | height: 100%; 3 | } 4 | 5 | .yep-scroll-view-container{ 6 | height: 100%; 7 | } 8 | 9 | .yep-scroll-container{ 10 | //height: 2000rpx; 11 | text-align: center; 12 | } 13 | 14 | .yep-go-top-icon{ 15 | width: 74rpx; 16 | height: 74rpx; 17 | background: url("http://img12.360buyimg.com/uba/jfs/t19813/35/688919273/918/d7cefda2/5b0656a4N46b1d620.png") no-repeat; 18 | background-size: 100% auto; 19 | position: fixed; 20 | bottom: 20rpx; 21 | right: 20rpx; 22 | } -------------------------------------------------------------------------------- /src/infiniteScroll/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/infiniteScroll/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | {{currentTitle}} 17 | 18 | 19 | 20 | 21 | 加载中... 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | {{isEnd?'—— 到底啦 ——':'加载中...'}} 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/infiniteScroll/index.wxss: -------------------------------------------------------------------------------- 1 | /* yepCom/infiniteScroll/infiniteScroll.wxss */ 2 | .lw { 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | padding: 10rpx 0; 7 | } 8 | .lw .text { 9 | font-size: 24rpx; 10 | color: #666; 11 | } 12 | .ldw { 13 | height: 100%; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | background: #fff; 18 | } 19 | 20 | .refresh-wrap { 21 | display: flex; 22 | align-items: flex-end; 23 | justify-content: center; 24 | } 25 | 26 | .yep-scroll::-webkit-scrollbar { 27 | width: 0; 28 | height: 0; 29 | color: transparent; 30 | } -------------------------------------------------------------------------------- /src/keyboard/index.js: -------------------------------------------------------------------------------- 1 | 2 | // 获取应用实例 3 | const app = getApp() 4 | 5 | Component({ 6 | properties: { 7 | argument: { 8 | type: Object, 9 | value: {} 10 | } 11 | }, 12 | data: { 13 | pricefocus: true, 14 | keyCode: [ 15 | ['1', '2', '3'], 16 | ['4', '5', '6'], 17 | ['7', '8', '9'], 18 | ['.', '0', ''], 19 | ], 20 | // 这里是一些组件内部数据 21 | Odata: { 22 | priceFixFlag: false, // 小键盘是否展开收起 23 | keyBoardTitle: '', // 键盘弹窗标题 24 | inputTitle: '', // 输入框标题 25 | dealPayFeeShipping: ''// 输入框内容，Number类型 26 | } 27 | }, 28 | methods: { 29 | // 这里是一个自定义方法 30 | // 点击数字 31 | keybordEventNum(e) { 32 | // 获取新商品价格 33 | // 获取新运费价格 34 | let newFeeShipping = this.properties.argument.dealPayFeeShipping + '' + e.currentTarget.dataset.keybord 35 | // 运费 36 | if (/^0(\d+)$/.test(newFeeShipping)) { 37 | // 禁止录入首位为0的整数部分两位以上 38 | newFeeShipping = newFeeShipping.replace(new RegExp('^0(\\d+)$'), '$1') 39 | } else if (/^\./.test(newFeeShipping)) { 40 | // 禁止录入首位为.的数字 41 | newFeeShipping = newFeeShipping.replace(new RegExp('^\\.'), '$1') 42 | } else if (newFeeShipping.split('.').length < 3 && newFeeShipping.length < 16) { 43 | // 更新价格 44 | this.setData({ 45 | 'Odata.dealPayFeeShipping': newFeeShipping 46 | }) 47 | } else { 48 | 49 | } 50 | }, 51 | // 删除操作 52 | keybordEventDele(e) { 53 | // 删掉最后一个数字的运费价格 54 | const newFeeShipping = this.properties.argument.dealPayFeeShipping.slice(0, this.properties.argument.dealPayFeeShipping.length - 1) 55 | // 给当前光标的内容更新 56 | this.setData({ 57 | 'Odata.dealPayFeeShipping': newFeeShipping 58 | }) 59 | }, 60 | // 点击确定之后 61 | keybordEventSumb() { 62 | this.properties.argument.submit() 63 | }, 64 | // 隐藏小键盘 65 | keybordEventHide(e) { 66 | const that = this 67 | that.setData({ 68 | 'Odata.priceFixFlag': false 69 | }) 70 | }, 71 | }, 72 | ready() { 73 | this.setData({Odata: this.properties.argument}) 74 | } 75 | }) 76 | -------------------------------------------------------------------------------- /src/keyboard/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/keyboard/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/loading/index.js: -------------------------------------------------------------------------------- 1 | // var WXBizDataCrypt = require('../../utils/WXBizDataCrypt') 2 | 3 | // 获取应用实例 4 | const app = getApp() 5 | 6 | 7 | Component({ 8 | properties: { 9 | value: { 10 | type: String, 11 | value: '加载中' 12 | }, 13 | type: { 14 | type: String, 15 | value: 'circle' 16 | }, 17 | size: { 18 | type: String, 19 | value: 'small' 20 | }, 21 | scale: { 22 | type: Number, 23 | value: '1' 24 | }, 25 | color: { 26 | type: String, 27 | value: 'green' 28 | } 29 | }, 30 | data: { 31 | // 这里是一些组件内部数据 32 | someData: { 33 | 34 | } 35 | }, 36 | methods: { 37 | // 这里是一个自定义方法 38 | onTap() { 39 | console.log('onTap') 40 | } 41 | }, 42 | }) 43 | -------------------------------------------------------------------------------- /src/loading/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/message/index.js: -------------------------------------------------------------------------------- 1 | 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | // 信息级别：info（普通）,err（错误）,suc（成功）,warn（警告） 8 | level: { 9 | type: String, 10 | value: 'info' 11 | }, 12 | info: { 13 | type: String, 14 | value: '' 15 | }, 16 | time: { 17 | type: Number, 18 | value: 1500 19 | } 20 | }, 21 | lifetimes: { 22 | ready() { 23 | this.animation = wx.createAnimation({ 24 | duration: 600, 25 | timingFunction: 'ease', 26 | }) 27 | } 28 | }, 29 | /** 30 | * 组件的内部数据 31 | */ 32 | data: { 33 | bgColors: { 34 | info: '#2d8cf0', 35 | err: '#ed3f14', 36 | suc: '#1abe6d', 37 | warn: '#ff9900' 38 | } 39 | }, 40 | /** 41 | * 组件的方法列表 42 | */ 43 | methods: { 44 | /** 45 | * 开始动画 46 | */ 47 | startAnimation() { 48 | this.animation.height('60rpx').step() 49 | this.setData({ 50 | msg: this.data.info, 51 | animationData: this.animation.export() 52 | }) 53 | }, 54 | /** 55 | * 结束动画 56 | */ 57 | endAnimation() { 58 | this.animation.height('0rpx').step() 59 | this.setData({ 60 | msg: '', 61 | animationData: this.animation.export() 62 | }) 63 | }, 64 | /** 65 | * 展示信息 66 | */ 67 | showMsg() { 68 | const _this = this 69 | this.startAnimation() 70 | setTimeout(() => { 71 | _this.endAnimation() 72 | }, _this.data.time) 73 | } 74 | } 75 | }) 76 | -------------------------------------------------------------------------------- /src/message/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/message/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{msg}} 4 | -------------------------------------------------------------------------------- /src/message/index.wxss: -------------------------------------------------------------------------------- 1 | .message{ 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | z-index:999; 6 | width: 100%; 7 | height: 0rpx; 8 | font-size: 26rpx; 9 | text-align: center; 10 | line-height: 60rpx; 11 | color: #fff; 12 | overflow: hidden; 13 | text-overflow: ellipsis; 14 | white-space: nowrap; 15 | } -------------------------------------------------------------------------------- /src/notice/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/notice/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/notice/index.wxss: -------------------------------------------------------------------------------- 1 | 2 | .yep-notice{ 3 | width: 100%; 4 | height: 80rpx; 5 | display: flex; 6 | justify-content: flex-start; 7 | align-items: center; 8 | font-size: 28rpx; 9 | background-color: #fdfae6; 10 | color: #eb7218; 11 | position: relative; 12 | } 13 | 14 | .yep-notice-icon-wrap{ 15 | z-index: 100; 16 | /*background-color: #fdfae6;*/ 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | padding: 0 0 0 20rpx; 21 | } 22 | 23 | .yep-notice-icon{ 24 | display: inline-block; 25 | width: 32rpx; 26 | height: 32rpx; 27 | padding-right: 20rpx; 28 | } 29 | 30 | .yep-notice-content-wrap{ 31 | /*width: 620rpx;*/ 32 | flex: 1; 33 | overflow: hidden; 34 | white-space: nowrap; 35 | text-overflow: clip; 36 | } 37 | 38 | .yep-notice-loop{ 39 | overflow: hidden; 40 | display: inline-block; 41 | white-space: nowrap; 42 | animation: around var(--speed--) infinite linear; 43 | } 44 | 45 | .yep-notice-close{ 46 | width: 32rpx; 47 | height: 32rpx; 48 | position: absolute; 49 | right: 10rpx; 50 | top: 28rpx; 51 | background-image: url("http://img12.360buyimg.com/uba/jfs/t28636/209/396581275/252/259e44a5/5bf225fcNc2b3fa25.png"); 52 | background-size: 32rpx 32rpx; 53 | background-repeat: no-repeat; 54 | background-position: 0 0; 55 | } 56 | 57 | @keyframes around { 58 | from { 59 | /*margin-left: 100%;*/ 60 | transform: translateX(0%); 61 | } 62 | to { 63 | /*margin-left: -10rpx;*/ 64 | transform: translateX(var(--marqueeWidth--)); 65 | } 66 | } -------------------------------------------------------------------------------- /src/panel/index.js: -------------------------------------------------------------------------------- 1 | // components/panel/panel.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | title: { 8 | type: String, 9 | value: '' 10 | }, 11 | // 标题顶部距离 12 | hideTop: { 13 | type: Boolean, 14 | value: false 15 | }, 16 | hideBorder: { 17 | type: Boolean, 18 | value: false 19 | } 20 | }, 21 | 22 | /** 23 | * 组件的初始数据 24 | */ 25 | data: { 26 | 27 | }, 28 | 29 | /** 30 | * 组件的方法列表 31 | */ 32 | methods: { 33 | 34 | } 35 | }) 36 | -------------------------------------------------------------------------------- /src/panel/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/panel/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ title }} 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/panel/index.wxss: -------------------------------------------------------------------------------- 1 | /* components/panel/panel.wxss */ 2 | 3 | .yep-panel { 4 | position: relative; 5 | overflow: hidden; 6 | } 7 | 8 | .yep-panel-title { 9 | font-size: 14px; 10 | line-height: 1; 11 | color: #1c2438; 12 | padding: 20px 16px 10px; 13 | } 14 | 15 | .yep-panel-title-hide-top { 16 | padding-top: 0; 17 | } 18 | 19 | .yep-panel-content { 20 | position: relative; 21 | background: #fff; 22 | overflow: hidden; 23 | } 24 | 25 | .yep-panel-content::after { 26 | content: ''; 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | width: 200%; 31 | height: 200%; 32 | transform: scale(0.5); 33 | transform-origin: 0 0; 34 | pointer-events: none; 35 | box-sizing: border-box; 36 | border: 0 solid #e9eaec; 37 | border-top-width: 1px; 38 | border-bottom-width: 1px; 39 | } 40 | 41 | .yep-panel-without-border::after { 42 | border: 0 none; 43 | } 44 | -------------------------------------------------------------------------------- /src/password/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/password/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{see?val_arr[index]:""}} 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/password/index.wxss: -------------------------------------------------------------------------------- 1 | /* 支付密码框 */ 2 | 3 | .pay_number { 4 | margin: 0 auto; 5 | display: flex; 6 | flex-direction: row; 7 | border: 1px solid #cfd4d3; 8 | /* border-radius:10rpx; */ 9 | } 10 | 11 | .pay_number_interval { 12 | margin: 0 auto; 13 | display: flex; 14 | flex-direction: row; 15 | /* border-left: 1px solid #cfd4d3; */ 16 | /* border:none; */ 17 | } 18 | 19 | /* 第一个格子输入框 */ 20 | .content .noBorder{ 21 | border-left:none; 22 | } 23 | 24 | 25 | /* 支付密码框聚焦的时候 */ 26 | 27 | .get_focus { 28 | border-color: orange; 29 | } 30 | 31 | /* 单个格式样式 */ 32 | 33 | .password_dot { 34 | flex: 1; 35 | border-left: 1px solid #cfd4d3; 36 | display: flex; 37 | align-items: center; 38 | justify-content: center; 39 | } 40 | 41 | .password_dot_interval { 42 | flex: 1; 43 | /* border: 1px solid #cfd4d3; */ 44 | border-bottom: 1px solid #858585; 45 | margin-right: 10px; 46 | display: flex; 47 | align-items: center; 48 | justify-content: center; 49 | } 50 | 51 | /* 单个格式样式（聚焦的时候） */ 52 | 53 | .get_focus_dot { 54 | flex: 1; 55 | border-left: 1px solid orange; 56 | display: flex; 57 | align-items: center; 58 | justify-content: center; 59 | } 60 | 61 | .get_focus_dot_interval { 62 | flex: 1; 63 | border-bottom: 1px solid #858585; 64 | margin-right: 10px; 65 | display: flex; 66 | align-items: center; 67 | justify-content: center; 68 | } 69 | 70 | /* 模拟光标 */ 71 | 72 | .cursor { 73 | width: 1px; 74 | height: 15px; 75 | background-color: #858585; 76 | animation: focus 1s infinite; 77 | } 78 | 79 | /* 光标动画 */ 80 | 81 | @keyframes focus { 82 | from { 83 | opacity: 1; 84 | } 85 | 86 | to { 87 | opacity: 0; 88 | } 89 | } 90 | 91 | /* 格式中的点 */ 92 | 93 | .dot { 94 | width: 10px; 95 | height: 10px; 96 | background-color: #000; 97 | border-radius: 50%; 98 | } 99 | 100 | /* 输入框 */ 101 | 102 | .input_container { 103 | /* height: 0; 104 | width: 0; 105 | min-height: 0; */ 106 | position: relative; 107 | text-indent: -999em; 108 | left: -100%; 109 | } -------------------------------------------------------------------------------- /src/popup/index.js: -------------------------------------------------------------------------------- 1 | // components/drag.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | type: {// 页面类型，值为center（居中），top(上方出现)，bottom（底部出现），right（右侧出现） 8 | type: 'String', 9 | value: 'center' 10 | } 11 | }, 12 | 13 | /** 14 | * 组件的初始数据 15 | */ 16 | data: { 17 | isShowPop: false, // 是否展示pop 18 | typeClass: { 19 | center: 'pos-center-show', 20 | top: 'pos-top-show', 21 | bottom: 'pos-bottom-show', 22 | right: 'pos-right-show' 23 | }, 24 | isShow: false 25 | }, 26 | lifetimes: { 27 | ready() { 28 | 29 | } 30 | }, 31 | /** 32 | * 组件的方法列表 33 | */ 34 | methods: { 35 | /** 36 | * 展示或隐藏 popUp 弹框 37 | */ 38 | togglePop() { 39 | if (this.data.isShowPop) { // 关闭 40 | this.setData({ 41 | isShow: false 42 | }) 43 | setTimeout(() => { 44 | this.setData({ 45 | isShowPop: false 46 | }) 47 | }, 500) 48 | } else { 49 | this.setData({ 50 | isShowPop: true 51 | }) 52 | setTimeout(() => { 53 | this.setData({ 54 | isShow: true, 55 | }) 56 | }, 10) 57 | } 58 | }, 59 | } 60 | }) 61 | -------------------------------------------------------------------------------- /src/popup/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/popup/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/popup/index.wxss: -------------------------------------------------------------------------------- 1 | .pop-box{ 2 | position: absolute; 3 | top:0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | overflow: hidden; 8 | z-index: 10; 9 | } 10 | .pop-shade{ 11 | width: 100%; 12 | height: 100%; 13 | background-color: rgba(0, 0, 0, 0.5); 14 | z-index: 0; 15 | transition: all .3s ease; 16 | opacity: 0; 17 | } 18 | .pop-shade-show{ 19 | opacity: 1 !important; 20 | } 21 | .box-container{ 22 | background-color: #fff; 23 | z-index: 1; 24 | } 25 | .pos-center{ 26 | position: fixed; 27 | top: 50%; 28 | left: 50%; 29 | transition: all .3s ease; 30 | transform: translate(-50%,-50%); 31 | opacity: 0; 32 | } 33 | .pos-center-show{ 34 | opacity: 1 !important; 35 | } 36 | .pos-top{ 37 | position: fixed; 38 | top: 0%; 39 | left: 0; 40 | width: 100%; 41 | transition: all .3s ease; 42 | transform: translateY(-100%) 43 | } 44 | .pos-top-show{ 45 | transform: translateY(0%) !important; 46 | } 47 | .pos-bottom{ 48 | position: fixed; 49 | bottom: 0; 50 | left: 0; 51 | width: 100%; 52 | transition: all .3s ease; 53 | transform: translateY(100%) 54 | } 55 | .pos-bottom-show{ 56 | transform: translateY(0%) !important; 57 | } 58 | .pos-right{ 59 | position: fixed; 60 | right: 0; 61 | top:0; 62 | height: 100%; 63 | transition: all .3s ease; 64 | transform: translateX(100%) 65 | } 66 | .pos-right-show{ 67 | transform: translateX(0%) !important; 68 | } -------------------------------------------------------------------------------- /src/price/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/price/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{_symbol}} 6 | 7 | 8 | 9 | {{_symbol}} 10 | 11 | 12 | 13 | {{_symbol}} 14 | 15 | 16 | 17 | 18 | {{_intVal}} 19 | 20 | 21 | 22 | 23 | .{{_floatVal}} 24 | 25 | 26 | .{{_floatVal}} 27 | 28 | 29 | .{{_floatVal}} 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/price/index.wxss: -------------------------------------------------------------------------------- 1 | 2 | .yep-price{ 3 | font-size: 24rpx; 4 | color: #e4393c; 5 | font-weight: 700; 6 | line-height: 1.3; 7 | display: inline-block; 8 | padding: 0 6rpx 0 0; 9 | } 10 | 11 | .common{ 12 | color: #bbb; 13 | font-weight: 400; 14 | } 15 | 16 | .del{ 17 | color: #bbb; 18 | text-decoration: line-through; 19 | } 20 | 21 | .del .sym-val, .del .sym-decimal{ 22 | text-decoration: line-through; 23 | } 24 | 25 | .sym-sub, .sym-normal, .sym-sup{ 26 | display: inline-block; 27 | font-size: 30rpx; 28 | } 29 | 30 | .sym-sub{ 31 | font-size: 20rpx; 32 | padding: 0 6rpx 0 0; 33 | /*vertical-align: bottom;*/ 34 | } 35 | 36 | .sym-sup{ 37 | font-size: 20rpx; 38 | padding: 0 6rpx 0 0; 39 | vertical-align: top; 40 | } 41 | 42 | .sym-val{ 43 | display: inline-block; 44 | font-size: 30rpx; 45 | } 46 | 47 | .sym-decimal{ 48 | display: inline-block; 49 | font-size: 30rpx; 50 | } 51 | 52 | .sym-decimal-sub{ 53 | font-size: 20rpx; 54 | } 55 | 56 | .sym-decimal-sup{ 57 | font-size: 20rpx; 58 | vertical-align: top; 59 | } -------------------------------------------------------------------------------- /src/progress/index.js: -------------------------------------------------------------------------------- 1 | // components/progress/progress.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | percent: { 8 | type: Number, 9 | value: 0 10 | }, 11 | // normal || active || wrong || success 12 | status: { 13 | type: String, 14 | value: 'normal' 15 | }, 16 | strokeWidth: { 17 | type: Number, 18 | value: 10 19 | }, 20 | hideInfo: { 21 | type: Boolean, 22 | value: false 23 | } 24 | }, 25 | 26 | /** 27 | * 组件的初始数据 28 | */ 29 | data: { 30 | 31 | }, 32 | 33 | /** 34 | * 组件的方法列表 35 | */ 36 | methods: { 37 | 38 | } 39 | }) 40 | -------------------------------------------------------------------------------- /src/progress/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/progress/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{ percent }}% 10 | 11 | -------------------------------------------------------------------------------- /src/progress/index.wxss: -------------------------------------------------------------------------------- 1 | /* components/progress/progress.wxss */ 2 | 3 | .yep-progress { 4 | display: inline-block; 5 | width: 100%; 6 | font-size: 12px; 7 | position: relative; 8 | } 9 | 10 | .yep-progress-outer { 11 | display: inline-block; 12 | width: 100%; 13 | margin-right: 0; 14 | padding-right: 0; 15 | box-sizing: border-box; 16 | } 17 | 18 | .yep-progress-show-info .yep-progress-outer { 19 | padding-right: 55px; 20 | margin-right: -55px; 21 | } 22 | 23 | .yep-progress-inner { 24 | display: inline-block; 25 | width: 100%; 26 | background-color: #f3f3f3; 27 | border-radius: 100px; 28 | vertical-align: middle; 29 | } 30 | 31 | .yep-progress-bg { 32 | border-radius: 100px; 33 | background-color: #2db7f5; 34 | transition: all 0.2s linear; 35 | position: relative; 36 | } 37 | 38 | .yep-progress-text { 39 | display: inline-block; 40 | margin-left: 5px; 41 | text-align: left; 42 | font-size: 1em; 43 | vertical-align: middle; 44 | } 45 | 46 | .yep-progress-active .yep-progress-bg:before { 47 | content: ''; 48 | opacity: 0; 49 | position: absolute; 50 | top: 0; 51 | left: 0; 52 | right: 0; 53 | bottom: 0; 54 | background: #fff; 55 | border-radius: 10px; 56 | animation: yep-progress-active 2s ease-in-out infinite; 57 | } 58 | 59 | .yep-progress-wrong .yep-progress-bg { 60 | background-color: #ed3f14; 61 | } 62 | 63 | .yep-progress-wrong .yep-progress-text { 64 | color: #ed3f14; 65 | } 66 | 67 | .yep-progress-success .yep-progress-bg { 68 | background-color: #19be6b; 69 | } 70 | 71 | .yep-progress-success .yep-progress-text { 72 | color: #19be6b; 73 | } 74 | 75 | @keyframes yep-progress-active { 76 | 0% { 77 | opacity: 0.3; 78 | width: 0; 79 | } 80 | 81 | 100% { 82 | opacity: 0; 83 | width: 100%; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/rate/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | /* 通用属性 3 | 星星样式：types : 1/2/3 4 | 个数: count 5 | 尺寸：size 6 | 描述文字：descArr 7 | 文字颜色：descColor 8 | 动画：animate 9 | 初始分值：value 10 | 11 | 样式1 特有属性： 12 | 选中颜色：color 13 | 背景色 :bgColor 14 | 渐变色数组 :colorArr 15 | */ 16 | properties: { 17 | types: { // 样式 18 | type: Number, 19 | value: 1, 20 | }, 21 | count: { // 个数 22 | type: Number, 23 | value: 5 24 | }, 25 | size: { // 尺寸 26 | type: Number, 27 | value: null, 28 | observer(newVal, oldVal) { 29 | console.log('observer', newVal, oldVal) 30 | const me = this 31 | if (newVal != null) { 32 | if (me.data.types == '2' || me.data.types == '3') { 33 | me.setData({ 34 | freeStyle: `width:${me.data.size}rpx;height:${me.data.size}rpx; 35 | background-size:${me.data.size}rpx ${me.data.size}rpx` 36 | }) 37 | } else { 38 | me.setData({ 39 | freeStyle: `font-size:${me.data.size}rpx;` 40 | }) 41 | } 42 | } 43 | } 44 | }, 45 | descArr: { // 描述数组 46 | type: Array, 47 | value: [], 48 | }, 49 | descColor: { 50 | type: String, 51 | value: '#000' 52 | }, 53 | animate: { // 动画 54 | type: String, 55 | value: '' 56 | }, 57 | value: { // 初始分值 58 | type: Number, 59 | value: 2 60 | }, 61 | 62 | // 样式1 属性 63 | color: { // 选中色 64 | type: String, 65 | value: '' 66 | }, // 渐变色数组 67 | colorArr: { 68 | type: Array, 69 | value: [], 70 | }, 71 | bgColor: { // 背景色 72 | type: String, 73 | value: '#e5e5e5' 74 | }, 75 | 76 | // 自定义图片 属性 77 | // imgUrl:{ 78 | // type:String, 79 | // value:'' 80 | // }, 81 | // imgSize:{ 82 | // type:String, 83 | // value:'84rpx 84rpx' 84 | // }, 85 | // imgPosition:{ 86 | // type:String, 87 | // value:'0 0' 88 | // }, 89 | 90 | }, 91 | data: { 92 | index: 0, 93 | freeStyle: '', 94 | currType: '' 95 | }, 96 | 97 | methods: { 98 | yep_rate_click(e) { 99 | this.setData({ 100 | value: e.currentTarget.dataset.id 101 | }) 102 | this.triggerEvent('rateChange', this.data.value) 103 | } 104 | } 105 | }) 106 | -------------------------------------------------------------------------------- /src/rate/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/rate/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 7 | {{types == 1?'★':''}} 8 | 9 | 10 | 11 | {{descArr[value] ? descArr[value]:descArr[descArr.length-1]}} 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/rate/index.wxss: -------------------------------------------------------------------------------- 1 | .yep-rate{ 2 | display: flex; 3 | align-items: center; 4 | font-size:30rpx; 5 | } 6 | .type1{ 7 | font-size: 45rpx; 8 | margin-right: 6rpx; 9 | } 10 | .type2 { 11 | margin-right: 6rpx; 12 | width:40rpx; 13 | height:38rpx; 14 | background: url('http://img11.360buyimg.com/uba/jfs/t1/258/29/16035/15335/5be022bfE2b2a009c/a7fc19235efdd31c.png'); 15 | background-size: 40rpx 38rpx; 16 | } 17 | .curr2 { 18 | background: url('http://img14.360buyimg.com/uba/jfs/t1/10969/23/2054/15380/5be022bfEfb37d788/f62884661338e220.png'); 19 | background-size: 40rpx 38rpx; 20 | } 21 | .type3 { 22 | margin-right: 6rpx; 23 | width:40rpx; 24 | height:40rpx; 25 | background:url('http://img10.360buyimg.com/uba/jfs/t1/3561/17/15880/1341/5be11dfeE56c27f4b/301f9a121c775592.png'); 26 | background-size:40rpx 40rpx; 27 | } 28 | .curr3{ 29 | background:url('http://img10.360buyimg.com/uba/jfs/t1/10211/27/2423/1338/5be11dfeEc3aa8b60/eab631059c66c2a3.png'); 30 | background-size:40rpx 40rpx; 31 | } 32 | .curr3_{ 33 | background:url('http://img20.360buyimg.com/uba/jfs/t1/10872/10/2360/1499/5be11d06E64a9465c/4ce8e8e2c9b551d9.png'); 34 | background-size:40rpx 40rpx; 35 | } 36 | .scale{ 37 | -webkit-animation-name: scale; 38 | -webkit-animation-timing-function: ease-in-out; 39 | -webkit-animation-iteration-count: 1; 40 | -webkit-animation-duration: 1.5s; 41 | } 42 | .fade{ 43 | -webkit-animation-name: fade; 44 | -webkit-animation-timing-function: ease-in-out; 45 | -webkit-animation-iteration-count: 1; 46 | -webkit-animation-duration: 1.5s; 47 | } 48 | .rotate{ 49 | -webkit-animation-name: rotate; 50 | -webkit-animation-timing-function: ease-in-out; 51 | -webkit-animation-iteration-count: 1; 52 | -webkit-animation-duration: 2s; 53 | } 54 | @keyframes scale { 55 | 0%{ 56 | transform: scale(1); 57 | } 58 | 50%{ 59 | transform: scale(1.15); 60 | } 61 | 100%{ 62 | transform: scale(1); 63 | } 64 | } 65 | @keyframes fade { 66 | 0% { 67 | opacity: 100%; 68 | } 69 | 80% { 70 | transform: translateY(-3.5px); 71 | } 72 | 100% { 73 | transform: none; 74 | opacity: 10%; 75 | } 76 | } 77 | @keyframes rotate { 78 | 0% { 79 | transform: scale(1, 1) rotate(0); 80 | } 81 | 99% { 82 | transform: scale(2, 2) rotate(90deg); 83 | opacity: 0; 84 | } 85 | 100% { 86 | transform: scale(1, 1) rotate(0); 87 | opacity: 0; 88 | } 89 | } 90 | .yep-rate-text { 91 | margin-left: 20rpx; 92 | color: red; 93 | } 94 | 95 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /src/stickyHeader/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | /** 3 | * 组件的属性列表 4 | */ 5 | properties: { 6 | 7 | }, 8 | 9 | /** 10 | * 组件的初始数据 11 | */ 12 | data: { 13 | height: 0, 14 | pos: '' 15 | }, 16 | 17 | /** 18 | * 组件的方法列表 19 | */ 20 | methods: { 21 | 22 | }, 23 | ready() { 24 | wx.createSelectorQuery().in(this).select('#_stickheader').boundingClientRect(rect => { 25 | if (!rect) return 26 | this.setData({ 27 | height: rect.height 28 | }) 29 | // 初始stickyheader就处于顶部 30 | if (rect.top <= 0) { 31 | this.setData({ 32 | pos: 'sticky' 33 | }) 34 | } 35 | // 监听sticky框和视窗的相交事件 36 | this.createIntersectionObserver().relativeToViewport().observe('#_observer', res => { 37 | if (res) { 38 | if (res.intersectionRect.bottom <= 0 && res.boundingClientRect.bottom <= 0) { 39 | this.setData({ 40 | pos: 'sticky' 41 | }) 42 | } else { 43 | this.setData({ 44 | pos: '' 45 | }) 46 | } 47 | } 48 | }) 49 | }) 50 | .exec() 51 | } 52 | }) 53 | -------------------------------------------------------------------------------- /src/stickyHeader/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /src/stickyHeader/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/stickyHeader/index.wxss: -------------------------------------------------------------------------------- 1 | .sticky { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | } -------------------------------------------------------------------------------- /src/swipeAction/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/swipeAction/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.text}} 7 | 8 | 9 | {{item.text}} 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/swipeAction/index.wxss: -------------------------------------------------------------------------------- 1 | .yep-swipe-action{ 2 | position: relative; 3 | overflow: hidden; 4 | } 5 | 6 | .main{ 7 | position: relative; 8 | top: 0; 9 | width: 100%; 10 | z-index: 5; 11 | transition: left 0.1s ease-in-out; 12 | transition: right 0.1s ease-in-out; 13 | } 14 | 15 | .btn-list { 16 | position: absolute; 17 | top: 0; 18 | z-index: 4; 19 | } 20 | 21 | .btn-list-right { 22 | right: 0; 23 | } 24 | 25 | .btn-list-left { 26 | left: 0; 27 | } 28 | 29 | .swipe-btn { 30 | display: inline-block; 31 | } -------------------------------------------------------------------------------- /src/switch/index.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 开关组件 4 | */ 5 | const app = getApp() 6 | 7 | Component({ 8 | externalClasses: [ 9 | 'switch-box' 10 | ], 11 | properties: { 12 | contType: {// 开关内容类型：'number':0/1 'char':'开/关' 'sign':'√/×' 13 | type: String, 14 | value: '' 15 | }, 16 | size: {// 按钮尺寸 small middle large 17 | type: String, 18 | value: 'middle' 19 | } 20 | }, 21 | data: { 22 | isEnable: true, // 开关是否可用 23 | isClose: true, // 在开关可用情况下，状态是否是关闭状态 24 | content: { 25 | openTip: '', // 打开提示信息 26 | closeTop: '', // 关闭提示信息 27 | } 28 | }, 29 | attached(options) { 30 | switch (this.properties.contType) { 31 | case 'number': 32 | this.setData({ 33 | content: { 34 | openTip: '1', 35 | closeTip: '0', 36 | } 37 | }) 38 | break 39 | case 'char': 40 | this.setData({ 41 | content: { 42 | openTip: '开', 43 | closeTip: '关', 44 | } 45 | }) 46 | break 47 | case 'sign': 48 | this.setData({ 49 | content: { 50 | openTip: '√', 51 | closeTip: '×', 52 | } 53 | }) 54 | break 55 | } 56 | }, 57 | methods: { 58 | // 改变开关状态 59 | changeStatus() { 60 | if (this.data.isEnable) { 61 | this.triggerEvent('statusChange', {isClose: this.data.isClose}, {}) 62 | this.setData({ 63 | isClose: !this.data.isClose, 64 | }) 65 | } 66 | }, 67 | // 开启关闭开关 68 | toggle() { 69 | this.setData({ 70 | isEnable: !this.data.isEnable 71 | }) 72 | } 73 | } 74 | }) 75 | -------------------------------------------------------------------------------- /src/switch/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/switch/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | {{content.openTip}} 3 | 4 | {{content.closeTip}} 5 | -------------------------------------------------------------------------------- /src/switch/index.wxss: -------------------------------------------------------------------------------- 1 | .container{ 2 | border-radius:20rpx; 3 | display:flex; 4 | align-items:center; 5 | justify-content:space-around; 6 | transition:opacity 1s ease; 7 | color:#fff; 8 | position:relative; 9 | box-sizing: border-box; 10 | } 11 | .container_small{ 12 | width:48rpx; 13 | height:24rpx; 14 | font-size:16rpx; 15 | line-height:24rpx; 16 | } 17 | .container_middle{ 18 | width:60rpx; 19 | height:30rpx; 20 | font-size:22rpx; 21 | line-height:30rpx; 22 | } 23 | .container_large{ 24 | width:72rpx; 25 | height:36rpx; 26 | font-size:28rpx; 27 | line-height:36rpx; 28 | } 29 | .cont-status-open{ 30 | background-color:#1890ff; 31 | } 32 | .cont-status-close{ 33 | background-color:#bfbfbf; 34 | } 35 | .cont-enable{ 36 | opacity:1; 37 | } 38 | .cont-disable{ 39 | opacity:.5; 40 | } 41 | .inner{ 42 | border-radius:50%; 43 | background-color:#fff; 44 | transition:all .3s ease; 45 | } 46 | .inner_small{ 47 | width:20rpx; 48 | height:20rpx; 49 | } 50 | .inner_middle{ 51 | width:26rpx; 52 | height:26rpx; 53 | } 54 | .inner_large{ 55 | width:32rpx; 56 | height:32rpx; 57 | } 58 | .inner-status-open{ 59 | transform:translateX(50%); 60 | } 61 | .inner-status-close{ 62 | transform:translateX(-50%); 63 | } 64 | .title{ 65 | position:absolute; 66 | text-align:center; 67 | } 68 | .open-title-small{ 69 | width:24rpx; 70 | height:24rpx; 71 | left:0rpx; 72 | } 73 | .close-title-small{ 74 | width:24rpx; 75 | height:24rpx; 76 | left:23rpx; 77 | } 78 | .open-title-middle{ 79 | width:30rpx; 80 | height:30rpx; 81 | left:0rpx; 82 | } 83 | .close-title-middle{ 84 | width:30rpx; 85 | height:30rpx; 86 | left:28rpx; 87 | } 88 | .open-title-large{ 89 | width:36rpx; 90 | height:36rpx; 91 | left:0rpx; 92 | } 93 | .close-title-large{ 94 | width:36rpx; 95 | height:36rpx; 96 | left:32rpx; 97 | } -------------------------------------------------------------------------------- /src/tab/index.js: -------------------------------------------------------------------------------- 1 | // var WXBizDataCrypt = require('../../utils/WXBizDataCrypt') 2 | 3 | // 获取应用实例 4 | const app = getApp() 5 | 6 | /* tab区分：消息/文本/图标/自定义。 7 | * 消息message的消息数量，点击后消失；其他normal的数量不会改变。 8 | */ 9 | Component({ 10 | externalClasses: ['yepc-tabs', 'yepc-tab', 'yepc-tab-message', 'yepc-tab-txt', 'yepc-tab-panel', 'yepc-tabs-scroll'], // 拓展样式 11 | options: { 12 | multipleSlots: true 13 | }, 14 | properties: { 15 | type: { 16 | type: String, 17 | value: 'text' 18 | }, 19 | tabs: { 20 | type: Array, 21 | value: [], 22 | observer(newVal, oldVal) { 23 | this.setData({ 24 | _tabs: newVal 25 | }) 26 | } 27 | }, 28 | // 当前选中的tab，默认为0. 29 | currIdx: { 30 | type: String, 31 | value: '0', 32 | observer(newVal, oldVal) { 33 | this.setData({ 34 | _currIdx: newVal 35 | }) 36 | } 37 | } 38 | }, 39 | data: { 40 | // 这里是一些组件内部数据 41 | _tabs: [{ 42 | name: '', 43 | count: '', 44 | icon: '' 45 | }], 46 | _currIdx: 0 47 | }, 48 | methods: { 49 | // 这里是一个自定义方法 50 | selectTab(e) { 51 | const currIdx = e.currentTarget.dataset.idx 52 | 53 | // 对当前tab数据重置 54 | switch (this.data.type) { 55 | case 'message': 56 | // 如果是消息类型，则数据清空。 57 | this.resetMessageData(currIdx) 58 | break 59 | 60 | case 'text': 61 | this.resetTextData(currIdx) 62 | break 63 | } 64 | 65 | // 点击tab，向调用方传出事件及数据。 66 | const myEventDetail = {key: currIdx} 67 | this.triggerEventFun(myEventDetail) 68 | }, 69 | 70 | resetTextData(currIdx) { 71 | this.setData({ 72 | _currIdx: currIdx 73 | }) 74 | }, 75 | 76 | resetMessageData(currIdx) { 77 | this.data._tabs.forEach(function (item, index) { 78 | if (index == currIdx) { 79 | item.count = 0 80 | } 81 | }) 82 | 83 | this.setData({ 84 | _currIdx: currIdx, 85 | _tabs: this.data._tabs 86 | }) 87 | }, 88 | 89 | triggerEventFun(myEventDetail) { 90 | const myEventOption = {bubbles: true, composed: true} // 触发事件的选项 91 | this.triggerEvent('tabchange', myEventDetail, myEventOption) 92 | } 93 | // selectTab: function (e) { 94 | // console.log('selectTab', e); 95 | // this.setData({ 96 | // _currIdx: e.currentTarget.dataset.idx, 97 | // currIdx: e.currentTarget.dataset.idx 98 | // }) 99 | // } 100 | } 101 | }) 102 | -------------------------------------------------------------------------------- /src/tab/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /src/tab/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{itemTab.name}} 7 | {{itemTab.count > 99 ? '99+' : itemTab.count}} 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | {{itemTab.name}} 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | {{itemTab.name}} 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/tab/index.wxss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .yep-tabs{ 4 | /*flex: 1;*/ 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | text-align: center; 9 | height: 85rpx; 10 | line-height: 85rpx; 11 | border-bottom: 1rpx solid #eee; 12 | } 13 | 14 | .yep-tab{ 15 | min-width: 150rpx; 16 | font-size: 28rpx; 17 | } 18 | 19 | .yep-tab-txt{ 20 | display: inline-block; 21 | } 22 | 23 | .title{ 24 | display: inline-block; 25 | } 26 | 27 | .curr .title{ 28 | border-bottom: 4rpx solid #f10e1e; 29 | } 30 | 31 | .yep-tab-message .count{ 32 | font-size: 20rpx; 33 | background-color: #f10e1e; 34 | color: #fff; 35 | height: 24rpx; 36 | line-height: 24rpx; 37 | border-radius: 20rpx; 38 | padding: 2rpx 4rpx; 39 | display: inline-block; 40 | vertical-align: top; 41 | margin-left: -10rpx; 42 | margin-top: 4rpx; 43 | } 44 | 45 | .yep-tabs-scroll{ 46 | width: 100%; 47 | white-space: nowrap; 48 | line-height: 85rpx; 49 | border-bottom: 1rpx solid #eee; 50 | } 51 | 52 | .yep-tabs-scroll .yep-tab{ 53 | display: inline-block; 54 | padding: 0 40rpx; 55 | min-width: 0; 56 | } 57 | 58 | .yep-tabs-scroll .curr .title { 59 | border-bottom: 4rpx solid #f10e1e; 60 | } -------------------------------------------------------------------------------- /tools/config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | const webpack = require("webpack"); 4 | const nodeExternals = require("webpack-node-externals"); 5 | 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, "../example"); 10 | const src = path.resolve(__dirname, "../src"); 11 | const static = path.resolve(__dirname, "../static"); 12 | const dev = path.join(demoDist, "components"); 13 | const dist = path.resolve(__dirname, "../miniprogram_dist"); 14 | 15 | module.exports = { 16 | entry: ["index"], 17 | 18 | isDev, 19 | isWatch, 20 | srcPath: src, 21 | staticPath: static, 22 | distPath: isDev ? dev : dist, 23 | 24 | demoSrc, 25 | demoDist, 26 | 27 | wxss: { 28 | less: false, // compile wxss with less 29 | sourcemap: false // source map for less 30 | }, 31 | 32 | webpack: { 33 | mode: "production", 34 | output: { 35 | filename: "[name].js", 36 | libraryTarget: "commonjs2" 37 | }, 38 | target: "node", 39 | externals: [nodeExternals()], // ignore node_modules 40 | module: { 41 | rules: [ 42 | { 43 | test: /\.ts?$/, 44 | use: [ 45 | { 46 | loader: "ts-loader", 47 | options: { 48 | // 指定特定的ts编译配置，为了区分脚本的ts配置 49 | configFile: path.resolve(__dirname, "../tsconfig.json") 50 | } 51 | } 52 | ], 53 | exclude: /node_modules/ 54 | }, 55 | { 56 | test: /\.js$/i, 57 | use: [ 58 | // 'eslint-loader', 59 | "babel-loader" 60 | ], 61 | exclude: /node_modules/ 62 | } 63 | ] 64 | }, 65 | resolve: { 66 | modules: [src, "node_modules"], 67 | extensions: [".js", ".ts", ".json"] 68 | }, 69 | plugins: [ 70 | new webpack.DefinePlugin({}), 71 | new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) 72 | ], 73 | optimization: { 74 | minimize: false 75 | }, 76 | performance: { 77 | hints: "warning", 78 | assetFilter: assetFilename => assetFilename.endsWith(".js") 79 | } 80 | }, 81 | 82 | copy: ["./wxml", "./wxss", "./wxs", "./images"] // will copy to dist 83 | }; 84 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strictNullChecks": true, 4 | "noImplicitAny": true, 5 | "module": "CommonJS", 6 | "target": "ES5", 7 | "allowJs": false, 8 | "experimentalDecorators": true, 9 | "noImplicitThis": true, 10 | "noImplicitReturns": true, 11 | "alwaysStrict": true, 12 | "inlineSourceMap": true, 13 | "inlineSources": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "noUnusedLocals": true, 16 | "noUnusedParameters": true, 17 | "strict": true, 18 | "removeComments": true, 19 | "pretty": true, 20 | "strictPropertyInitialization": true, 21 | "typeRoots": [ 22 | "./typings" 23 | ] 24 | }, 25 | "include": [ 26 | "src/**/*.ts" 27 | ], 28 | "exclude": [ 29 | "node_modules", 30 | "miniprogram_dist", 31 | "**/*.spec.ts" 32 | ] 33 | } -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | /*! ***************************************************************************** 2 | Copyright (c) 2018 Tencent, Inc. All rights reserved. 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | ***************************************************************************** */ 10 | 11 | /// 12 | /// 13 | -------------------------------------------------------------------------------- /typings/wx/index.d.ts: -------------------------------------------------------------------------------- 1 | /*! ***************************************************************************** 2 | Copyright (c) 2018 Tencent, Inc. All rights reserved. 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | ***************************************************************************** */ 10 | 11 | /// 12 | /// 13 | /// 14 | /// 15 | /// 16 | 17 | declare type IAnyObject = Record 18 | 19 | declare type KVInfer = { 20 | [K in keyof T]: T[K] 21 | } 22 | 23 | declare type Void = T | undefined | null 24 | 25 | type PartialOptional = Partial> & Pick> 26 | 27 | type Optional = { 28 | [K in keyof T]+?: T[K] 29 | } 30 | -------------------------------------------------------------------------------- /开发手册.md: -------------------------------------------------------------------------------- 1 | ### 一、项目说明 2 | 3 | (1)为了用户可以通过安装 npm 包的形式使用小程序组件，因此搭建该项目。改项目由小程序第三方自定义组件脚手架：@wechat-miniprogram/miniprogram-cli 改造而来。 4 | 5 | (2)项目包含：yep-mp 小程序源码，小程序组件库源码。 6 | yep-mp 小程序即为该组件库示例 demo 7 | 8 | (3)src/为组件库源码地址 ，example/为 yep-mp 小程序源码(示例 demo) 9 | 10 | ### 二、本地开发 11 | 12 | (1) 执行 npm run dev 将 src 目录下组件 打包至 example/component 下 13 | 14 | (2) 执行 npm run watch 将监听 src 下源码变化 并同步至 example/component 下 15 | 16 | (3) 使用下程序开发工具（仅用于查看页面样式，代码再 src 下修改） 打开 example 目录 17 | 18 | ### 三、本地 npm 打包 19 | 20 | (1) 执行 npm run build 会在 src 目录下生成 miniprogran_dist 文件夹 该文件夹 为 npm 包源码。 21 | 22 | (2) 上传 npm 包（参看下文） 23 | 24 | ### 四、npm 包发版 25 | 26 | (1) 注册 npm 账号（如果已注册请忽略此条） 27 | 28 | (2) 登录：npm login 或者 npm adduser 29 | 30 | (3) 验证：npm who am i 31 | 32 | (4) 发布(私有包)：npm publish --access=public 33 | 34 | (5) 补充说明： 35 | 36 | - 发布前 请确认 register 以便发布至公网/内网。 37 | - 发布前 请修改 package.json 中的 version 字段，版本号新增，如：当前版本 1.0 修改为 1.1 38 | 39 | ### 五、常用指令 40 | 41 | (1) 下载并安装依赖 42 | npm install 43 | 44 | (2) 将 src 组件拷贝到 example 目录下，可用小程序开发工具打开 example 目录。 45 | npm run dev 46 | 47 | (3) 将 src 内容拷贝至 miniprogram_dist 目录下，该目录为小程序组件库 npm 包上传目录 48 | npm run build 49 | 50 | (4) 修复脚本语法错误 51 | npm run lint 52 | --------------------------------------------------------------------------------