├── .babelrc ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── .project ├── README.md ├── _tmp └── build.rollup.js ├── build ├── build.js ├── index.rollup.js └── watch.js ├── dist ├── debug │ ├── images │ │ ├── cbd.jpg │ │ ├── muwu.jpg │ │ ├── shuijiao.jpg │ │ ├── taobao-bg.jpg │ │ ├── taobao-moon.png │ │ ├── totop.png │ │ └── yuantiao.jpg │ ├── pagerefresh.css │ └── pagerefresh.js └── release │ ├── pagerefresh.css │ └── pagerefresh.min.js ├── examples ├── base │ ├── base_list.html │ ├── csstranslate_list.html │ ├── multicontainer_multilist.html │ ├── onecontainer_multilist.html │ ├── options_list.html │ └── successanim_list.html ├── common │ ├── common.css │ └── common.js ├── dist │ └── debug │ │ ├── pagerefresh.css │ │ └── pagerefresh.js ├── images │ ├── cbd.jpg │ ├── muwu.jpg │ ├── shuijiao.jpg │ ├── totop.png │ └── yuantiao.jpg ├── index.html ├── index2.html ├── res │ ├── img │ │ ├── mescroll-empty.png │ │ ├── mescroll-totop.png │ │ ├── pd1.jpg │ │ ├── pd10.jpg │ │ ├── pd11.jpg │ │ ├── pd12.jpg │ │ ├── pd13.jpg │ │ ├── pd14.jpg │ │ ├── pd15.jpg │ │ ├── pd16.jpg │ │ ├── pd17.jpg │ │ ├── pd18.jpg │ │ ├── pd19.jpg │ │ ├── pd2.jpg │ │ ├── pd20.jpg │ │ ├── pd21.jpg │ │ ├── pd22.jpg │ │ ├── pd23.jpg │ │ ├── pd24.jpg │ │ ├── pd25.jpg │ │ ├── pd26.jpg │ │ ├── pd27.jpg │ │ ├── pd28.jpg │ │ ├── pd3.jpg │ │ ├── pd4.jpg │ │ ├── pd5.jpg │ │ ├── pd6.jpg │ │ ├── pd7.jpg │ │ ├── pd8.jpg │ │ ├── pd9.jpg │ │ └── swiper.jpg │ ├── pay-wx.jpg │ ├── pay-zfb.jpg │ ├── pdlist1.js │ ├── pdlist2.js │ └── vue.min.js ├── scroll-nested │ ├── libs │ │ ├── mui │ │ │ ├── css │ │ │ │ └── mui.min.css │ │ │ ├── fonts │ │ │ │ ├── mui-icons-extra.ttf │ │ │ │ └── mui.ttf │ │ │ └── js │ │ │ │ ├── mui.js │ │ │ │ └── mui.min.js │ │ └── swipe │ │ │ ├── css │ │ │ ├── swiper.css │ │ │ └── swiper.min.css │ │ │ └── js │ │ │ ├── maps │ │ │ ├── swiper.jquery.min.js.map │ │ │ ├── swiper.jquery.umd.min.js.map │ │ │ └── swiper.min.js.map │ │ │ ├── swiper.jquery.js │ │ │ ├── swiper.jquery.min.js │ │ │ ├── swiper.jquery.umd.js │ │ │ ├── swiper.jquery.umd.min.js │ │ │ ├── swiper.js │ │ │ └── swiper.min.js │ ├── nested_horizonscroll.html │ ├── nested_muiscroll.html │ ├── nested_muitransparent.html │ ├── nested_slider.html │ └── nested_swipe.html ├── senior │ ├── theme_expand.html │ └── theme_modify.html ├── themes │ ├── theme_applet.html │ ├── theme_drawer3d.html │ ├── theme_drawerslider.html │ └── theme_taobao.html └── vue │ ├── vue.min.js │ └── vue_list.html ├── mescroll-1_1_5 ├── demo │ ├── base │ │ ├── list-full-lock.gif │ │ ├── list-full-lock.html │ │ ├── list-mescroll-more.gif │ │ ├── list-mescroll-more.html │ │ ├── list-mescroll-one.gif │ │ ├── list-mescroll-one.html │ │ ├── list-news.gif │ │ ├── list-news.html │ │ ├── list-products-vue.gif │ │ ├── list-products-vue.html │ │ ├── list-products.gif │ │ ├── list-products.html │ │ ├── mescroll-options.gif │ │ └── mescroll-options.html │ ├── beibei │ │ ├── beibei.gif │ │ ├── beibei.html │ │ ├── img │ │ │ ├── beibei1.jpg │ │ │ ├── beibei2.jpg │ │ │ ├── footer.jpg │ │ │ └── header.jpg │ │ └── option │ │ │ ├── mescroll-bb1.png │ │ │ ├── mescroll-bb2.png │ │ │ ├── mescroll-bb3.png │ │ │ ├── mescroll-bb4.png │ │ │ ├── mescroll-option.css │ │ │ ├── mescroll-option.js │ │ │ ├── mescroll-progress.png │ │ │ ├── mescroll-slogan.jpg │ │ │ └── mescroll-totop.png │ ├── index.html │ ├── jingdong │ │ ├── img │ │ │ ├── footer.png │ │ │ ├── header.jpg │ │ │ ├── jingdong1.jpg │ │ │ ├── jingdong2.jpg │ │ │ └── jingdong3.jpg │ │ ├── jingdong.gif │ │ ├── jingdong.html │ │ └── option │ │ │ ├── mescroll-loading1.png │ │ │ ├── mescroll-loading2.png │ │ │ ├── mescroll-option.css │ │ │ ├── mescroll-option.js │ │ │ ├── mescroll-progress0.png │ │ │ ├── mescroll-progress1.png │ │ │ ├── mescroll-progress2.png │ │ │ ├── mescroll-progress3.png │ │ │ ├── mescroll-progress4.png │ │ │ ├── mescroll-progress5.png │ │ │ └── mescroll-totop.png │ ├── meituan │ │ ├── img │ │ │ ├── footer.jpg │ │ │ ├── header.jpg │ │ │ ├── meituan1.jpg │ │ │ └── meituan2.jpg │ │ ├── meituan.gif │ │ ├── meituan.html │ │ └── option │ │ │ ├── mescroll-loading1.png │ │ │ ├── mescroll-loading2.png │ │ │ ├── mescroll-loading3.png │ │ │ ├── mescroll-loading4.png │ │ │ ├── mescroll-loading5.png │ │ │ ├── mescroll-loading6.png │ │ │ ├── mescroll-option.css │ │ │ ├── mescroll-option.js │ │ │ ├── mescroll-progress0.png │ │ │ ├── mescroll-progress1.png │ │ │ ├── mescroll-progress2.png │ │ │ ├── mescroll-progress3.png │ │ │ ├── mescroll-progress4.png │ │ │ ├── mescroll-progress5.png │ │ │ └── mescroll-totop.png │ ├── meitunmama │ │ ├── img │ │ │ ├── footer.jpg │ │ │ ├── header.jpg │ │ │ ├── meitun1.jpg │ │ │ └── meitun2.jpg │ │ ├── meitunmama.gif │ │ ├── meitunmama.html │ │ └── option │ │ │ ├── mescroll-option.css │ │ │ ├── mescroll-option.js │ │ │ ├── mescroll-progress1.png │ │ │ ├── mescroll-progress2.png │ │ │ ├── mescroll-progress3.png │ │ │ ├── mescroll-progress4.png │ │ │ ├── mescroll-progress5.png │ │ │ ├── mescroll-progress6.png │ │ │ └── mescroll-totop.png │ ├── res │ │ ├── img │ │ │ ├── mescroll-empty.png │ │ │ ├── mescroll-totop.png │ │ │ ├── pd1.jpg │ │ │ ├── pd10.jpg │ │ │ ├── pd11.jpg │ │ │ ├── pd12.jpg │ │ │ ├── pd13.jpg │ │ │ ├── pd14.jpg │ │ │ ├── pd15.jpg │ │ │ ├── pd16.jpg │ │ │ ├── pd17.jpg │ │ │ ├── pd18.jpg │ │ │ ├── pd19.jpg │ │ │ ├── pd2.jpg │ │ │ ├── pd20.jpg │ │ │ ├── pd21.jpg │ │ │ ├── pd22.jpg │ │ │ ├── pd23.jpg │ │ │ ├── pd24.jpg │ │ │ ├── pd25.jpg │ │ │ ├── pd26.jpg │ │ │ ├── pd27.jpg │ │ │ ├── pd28.jpg │ │ │ ├── pd3.jpg │ │ │ ├── pd4.jpg │ │ │ ├── pd5.jpg │ │ │ ├── pd6.jpg │ │ │ ├── pd7.jpg │ │ │ ├── pd8.jpg │ │ │ ├── pd9.jpg │ │ │ └── swiper.jpg │ │ ├── pay-wx.jpg │ │ ├── pay-zfb.jpg │ │ ├── pdlist1.js │ │ ├── pdlist1.json │ │ ├── pdlist2.js │ │ ├── pdlist2.json │ │ └── vue.min.js │ ├── taobao │ │ ├── img │ │ │ ├── footer.jpg │ │ │ ├── header.jpg │ │ │ ├── taobao1.jpg │ │ │ ├── taobao2.jpg │ │ │ └── taobao3.jpg │ │ ├── option │ │ │ ├── mescorll-erlou.jpg │ │ │ ├── mescroll-arrow.png │ │ │ ├── mescroll-bg-down.png │ │ │ ├── mescroll-bg.png │ │ │ ├── mescroll-option.css │ │ │ ├── mescroll-option.js │ │ │ └── mescroll-totop.png │ │ ├── taobao.gif │ │ └── taobao.html │ ├── xinlang │ │ ├── img │ │ │ ├── footer.jpg │ │ │ ├── header.jpg │ │ │ ├── xinlang1.jpg │ │ │ └── xinlang2.jpg │ │ ├── option │ │ │ ├── mescroll-arrow.png │ │ │ ├── mescroll-option.css │ │ │ ├── mescroll-option.js │ │ │ ├── mescroll-progress1.png │ │ │ ├── mescroll-progress2.png │ │ │ ├── mescroll-progress3.png │ │ │ ├── mescroll-progress4.png │ │ │ ├── mescroll-progress5.png │ │ │ ├── mescroll-progress6.png │ │ │ └── mescroll-totop.png │ │ ├── xinlang.gif │ │ └── xinlang.html │ ├── yabuli │ │ ├── img │ │ │ └── header.jpg │ │ ├── option │ │ │ ├── mescroll-empty.png │ │ │ ├── mescroll-nodata.png │ │ │ ├── mescroll-option.css │ │ │ ├── mescroll-option.js │ │ │ ├── mescroll-progress.png │ │ │ ├── mescroll-slogan.png │ │ │ └── mescroll-totop.png │ │ ├── yabuli.gif │ │ └── yabuli.html │ └── zhihu │ │ ├── img │ │ ├── zhihu1.jpg │ │ ├── zhihu2.jpg │ │ ├── zhihu3.jpg │ │ ├── zhihu4.jpg │ │ └── zhihu5.jpg │ │ ├── option │ │ ├── mescroll-option.css │ │ ├── mescroll-option.js │ │ ├── mescroll-progress.jpg │ │ └── mescroll-totop.png │ │ ├── zhihu.gif │ │ └── zhihu.html └── dist │ ├── mescroll.css │ ├── mescroll.js │ ├── mescroll.min.css │ └── mescroll.min.js ├── package.json ├── src ├── core │ └── index.js ├── css │ ├── images │ │ └── minirefresh-totop.png │ └── minirefresh.css ├── index.js ├── scroll │ └── index.js ├── theme │ ├── applet │ │ ├── index.css │ │ └── index.js │ ├── drawer3d │ │ ├── index.css │ │ └── index.js │ ├── drawerslider │ │ ├── index.css │ │ └── index.js │ ├── index.js │ ├── jianshu │ │ ├── index.css │ │ └── index.js │ └── taobao │ │ ├── images │ │ ├── taobao-bg.jpg │ │ └── taobao-moon.png │ │ ├── index.css │ │ └── index.js └── utils │ └── index.js ├── staticresource ├── screenshoot │ ├── base_default.gif │ ├── base_lockdown.gif │ ├── base_multi.gif │ ├── base_single.gif │ ├── base_translate.gif │ ├── base_vue.gif │ ├── nested_muiscroll.gif │ ├── nested_slider.gif │ ├── nested_swipe.gif │ ├── theme_applet.gif │ ├── theme_drawer3d.gif │ ├── theme_drawerslider.gif │ └── theme_taobao.gif └── showcase │ └── qrcode.png └── test ├── index.rollup.js ├── init.spec.js ├── inner └── hackwindow.js ├── jsbridge.spec.js ├── lang.spec.js ├── os.spec.js └── unit ├── karma.base.config.js ├── karma.cover.config.js ├── karma.dev.config.js └── karma.unit.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "es2015", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ 11 | "external-helpers" 12 | ] 13 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/*.js -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | 'root': true, 5 | 'extends': "airbnb", 6 | "parser": "babel-eslint", 7 | 'parserOptions': { 8 | // ECMAScript 版本 9 | "ecmaVersion": 6, 10 | 'sourceType': 'module', 11 | 'ecmaFeatures': { 12 | // 允许在全局作用域下使用 return 语句 13 | "globalReturn": true, 14 | "jsx": false 15 | } 16 | }, 17 | 'env': { 18 | 'browser': true, 19 | 'es6': true, 20 | 'mocha': true, 21 | "node": true 22 | }, 23 | 'globals': { 24 | 'Babel': true 25 | }, 26 | // add your custom rules here 27 | 'rules': { 28 | // 关闭react拓展 29 | 'jsx-a11y/href-no-hash': 0, 30 | 'react/require-extension': 0, 31 | // 只允许对ejs这个参数的属性二次赋值 32 | // 'no-param-reassign': [2, { 'props': true, 'ignorePropertyModificationsFor': ['ejs'] }], 33 | // 强制一行的最大长度 34 | //"max-len": [2, 100], 35 | // 允许一个变量或多个变量的声明 36 | //'one-var': 0, 37 | // 允许++和-- 38 | //'no-plusplus': 0, 39 | // 文件末尾强制换行，目前暂时放弃，考虑到一些Idle的格式化问题 40 | 'eol-last': 0, 41 | //强制使用一致的缩进，4个空格 42 | 'indent': [2, 4, { 43 | 'SwitchCase': 1 44 | }], 45 | // 允许特殊的_开头属性 46 | 'no-underscore-dangle': [0], 47 | 48 | // 以下是一些与airbnb无关的修改配置 49 | // recommend的修改 50 | // 禁用行尾空格,允许空行使用空白符 51 | 'no-trailing-spaces': [2, { 52 | 'skipBlankLines': true 53 | }], 54 | 'no-param-reassign':[0], 55 | 'one-var':[0], 56 | 'prefer-const':[0], 57 | 'func-names':[0], 58 | 'max-len':[0], 59 | 'linebreak-style':[0], 60 | 'prefer-rest-params':[0], 61 | 'no-plusplus':[0], 62 | 'no-var':[0], 63 | 'no-restricted-syntax':[0], 64 | 'no-continue':[0], 65 | 'vars-on-top':[0], 66 | 'no-cond-assign':[0], 67 | 'new-cap':[0], 68 | 'no-lonely-if':[0], 69 | 'class-methods-use-this':[0], 70 | // 其它的重写 71 | // 允许逻辑与短路语句，不重写会报错，应该是拓展规则里的 72 | 'no-unused-expressions': [2, { 73 | 'allowShortCircuit': true 74 | }], 75 | // 禁用 console，目前console变为警告级别 76 | 'no-console': 0, 77 | // 函数的()前可以没有空格 78 | // 'space-before-function-paren': [0, 'always'], 79 | // allow paren-less arrow functions 80 | // 箭头函数必须使用圆括号，如 (a) => {} 81 | //'arrow-parens': 2, 82 | // allow debugger during development 83 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 84 | } 85 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | _coverage 19 | _report 20 | 21 | # nyc test coverage 22 | .nyc_output 23 | 24 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 25 | .grunt 26 | 27 | # Bower dependency directory (https://bower.io/) 28 | bower_components 29 | 30 | # node-waf configuration 31 | .lock-wscript 32 | 33 | # Compiled binary addons (http://nodejs.org/api/addons.html) 34 | build/Release 35 | 36 | # Dependency directories 37 | node_modules/ 38 | jspm_packages/ 39 | 40 | # Typescript v1 declaration files 41 | typings/ 42 | 43 | # Optional npm cache directory 44 | .npm 45 | 46 | # Optional eslint cache 47 | .eslintcache 48 | 49 | # Optional REPL history 50 | .node_repl_history 51 | 52 | # Output of 'npm pack' 53 | *.tgz 54 | 55 | # Yarn Integrity file 56 | .yarn-integrity 57 | 58 | # dotenv environment variables file 59 | .env 60 | 61 | account_record.md 62 | sauce.json 63 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | _tmp/ 2 | src/ 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | page-refresh 4 | 5 | 6 | 7 | 8 | 9 | com.aptana.ide.core.unifiedBuilder 10 | 11 | 12 | 13 | 14 | 15 | com.aptana.projects.webnature 16 | 17 | 18 | -------------------------------------------------------------------------------- /build/index.rollup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 仅仅用了rollup自动检测eslint 3 | */ 4 | import './build'; 5 | import './watch'; 6 | -------------------------------------------------------------------------------- /build/watch.js: -------------------------------------------------------------------------------- 1 | const rollup = require('rollup'); 2 | const build = require('./build.js'); 3 | 4 | const buildOptions = build.buildOptions; 5 | const watcher = rollup.watch(buildOptions); 6 | 7 | watcher.on('event', (event) => { 8 | // 监听内部自动会build，无需手动build 9 | // 如果无法自动build，很可能是传入配置错误 10 | // 譬如输出或输入文件的format没有填写 11 | console.log(`code${event.code}`); 12 | }); -------------------------------------------------------------------------------- /dist/debug/images/cbd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/dist/debug/images/cbd.jpg -------------------------------------------------------------------------------- /dist/debug/images/muwu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/dist/debug/images/muwu.jpg -------------------------------------------------------------------------------- /dist/debug/images/shuijiao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/dist/debug/images/shuijiao.jpg -------------------------------------------------------------------------------- /dist/debug/images/taobao-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/dist/debug/images/taobao-bg.jpg -------------------------------------------------------------------------------- /dist/debug/images/taobao-moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/dist/debug/images/taobao-moon.png -------------------------------------------------------------------------------- /dist/debug/images/totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/dist/debug/images/totop.png -------------------------------------------------------------------------------- /dist/debug/images/yuantiao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/dist/debug/images/yuantiao.jpg -------------------------------------------------------------------------------- /examples/base/base_list.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | base list 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 |
24 |
25 |
26 |
27 |

本Demo的下拉刷新: 添加新数据到列表底部

28 |
    29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | 73 | 74 | -------------------------------------------------------------------------------- /examples/base/csstranslate_list.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | csstranslate list 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 |
26 | 27 |
28 | 29 |
30 | 31 |
32 |

关闭csstranslate（当前开启）

33 |
34 | 35 |
    36 | 37 |
38 |
39 |
40 |
41 | 42 | 43 | 44 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /examples/base/onecontainer_multilist.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | onecontainer multilist 14 | 15 | 16 | 25 | 26 | 27 | 28 | 29 | 33 |
34 |
35 |

列表0

36 |

列表1

37 |

列表2

38 |
39 |
40 | 41 |
42 | 43 |
    44 | 45 |
46 |
47 |
48 |
49 | 50 | 51 | 52 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /examples/base/successanim_list.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | base list 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 27 |
28 | 29 |
30 | 31 |
32 | 33 |
    34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /examples/common/common.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 一些通用方法 3 | */ 4 | (function (exports) { 5 | /** 6 | * 将string字符串转为html对象,默认创一个div填充 7 | * 因为很常用，所以单独提取出来了 8 | * @param {String} strHtml 目标字符串 9 | * @return {HTMLElement} 返回处理好后的html对象,如果字符串非法,返回null 10 | */ 11 | exports.parseHtml = function (strHtml) { 12 | if (typeof strHtml !== 'string') { 13 | return strHtml; 14 | } 15 | // 创一个灵活的div 16 | let i, 17 | a = document.createElement('div'); 18 | const b = document.createDocumentFragment(); 19 | 20 | a.innerHTML = strHtml; 21 | 22 | while ((i = a.firstChild)) { 23 | b.appendChild(i); 24 | } 25 | 26 | return b; 27 | }; 28 | 29 | /** 30 | * 将对象渲染到模板 31 | * @param {String} template 对应的目标 32 | * @param {Object} obj 目标对象 33 | * @return {String} 渲染后的模板 34 | */ 35 | exports.renderTemplate = function (template, obj) { 36 | return template.replace(/[{]{2}([^}]+)[}]{2}/g, ($0, $1) => obj[$1] || ''); 37 | }; 38 | 39 | /** 40 | * 定义一个计数器 41 | */ 42 | const counterArr = [0]; 43 | 44 | /** 45 | * 添加测试数据 46 | * @param {String} dom 目标dom 47 | * @param {Number} count 需要添加的数量 48 | * @param {Boolean} isReset 是否需要重置，下拉刷新的时候需要 49 | * @param {Number} index 属于哪一个刷新 50 | */ 51 | exports.appendTestData = function (dom, count, isReset, index) { 52 | if (typeof dom === 'string') { 53 | dom = document.querySelector(dom); 54 | } 55 | 56 | const prevTitle = typeof index !== 'undefined' ? (`Tab${index}`) : ''; 57 | 58 | const counterIndex = index || 0; 59 | 60 | counterArr[counterIndex] = counterArr[counterIndex] || 0; 61 | 62 | if (isReset) { 63 | dom.innerHTML = ''; 64 | counterArr[counterIndex] = 0; 65 | } 66 | 67 | const template = `
  • 68 | 69 |

    {{title}}

    70 |

    1149 元

    71 |

    已售648件

    72 |
    • ` 73 | 74 | let html = '', 75 | dateStr = (new Date()).toLocaleDateString(); 76 | 77 | for (let i = 0; i < count; i++) { 78 | html += exports.renderTemplate(template, { 79 | title: `${prevTitle}测试第【${counterArr[counterIndex]}】六罐装荷兰美素佳儿金装2段900g`, 80 | date: dateStr, 81 | }); 82 | 83 | counterArr[counterIndex]++; 84 | } 85 | 86 | const child = exports.parseHtml(html); 87 | 88 | dom.appendChild(child); 89 | }; 90 | 91 | /** 92 | * 绑定监听事件 暂时先用click 93 | * @param {String} dom 单个dom,或者selector 94 | * @param {Function} callback 回调函数 95 | * @param {String} eventName 事件名 96 | */ 97 | exports.bindEvent = function (dom, callback, eventName) { 98 | eventName = eventName || 'click'; 99 | if (typeof dom === 'string') { 100 | // 选择 101 | dom = document.querySelectorAll(dom); 102 | } 103 | if (!dom) { 104 | return; 105 | } 106 | if (dom.length > 0) { 107 | for (let i = 0, len = dom.length; i < len; i++) { 108 | dom[i].addEventListener(eventName, callback); 109 | } 110 | } else { 111 | dom.addEventListener(eventName, callback); 112 | } 113 | }; 114 | }(window.Common = {})); -------------------------------------------------------------------------------- /examples/images/cbd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/images/cbd.jpg -------------------------------------------------------------------------------- /examples/images/muwu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/images/muwu.jpg -------------------------------------------------------------------------------- /examples/images/shuijiao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/images/shuijiao.jpg -------------------------------------------------------------------------------- /examples/images/totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/images/totop.png -------------------------------------------------------------------------------- /examples/images/yuantiao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/images/yuantiao.jpg -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 72 | 73 | 74 | 75 |

    MeScroll Demos 所有案例

    76 | 77 |
    78 | 79 |

    base demos 基础案例

    80 | base-products 商品列表最简单的列表实现 81 | options-list 列表的配置项所有配置项的使用 82 | success 成功动画列表下拉成功动画的示例 83 | translate-list 动画是否开启translate动画 84 | onecontainer 单容器单个容器实现多个列表 85 | multicontainer 多容器多个容器实现多个列表 86 | vue-list vue支持Vue下的使用 87 | 88 |

    scroll嵌套的示例

    89 | 【muibar】 透明导航栏嵌套透明导航栏嵌套 90 | 【horizontal】 横向滑动嵌套横向滑动嵌套 91 | 【mui slider】 图片轮播嵌套图片轮播嵌套 92 | 【mui scroll】嵌套mui-scroll嵌套 93 | 【swipe】 swipe嵌套swipe嵌套 94 | 95 | 96 |

    官方内置主题

    97 | 【applet】 仿小程序主题 98 | 【taobao】 仿淘宝主题 99 | 【drawer3d】 3D抽屉效果主题 100 | 【drawerslider】 滑动抽屉效果主题 101 | 102 | 107 |
    108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /examples/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MiniRefresh Showcase 9 | 10 | 11 | 12 | 13 | 14 |
    15 |

    base showcase 基础示例

    16 | 46 | 47 |

    themes showcase 主题的使用

    48 | 66 | 67 |

    scroll-nested showcase 和一些scroll嵌套的示例

    68 | 90 | 91 |

    senior showcase 高级示例

    92 | 102 |
    103 | 104 | 105 | -------------------------------------------------------------------------------- /examples/res/img/mescroll-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/mescroll-empty.png -------------------------------------------------------------------------------- /examples/res/img/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/mescroll-totop.png -------------------------------------------------------------------------------- /examples/res/img/pd1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd1.jpg -------------------------------------------------------------------------------- /examples/res/img/pd10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd10.jpg -------------------------------------------------------------------------------- /examples/res/img/pd11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd11.jpg -------------------------------------------------------------------------------- /examples/res/img/pd12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd12.jpg -------------------------------------------------------------------------------- /examples/res/img/pd13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd13.jpg -------------------------------------------------------------------------------- /examples/res/img/pd14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd14.jpg -------------------------------------------------------------------------------- /examples/res/img/pd15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd15.jpg -------------------------------------------------------------------------------- /examples/res/img/pd16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd16.jpg -------------------------------------------------------------------------------- /examples/res/img/pd17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd17.jpg -------------------------------------------------------------------------------- /examples/res/img/pd18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd18.jpg -------------------------------------------------------------------------------- /examples/res/img/pd19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd19.jpg -------------------------------------------------------------------------------- /examples/res/img/pd2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd2.jpg -------------------------------------------------------------------------------- /examples/res/img/pd20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd20.jpg -------------------------------------------------------------------------------- /examples/res/img/pd21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd21.jpg -------------------------------------------------------------------------------- /examples/res/img/pd22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd22.jpg -------------------------------------------------------------------------------- /examples/res/img/pd23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd23.jpg -------------------------------------------------------------------------------- /examples/res/img/pd24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd24.jpg -------------------------------------------------------------------------------- /examples/res/img/pd25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd25.jpg -------------------------------------------------------------------------------- /examples/res/img/pd26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd26.jpg -------------------------------------------------------------------------------- /examples/res/img/pd27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd27.jpg -------------------------------------------------------------------------------- /examples/res/img/pd28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd28.jpg -------------------------------------------------------------------------------- /examples/res/img/pd3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd3.jpg -------------------------------------------------------------------------------- /examples/res/img/pd4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd4.jpg -------------------------------------------------------------------------------- /examples/res/img/pd5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd5.jpg -------------------------------------------------------------------------------- /examples/res/img/pd6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd6.jpg -------------------------------------------------------------------------------- /examples/res/img/pd7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd7.jpg -------------------------------------------------------------------------------- /examples/res/img/pd8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd8.jpg -------------------------------------------------------------------------------- /examples/res/img/pd9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/pd9.jpg -------------------------------------------------------------------------------- /examples/res/img/swiper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/img/swiper.jpg -------------------------------------------------------------------------------- /examples/res/pay-wx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/pay-wx.jpg -------------------------------------------------------------------------------- /examples/res/pay-zfb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/res/pay-zfb.jpg -------------------------------------------------------------------------------- /examples/res/pdlist1.js: -------------------------------------------------------------------------------- 1 | var pdlist1=[ 2 | { 3 | "pdImg": "../res/img/pd1.jpg", 4 | "pdName": "【1】 六罐装荷兰美素佳儿金装2段900g", 5 | "pdPrice": 1149.00, 6 | "pdSold": 648 7 | }, { 8 | "pdImg": "../res/img/pd2.jpg", 9 | "pdName": "【2】 韩国Amore爱茉莉红吕洗发水套装修复受损发质", 10 | "pdPrice": 89.00, 11 | "pdSold": 128 12 | }, { 13 | "pdImg": "../res/img/pd3.jpg", 14 | "pdName": "【3】 Friso美素佳儿 金装婴儿配方奶粉3段900g", 15 | "pdPrice": 195.00, 16 | "pdSold": 968 17 | }, { 18 | "pdImg": "../res/img/pd4.jpg", 19 | "pdName": "【4】 Fisher pdPrice费雪 费雪三轮儿童滑行车", 20 | "pdPrice": 299.00, 21 | "pdSold": 85 22 | }, { 23 | "pdImg": "../res/img/pd5.jpg", 24 | "pdName": "【5】 Babylee巴布力 实木婴儿床 雷卡拉130*70cm", 25 | "pdPrice": 1889.00, 26 | "pdSold": 18 27 | }, { 28 | "pdImg": "../res/img/pd6.jpg", 29 | "pdName": "【6】 Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g", 30 | "pdPrice": 70.00, 31 | "pdSold": 658 32 | }, { 33 | "pdImg": "../res/img/pd7.jpg", 34 | "pdName": "【7】 TTBOO兔兔小布 肩纽扣套装", 35 | "pdPrice": 268.00, 36 | "pdSold": 128 37 | }, { 38 | "pdImg": "../res/img/pd8.jpg", 39 | "pdName": "【8】 Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶", 40 | "pdPrice": 140.00, 41 | "pdSold": 366 42 | }, { 43 | "pdImg": "../res/img/pd9.jpg", 44 | "pdName": "【9】 illuma启赋 奶粉3段900g", 45 | "pdPrice": 252.00, 46 | "pdSold": 98 47 | }, { 48 | "pdImg": "../res/img/pd10.jpg", 49 | "pdName": "【10】 Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g", 50 | "pdPrice": 89.00, 51 | "pdSold": 128 52 | }, { 53 | "pdImg": "../res/img/pd11.jpg", 54 | "pdName": "【11】 韩蜜 酷炫唇蜜（礼盒套装）2.8g*4", 55 | "pdPrice": 179.00, 56 | "pdSold": 35 57 | }, { 58 | "pdImg": "../res/img/pd12.jpg", 59 | "pdName": "【12】 保税区直发【3包装】日本Merries花王纸尿裤NB90", 60 | "pdPrice": 289.00, 61 | "pdSold": 1928 62 | }, { 63 | "pdImg": "../res/img/pd13.jpg", 64 | "pdName": "【13】 Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色", 65 | "pdPrice": 203.00, 66 | "pdSold": 87 67 | }, { 68 | "pdImg": "../res/img/pd14.jpg", 69 | "pdName": "【14】 香港直邮德国瑞德露Rival de Loop芦荟精华安瓶", 70 | "pdPrice": 152.00, 71 | "pdSold": 61 72 | }, { 73 | "pdImg": "../res/img/pd15.jpg", 74 | "pdName": "【15】 保税区直发药师堂尊马油香草味温和保湿无刺激面霜", 75 | "pdPrice": 269.00, 76 | "pdSold": 73 77 | }, { 78 | "pdImg": "../res/img/pd16.jpg", 79 | "pdName": "【16】 香港直邮日本Spatreatment眼膜保湿去细纹法令纹", 80 | "pdPrice": 219.00, 81 | "pdSold": 13 82 | }, { 83 | "pdImg": "../res/img/pd17.jpg", 84 | "pdName": "【17】 韩国MEDIHEALNMF可莱丝针剂睡眠面膜", 85 | "pdPrice": 81.00, 86 | "pdSold": 128 87 | }, { 88 | "pdImg": "../res/img/pd18.jpg", 89 | "pdName": "【18】 DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g", 90 | "pdPrice": 123.00, 91 | "pdSold": 77 92 | }, { 93 | "pdImg": "../res/img/pd19.jpg", 94 | "pdName": "【19】 日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml", 95 | "pdPrice": 429.00, 96 | "pdSold": 36 97 | }, { 98 | "pdImg": "../res/img/pd20.jpg", 99 | "pdName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒", 100 | "pdPrice": 39.00, 101 | "pdSold": 61 102 | }, { 103 | "pdImg": "../res/img/pd21.jpg", 104 | "pdName": "【21】 Heinz亨氏 乐维滋果汁泥组合5口味15袋", 105 | "pdPrice": 69.00, 106 | "pdSold": 55 107 | }, { 108 | "pdImg": "../res/img/pd22.jpg", 109 | "pdName": "【22】 保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒", 110 | "pdPrice": 271.00, 111 | "pdSold": 19 112 | }, { 113 | "pdImg": "../res/img/pd23.jpg", 114 | "pdName": "【23】 挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂", 115 | "pdPrice": 102.00, 116 | "pdSold": 125 117 | }, { 118 | "pdImg": "../res/img/pd24.jpg", 119 | "pdName": "【24】 澳大利亚Bio island DHA for Pregnancy海藻油DHA", 120 | "pdPrice": 289.00, 121 | "pdSold": 28 122 | }, { 123 | "pdImg": "../res/img/pd25.jpg", 124 | "pdName": "【25】 澳大利亚Fatblaster Coconut Detox椰子水", 125 | "pdPrice": 152.00, 126 | "pdSold": 17 127 | }, { 128 | "pdImg": "../res/img/pd26.jpg", 129 | "pdName": "【26】 Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60", 130 | "pdPrice": 99.00, 131 | "pdSold": 181 132 | }, { 133 | "pdImg": "../res/img/pd27.jpg", 134 | "pdName": "【27】 英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂", 135 | "pdPrice": 72.00, 136 | "pdSold": 66 137 | }, { 138 | "pdImg": "../res/img/pd28.jpg", 139 | "pdName": "【28】 德国NUK 多色婴幼儿带盖学饮杯", 140 | "pdPrice": 92.00, 141 | "pdSold": 138 142 | } 143 | ]; -------------------------------------------------------------------------------- /examples/res/pdlist2.js: -------------------------------------------------------------------------------- 1 | var pdlist2=[ 2 | { 3 | "pdImg": "../res/img/pd3.jpg", 4 | "pdName": "【3】 美素佳儿Friso婴儿配方奶粉3段 ( 商品【1】【2】 已删除 )", 5 | "pdPrice": 177.00, 6 | "pdSold": 1023 7 | }, { 8 | "pdImg": "../res/img/pd4.jpg", 9 | "pdName": "【4】 每人限购1辆 费雪滑行车", 10 | "pdPrice": 189.00, 11 | "pdSold": 199 12 | }, { 13 | "pdImg": "../res/img/pd5.jpg", 14 | "pdName": "【5】 巴布力实木婴儿床", 15 | "pdPrice": 1800.00, 16 | "pdSold": 72 17 | }, { 18 | "pdImg": "../res/img/pd6.jpg", 19 | "pdName": "【6】 贝亲奶粉盒", 20 | "pdPrice": 98.00, 21 | "pdSold": 677 22 | }, { 23 | "pdImg": "../res/img/pd7.jpg", 24 | "pdName": "【7】 兔兔小布肩纽扣套装", 25 | "pdPrice": 277.00, 26 | "pdSold": 166 27 | }, { 28 | "pdImg": "../res/img/pd8.jpg", 29 | "pdName": "【8】 璐拉婴儿沐浴露", 30 | "pdPrice": 155.00, 31 | "pdSold": 343 32 | }, { 33 | "pdImg": "../res/img/pd9.jpg", 34 | "pdName": "【9】 启赋illuma 奶粉3段900g", 35 | "pdPrice": 238.00, 36 | "pdSold": 102 37 | }, { 38 | "pdImg": "../res/img/pd10.jpg", 39 | "pdName": "【10】 雅培Abbott乳蛋白部分水解婴儿配方奶粉3段820g", 40 | "pdPrice": 91.00, 41 | "pdSold": 135 42 | }, { 43 | "pdImg": "../res/img/pd11.jpg", 44 | "pdName": "【11】 韩蜜 酷炫唇蜜（礼盒套装）2.8g*4", 45 | "pdPrice": 151.00, 46 | "pdSold": 123 47 | }, { 48 | "pdImg": "../res/img/pd12.jpg", 49 | "pdName": "【12】 保税区直发【3包装】日本Merries花王纸尿裤NB90", 50 | "pdPrice": 292.00, 51 | "pdSold": 1933 52 | }, { 53 | "pdImg": "../res/img/pd13.jpg", 54 | "pdName": "【13】 Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色", 55 | "pdPrice": 245.00, 56 | "pdSold": 95 57 | }, { 58 | "pdImg": "../res/img/pd14.jpg", 59 | "pdName": "【14】 香港直邮德国瑞德露Rival de Loop芦荟精华安瓶", 60 | "pdPrice": 163.00, 61 | "pdSold": 75 62 | }, { 63 | "pdImg": "../res/img/pd15.jpg", 64 | "pdName": "【15】 保税区直发药师堂尊马油香草味温和保湿无刺激面霜", 65 | "pdPrice": 259.00, 66 | "pdSold": 86 67 | }, { 68 | "pdImg": "../res/img/pd16.jpg", 69 | "pdName": "【16】 香港直邮日本Spatreatment眼膜保湿去细纹法令纹", 70 | "pdPrice": 237.00, 71 | "pdSold": 58 72 | }, { 73 | "pdImg": "../res/img/pd17.jpg", 74 | "pdName": "【17】 韩国MEDIHEALNMF可莱丝针剂睡眠面膜", 75 | "pdPrice": 81.00, 76 | "pdSold": 135 77 | }, { 78 | "pdImg": "../res/img/pd18.jpg", 79 | "pdName": "【18】 DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g", 80 | "pdPrice": 123.00, 81 | "pdSold": 87 82 | }, { 83 | "pdImg": "../res/img/pd19.jpg", 84 | "pdName": "【19】 日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml", 85 | "pdPrice": 429.00, 86 | "pdSold": 45 87 | }, { 88 | "pdImg": "../res/img/pd20.jpg", 89 | "pdName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒", 90 | "pdPrice": 39.00, 91 | "pdSold": 32 92 | }, { 93 | "pdImg": "../res/img/pd21.jpg", 94 | "pdName": "【21】 Heinz亨氏 乐维滋果汁泥组合5口味15袋", 95 | "pdPrice": 64.00, 96 | "pdSold": 75 97 | }, { 98 | "pdImg": "../res/img/pd22.jpg", 99 | "pdName": "【22】 保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒", 100 | "pdPrice": 271.00, 101 | "pdSold": 12 102 | }, { 103 | "pdImg": "../res/img/pd23.jpg", 104 | "pdName": "【23】 挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂", 105 | "pdPrice": 175.00, 106 | "pdSold": 111 107 | }, { 108 | "pdImg": "../res/img/pd24.jpg", 109 | "pdName": "【24】 澳大利亚Bio island DHA for Pregnancy海藻油DHA", 110 | "pdPrice": 289.00, 111 | "pdSold": 28 112 | }, { 113 | "pdImg": "../res/img/pd25.jpg", 114 | "pdName": "【25】 澳大利亚Fatblaster Coconut Detox椰子水", 115 | "pdPrice": 152.00, 116 | "pdSold": 17 117 | }, { 118 | "pdImg": "../res/img/pd26.jpg", 119 | "pdName": "【26】 Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60", 120 | "pdPrice": 99.00, 121 | "pdSold": 181 122 | }, { 123 | "pdImg": "../res/img/pd27.jpg", 124 | "pdName": "【27】 英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂", 125 | "pdPrice": 72.00, 126 | "pdSold": 66 127 | }, { 128 | "pdImg": "../res/img/pd28.jpg", 129 | "pdName": "【28】 德国NUK 多色婴幼儿带盖学饮杯", 130 | "pdPrice": 92.00, 131 | "pdSold": 138 132 | } 133 | ]; -------------------------------------------------------------------------------- /examples/scroll-nested/libs/mui/fonts/mui-icons-extra.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/scroll-nested/libs/mui/fonts/mui-icons-extra.ttf -------------------------------------------------------------------------------- /examples/scroll-nested/libs/mui/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/examples/scroll-nested/libs/mui/fonts/mui.ttf -------------------------------------------------------------------------------- /examples/scroll-nested/nested_horizonscroll.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | horizontal scroll 14 | 15 | 16 | 40 | 41 | 42 | 43 | 44 | 48 |
    49 |
    50 | 51 | 52 | 53 |
    54 | 55 |
    56 |
    57 |
    item_1
    58 |
    item_2
    59 |
    item_3
    60 |
    item_4
    61 |
    item_5
    62 |
    item_6
    63 |
    item_7
    64 |
    item_8
    65 |
    item_9
    66 |
    67 |
    68 | 69 | 70 |
      71 | 72 |
    73 |
    74 |
    75 |
    76 | 77 | 78 | 79 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /examples/themes/theme_applet.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | MiniFresh theme applet 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 |
    27 | 28 |
    29 | 30 |
    31 | 32 |
      33 | 34 |
    35 |
    36 |
    37 |
    38 | 39 | 40 | 41 | 42 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /examples/themes/theme_drawer3d.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | MiniFresh theme drawer3d 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 |
    27 | 28 |
    29 | 30 |
    31 | 32 |
      33 | 34 |
    35 |
    36 |
    37 |
    38 | 39 | 40 | 41 | 42 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /examples/themes/theme_drawerslider.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | MiniFresh theme drawerslider 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 |
    26 | 27 |
    28 | 29 |
    30 | 31 |
      32 | 33 |
    34 |
    35 |
    36 |
    37 | 38 | 39 | 40 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /examples/themes/theme_taobao.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | MiniFresh theme taobao 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 25 |
    26 | 27 |
    28 | 29 |
    30 | 31 |
      32 | 33 |
    34 |
    35 |
    36 |
    37 | 38 | 39 | 40 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /examples/vue/vue_list.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | vue support 14 | 15 | 16 | 17 | 18 | 19 | 20 | 24 |
    25 |
    26 | 27 |
    28 | 29 |
      30 |
    • 31 | 32 |

      {{item.title}}

      33 |

      1149 元

      34 |

      已售648件

      35 | 38 | 39 |
      • 40 |
    41 |
    42 |
    43 |
    44 | 45 | 46 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/base/list-full-lock.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/base/list-full-lock.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/base/list-mescroll-more.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/base/list-mescroll-more.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/base/list-mescroll-one.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/base/list-mescroll-one.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/base/list-news.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/base/list-news.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/base/list-products-vue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/base/list-products-vue.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/base/list-products.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/base/list-products.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/base/mescroll-options.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/base/mescroll-options.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/beibei.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/beibei.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/img/beibei1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/img/beibei1.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/img/beibei2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/img/beibei2.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/img/footer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/img/footer.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/img/header.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-bb1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/option/mescroll-bb1.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-bb2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/option/mescroll-bb2.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-bb3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/option/mescroll-bb3.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-bb4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/option/mescroll-bb4.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-option.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 自定义下拉刷新 3 | * 4 | //下拉刷新区域 5 |
    6 |
    7 | 8 |

    9 |

    10 |

    11 |
    12 |
    13 | */ 14 | 15 | /*下拉刷新--标语*/ 16 | .mescroll-downwarp .downwarp-slogan{ 17 | display: block; 18 | width: 210px; 19 | height: 84px; 20 | margin: auto; 21 | } 22 | /*下拉刷新--向下进度动画*/ 23 | .mescroll-downwarp .downwarp-progress{ 24 | width: 20px; 25 | height: 20px; 26 | border: none; 27 | margin: auto; 28 | background-size: contain; 29 | background-repeat: no-repeat; 30 | background-position: center; 31 | background-image: url(mescroll-progress.png); 32 | -webkit-transition: all 300ms; 33 | transition: all 300ms; 34 | } 35 | /*下拉刷新--进度条*/ 36 | .mescroll-downwarp .downwarp-loading{ 37 | width: 16px; 38 | height: 16px; 39 | border-radius: 50%; 40 | border: 1px solid #FF8095; 41 | border-bottom-color: transparent; 42 | } 43 | /*下拉刷新--吉祥物*/ 44 | .mescroll-downwarp .downwarp-mascot{ 45 | position: absolute; 46 | right: 8px; 47 | bottom: 0; 48 | width: 50px; 49 | height: 50px; 50 | background-size: contain; 51 | background-repeat: no-repeat; 52 | -webkit-animation: animMascot .6s steps(1,end) infinite; 53 | animation: animMascot .6s steps(1,end) infinite; 54 | } 55 | @-webkit-keyframes animMascot { 56 | 0% {background-image: url(mescroll-bb1.png)} 57 | 25% {background-image: url(mescroll-bb2.png)} 58 | 50% {background-image: url(mescroll-bb3.png)} 59 | 75% {background-image: url(mescroll-bb4.png)} 60 | 100% {background-image: url(mescroll-bb1.png)} 61 | } 62 | @keyframes animMascot { 63 | 0% {background-image: url(mescroll-bb1.png)} 64 | 25% {background-image: url(mescroll-bb2.png)} 65 | 50% {background-image: url(mescroll-bb3.png)} 66 | 75% {background-image: url(mescroll-bb4.png)} 67 | 100% {background-image: url(mescroll-bb1.png)} 68 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-option.js: -------------------------------------------------------------------------------- 1 | /* 2 | *下拉刷新和上拉加载js 3 | * 4 | 1.引用mescroll.css和mescroll.js; 引用自定义的mescroll-option.css和mescroll-option.js,并检查相关图片路径是否引用正确; 5 | 6 | 2.拷贝以下布局结构 7 |
    // id可修改,但class不能改;另外mescroll的height: 100%,所以父布局要有高度,否则无法触发上拉加载. 8 | //滑动区域的内容,如: ... 9 |
    10 | 11 | 3.创建MeScroll对象,内部已默认开启下拉刷新 12 | var mescroll = initMeScroll("mescroll", { 13 | // down:{ 14 | // auto: true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true 15 | // callback: function() { 16 | // mescroll.resetUpScroll();//下拉刷新的回调,默认重置上拉加载列表为第一页 17 | // } 18 | // }, 19 | up: { 20 | // auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false 21 | callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); } 22 | } 23 | }); 24 | 25 | function getListData(page){ 26 | $.ajax({ 27 | type: 'GET', 28 | url: 'xxxxxx?num='+page.num+"&size="+page.size, 29 | dataType: 'json', 30 | success: function(data){ 31 | //联网成功的回调,隐藏下拉刷新和上拉加载的状态;(参数:当前页数据的总数) 32 | mescroll.endSuccess(data.length);//如果传了参数,mescroll会自动判断列表若无任何数据,则提示空;列表无下一页数据,则提示无更多数据;如果不传参数则仅隐藏加载中的状态 33 | //设置列表数据 34 | //setListData(data); 35 | }, 36 | error: function(data){ 37 | //联网失败的回调,隐藏下拉刷新和上拉加载的状态; 38 | mescroll.endErr(); 39 | } 40 | }); 41 | } 42 | 43 | 其他常用方法: 44 | 1.主动触发下拉刷新 mescroll.triggerDownScroll(); 45 | 2.主动触发上拉加载 mescroll.triggerUpScroll(); 46 | 3.重置列表 mescroll.resetUpScroll(); 47 | 4.滚动列表到指定位置 mescroll.scrollTo(y); (y=0回到列表顶部;如需滚动到列表底部,可设置y很大的值,比如y=99999); 48 | 5.获取下拉刷新的配置 mescroll.optDown; 49 | 6.获取上拉加载的配置 mescroll.optUp; 50 | 7.锁定下拉刷新 mescroll.lockDownScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 51 | 8.锁定上拉加载 mescroll.lockUpScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 52 | **/ 53 | 54 | function initMeScroll(mescrollId, options) { 55 | //下拉刷新的布局内容 56 | var htmlContent = ''; 57 | htmlContent += '

    '; 58 | htmlContent += '

    '; 59 | htmlContent += '

    '; 60 | 61 | //自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除) 62 | var myOption={ 63 | down:{ 64 | offset: 65, //触发刷新的距离 65 | htmlContent: htmlContent, //布局内容 66 | inited: function(mescroll, downwarp) { 67 | //初始化完毕的回调,可缓存dom 68 | mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0]; 69 | mescroll.downLoadingDom = downwarp.getElementsByClassName("downwarp-loading")[0]; 70 | }, 71 | inOffset: function(mescroll) { 72 | //进入指定距离范围内那一刻的回调 73 | mescroll.downLoadingDom.style.display="none"; 74 | mescroll.downProgressDom.style.display="inline-block"; 75 | mescroll.downProgressDom.style.webkitTransform = "rotate(0deg)"; 76 | mescroll.downProgressDom.style.transform = "rotate(0deg)"; 77 | }, 78 | outOffset: function(mescroll) { 79 | //下拉超过指定距离那一刻的回调 80 | mescroll.downProgressDom.style.webkitTransform = "rotate(180deg)"; 81 | mescroll.downProgressDom.style.transform = "rotate(180deg)"; 82 | }, 83 | onMoving: function(mescroll, rate, downHight) { 84 | //下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度 85 | //配置空方法,表示移动过程不做处理 (不可写onMoving:null,否则会执行mescroll默认配置的onMoving方法) 86 | }, 87 | showLoading: function(mescroll) { 88 | //触发下拉刷新的回调 89 | mescroll.downProgressDom.style.display="none"; 90 | mescroll.downLoadingDom.style.display="inline-block"; 91 | } 92 | }, 93 | up:{ 94 | toTop: { 95 | src: "option/mescroll-totop.png" //回到顶部按钮的图片路径 96 | } 97 | } 98 | } 99 | 100 | //加入自定义的默认配置 101 | options=MeScroll.extend(options,myOption); 102 | 103 | //创建MeScroll对象 104 | return new MeScroll(mescrollId,options); 105 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/option/mescroll-progress.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-slogan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/option/mescroll-slogan.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/beibei/option/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/beibei/option/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 55 | 56 | 57 | 58 |

    MeScroll Demos 所有案例

    59 | 60 |
    61 | 62 |

    base demos 基础案例

    63 | list-news 新闻列表 下拉刷新添加数据到列表顶部 64 | list-products 商品列表 下拉刷新重置列表数据 65 | mescroll-options 所有配置项 快速熟悉mescroll 66 | list-mescroll-one 单mescroll 切换菜单刷新列表数据 67 | list-mescroll-more 多mescroll 列表数据的缓存 68 | list-products-vue vue的示例 69 | 70 |

    intermediate demos 中级案例

    71 | 【贝贝 v6.0.0】APP的下拉刷新上拉加载 72 | 【雅布力 v2.4.0】APP的下拉刷新上拉加载 73 | 【新浪微博 v7.6.1】APP的下拉刷新上拉加载 74 | 【知乎 v3.53.0】APP的下拉刷新上拉加载 75 | 76 |

    senior demos 高级案例

    77 | 【淘宝 v6.8.0】APP的下拉刷新上拉加载 78 | 【京东 v6.1.0】APP的下拉刷新上拉加载 79 | 【美团 v8.2.3】APP的下拉刷新上拉加载 80 | 【美囤妈妈 v2.0.5】APP的下拉刷新上拉加载 81 |
    82 | 83 | 84 | -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/img/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/img/footer.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/img/header.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/img/jingdong1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/img/jingdong1.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/img/jingdong2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/img/jingdong2.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/img/jingdong3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/img/jingdong3.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/jingdong.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/jingdong.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-loading1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-loading1.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-loading2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-loading2.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-option.css: -------------------------------------------------------------------------------- 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 | .mescroll-downwarp .downwarp-content{ 28 | height: 75px; 29 | padding-bottom: 0; 30 | } 31 | /*下拉刷新--标语*/ 32 | .mescroll-downwarp .downwarp-slogan{ 33 | padding: 16px 0 0 18px; 34 | font-size: 13px; 35 | color: gray; 36 | } 37 | /*下拉刷新--进度提示*/ 38 | .mescroll-downwarp .downwarp-text{ 39 | font-size: 11px; 40 | color: darkgray; 41 | } 42 | /*下拉刷新--向下进度动画*/ 43 | .mescroll-downwarp .downwarp-progress{ 44 | position: absolute; 45 | top: 0; 46 | left: 50%; 47 | width: auto; 48 | height: auto; 49 | border: none; 50 | border-radius: 0; 51 | margin-right: 0; 52 | margin-left: -90px; 53 | } 54 | /*下拉刷新--人*/ 55 | .mescroll-downwarp .downwarp-man{ 56 | width: 50px; 57 | vertical-align: middle; 58 | -webkit-transform-origin: left 60%; 59 | transform-origin: left bottom; 60 | } 61 | /*下拉刷新--盒子*/ 62 | .mescroll-downwarp .downwarp-box{ 63 | width: 18px; 64 | margin-top: 10px; 65 | margin-left: -20px; 66 | vertical-align: middle; 67 | -webkit-transform-origin: right -100%; 68 | transform-origin: right -100%; 69 | } 70 | /*下拉刷新--进度条*/ 71 | .mescroll-downwarp .downwarp-loading{ 72 | /*display: none; 不预先隐藏,避免首次显示动画时,图片没及时加载完毕导致短暂的白屏*/ 73 | position: absolute; 74 | top: 0; 75 | left: 50%; 76 | margin-left: -88px; 77 | width: 50px; 78 | height: 70px; 79 | background-size: contain; 80 | background-repeat: no-repeat; 81 | -webkit-animation: animManRun .3s steps(1,start) infinite; 82 | animation: animManRun .3s steps(1,start) infinite; 83 | } 84 | @-webkit-keyframes animManRun { 85 | 0% {background-image: url(mescroll-progress2.png)} 86 | 40% {background-image: url(mescroll-progress3.png)} 87 | 70% {background-image: url(mescroll-progress4.png)} 88 | 100% {background-image: url(mescroll-progress2.png)} 89 | } 90 | 91 | .mescroll-downwarp .downwarp-loading:before{ 92 | position: absolute; 93 | top: 15px; 94 | left: 50%; 95 | margin-left: -60px; 96 | content: ''; 97 | width: 40px; 98 | height: 70px; 99 | background-size: contain; 100 | background-repeat: no-repeat; 101 | background-image: url(mescroll-progress5.png); 102 | } 103 | 104 | /*上拉加载--进度条*/ 105 | .mescroll-upwarp .upwarp-progress{ 106 | display: inline-block; 107 | width: 22px; 108 | height: 22px; 109 | border: none; 110 | background-image: url(mescroll-loading2.png); 111 | background-size: contain; 112 | } 113 | .mescroll-upwarp .upwarp-loading{ 114 | display: inline-block; 115 | width: 22px; 116 | height: 22px; 117 | background-image: url(mescroll-loading1.png); 118 | background-size: contain; 119 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-progress0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-progress0.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-progress1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-progress1.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-progress2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-progress2.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-progress3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-progress3.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-progress4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-progress4.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-progress5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-progress5.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/jingdong/option/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/jingdong/option/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/img/footer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/img/footer.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/img/header.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/img/meituan1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/img/meituan1.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/img/meituan2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/img/meituan2.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/meituan.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/meituan.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-loading1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-loading1.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-loading2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-loading2.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-loading3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-loading3.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-loading4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-loading4.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-loading5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-loading5.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-loading6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-loading6.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-option.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 自定义下拉刷新 3 | * 4 | //下拉刷新区域 (预先设置downwarp-loading样式,用于加载完成动画图片,防止首次显示动画时,图片不及时刷新导致的白屏问题;) 5 |
    6 |
    7 |

    8 |
    9 |
    10 | */ 11 | 12 | /*下拉刷新--向下进度动画*/ 13 | .mescroll-downwarp .downwarp-progress{ 14 | display: inline-block; 15 | width: 50px; 16 | margin: auto; 17 | border: none; 18 | border-radius: 0; 19 | background-size: 100% 100%; 20 | background-image: url(mescroll-progress0.png); 21 | } 22 | 23 | /*下拉刷新--进度条*/ 24 | .mescroll-downwarp .downwarp-loading{ 25 | display: inline-block; 26 | width: 50px; 27 | background-size: contain; 28 | background-repeat: no-repeat; 29 | background-position: center; 30 | -webkit-animation: animProgress .3s steps(1,end), animLoading .3s steps(1,end) .3s infinite; 31 | animation: animProgress .3s steps(1,end), animLoading .3s steps(1,end) .3s infinite; 32 | } 33 | @-webkit-keyframes animProgress { 34 | 0% {background-image: url(mescroll-progress0.png)} 35 | 16% {background-image: url(mescroll-progress1.png)} 36 | 32% {background-image: url(mescroll-progress2.png)} 37 | 48% {background-image: url(mescroll-progress3.png)} 38 | 64% {background-image: url(mescroll-progress4.png)} 39 | 80% {background-image: url(mescroll-progress5.png)} 40 | 100% {background-image: url(mescroll-progress0.png)} 41 | } 42 | @keyframes animProgress { 43 | 0% {background-image: url(mescroll-progress0.png)} 44 | 16% {background-image: url(mescroll-progress1.png)} 45 | 32% {background-image: url(mescroll-progress2.png)} 46 | 48% {background-image: url(mescroll-progress3.png)} 47 | 64% {background-image: url(mescroll-progress4.png)} 48 | 80% {background-image: url(mescroll-progress5.png)} 49 | 100% {background-image: url(mescroll-progress0.png)} 50 | } 51 | @-webkit-keyframes animLoading { 52 | 0% {background-image: url(mescroll-loading1.png)} 53 | 16% {background-image: url(mescroll-loading2.png)} 54 | 32% {background-image: url(mescroll-loading3.png)} 55 | 48% {background-image: url(mescroll-loading4.png)} 56 | 64% {background-image: url(mescroll-loading5.png)} 57 | 80% {background-image: url(mescroll-loading6.png)} 58 | 100% {background-image: url(mescroll-loading1.png)} 59 | } 60 | @keyframes animLoading { 61 | 0% {background-image: url(mescroll-loading1.png)} 62 | 16% {background-image: url(mescroll-loading2.png)} 63 | 32% {background-image: url(mescroll-loading3.png)} 64 | 48% {background-image: url(mescroll-loading4.png)} 65 | 64% {background-image: url(mescroll-loading5.png)} 66 | 80% {background-image: url(mescroll-loading6.png)} 67 | 100% {background-image: url(mescroll-loading1.png)} 68 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-option.js: -------------------------------------------------------------------------------- 1 | /* 2 | *下拉刷新和上拉加载js 3 | * 4 | 1.引用mescroll.css和mescroll.js; 引用自定义的mescroll-option.css和mescroll-option.js,并检查相关图片路径是否引用正确; 5 | 6 | 2.拷贝以下布局结构 7 |
    // id可修改,但class不能改;另外mescroll的height: 100%,所以父布局要有高度,否则无法触发上拉加载. 8 | //滑动区域的内容,如: ... 9 |
    10 | 11 | 3.创建MeScroll对象,内部已默认开启下拉刷新 12 | var mescroll = initMeScroll("mescroll", { 13 | // down:{ 14 | // auto: true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true 15 | // callback: function() { 16 | // mescroll.resetUpScroll();//下拉刷新的回调,默认重置上拉加载列表为第一页 17 | // } 18 | // }, 19 | up: { 20 | // auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false 21 | callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); } 22 | } 23 | }); 24 | 25 | function getListData(page){ 26 | $.ajax({ 27 | type: 'GET', 28 | url: 'xxxxxx?num='+page.num+"&size="+page.size, 29 | dataType: 'json', 30 | success: function(data){ 31 | //联网成功的回调,隐藏下拉刷新和上拉加载的状态;(参数:当前页数据的总数) 32 | mescroll.endSuccess(data.length);//如果传了参数,mescroll会自动判断列表若无任何数据,则提示空;列表无下一页数据,则提示无更多数据;如果不传参数则仅隐藏加载中的状态 33 | //设置列表数据 34 | //setListData(data); 35 | }, 36 | error: function(data){ 37 | //联网失败的回调,隐藏下拉刷新和上拉加载的状态; 38 | mescroll.endErr(); 39 | } 40 | }); 41 | } 42 | 43 | 其他常用方法: 44 | 1.主动触发下拉刷新 mescroll.triggerDownScroll(); 45 | 2.主动触发上拉加载 mescroll.triggerUpScroll(); 46 | 3.重置列表 mescroll.resetUpScroll(); 47 | 4.滚动列表到指定位置 mescroll.scrollTo(y); (y=0回到列表顶部;如需滚动到列表底部,可设置y很大的值,比如y=99999); 48 | 5.获取下拉刷新的配置 mescroll.optDown; 49 | 6.获取上拉加载的配置 mescroll.optUp; 50 | 7.锁定下拉刷新 mescroll.lockDownScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 51 | 8.锁定上拉加载 mescroll.lockUpScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 52 | **/ 53 | 54 | function initMeScroll(mescrollId, options) { 55 | //自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除) 56 | var myOption={ 57 | down:{ 58 | htmlContent: '

    ', //布局内容 59 | // inited: function(mescroll, downwarp) { 60 | // //初始化完毕的回调,可缓存dom 61 | // mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0]; 62 | // }, 63 | inOffset: function(mescroll) { 64 | //进入指定距离范围内那一刻的回调 65 | mescroll.downProgressDom.classList.remove("downwarp-loading"); 66 | mescroll.downProgressDom.classList.add("downwarp-progress"); 67 | }, 68 | outOffset: function(mescroll) { 69 | //下拉超过指定距离那一刻的回调 70 | mescroll.downProgressDom.style.height="50px"; 71 | mescroll.downProgressDom.classList.add("downwarp-loading"); 72 | mescroll.downProgressDom.classList.remove("downwarp-progress"); 73 | }, 74 | onMoving: function(mescroll, rate, downHight) { 75 | //下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度 76 | if(rate<1) mescroll.downProgressDom.style.height=downHight/2+"px"; 77 | }, 78 | showLoading: function(mescroll) { 79 | //触发下拉刷新的回调; 此处无逻辑,但不可写成showLoading:null,否则会使用mescroll默认配置的逻辑 80 | } 81 | }, 82 | up:{ 83 | toTop: { 84 | src: "option/mescroll-totop.png" //回到顶部按钮的图片路径 85 | } 86 | } 87 | } 88 | 89 | //加入自定义的默认配置 90 | options=MeScroll.extend(options,myOption); 91 | 92 | //创建MeScroll对象 93 | return new MeScroll(mescrollId,options); 94 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-progress0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-progress0.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-progress1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-progress1.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-progress2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-progress2.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-progress3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-progress3.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-progress4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-progress4.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-progress5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-progress5.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meituan/option/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meituan/option/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/img/footer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/img/footer.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/img/header.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/img/meitun1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/img/meitun1.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/img/meitun2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/img/meitun2.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/meitunmama.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/meitunmama.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-option.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 自定义下拉刷新的结构 3 | * 4 | //下拉刷新区域 (预先设置downwarp-progress-slow样式,用于加载完成动画图片,防止首次显示动画时,图片不及时刷新导致的白屏问题;) 5 |
    6 |

    7 |
    8 | */ 9 | 10 | /*下拉刷新--内容区,定位于区域底部*/ 11 | .mescroll-downwarp .downwarp-content{ 12 | padding-bottom: 0; 13 | } 14 | /*下拉刷新--进度*/ 15 | .mescroll-downwarp .downwarp-progress{ 16 | display: inline-block; 17 | width: 120px; 18 | height: 70px; 19 | border: none; 20 | margin: auto; 21 | border-radius: 0; 22 | background-size: contain; 23 | background-repeat: no-repeat; 24 | background-position: center; 25 | } 26 | /*下拉刷新--进度-慢*/ 27 | .mescroll-downwarp .downwarp-progress-slow{ 28 | -webkit-animation: animProgressSlow 2s steps(1,end) infinite; 29 | animation: animProgressSlow 2s steps(1,end) infinite; 30 | } 31 | @-webkit-keyframes animProgressSlow { 32 | 0% {background-image: url(mescroll-progress1.png)} 33 | 16% {background-image: url(mescroll-progress2.png)} 34 | 32% {background-image: url(mescroll-progress3.png)} 35 | 48% {background-image: url(mescroll-progress4.png)} 36 | 64% {background-image: url(mescroll-progress5.png)} 37 | 80% {background-image: url(mescroll-progress6.png)} 38 | 100% {background-image: url(mescroll-progress1.png)} 39 | } 40 | @keyframes animProgressSlow { 41 | 0% {background-image: url(mescroll-progress1.png)} 42 | 16% {background-image: url(mescroll-progress2.png)} 43 | 32% {background-image: url(mescroll-progress3.png)} 44 | 48% {background-image: url(mescroll-progress4.png)} 45 | 64% {background-image: url(mescroll-progress5.png)} 46 | 80% {background-image: url(mescroll-progress6.png)} 47 | 100% {background-image: url(mescroll-progress1.png)} 48 | } 49 | /*下拉刷新--进度-快*/ 50 | .mescroll-downwarp .downwarp-progress-fast{ 51 | -webkit-animation: animProgressFast .6s steps(1,end) infinite; 52 | animation: animProgressFast .6s steps(1,end) infinite; 53 | } 54 | @-webkit-keyframes animProgressFast { 55 | 0% {background-image: url(mescroll-progress1.png)} 56 | 16% {background-image: url(mescroll-progress2.png)} 57 | 32% {background-image: url(mescroll-progress3.png)} 58 | 48% {background-image: url(mescroll-progress4.png)} 59 | 64% {background-image: url(mescroll-progress5.png)} 60 | 80% {background-image: url(mescroll-progress6.png)} 61 | 100% {background-image: url(mescroll-progress1.png)} 62 | } 63 | @keyframes animProgressFast { 64 | 0% {background-image: url(mescroll-progress1.png)} 65 | 16% {background-image: url(mescroll-progress2.png)} 66 | 32% {background-image: url(mescroll-progress3.png)} 67 | 48% {background-image: url(mescroll-progress4.png)} 68 | 64% {background-image: url(mescroll-progress5.png)} 69 | 80% {background-image: url(mescroll-progress6.png)} 70 | 100% {background-image: url(mescroll-progress1.png)} 71 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-option.js: -------------------------------------------------------------------------------- 1 | /* 2 | *下拉刷新和上拉加载js 3 | * 4 | 1.引用mescroll.css和mescroll.js; 引用自定义的mescroll-option.css和mescroll-option.js,并检查相关图片路径是否引用正确; 5 | 6 | 2.拷贝以下布局结构 7 |
    // id可修改,但class不能改;另外mescroll的height: 100%,所以父布局要有高度,否则无法触发上拉加载. 8 | //滑动区域的内容,如: ... 9 |
    10 | 11 | 3.创建MeScroll对象,内部已默认开启下拉刷新 12 | var mescroll = initMeScroll("mescroll", { 13 | // down:{ 14 | // auto: true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true 15 | // callback: function() { 16 | // mescroll.resetUpScroll();//下拉刷新的回调,默认重置上拉加载列表为第一页 17 | // } 18 | // }, 19 | up: { 20 | // auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false 21 | callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); } 22 | } 23 | }); 24 | 25 | function getListData(page){ 26 | $.ajax({ 27 | type: 'GET', 28 | url: 'xxxxxx?num='+page.num+"&size="+page.size, 29 | dataType: 'json', 30 | success: function(data){ 31 | //联网成功的回调,隐藏下拉刷新和上拉加载的状态;(参数:当前页数据的总数) 32 | mescroll.endSuccess(data.length);//如果传了参数,mescroll会自动判断列表若无任何数据,则提示空;列表无下一页数据,则提示无更多数据;如果不传参数则仅隐藏加载中的状态 33 | //设置列表数据 34 | //setListData(data); 35 | }, 36 | error: function(data){ 37 | //联网失败的回调,隐藏下拉刷新和上拉加载的状态; 38 | mescroll.endErr(); 39 | } 40 | }); 41 | } 42 | 43 | 其他常用方法: 44 | 1.主动触发下拉刷新 mescroll.triggerDownScroll(); 45 | 2.主动触发上拉加载 mescroll.triggerUpScroll(); 46 | 3.重置列表 mescroll.resetUpScroll(); 47 | 4.滚动列表到指定位置 mescroll.scrollTo(y); (y=0回到列表顶部;如需滚动到列表底部,可设置y很大的值,比如y=99999); 48 | 5.获取下拉刷新的配置 mescroll.optDown; 49 | 6.获取上拉加载的配置 mescroll.optUp; 50 | 7.锁定下拉刷新 mescroll.lockDownScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 51 | 8.锁定上拉加载 mescroll.lockUpScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 52 | **/ 53 | 54 | function initMeScroll(mescrollId, options) { 55 | //自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除) 56 | var myOption={ 57 | down:{ 58 | offset: 85, //触发刷新的距离 59 | htmlContent: '

    ', //布局内容 60 | // inited: function(mescroll, downwarp) { 61 | // //初始化完毕的回调,可缓存dom 62 | // mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0]; 63 | // }, 64 | inOffset: function(mescroll) { 65 | //进入指定距离范围内那一刻的回调 66 | mescroll.downProgressDom.classList.remove("downwarp-progress-fast"); 67 | mescroll.downProgressDom.classList.add("downwarp-progress-slow"); 68 | }, 69 | outOffset: function(mescroll) { 70 | //下拉超过指定距离那一刻的回调 71 | mescroll.downProgressDom.classList.remove("downwarp-progress-slow"); 72 | mescroll.downProgressDom.classList.add("downwarp-progress-fast"); 73 | }, 74 | onMoving: function(mescroll, rate, downHight) { 75 | //下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度 76 | //配置空方法,表示移动过程不做处理 (不可写onMoving:null,否则会执行mescroll默认配置的onMoving方法) 77 | }, 78 | showLoading: function(mescroll) { 79 | //触发下拉刷新的回调 80 | //配置空方法,表示showLoading不做处理 (不可写showLoading:null,否则会执行mescroll默认配置的showLoading方法) 81 | } 82 | }, 83 | up:{ 84 | toTop: { 85 | src: "option/mescroll-totop.png" //回到顶部按钮的图片路径 86 | } 87 | } 88 | } 89 | //加入自定义的默认配置 90 | options=MeScroll.extend(options,myOption); 91 | //创建MeScroll对象 92 | return new MeScroll(mescrollId,options); 93 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-progress1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/option/mescroll-progress1.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-progress2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/option/mescroll-progress2.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-progress3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/option/mescroll-progress3.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-progress4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/option/mescroll-progress4.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-progress5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/option/mescroll-progress5.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-progress6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/option/mescroll-progress6.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/meitunmama/option/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/meitunmama/option/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/mescroll-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/mescroll-empty.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd1.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd10.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd11.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd12.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd13.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd14.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd15.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd16.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd17.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd18.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd19.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd2.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd20.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd21.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd22.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd23.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd24.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd25.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd26.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd27.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd28.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd28.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd3.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd4.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd5.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd6.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd7.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd8.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/pd9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/pd9.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/img/swiper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/img/swiper.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/pay-wx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/pay-wx.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/pay-zfb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/res/pay-zfb.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/pdlist1.js: -------------------------------------------------------------------------------- 1 | var pdlist1=[ 2 | { 3 | "pdImg": "../res/img/pd1.jpg", 4 | "pdName": "【1】 六罐装荷兰美素佳儿金装2段900g", 5 | "pdPrice": 1149.00, 6 | "pdSold": 648 7 | }, { 8 | "pdImg": "../res/img/pd2.jpg", 9 | "pdName": "【2】 韩国Amore爱茉莉红吕洗发水套装修复受损发质", 10 | "pdPrice": 89.00, 11 | "pdSold": 128 12 | }, { 13 | "pdImg": "../res/img/pd3.jpg", 14 | "pdName": "【3】 Friso美素佳儿 金装婴儿配方奶粉3段900g", 15 | "pdPrice": 195.00, 16 | "pdSold": 968 17 | }, { 18 | "pdImg": "../res/img/pd4.jpg", 19 | "pdName": "【4】 Fisher pdPrice费雪 费雪三轮儿童滑行车", 20 | "pdPrice": 299.00, 21 | "pdSold": 85 22 | }, { 23 | "pdImg": "../res/img/pd5.jpg", 24 | "pdName": "【5】 Babylee巴布力 实木婴儿床 雷卡拉130*70cm", 25 | "pdPrice": 1889.00, 26 | "pdSold": 18 27 | }, { 28 | "pdImg": "../res/img/pd6.jpg", 29 | "pdName": "【6】 Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g", 30 | "pdPrice": 70.00, 31 | "pdSold": 658 32 | }, { 33 | "pdImg": "../res/img/pd7.jpg", 34 | "pdName": "【7】 TTBOO兔兔小布 肩纽扣套装", 35 | "pdPrice": 268.00, 36 | "pdSold": 128 37 | }, { 38 | "pdImg": "../res/img/pd8.jpg", 39 | "pdName": "【8】 Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶", 40 | "pdPrice": 140.00, 41 | "pdSold": 366 42 | }, { 43 | "pdImg": "../res/img/pd9.jpg", 44 | "pdName": "【9】 illuma启赋 奶粉3段900g", 45 | "pdPrice": 252.00, 46 | "pdSold": 98 47 | }, { 48 | "pdImg": "../res/img/pd10.jpg", 49 | "pdName": "【10】 Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g", 50 | "pdPrice": 89.00, 51 | "pdSold": 128 52 | }, { 53 | "pdImg": "../res/img/pd11.jpg", 54 | "pdName": "【11】 韩蜜 酷炫唇蜜（礼盒套装）2.8g*4", 55 | "pdPrice": 179.00, 56 | "pdSold": 35 57 | }, { 58 | "pdImg": "../res/img/pd12.jpg", 59 | "pdName": "【12】 保税区直发【3包装】日本Merries花王纸尿裤NB90", 60 | "pdPrice": 289.00, 61 | "pdSold": 1928 62 | }, { 63 | "pdImg": "../res/img/pd13.jpg", 64 | "pdName": "【13】 Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色", 65 | "pdPrice": 203.00, 66 | "pdSold": 87 67 | }, { 68 | "pdImg": "../res/img/pd14.jpg", 69 | "pdName": "【14】 香港直邮德国瑞德露Rival de Loop芦荟精华安瓶", 70 | "pdPrice": 152.00, 71 | "pdSold": 61 72 | }, { 73 | "pdImg": "../res/img/pd15.jpg", 74 | "pdName": "【15】 保税区直发药师堂尊马油香草味温和保湿无刺激面霜", 75 | "pdPrice": 269.00, 76 | "pdSold": 73 77 | }, { 78 | "pdImg": "../res/img/pd16.jpg", 79 | "pdName": "【16】 香港直邮日本Spatreatment眼膜保湿去细纹法令纹", 80 | "pdPrice": 219.00, 81 | "pdSold": 13 82 | }, { 83 | "pdImg": "../res/img/pd17.jpg", 84 | "pdName": "【17】 韩国MEDIHEALNMF可莱丝针剂睡眠面膜", 85 | "pdPrice": 81.00, 86 | "pdSold": 128 87 | }, { 88 | "pdImg": "../res/img/pd18.jpg", 89 | "pdName": "【18】 DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g", 90 | "pdPrice": 123.00, 91 | "pdSold": 77 92 | }, { 93 | "pdImg": "../res/img/pd19.jpg", 94 | "pdName": "【19】 日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml", 95 | "pdPrice": 429.00, 96 | "pdSold": 36 97 | }, { 98 | "pdImg": "../res/img/pd20.jpg", 99 | "pdName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒", 100 | "pdPrice": 39.00, 101 | "pdSold": 61 102 | }, { 103 | "pdImg": "../res/img/pd21.jpg", 104 | "pdName": "【21】 Heinz亨氏 乐维滋果汁泥组合5口味15袋", 105 | "pdPrice": 69.00, 106 | "pdSold": 55 107 | }, { 108 | "pdImg": "../res/img/pd22.jpg", 109 | "pdName": "【22】 保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒", 110 | "pdPrice": 271.00, 111 | "pdSold": 19 112 | }, { 113 | "pdImg": "../res/img/pd23.jpg", 114 | "pdName": "【23】 挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂", 115 | "pdPrice": 102.00, 116 | "pdSold": 125 117 | }, { 118 | "pdImg": "../res/img/pd24.jpg", 119 | "pdName": "【24】 澳大利亚Bio island DHA for Pregnancy海藻油DHA", 120 | "pdPrice": 289.00, 121 | "pdSold": 28 122 | }, { 123 | "pdImg": "../res/img/pd25.jpg", 124 | "pdName": "【25】 澳大利亚Fatblaster Coconut Detox椰子水", 125 | "pdPrice": 152.00, 126 | "pdSold": 17 127 | }, { 128 | "pdImg": "../res/img/pd26.jpg", 129 | "pdName": "【26】 Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60", 130 | "pdPrice": 99.00, 131 | "pdSold": 181 132 | }, { 133 | "pdImg": "../res/img/pd27.jpg", 134 | "pdName": "【27】 英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂", 135 | "pdPrice": 72.00, 136 | "pdSold": 66 137 | }, { 138 | "pdImg": "../res/img/pd28.jpg", 139 | "pdName": "【28】 德国NUK 多色婴幼儿带盖学饮杯", 140 | "pdPrice": 92.00, 141 | "pdSold": 138 142 | } 143 | ]; -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/pdlist1.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "pdImg": "../res/img/pd1.jpg", 4 | "pdName": "【1】 六罐装荷兰美素佳儿金装2段900g", 5 | "pdPrice": 1149.00, 6 | "pdSold": 648 7 | }, { 8 | "pdImg": "../res/img/pd2.jpg", 9 | "pdName": "【2】 韩国Amore爱茉莉红吕洗发水套装修复受损发质", 10 | "pdPrice": 89.00, 11 | "pdSold": 128 12 | }, { 13 | "pdImg": "../res/img/pd3.jpg", 14 | "pdName": "【3】 Friso美素佳儿 金装婴儿配方奶粉3段900g", 15 | "pdPrice": 195.00, 16 | "pdSold": 968 17 | }, { 18 | "pdImg": "../res/img/pd4.jpg", 19 | "pdName": "【4】 Fisher pdPrice费雪 费雪三轮儿童滑行车", 20 | "pdPrice": 299.00, 21 | "pdSold": 85 22 | }, { 23 | "pdImg": "../res/img/pd5.jpg", 24 | "pdName": "【5】 Babylee巴布力 实木婴儿床 雷卡拉130*70cm", 25 | "pdPrice": 1889.00, 26 | "pdSold": 18 27 | }, { 28 | "pdImg": "../res/img/pd6.jpg", 29 | "pdName": "【6】 Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g", 30 | "pdPrice": 70.00, 31 | "pdSold": 658 32 | }, { 33 | "pdImg": "../res/img/pd7.jpg", 34 | "pdName": "【7】 TTBOO兔兔小布 肩纽扣套装", 35 | "pdPrice": 268.00, 36 | "pdSold": 128 37 | }, { 38 | "pdImg": "../res/img/pd8.jpg", 39 | "pdName": "【8】 Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶", 40 | "pdPrice": 140.00, 41 | "pdSold": 366 42 | }, { 43 | "pdImg": "../res/img/pd9.jpg", 44 | "pdName": "【9】 illuma启赋 奶粉3段900g", 45 | "pdPrice": 252.00, 46 | "pdSold": 98 47 | }, { 48 | "pdImg": "../res/img/pd10.jpg", 49 | "pdName": "【10】 Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g", 50 | "pdPrice": 89.00, 51 | "pdSold": 128 52 | }, { 53 | "pdImg": "../res/img/pd11.jpg", 54 | "pdName": "【11】 韩蜜 酷炫唇蜜（礼盒套装）2.8g*4", 55 | "pdPrice": 179.00, 56 | "pdSold": 35 57 | }, { 58 | "pdImg": "../res/img/pd12.jpg", 59 | "pdName": "【12】 保税区直发【3包装】日本Merries花王纸尿裤NB90", 60 | "pdPrice": 289.00, 61 | "pdSold": 1928 62 | }, { 63 | "pdImg": "../res/img/pd13.jpg", 64 | "pdName": "【13】 Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色", 65 | "pdPrice": 203.00, 66 | "pdSold": 87 67 | }, { 68 | "pdImg": "../res/img/pd14.jpg", 69 | "pdName": "【14】 香港直邮德国瑞德露Rival de Loop芦荟精华安瓶", 70 | "pdPrice": 152.00, 71 | "pdSold": 61 72 | }, { 73 | "pdImg": "../res/img/pd15.jpg", 74 | "pdName": "【15】 保税区直发药师堂尊马油香草味温和保湿无刺激面霜", 75 | "pdPrice": 269.00, 76 | "pdSold": 73 77 | }, { 78 | "pdImg": "../res/img/pd16.jpg", 79 | "pdName": "【16】 香港直邮日本Spatreatment眼膜保湿去细纹法令纹", 80 | "pdPrice": 219.00, 81 | "pdSold": 13 82 | }, { 83 | "pdImg": "../res/img/pd17.jpg", 84 | "pdName": "【17】 韩国MEDIHEALNMF可莱丝针剂睡眠面膜", 85 | "pdPrice": 81.00, 86 | "pdSold": 128 87 | }, { 88 | "pdImg": "../res/img/pd18.jpg", 89 | "pdName": "【18】 DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g", 90 | "pdPrice": 123.00, 91 | "pdSold": 77 92 | }, { 93 | "pdImg": "../res/img/pd19.jpg", 94 | "pdName": "【19】 日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml", 95 | "pdPrice": 429.00, 96 | "pdSold": 36 97 | }, { 98 | "pdImg": "../res/img/pd20.jpg", 99 | "pdName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒", 100 | "pdPrice": 39.00, 101 | "pdSold": 61 102 | }, { 103 | "pdImg": "../res/img/pd21.jpg", 104 | "pdName": "【21】 Heinz亨氏 乐维滋果汁泥组合5口味15袋", 105 | "pdPrice": 69.00, 106 | "pdSold": 55 107 | }, { 108 | "pdImg": "../res/img/pd22.jpg", 109 | "pdName": "【22】 保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒", 110 | "pdPrice": 271.00, 111 | "pdSold": 19 112 | }, { 113 | "pdImg": "../res/img/pd23.jpg", 114 | "pdName": "【23】 挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂", 115 | "pdPrice": 102.00, 116 | "pdSold": 125 117 | }, { 118 | "pdImg": "../res/img/pd24.jpg", 119 | "pdName": "【24】 澳大利亚Bio island DHA for Pregnancy海藻油DHA", 120 | "pdPrice": 289.00, 121 | "pdSold": 28 122 | }, { 123 | "pdImg": "../res/img/pd25.jpg", 124 | "pdName": "【25】 澳大利亚Fatblaster Coconut Detox椰子水", 125 | "pdPrice": 152.00, 126 | "pdSold": 17 127 | }, { 128 | "pdImg": "../res/img/pd26.jpg", 129 | "pdName": "【26】 Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60", 130 | "pdPrice": 99.00, 131 | "pdSold": 181 132 | }, { 133 | "pdImg": "../res/img/pd27.jpg", 134 | "pdName": "【27】 英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂", 135 | "pdPrice": 72.00, 136 | "pdSold": 66 137 | }, { 138 | "pdImg": "../res/img/pd28.jpg", 139 | "pdName": "【28】 德国NUK 多色婴幼儿带盖学饮杯", 140 | "pdPrice": 92.00, 141 | "pdSold": 138 142 | } 143 | ] -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/pdlist2.js: -------------------------------------------------------------------------------- 1 | var pdlist2=[ 2 | { 3 | "pdImg": "../res/img/pd3.jpg", 4 | "pdName": "【3】 美素佳儿Friso婴儿配方奶粉3段 ( 商品【1】【2】 已删除 )", 5 | "pdPrice": 177.00, 6 | "pdSold": 1023 7 | }, { 8 | "pdImg": "../res/img/pd4.jpg", 9 | "pdName": "【4】 每人限购1辆 费雪滑行车", 10 | "pdPrice": 189.00, 11 | "pdSold": 199 12 | }, { 13 | "pdImg": "../res/img/pd5.jpg", 14 | "pdName": "【5】 巴布力实木婴儿床", 15 | "pdPrice": 1800.00, 16 | "pdSold": 72 17 | }, { 18 | "pdImg": "../res/img/pd6.jpg", 19 | "pdName": "【6】 贝亲奶粉盒", 20 | "pdPrice": 98.00, 21 | "pdSold": 677 22 | }, { 23 | "pdImg": "../res/img/pd7.jpg", 24 | "pdName": "【7】 兔兔小布肩纽扣套装", 25 | "pdPrice": 277.00, 26 | "pdSold": 166 27 | }, { 28 | "pdImg": "../res/img/pd8.jpg", 29 | "pdName": "【8】 璐拉婴儿沐浴露", 30 | "pdPrice": 155.00, 31 | "pdSold": 343 32 | }, { 33 | "pdImg": "../res/img/pd9.jpg", 34 | "pdName": "【9】 启赋illuma 奶粉3段900g", 35 | "pdPrice": 238.00, 36 | "pdSold": 102 37 | }, { 38 | "pdImg": "../res/img/pd10.jpg", 39 | "pdName": "【10】 雅培Abbott乳蛋白部分水解婴儿配方奶粉3段820g", 40 | "pdPrice": 91.00, 41 | "pdSold": 135 42 | }, { 43 | "pdImg": "../res/img/pd11.jpg", 44 | "pdName": "【11】 韩蜜 酷炫唇蜜（礼盒套装）2.8g*4", 45 | "pdPrice": 151.00, 46 | "pdSold": 123 47 | }, { 48 | "pdImg": "../res/img/pd12.jpg", 49 | "pdName": "【12】 保税区直发【3包装】日本Merries花王纸尿裤NB90", 50 | "pdPrice": 292.00, 51 | "pdSold": 1933 52 | }, { 53 | "pdImg": "../res/img/pd13.jpg", 54 | "pdName": "【13】 Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色", 55 | "pdPrice": 245.00, 56 | "pdSold": 95 57 | }, { 58 | "pdImg": "../res/img/pd14.jpg", 59 | "pdName": "【14】 香港直邮德国瑞德露Rival de Loop芦荟精华安瓶", 60 | "pdPrice": 163.00, 61 | "pdSold": 75 62 | }, { 63 | "pdImg": "../res/img/pd15.jpg", 64 | "pdName": "【15】 保税区直发药师堂尊马油香草味温和保湿无刺激面霜", 65 | "pdPrice": 259.00, 66 | "pdSold": 86 67 | }, { 68 | "pdImg": "../res/img/pd16.jpg", 69 | "pdName": "【16】 香港直邮日本Spatreatment眼膜保湿去细纹法令纹", 70 | "pdPrice": 237.00, 71 | "pdSold": 58 72 | }, { 73 | "pdImg": "../res/img/pd17.jpg", 74 | "pdName": "【17】 韩国MEDIHEALNMF可莱丝针剂睡眠面膜", 75 | "pdPrice": 81.00, 76 | "pdSold": 135 77 | }, { 78 | "pdImg": "../res/img/pd18.jpg", 79 | "pdName": "【18】 DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g", 80 | "pdPrice": 123.00, 81 | "pdSold": 87 82 | }, { 83 | "pdImg": "../res/img/pd19.jpg", 84 | "pdName": "【19】 日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml", 85 | "pdPrice": 429.00, 86 | "pdSold": 45 87 | }, { 88 | "pdImg": "../res/img/pd20.jpg", 89 | "pdName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒", 90 | "pdPrice": 39.00, 91 | "pdSold": 32 92 | }, { 93 | "pdImg": "../res/img/pd21.jpg", 94 | "pdName": "【21】 Heinz亨氏 乐维滋果汁泥组合5口味15袋", 95 | "pdPrice": 64.00, 96 | "pdSold": 75 97 | }, { 98 | "pdImg": "../res/img/pd22.jpg", 99 | "pdName": "【22】 保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒", 100 | "pdPrice": 271.00, 101 | "pdSold": 12 102 | }, { 103 | "pdImg": "../res/img/pd23.jpg", 104 | "pdName": "【23】 挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂", 105 | "pdPrice": 175.00, 106 | "pdSold": 111 107 | }, { 108 | "pdImg": "../res/img/pd24.jpg", 109 | "pdName": "【24】 澳大利亚Bio island DHA for Pregnancy海藻油DHA", 110 | "pdPrice": 289.00, 111 | "pdSold": 28 112 | }, { 113 | "pdImg": "../res/img/pd25.jpg", 114 | "pdName": "【25】 澳大利亚Fatblaster Coconut Detox椰子水", 115 | "pdPrice": 152.00, 116 | "pdSold": 17 117 | }, { 118 | "pdImg": "../res/img/pd26.jpg", 119 | "pdName": "【26】 Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60", 120 | "pdPrice": 99.00, 121 | "pdSold": 181 122 | }, { 123 | "pdImg": "../res/img/pd27.jpg", 124 | "pdName": "【27】 英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂", 125 | "pdPrice": 72.00, 126 | "pdSold": 66 127 | }, { 128 | "pdImg": "../res/img/pd28.jpg", 129 | "pdName": "【28】 德国NUK 多色婴幼儿带盖学饮杯", 130 | "pdPrice": 92.00, 131 | "pdSold": 138 132 | } 133 | ]; -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/res/pdlist2.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "pdImg": "../res/img/pd3.jpg", 4 | "pdName": "【3】 美素佳儿Friso婴儿配方奶粉3段 ( 商品【1】【2】 已删除 )", 5 | "pdPrice": 177.00, 6 | "pdSold": 1023 7 | }, { 8 | "pdImg": "../res/img/pd4.jpg", 9 | "pdName": "【4】 每人限购1辆 费雪滑行车", 10 | "pdPrice": 189.00, 11 | "pdSold": 199 12 | }, { 13 | "pdImg": "../res/img/pd5.jpg", 14 | "pdName": "【5】 巴布力实木婴儿床", 15 | "pdPrice": 1800.00, 16 | "pdSold": 72 17 | }, { 18 | "pdImg": "../res/img/pd6.jpg", 19 | "pdName": "【6】 贝亲奶粉盒", 20 | "pdPrice": 98.00, 21 | "pdSold": 677 22 | }, { 23 | "pdImg": "../res/img/pd7.jpg", 24 | "pdName": "【7】 兔兔小布肩纽扣套装", 25 | "pdPrice": 277.00, 26 | "pdSold": 166 27 | }, { 28 | "pdImg": "../res/img/pd8.jpg", 29 | "pdName": "【8】 璐拉婴儿沐浴露", 30 | "pdPrice": 155.00, 31 | "pdSold": 343 32 | }, { 33 | "pdImg": "../res/img/pd9.jpg", 34 | "pdName": "【9】 启赋illuma 奶粉3段900g", 35 | "pdPrice": 238.00, 36 | "pdSold": 102 37 | }, { 38 | "pdImg": "../res/img/pd10.jpg", 39 | "pdName": "【10】 雅培Abbott乳蛋白部分水解婴儿配方奶粉3段820g", 40 | "pdPrice": 91.00, 41 | "pdSold": 135 42 | }, { 43 | "pdImg": "../res/img/pd11.jpg", 44 | "pdName": "【11】 韩蜜 酷炫唇蜜（礼盒套装）2.8g*4", 45 | "pdPrice": 151.00, 46 | "pdSold": 123 47 | }, { 48 | "pdImg": "../res/img/pd12.jpg", 49 | "pdName": "【12】 保税区直发【3包装】日本Merries花王纸尿裤NB90", 50 | "pdPrice": 292.00, 51 | "pdSold": 1933 52 | }, { 53 | "pdImg": "../res/img/pd13.jpg", 54 | "pdName": "【13】 Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色", 55 | "pdPrice": 245.00, 56 | "pdSold": 95 57 | }, { 58 | "pdImg": "../res/img/pd14.jpg", 59 | "pdName": "【14】 香港直邮德国瑞德露Rival de Loop芦荟精华安瓶", 60 | "pdPrice": 163.00, 61 | "pdSold": 75 62 | }, { 63 | "pdImg": "../res/img/pd15.jpg", 64 | "pdName": "【15】 保税区直发药师堂尊马油香草味温和保湿无刺激面霜", 65 | "pdPrice": 259.00, 66 | "pdSold": 86 67 | }, { 68 | "pdImg": "../res/img/pd16.jpg", 69 | "pdName": "【16】 香港直邮日本Spatreatment眼膜保湿去细纹法令纹", 70 | "pdPrice": 237.00, 71 | "pdSold": 58 72 | }, { 73 | "pdImg": "../res/img/pd17.jpg", 74 | "pdName": "【17】 韩国MEDIHEALNMF可莱丝针剂睡眠面膜", 75 | "pdPrice": 81.00, 76 | "pdSold": 135 77 | }, { 78 | "pdImg": "../res/img/pd18.jpg", 79 | "pdName": "【18】 DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g", 80 | "pdPrice": 123.00, 81 | "pdSold": 87 82 | }, { 83 | "pdImg": "../res/img/pd19.jpg", 84 | "pdName": "【19】 日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml", 85 | "pdPrice": 429.00, 86 | "pdSold": 45 87 | }, { 88 | "pdImg": "../res/img/pd20.jpg", 89 | "pdName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒", 90 | "pdPrice": 39.00, 91 | "pdSold": 32 92 | }, { 93 | "pdImg": "../res/img/pd21.jpg", 94 | "pdName": "【21】 Heinz亨氏 乐维滋果汁泥组合5口味15袋", 95 | "pdPrice": 64.00, 96 | "pdSold": 75 97 | }, { 98 | "pdImg": "../res/img/pd22.jpg", 99 | "pdName": "【22】 保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒", 100 | "pdPrice": 271.00, 101 | "pdSold": 12 102 | }, { 103 | "pdImg": "../res/img/pd23.jpg", 104 | "pdName": "【23】 挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂", 105 | "pdPrice": 175.00, 106 | "pdSold": 111 107 | }, { 108 | "pdImg": "../res/img/pd24.jpg", 109 | "pdName": "【24】 澳大利亚Bio island DHA for Pregnancy海藻油DHA", 110 | "pdPrice": 289.00, 111 | "pdSold": 28 112 | }, { 113 | "pdImg": "../res/img/pd25.jpg", 114 | "pdName": "【25】 澳大利亚Fatblaster Coconut Detox椰子水", 115 | "pdPrice": 152.00, 116 | "pdSold": 17 117 | }, { 118 | "pdImg": "../res/img/pd26.jpg", 119 | "pdName": "【26】 Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60", 120 | "pdPrice": 99.00, 121 | "pdSold": 181 122 | }, { 123 | "pdImg": "../res/img/pd27.jpg", 124 | "pdName": "【27】 英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂", 125 | "pdPrice": 72.00, 126 | "pdSold": 66 127 | }, { 128 | "pdImg": "../res/img/pd28.jpg", 129 | "pdName": "【28】 德国NUK 多色婴幼儿带盖学饮杯", 130 | "pdPrice": 92.00, 131 | "pdSold": 138 132 | } 133 | ] -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/img/footer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/img/footer.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/img/header.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/img/taobao1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/img/taobao1.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/img/taobao2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/img/taobao2.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/img/taobao3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/img/taobao3.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/option/mescorll-erlou.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/option/mescorll-erlou.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/option/mescroll-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/option/mescroll-arrow.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/option/mescroll-bg-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/option/mescroll-bg-down.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/option/mescroll-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/option/mescroll-bg.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/option/mescroll-option.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 自定义下拉刷新和上拉加载的结构 3 | * 4 | //下拉刷新区域 5 |
    6 |
    7 |
    8 |
    9 |
    10 |

    下拉即可刷新

    11 |
    12 |
    13 | 14 | //上拉加载区域 15 |
    16 | //加载中.. 17 |

    正在寻找您心水的宝贝

    18 | //无数据 19 |

    -- END --

    20 |
    21 | */ 22 | 23 | /*下拉刷新*/ 24 | .mescroll-downwarp{ 25 | background-color: #2B202D; 26 | background-image: url(mescroll-bg.png); 27 | background-size: cover; 28 | background-position: 50% 55%; 29 | } 30 | 31 | /*下拉刷新--内容区,定位于区域底部*/ 32 | .mescroll-downwarp .downwarp-content{ 33 | height: 50px; 34 | background-image: url(mescroll-bg-down.png); 35 | background-size: 100% 100%; 36 | } 37 | 38 | /*下拉刷新--旋转进度条*/ 39 | .mescroll-downwarp .downwarp-progress{ 40 | position: relative; 41 | width: 28px; 42 | height: 28px; 43 | border: none; 44 | } 45 | /*下拉刷新--旋转进度条-箭头*/ 46 | .mescroll-downwarp .downwarp-progress:after{ 47 | position: absolute; 48 | top: 5px; 49 | left: 5px; 50 | content: ""; 51 | display: inline-block; 52 | width: 18px; 53 | height: 18px; 54 | background-image: url(mescroll-arrow.png); 55 | background-size: contain; 56 | background-position: center; 57 | } 58 | /*下拉刷新--旋转进度条-左右遮罩*/ 59 | .mescroll-downwarp .downwarp-progress > div{ 60 | display: inline-block; 61 | width: 14px; 62 | height: 28px; 63 | overflow: hidden; 64 | } 65 | /*下拉刷新--旋转进度条-左半圆*/ 66 | .mescroll-downwarp .progress-left-arc{ 67 | width: 26px; 68 | height: 26px; 69 | border-radius: 50%; 70 | border: 1px solid white; 71 | border-left-color: transparent; 72 | border-bottom-color: transparent; 73 | -webkit-transform: rotate(45deg); 74 | transform: rotate(45deg); 75 | } 76 | /*下拉刷新--旋转进度条-右半圆*/ 77 | .mescroll-downwarp .progress-right-arc{ 78 | width: 26px; 79 | height: 26px; 80 | margin-left: -14px; 81 | border-radius: 50%; 82 | border: 1px solid white; 83 | border-top-color: transparent; 84 | border-right-color: transparent; 85 | -webkit-transform: rotate(45deg); 86 | transform: rotate(45deg); 87 | } 88 | 89 | /*下拉刷新--旋转进度条-旋转中*/ 90 | .mescroll-downwarp .mescroll-rotate.downwarp-progress{ 91 | width: 26px; 92 | height: 26px; 93 | border: 1px solid white; 94 | border-top-color: transparent; 95 | } 96 | .mescroll-downwarp .mescroll-rotate.downwarp-progress > div, 97 | .mescroll-downwarp .mescroll-rotate.downwarp-progress:after{ 98 | display: none; 99 | } 100 | 101 | /*下拉刷新--提示*/ 102 | .mescroll-downwarp .downwarp-tip{ 103 | min-width: 90px; 104 | color: white; 105 | } 106 | 107 | /*淘宝二楼*/ 108 | .mescorll-erlou{ 109 | z-index: 9999; 110 | position: fixed; 111 | top: 0; 112 | left: 0; 113 | right: 0; 114 | bottom: 0; 115 | background-image: url(mescorll-erlou.jpg); 116 | background-size: cover; 117 | background-color: #02040A; 118 | opacity: 0; 119 | pointer-events: none; 120 | } 121 | /*淘宝二楼--淡入显示时接收点击事件*/ 122 | .mescroll-fade-in{ 123 | pointer-events: auto; 124 | -webkit-animation: mescrollFadeIn 1.5s linear forwards; 125 | animation: mescrollFadeIn 1.5s linear forwards; 126 | } 127 | /*淘宝二楼--淡出隐藏时取消接收事件*/ 128 | .mescroll-fade-out{ 129 | pointer-events: none; 130 | -webkit-animation: mescrollFadeOut 1.5s linear forwards; 131 | animation: mescrollFadeOut 1.5s linear forwards; 132 | } 133 | 134 | /*下拉区域--淘宝二楼显示时其高度变化的动画*/ 135 | .downwarp-erlou-show{ 136 | -webkit-transition: none; 137 | transition: none; 138 | -webkit-animation: downwarpErlouShow 2s linear; 139 | animation: downwarpErlouShow 2s linear; 140 | } 141 | @-webkit-keyframes downwarpErlouShow { 142 | 50% {height: 200%; } 143 | 100% {height: 50%; } 144 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/option/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/option/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/taobao/taobao.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/taobao/taobao.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/img/footer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/img/footer.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/img/header.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/img/xinlang1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/img/xinlang1.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/img/xinlang2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/img/xinlang2.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/option/mescroll-arrow.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-option.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 自定义下拉刷新和上拉加载的结构 3 | * 4 | //下拉刷新区域 5 |
    6 |

    加载中..

    7 |

    下拉刷新

    8 |
    9 | 10 | //上拉加载区域 11 |
    12 | //加载中.. 13 |

    加载中..

    14 | //无数据 15 |

    -- END --

    16 |
    17 | */ 18 | 19 | /*下拉刷新--上下箭头*/ 20 | .mescroll-downwarp .downwarp-arrow{ 21 | display: inline-block; 22 | width: 20px; 23 | height: 20px; 24 | margin: 10px; 25 | background-image: url(mescroll-arrow.png); 26 | background-size: contain; 27 | vertical-align: middle; 28 | -webkit-transition: all 300ms; 29 | transition: all 300ms; 30 | } 31 | 32 | /*下拉刷新,上拉加载--旋转进度条*/ 33 | .mescroll-downwarp .downwarp-progress, 34 | .mescroll-upwarp .upwarp-progress{ 35 | width: 36px; 36 | height: 36px; 37 | border: none; 38 | margin: auto; 39 | background-size: contain; 40 | -webkit-animation: progressRotate .6s steps(6,start) infinite; 41 | animation: progressRotate .6s steps(6,start) infinite; 42 | } 43 | @-webkit-keyframes progressRotate { 44 | 0% {background-image: url(mescroll-progress1.png)} 45 | 16% {background-image: url(mescroll-progress2.png)} 46 | 32% {background-image: url(mescroll-progress3.png)} 47 | 48% {background-image: url(mescroll-progress4.png)} 48 | 64% {background-image: url(mescroll-progress5.png)} 49 | 80% {background-image: url(mescroll-progress6.png)} 50 | 100% {background-image: url(mescroll-progress1.png)} 51 | } 52 | @keyframes progressRotate { 53 | 0% {background-image: url(mescroll-progress1.png)} 54 | 16% {background-image: url(mescroll-progress2.png)} 55 | 32% {background-image: url(mescroll-progress3.png)} 56 | 48% {background-image: url(mescroll-progress4.png)} 57 | 64% {background-image: url(mescroll-progress5.png)} 58 | 80% {background-image: url(mescroll-progress6.png)} 59 | 100% {background-image: url(mescroll-progress1.png)} 60 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-option.js: -------------------------------------------------------------------------------- 1 | /* 2 | *下拉刷新和上拉加载js 3 | * 4 | 1.引用mescroll.css和mescroll.js; 引用自定义的mescroll-option.css和mescroll-option.js,并检查相关图片路径是否引用正确; 5 | 6 | 2.拷贝以下布局结构 7 |
    // id可修改,但class不能改;另外mescroll的height: 100%,所以父布局要有高度,否则无法触发上拉加载. 8 | //滑动区域的内容,如: ... 9 |
    10 | 11 | 3.创建MeScroll对象,内部已默认开启下拉刷新 12 | var mescroll = initMeScroll("mescroll", { 13 | // down:{ 14 | // auto: true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true 15 | // callback: function() { 16 | // mescroll.resetUpScroll();//下拉刷新的回调,默认重置上拉加载列表为第一页 17 | // } 18 | // }, 19 | up: { 20 | // auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false 21 | callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); } 22 | } 23 | }); 24 | 25 | function getListData(page){ 26 | $.ajax({ 27 | type: 'GET', 28 | url: 'xxxxxx?num='+page.num+"&size="+page.size, 29 | dataType: 'json', 30 | success: function(data){ 31 | //联网成功的回调,隐藏下拉刷新和上拉加载的状态;(参数:当前页数据的总数) 32 | mescroll.endSuccess(data.length);//如果传了参数,mescroll会自动判断列表若无任何数据,则提示空;列表无下一页数据,则提示无更多数据;如果不传参数则仅隐藏加载中的状态 33 | //设置列表数据 34 | //setListData(data); 35 | }, 36 | error: function(data){ 37 | //联网失败的回调,隐藏下拉刷新和上拉加载的状态; 38 | mescroll.endErr(); 39 | } 40 | }); 41 | } 42 | 43 | 其他常用方法: 44 | 1.主动触发下拉刷新 mescroll.triggerDownScroll(); 45 | 2.主动触发上拉加载 mescroll.triggerUpScroll(); 46 | 3.重置列表 mescroll.resetUpScroll(); 47 | 4.滚动列表到指定位置 mescroll.scrollTo(y); (y=0回到列表顶部;如需滚动到列表底部,可设置y很大的值,比如y=99999); 48 | 5.获取下拉刷新的配置 mescroll.optDown; 49 | 6.获取上拉加载的配置 mescroll.optUp; 50 | 7.锁定下拉刷新 mescroll.lockDownScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 51 | 8.锁定上拉加载 mescroll.lockUpScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 52 | **/ 53 | 54 | function initMeScroll(mescrollId, options) { 55 | //下拉刷新的布局内容 56 | var htmlContent = '

    下拉刷新

    '; 57 | htmlContent += '

    加载中

    '; 58 | //自定义的配置 59 | var myOption={ 60 | down:{ 61 | offset: 60, //触发刷新的距离 62 | htmlContent: htmlContent, //布局内容 63 | inited: function(mescroll, downwarp) { 64 | //初始化完毕的回调,可缓存dom 65 | mescroll.downOnLoadDom = downwarp.getElementsByClassName("downwarp-onload")[0]; 66 | mescroll.downUnloadDom = downwarp.getElementsByClassName("downwarp-unload")[0]; 67 | mescroll.downTipDom = downwarp.getElementsByClassName("downwarp-tip")[0]; 68 | mescroll.downArrowDom = downwarp.getElementsByClassName("downwarp-arrow")[0]; 69 | }, 70 | inOffset: function(mescroll) { 71 | //进入指定距离范围内那一刻的回调 72 | mescroll.downOnLoadDom.style.display="none"; 73 | mescroll.downUnloadDom.style.display="block"; 74 | mescroll.downTipDom.innerText="下拉刷新"; 75 | mescroll.downArrowDom.style.webkitTransform = "rotate(0deg)"; 76 | mescroll.downArrowDom.style.transform = "rotate(0deg)"; 77 | }, 78 | outOffset: function(mescroll) { 79 | //下拉超过指定距离那一刻的回调 80 | mescroll.downTipDom.innerText="释放更新"; 81 | mescroll.downArrowDom.style.webkitTransform = "rotate(-180deg)"; 82 | mescroll.downArrowDom.style.transform = "rotate(-180deg)"; 83 | }, 84 | // onMoving: function(mescroll, rate, downHight) { 85 | // //下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度 86 | // }, 87 | showLoading: function(mescroll) { 88 | //触发下拉刷新的回调 89 | mescroll.downOnLoadDom.style.display="block"; 90 | mescroll.downUnloadDom.style.display="none"; 91 | mescroll.downTipDom.innerText="下拉刷新"; 92 | mescroll.downArrowDom.style.webkitTransform = "rotate(0deg)"; 93 | mescroll.downArrowDom.style.transform = "rotate(0deg)"; 94 | } 95 | }, 96 | up:{ 97 | toTop: { 98 | src: "option/mescroll-totop.png" //回到顶部按钮的图片路径 99 | } 100 | } 101 | } 102 | //加入自定义的默认配置 103 | options=MeScroll.extend(options,myOption); 104 | //创建MeScroll对象 105 | return new MeScroll(mescrollId,options); 106 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-progress1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/option/mescroll-progress1.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-progress2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/option/mescroll-progress2.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-progress3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/option/mescroll-progress3.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-progress4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/option/mescroll-progress4.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-progress5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/option/mescroll-progress5.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-progress6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/option/mescroll-progress6.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/option/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/option/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/xinlang/xinlang.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/xinlang/xinlang.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/yabuli/img/header.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/option/mescroll-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/yabuli/option/mescroll-empty.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/option/mescroll-nodata.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/yabuli/option/mescroll-nodata.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/option/mescroll-option.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 自定义下拉刷新和上拉加载的结构 3 | * 4 | //下拉刷新区域 5 |
    6 | //可自定义内容 7 |

    ↓ 下拉刷新 ↓

    8 | 9 | 10 |
    11 | 12 | //上拉加载区域 13 |
    14 | //加载中.. 15 | 16 | 17 | //无数据 18 | 19 |
    20 | */ 21 | 22 | /*下拉刷新--提示文本*/ 23 | .mescroll-downwarp .downwarp-tip { 24 | display: block; 25 | margin-bottom: 6px; 26 | } 27 | 28 | /*上拉加载区域*/ 29 | .mescroll-upwarp .upwarp-nodata { 30 | width: auto; 31 | height: 30px; 32 | margin: auto; 33 | } 34 | 35 | /*下拉刷新,上拉加载--标语图片*/ 36 | .mescroll-downwarp .downwarp-slogan, 37 | .mescroll-upwarp .upwarp-slogan { 38 | width: auto; 39 | height: 26px; 40 | vertical-align: middle; 41 | } 42 | /*下拉刷新,上拉加载--旋转进度条*/ 43 | .mescroll-downwarp .downwarp-progress, 44 | .mescroll-upwarp .upwarp-progress { 45 | width: 36px; 46 | height: 36px; 47 | border: none; 48 | margin: auto; 49 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/option/mescroll-option.js: -------------------------------------------------------------------------------- 1 | /* 2 | *下拉刷新和上拉加载js 3 | * 4 | 1.引用mescroll.css和mescroll.js; 引用自定义的mescroll-option.css和mescroll-option.js,并检查相关图片路径是否引用正确; 5 | 6 | 2.拷贝以下布局结构 7 |
    // id可修改,但class不能改;另外mescroll的height: 100%,所以父布局要有高度,否则无法触发上拉加载. 8 | //滑动区域的内容,如: ... 9 |
    10 | 11 | 3.创建MeScroll对象,内部已默认开启下拉刷新 12 | var mescroll = initMeScroll("mescroll", { 13 | // down:{ 14 | // auto: true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true 15 | // callback: function() { 16 | // mescroll.resetUpScroll();//下拉刷新的回调,默认重置上拉加载列表为第一页 17 | // } 18 | // }, 19 | up: { 20 | // auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false 21 | callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); } 22 | } 23 | }); 24 | 25 | function getListData(page){ 26 | $.ajax({ 27 | type: 'GET', 28 | url: 'xxxxxx?num='+page.num+"&size="+page.size, 29 | dataType: 'json', 30 | success: function(data){ 31 | //联网成功的回调,隐藏下拉刷新和上拉加载的状态;(参数:当前页数据的总数) 32 | mescroll.endSuccess(data.length);//如果传了参数,mescroll会自动判断列表若无任何数据,则提示空;列表无下一页数据,则提示无更多数据;如果不传参数则仅隐藏加载中的状态 33 | //设置列表数据 34 | //setListData(data); 35 | }, 36 | error: function(data){ 37 | //联网失败的回调,隐藏下拉刷新和上拉加载的状态; 38 | mescroll.endErr(); 39 | } 40 | }); 41 | } 42 | 43 | 其他常用方法: 44 | 1.主动触发下拉刷新 mescroll.triggerDownScroll(); 45 | 2.主动触发上拉加载 mescroll.triggerUpScroll(); 46 | 3.重置列表 mescroll.resetUpScroll(); 47 | 4.滚动列表到指定位置 mescroll.scrollTo(y); (y=0回到列表顶部;如需滚动到列表底部,可设置y很大的值,比如y=99999); 48 | 5.获取下拉刷新的配置 mescroll.optDown; 49 | 6.获取上拉加载的配置 mescroll.optUp; 50 | 7.锁定下拉刷新 mescroll.lockDownScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 51 | 8.锁定上拉加载 mescroll.lockUpScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 52 | **/ 53 | 54 | function initMeScroll(mescrollId, options) { 55 | //下拉刷新的布局内容 56 | var htmlContent = '

    ↓ 下拉刷新 ↓

    '; 57 | htmlContent += ''; 58 | htmlContent += ''; 59 | 60 | //上拉加载中的布局 61 | var htmlLoading = ''; 62 | //无数据的布局 63 | var htmlNodata = ''; 64 | 65 | //自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除) 66 | var myOption={ 67 | down:{ 68 | htmlContent: htmlContent, //布局内容 69 | // inited: function(mescroll, downwarp) { 70 | // //初始化完毕的回调,可缓存dom 71 | // mescroll.downTipDom = downwarp.getElementsByClassName("downwarp-tip")[0]; 72 | // mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0]; 73 | // }, 74 | inOffset: function(mescroll) { 75 | //进入指定距离范围内那一刻的回调 76 | mescroll.downTipDom.innerHTML = "↓ 下拉刷新 ↓"; 77 | mescroll.downProgressDom.classList.remove("mescroll-rotate"); 78 | }, 79 | outOffset: function(mescroll) { 80 | //下拉超过指定距离那一刻的回调 81 | mescroll.downTipDom.innerHTML = "↑ 释放更新 ↑"; 82 | }, 83 | // onMoving: function(mescroll, rate, downHight) { 84 | // //下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度 85 | // var progress = 360 * rate; 86 | // mescroll.downProgressDom.style.webkitTransform = "rotate(" + progress + "deg)"; 87 | // mescroll.downProgressDom.style.transform = "rotate(" + progress + "deg)"; 88 | // }, 89 | // showLoading: function(mescroll) { 90 | // //触发下拉刷新的回调 91 | // mescroll.downTipDom.innerHTML = "加载中 ..."; 92 | // mescroll.downProgressDom.classList.add("mescroll-rotate"); 93 | // } 94 | }, 95 | up:{ 96 | htmlLoading: htmlLoading, //上拉加载中的布局 97 | htmlNodata: htmlNodata, //无数据的布局 98 | // showLoading: function(mescroll, upwarp) { 99 | // //上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染 100 | // upwarp.innerHTML = mescroll.optUp.htmlLoading; 101 | // }, 102 | // showNoMore: function(mescroll, upwarp) { 103 | // //无更多数据 104 | // upwarp.innerHTML = mescroll.optUp.htmlNodata; 105 | // }, 106 | empty: { 107 | icon: "option/mescroll-empty.png", //空布局的图标 108 | tip: "亲,暂无相关商品~", 109 | btntext: "去逛逛 >", //按钮,默认"" 110 | btnClick: function(){//点击按钮的回调,默认null 111 | alert("点击了按钮,具体逻辑自行实现"); 112 | } 113 | }, 114 | toTop: { 115 | src: "option/mescroll-totop.png" //回到顶部按钮的图片路径 116 | } 117 | } 118 | } 119 | 120 | //加入自定义的默认配置 121 | options=MeScroll.extend(options,myOption); 122 | 123 | //创建MeScroll对象 124 | return new MeScroll(mescrollId,options); 125 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/option/mescroll-progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/yabuli/option/mescroll-progress.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/option/mescroll-slogan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/yabuli/option/mescroll-slogan.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/option/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/yabuli/option/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/yabuli/yabuli.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/yabuli/yabuli.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/img/zhihu1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/zhihu/img/zhihu1.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/img/zhihu2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/zhihu/img/zhihu2.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/img/zhihu3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/zhihu/img/zhihu3.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/img/zhihu4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/zhihu/img/zhihu4.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/img/zhihu5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/zhihu/img/zhihu5.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/option/mescroll-option.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 自定义下拉刷新和上拉加载的结构 3 | * 4 | //下拉刷新区域 5 |
    6 |
    7 |

    8 |
    9 |
    10 | 11 | //上拉加载区域 12 |
    13 | //加载中.. 14 |

    15 | //无数据 16 |

    -- END --

    17 |
    18 | */ 19 | 20 | /*旋转进度条*/ 21 | .mescroll-downwarp .downwarp-progress, 22 | .mescroll-upwarp .upwarp-progress { 23 | width: 24px; 24 | height: 24px; 25 | border: none; 26 | margin: auto; 27 | background-image: url(mescroll-progress.jpg); 28 | background-size: contain; 29 | } 30 | 31 | /*放大旋转动画*/ 32 | .mescroll-rotate{ 33 | -webkit-animation: animScale 0.6s linear, mescrollRotate 0.6s linear infinite; 34 | animation: animScale 0.6s linear, mescrollRotate 0.6s linear infinite; 35 | } 36 | @-webkit-keyframes animScale { 37 | 0% { -webkit-transform: scale(1,1) rotate(0deg) } 38 | 50% { -webkit-transform: scale(1.2,1.2) rotate(180deg) } 39 | 100% { -webkit-transform: scale(1,1) rotate(360deg) } 40 | } 41 | @keyframes animScale { 42 | 0% { transform: scale(1,1) rotate(0deg) } 43 | 50% { transform: scale(1.2,1.2) rotate(180deg) } 44 | 100% { transform: scale(1,1) rotate(360deg) } 45 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/option/mescroll-option.js: -------------------------------------------------------------------------------- 1 | /* 2 | *下拉刷新和上拉加载js 3 | * 4 | 1.引用mescroll.css和mescroll.js; 引用自定义的mescroll-option.css和mescroll-option.js,并检查相关图片路径是否引用正确; 5 | 6 | 2.拷贝以下布局结构 7 |
    // id可修改,但class不能改;另外mescroll的height: 100%,所以父布局要有高度,否则无法触发上拉加载. 8 | //滑动区域的内容,如: ... 9 |
    10 | 11 | 3.创建MeScroll对象,内部已默认开启下拉刷新 12 | var mescroll = initMeScroll("mescroll", { 13 | // down:{ 14 | // auto: true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true 15 | // callback: function() { 16 | // mescroll.resetUpScroll();//下拉刷新的回调,默认重置上拉加载列表为第一页 17 | // } 18 | // }, 19 | up: { 20 | // auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false 21 | callback: getListData, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); } 22 | } 23 | }); 24 | 25 | function getListData(page){ 26 | $.ajax({ 27 | type: 'GET', 28 | url: 'xxxxxx?num='+page.num+"&size="+page.size, 29 | dataType: 'json', 30 | success: function(data){ 31 | //联网成功的回调,隐藏下拉刷新和上拉加载的状态;(参数:当前页数据的总数) 32 | mescroll.endSuccess(data.length);//如果传了参数,mescroll会自动判断列表若无任何数据,则提示空;列表无下一页数据,则提示无更多数据;如果不传参数则仅隐藏加载中的状态 33 | //设置列表数据 34 | //setListData(data); 35 | }, 36 | error: function(data){ 37 | //联网失败的回调,隐藏下拉刷新和上拉加载的状态; 38 | mescroll.endErr(); 39 | } 40 | }); 41 | } 42 | 43 | 其他常用方法: 44 | 1.主动触发下拉刷新 mescroll.triggerDownScroll(); 45 | 2.主动触发上拉加载 mescroll.triggerUpScroll(); 46 | 3.重置列表 mescroll.resetUpScroll(); 47 | 4.滚动列表到指定位置 mescroll.scrollTo(y); (y=0回到列表顶部;如需滚动到列表底部,可设置y很大的值,比如y=99999); 48 | 5.获取下拉刷新的配置 mescroll.optDown; 49 | 6.获取上拉加载的配置 mescroll.optUp; 50 | 7.锁定下拉刷新 mescroll.lockDownScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 51 | 8.锁定上拉加载 mescroll.lockUpScroll(isLock); (isLock=ture,null锁定;isLock=false解锁) 52 | **/ 53 | 54 | function initMeScroll(mescrollId, options) { 55 | //自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除) 56 | var myOption={ 57 | down:{ 58 | offset: 60, //触发刷新的距离 59 | htmlContent: '

    ', //布局内容 60 | // inited: function(mescroll, downwarp) { 61 | // //初始化完毕的回调,可缓存dom 62 | // mescroll.downProgressDom = downwarp.getElementsByClassName("downwarp-progress")[0]; 63 | // }, 64 | // inOffset: function(mescroll) { 65 | // //进入指定距离范围内那一刻的回调 66 | // mescroll.downProgressDom.classList.remove("mescroll-rotate"); 67 | // }, 68 | // onMoving: function(mescroll, rate, downHight) { 69 | // //下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度 70 | // var progress = 360 * rate; 71 | // mescroll.downProgressDom.style.webkitTransform = "rotate(" + progress + "deg)"; 72 | // mescroll.downProgressDom.style.transform = "rotate(" + progress + "deg)"; 73 | // }, 74 | // showLoading: function(mescroll) { 75 | // //触发下拉刷新的回调 76 | // mescroll.downProgressDom.classList.add("mescroll-rotate"); 77 | // } 78 | }, 79 | up:{ 80 | htmlLoading: '

    ', //上拉加载中的布局 81 | // htmlNodata: '

    -- END --

    ', //无数据的布局 82 | // showLoading: function(mescroll, upwarp) { 83 | // //上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染 84 | // upwarp.innerHTML = mescroll.optUp.htmlLoading; 85 | // }, 86 | // showNoMore: function(mescroll, upwarp) { 87 | // //无更多数据 88 | // upwarp.innerHTML = mescroll.optUp.htmlNodata; 89 | // }, 90 | toTop: { 91 | src: "option/mescroll-totop.png" //回到顶部按钮的图片路径 92 | } 93 | } 94 | } 95 | //加入自定义的默认配置 96 | options=MeScroll.extend(options,myOption); 97 | //创建MeScroll对象 98 | return new MeScroll(mescrollId,options); 99 | } -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/option/mescroll-progress.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/zhihu/option/mescroll-progress.jpg -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/option/mescroll-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/zhihu/option/mescroll-totop.png -------------------------------------------------------------------------------- /mescroll-1_1_5/demo/zhihu/zhihu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/mescroll-1_1_5/demo/zhihu/zhihu.gif -------------------------------------------------------------------------------- /mescroll-1_1_5/dist/mescroll.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | * mescroll -- 精致的下拉刷新和上拉加载js框架 ( a great JS framework for pull-refresh and pull-up-loading ) 3 | * version 1.1.5 4 | * 2017-08-15 5 | * https://github.com/mescroll/mescroll.git 6 | * http://www.mescroll.com 7 | * author: wenju < mescroll@qq.com > 文举 8 | */ 9 | .mescroll{width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}.mescroll-hardware{-webkit-transform:translateZ(0);transform:translateZ(0)}.mescroll-downwarp{position:relative;width:100%;height:0;overflow:hidden;text-align:center}.mescroll-downwarp-reset{-webkit-transition:height 300ms;transition:height 300ms}.mescroll-downwarp .downwarp-content{position:absolute;left:0;bottom:0;width:100%;min-height:30px;padding:10px 0}.mescroll-upwarp{min-height:30px;padding:15px 0;text-align:center;visibility:hidden}.mescroll-downwarp .downwarp-tip,.mescroll-upwarp .upwarp-tip,.mescroll-upwarp .upwarp-nodata{display:inline-block;font-size:12px;color:gray;vertical-align:middle}.mescroll-downwarp .downwarp-progress,.mescroll-upwarp .upwarp-progress{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid gray;margin-right:8px;border-bottom-color:transparent;vertical-align:middle}.mescroll-rotate{-webkit-animation:mescrollRotate .6s linear infinite;animation:mescrollRotate .6s linear infinite}@-webkit-keyframes mescrollRotate{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes mescrollRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.mescroll-empty{width:100%;padding-top:20px;text-align:center}.mescroll-empty .empty-icon{width:45%}.mescroll-empty .empty-tip{margin-top:6px;font-size:14px;color:gray}.mescroll-empty .empty-btn{max-width:50%;margin:20px auto;padding:10px;border:1px solid #65aadd;border-radius:6px;background-color:white;color:#65aadd}.mescroll-empty .empty-btn:active{opacity:.75}.mescroll-totop{z-index:9990;position:fixed;right:10px;bottom:30px;width:36px;height:36px;border-radius:50%;opacity:0}.mescroll-fade-in{-webkit-animation:mescrollFadeIn .5s linear forwards;animation:mescrollFadeIn .5s linear forwards}@-webkit-keyframes mescrollFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes mescrollFadeIn{0%{opacity:0}100%{opacity:1}}.mescroll-fade-out{pointer-events:none;-webkit-animation:mescrollFadeOut .5s linear forwards;animation:mescrollFadeOut .5s linear forwards}@-webkit-keyframes mescrollFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes mescrollFadeOut{0%{opacity:1}100%{opacity:0}}.mescroll-bar::-webkit-scrollbar-track{background-color:transparent}.mescroll-bar::-webkit-scrollbar{width:6px}.mescroll-bar::-webkit-scrollbar-thumb{border-radius:6px;background-color:#ccc}.mescroll-bar::-webkit-scrollbar-thumb:hover{background-color:#aaa} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pagerefresh", 3 | "version": "0.0.6", 4 | "description": "快速混合开发框架，一套JS Api，Android，iOS，浏览器环境同时运行", 5 | "homepage": "https://github.com/GGwujun/pagerefresh", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/GGwujun/pagerefresh.git" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/GGwujun/pagerefresh/issues" 12 | }, 13 | "main": "dist/release/pagerefresh.min.js", 14 | "scripts": { 15 | "test": "node_modules/.bin/karma start test/unit/karma.cover.config.js", 16 | "build": "node build/build.js", 17 | "watch": "node build/watch.js", 18 | "dev": "npm run watch" 19 | }, 20 | "author": "dsx", 21 | "license": "BSD-3-Clause", 22 | "dependencies": { 23 | "babel-core": "^6.26.0", 24 | "babel-eslint": "^7.2.3", 25 | "babel-loader": "^7.1.2", 26 | "babel-plugin-add-module-exports": "^0.2.1", 27 | "babel-plugin-external-helpers": "^6.22.0", 28 | "babel-plugin-istanbul": "^4.1.4", 29 | "babel-plugin-transform-es2015-modules-umd": "^6.24.1", 30 | "babel-plugin-transform-runtime": "^6.23.0", 31 | "babel-preset-es2015": "^6.24.1", 32 | "chai": "^4.1.2", 33 | "eslint": "^4.6.1", 34 | "eslint-config-airbnb": "^15.1.0", 35 | "eslint-plugin-import": "^2.7.0", 36 | "eslint-plugin-jsx-a11y": "^6.0.2", 37 | "eslint-plugin-react": "^7.3.0", 38 | "karma": "^1.7.1", 39 | "karma-chai": "^0.1.0", 40 | "karma-chrome-launcher": "^2.2.0", 41 | "karma-coverage": "^1.1.1", 42 | "karma-htmlfile-reporter": "^0.3.5", 43 | "karma-mocha": "^1.3.0", 44 | "karma-phantomjs-launcher": "^1.0.4", 45 | "karma-webpack": "^2.0.4", 46 | "rollup": "^0.49.3", 47 | "rollup-plugin-babel": "^3.0.2", 48 | "rollup-plugin-eslint": "^4.0.0", 49 | "rollup-plugin-scss": "^0.3.0", 50 | "uglify-js": "^3.1.0", 51 | "webpack": "^3.5.6" 52 | }, 53 | "devDependencies": { 54 | "babel-plugin-external-helpers": "^6.22.0", 55 | "babel-preset-es2015": "^6.24.1", 56 | "cssnano": "^3.10.0", 57 | "eslint": "^4.7.2", 58 | "postcss-cssnext": "^3.0.2", 59 | "postcss-nested": "^2.1.2", 60 | "postcss-simple-vars": "^4.1.0", 61 | "rollup-plugin-postcss": "^0.5.5" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/css/images/minirefresh-totop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/src/css/images/minirefresh-totop.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import defaults from './theme/index'; 2 | import jianshu from './theme/jianshu/index'; 3 | import taobao from './theme/taobao/index'; 4 | import applet from './theme/applet/index'; 5 | import drawer3d from './theme/drawer3d/index'; 6 | import drawerslider from './theme/drawerslider/index'; 7 | 8 | const themeMap = { 9 | defaults, 10 | jianshu, 11 | taobao, 12 | applet, 13 | drawer3d, 14 | drawerslider, 15 | }; 16 | 17 | 18 | class pagerefresh { 19 | /** 20 | * 构造函数 21 | * @param {Object} options 配置信息 22 | * @constructor 23 | */ 24 | constructor(options) { 25 | return new themeMap[options.theme ? options.theme : 'defaults'](options); 26 | } 27 | } 28 | 29 | 30 | pagerefresh.version = '0.0.2'; 31 | 32 | export default pagerefresh; -------------------------------------------------------------------------------- /src/theme/applet/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 微信小程序的主题 3 | */ 4 | 5 | 6 | @-webkit-keyframes ball-beat { 7 | 50% { 8 | opacity: 1; 9 | -webkit-transform: scale(0.75); 10 | transform: scale(0.75); 11 | } 12 | 100% { 13 | opacity: 0.3; 14 | -webkit-transform: scale(1); 15 | transform: scale(1); 16 | } 17 | } 18 | 19 | @keyframes ball-beat { 20 | 50% { 21 | opacity: 1; 22 | -webkit-transform: scale(0.75); 23 | transform: scale(0.75); 24 | } 25 | 100% { 26 | opacity: 0.3; 27 | -webkit-transform: scale(1); 28 | transform: scale(1); 29 | } 30 | } 31 | 32 | .ball-beat > .dot { 33 | opacity: 0.3; 34 | background-color: #444444; 35 | width: 8px; 36 | height: 8px; 37 | border-radius: 100%; 38 | margin: 2px; 39 | display: inline-block; 40 | } 41 | 42 | .loading-applet .ball-beat .dot { 43 | -webkit-animation-fill-mode: both; 44 | animation-fill-mode: both; 45 | -webkit-animation: ball-beat 1s 0s infinite linear; 46 | animation: ball-beat 1s 0s infinite linear; 47 | } 48 | 49 | .loading-applet .ball-beat > .dot:nth-child(2) { 50 | -webkit-animation-delay: 0.3s !important; 51 | animation-delay: 0.3s !important; 52 | } 53 | 54 | .loading-applet .ball-beat > .dot:nth-child(3) { 55 | -webkit-animation-delay: 0.6s !important; 56 | animation-delay: 0.6s !important; 57 | } 58 | 59 | 60 | .minirefresh-theme-applet .minirefresh-downwrap { 61 | position: absolute; 62 | top: 0; 63 | left: 0; 64 | height: 50px; 65 | } 66 | 67 | .minirefresh-theme-applet .minirefresh-downwrap .downwrap-content { 68 | width: 100%; 69 | margin-top: 20px; 70 | text-align: center; 71 | } -------------------------------------------------------------------------------- /src/theme/applet/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 仿微信小程序主题 3 | * 由于要复用default的上拉加载，toTop功能，所以直接继承自default 4 | * 只重写了 downWrap相关操作 5 | */ 6 | 7 | import utils from '../../utils/index'; 8 | import './index.css'; 9 | 10 | 11 | /** 12 | * 一些默认提供的CSS类，一般来说不会变动（由框架提供的） 13 | * theme字段会根据不同的主题有不同值 14 | */ 15 | const CLASS_THEME = 'minirefresh-theme-applet'; 16 | const CLASS_DOWN_WRAP = 'minirefresh-downwrap'; 17 | const CLASS_HARDWARE_SPEEDUP = 'minirefresh-hardware-speedup'; 18 | 19 | /** 20 | * 本主题的特色样式 21 | */ 22 | const CLASS_DOWN_LOADING = 'loading-applet'; 23 | 24 | /** 25 | * 一些常量 26 | */ 27 | const DEFAULT_DOWN_HEIGHT = 50; 28 | 29 | const defaultSetting = { 30 | down: { 31 | successAnim: { 32 | // 微信小程序没有successAnim 也没有文字提示 33 | isEnable: false, 34 | }, 35 | // 继承了default的downWrap部分代码，需要这个变量 36 | isWrapCssTranslate: true, 37 | }, 38 | }; 39 | 40 | class applet extends utils.theme.defaults { 41 | /** 42 | * 拓展自定义的配置 43 | * @param {Object} options 配置参数 44 | */ 45 | constructor(options) { 46 | options = utils.extend(true, {}, defaultSetting, options); 47 | super(options); 48 | } 49 | 50 | /** 51 | * 重写下拉刷新初始化，变为小程序自己的动画 52 | */ 53 | _initDownWrap() { 54 | let container = this.container, 55 | contentWrap = this.contentWrap; 56 | 57 | // 下拉的区域 58 | const downWrap = document.createElement('div'); 59 | 60 | downWrap.className = `${CLASS_DOWN_WRAP} ${CLASS_HARDWARE_SPEEDUP}`; 61 | downWrap.innerHTML = '
    '; 62 | container.insertBefore(downWrap, contentWrap); 63 | 64 | // 由于直接继承的default，所以其实已经有default主题了，这里再加上本主题样式 65 | container.classList.add(CLASS_THEME); 66 | 67 | this.downWrap = downWrap; 68 | // 留一个默认值，以免样式被覆盖，无法获取 69 | this.downWrapHeight = this.downWrap.offsetHeight || DEFAULT_DOWN_HEIGHT; 70 | this._transformDownWrap(-1 * this.downWrapHeight); 71 | } 72 | _transformDownWrap(offset, duration) { 73 | super._transformDownWrap(offset, duration); 74 | } 75 | 76 | /** 77 | * 重写下拉过程动画 78 | * @param {Number} downHight 当前下拉的高度 79 | * @param {Number} downOffset 下拉的阈值 80 | */ 81 | _pullHook(downHight, downOffset) { 82 | if (downHight < downOffset) { 83 | let rate = downHight / downOffset, 84 | offset = this.downWrapHeight * (-1 + rate); 85 | 86 | this._transformDownWrap(offset); 87 | } else { 88 | this._transformDownWrap(0); 89 | } 90 | } 91 | 92 | /** 93 | * 重写下拉动画 94 | */ 95 | _downLoaingHook() { 96 | this.downWrap.classList.add(CLASS_DOWN_LOADING); 97 | } 98 | 99 | /** 100 | * 重写success 但是什么都不做 101 | */ 102 | _downLoaingSuccessHook() { } 103 | 104 | /** 105 | * 重写下拉end 106 | * @param {Boolean} isSuccess 是否成功 107 | */ 108 | _downLoaingEndHook() { 109 | this.downWrap.classList.remove(CLASS_DOWN_LOADING); 110 | this._transformDownWrap(-1 * this.downWrapHeight, this.options.down.bounceTime); 111 | } 112 | 113 | /** 114 | * 取消loading的回调 115 | */ 116 | _cancelLoaingHook() { 117 | this._transformDownWrap(-1 * this.downWrapHeight, this.options.down.bounceTime); 118 | } 119 | } 120 | 121 | export default applet; -------------------------------------------------------------------------------- /src/theme/drawer3d/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 3D抽屉效果 3 | */ 4 | 5 | .minirefresh-theme-drawer3d .minirefresh-downwrap { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | height: 200px; 10 | background: #000000; 11 | /* 12 | * 开启3D视角，经测试，就算不写，只要有translateZ,在iOS下默认也有这个效果 13 | * http://www.w3cplus.com/css3/transform-basic-property.html 14 | * */ 15 | transform-style: preserve-3d; 16 | -webkit-transform-style: preserve-3d; 17 | /** 18 | * 隐藏不可见元素 19 | */ 20 | backface-visibility: hidden 21 | } 22 | 23 | .minirefresh-theme-drawer3d .minirefresh-downwrap .downwrap-content { 24 | width: 100%; 25 | margin-top: 20px; 26 | text-align: center; 27 | } 28 | 29 | 30 | /** 31 | * 由于父容器开启了preserve-3d 3D视角（iOS中只有有translateZ就相当于会默认开启），所以如果直接是drawer3d进行变换，会有一部分无法显示 32 | * 需要中间来一个舞台，舞台占满宽高 33 | */ 34 | 35 | .minirefresh-theme-drawer3d .state-3d { 36 | width: 100%; 37 | height: 100%; 38 | transform: translateZ(0); 39 | -webkit-transform: translateZ(0); 40 | perspective: 100px; 41 | -webkit-perspective: 100px; 42 | /* 43 | * 视角和子元素的origin保持一致 44 | */ 45 | perspective-origin: center bottom; 46 | -webkit-perspective-origin: center bottom; 47 | } 48 | 49 | .minirefresh-theme-drawer3d .drawer3d { 50 | position: absolute; 51 | left: 0; 52 | bottom: 0; 53 | width: 100%; 54 | background: #FFFFFF; 55 | text-align: center; 56 | -webkit-animation-fill-mode: both; 57 | animation-fill-mode: both; 58 | -webkit-transform-origin: center bottom; 59 | transform-origin: center bottom; 60 | } 61 | 62 | .minirefresh-theme-drawer3d .drawer3d .drawer3d-mask { 63 | position: absolute; 64 | left: 0; 65 | top: 0; 66 | width: 100%; 67 | height: 100%; 68 | background: #D3D3D3; 69 | /* 70 | * 最终的透明度是计算生成的 71 | */ 72 | opacity: .4; 73 | } -------------------------------------------------------------------------------- /src/theme/drawerslider/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 滑动抽屉效果 3 | * 样式和3D抽屉类似，但是为了遵循 一个主题实现一个效果的原则 4 | * 单独独立成主题，而不是简单的将两个功能复用到一个主题 5 | */ 6 | 7 | .minirefresh-theme-drawerslider .minirefresh-downwrap { 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | height: 200px; 12 | background: #000000; 13 | z-index: 999; 14 | } 15 | 16 | .minirefresh-theme-drawerslider .minirefresh-downwrap .downwrap-content { 17 | width: 100%; 18 | margin-top: 20px; 19 | text-align: center; 20 | } 21 | 22 | .minirefresh-theme-drawerslider .minirefresh-downwrap .drawer { 23 | position: absolute; 24 | left: 0; 25 | bottom: 0; 26 | width: 100%; 27 | background: #FFFFFF; 28 | text-align: center; 29 | background-clip: padding-box; 30 | box-shadow: 0 1px 2px rgba(0,0,0,.3); 31 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3); 32 | } 33 | 34 | .minirefresh-theme-drawerslider .drawer .drawer-mask { 35 | position: absolute; 36 | left: 0; 37 | top: 0; 38 | width: 100%; 39 | height: 100%; 40 | background: #D3D3D3; 41 | /* 42 | * 最终的透明度是计算生成的 43 | */ 44 | opacity: .4; 45 | } 46 | -------------------------------------------------------------------------------- /src/theme/drawerslider/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 滑动抽屉效果 3 | * 复用了default的代码 4 | * 下拉动画时完全自定义重写，不移动scroll，而是直接css动画 5 | */ 6 | 7 | 8 | import utils from '../../utils/index'; 9 | import './index.css'; 10 | 11 | /** 12 | * 一些默认提供的CSS类，一般来说不会变动（由框架提供的） 13 | * theme字段会根据不同的主题有不同值 14 | */ 15 | const CLASS_THEME = 'minirefresh-theme-drawerslider'; 16 | 17 | /** 18 | * 一些常量 19 | * 默认高度是200 20 | * 其中背景默认是黑色，内容是白色，再增设阻尼系数可以较好的达到3D效果 21 | */ 22 | let DEFAULT_DOWN_HEIGHT = 200, 23 | DOWN_SHADOW_HEIGHT = 2; 24 | 25 | const defaultSetting = { 26 | down: { 27 | offset: 100, 28 | // 阻尼系数，下拉的距离大于offset时,改变下拉区域高度比例;值越接近0,高度变化越小,表现为越往下越难拉 29 | dampRate: 0.2, 30 | bounceTime: 500, 31 | successAnim: { 32 | // successAnim 33 | isEnable: false, 34 | }, 35 | // 继承了default的downWrap部分代码，需要这个变量 36 | isWrapCssTranslate: true, 37 | // 是否scroll在下拉时会进行css移动，本主题关闭它，完全自定义 38 | // 这种方案记得修改动画区域的index 39 | isScrollCssTranslate: false, 40 | }, 41 | }; 42 | 43 | class drawerslider extends utils.theme.defaults { 44 | /** 45 | * 拓展自定义的配置 46 | * @param {Object} options 配置参数 47 | */ 48 | constructor(options) { 49 | options = utils.extend(true, {}, defaultSetting, options); 50 | super(options); 51 | } 52 | 53 | /** 54 | * 重写下拉刷新初始化，变为小程序自己的动画 55 | */ 56 | _initDownWrap() { 57 | // 先复用default代码，然后重写 58 | super._initDownWrap(); 59 | 60 | let container = this.container, 61 | options = this.options, 62 | downWrap = this.downWrap; 63 | 64 | // 改写内容区域 65 | downWrap.innerHTML = `${'
    ' + 66 | '
    ' + 67 | '

    ' + 68 | '

    '}${ 69 | options.down.contentdown 70 | }

    ` + 71 | '
    '; 72 | 73 | // 由于直接继承的default，所以其实已经有default主题了，这里再加上本主题样式 74 | container.classList.add(CLASS_THEME); 75 | 76 | // 改写完后，对象需要重新查找，需要给default用 77 | this.downWrapProgress = downWrap.querySelector('.downwrap-progress'); 78 | this.downWrapTips = downWrap.querySelector('.downwrap-tips'); 79 | this.drawer = downWrap.querySelector('.drawer'); 80 | this.drawerMask = downWrap.querySelector('.drawer-mask'); 81 | 82 | // 留一个默认值，以免样式被覆盖，无法获取 83 | // +2是去除阴影的位置 84 | this.downWrapHeight = DOWN_SHADOW_HEIGHT + downWrap.offsetHeight || DEFAULT_DOWN_HEIGHT; 85 | // 由于downWrap被改变了，重新移动 86 | this._transformDownWrap(-this.downWrapHeight); 87 | } 88 | _transformDownWrap(offset, duration) { 89 | super._transformDownWrap(offset, duration); 90 | this._transformDrawer(offset, duration); 91 | } 92 | _transformDrawer(offset, duration) { 93 | if (!this.drawerMask) { 94 | return; 95 | } 96 | 97 | offset = offset || 0; 98 | duration = duration || 0; 99 | 100 | let opacity = (-offset - this.options.down.offset) / this.downWrapHeight; 101 | 102 | opacity = Math.min(1, opacity); 103 | opacity = Math.max(0, opacity); 104 | 105 | this.drawerMask.style.opacity = opacity; 106 | this.drawerMask.style.webkitTransitionDuration = `${duration}ms`; 107 | this.drawerMask.style.transitionDuration = `${duration}ms`; 108 | } 109 | 110 | /** 111 | * 重写下拉过程动画 112 | * @param {Number} downHight 当前下拉的高度 113 | * @param {Number} downOffset 下拉的阈值 114 | */ 115 | _pullHook(downHight, downOffset) { 116 | // 复用default的同名函数代码 117 | super._pullHook(downHight, downOffset); 118 | } 119 | 120 | /** 121 | * 重写下拉动画 122 | */ 123 | _downLoaingHook() { 124 | // loading中已经translate了 125 | super._downLoaingHook(); 126 | } 127 | 128 | /** 129 | * 重写success 但是什么都不做 130 | */ 131 | _downLoaingSuccessHook() { } 132 | 133 | /** 134 | * 重写下拉end 135 | * @param {Boolean} isSuccess 是否成功 136 | */ 137 | _downLoaingEndHook(isSuccess) { 138 | super._downLoaingEndHook(isSuccess); 139 | } 140 | 141 | /** 142 | * 取消loading的回调 143 | */ 144 | _cancelLoaingHook() { 145 | super._cancelLoaingHook(); 146 | } 147 | } 148 | 149 | export default drawerslider; 150 | -------------------------------------------------------------------------------- /src/theme/jianshu/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 滑动抽屉效果 3 | * 样式和3D抽屉类似，但是为了遵循 一个主题实现一个效果的原则 4 | * 单独独立成主题，而不是简单的将两个功能复用到一个主题 5 | */ 6 | 7 | .minirefresh-theme-jianshu .minirefresh-downwrap { 8 | position: absolute; 9 | top: 0; 10 | left: 50%; 11 | height: 50px; 12 | /* background: #000000; */ 13 | z-index: 999; 14 | width:50px; 15 | margin-left:-25px; 16 | } 17 | 18 | .minirefresh-theme-jianshu .minirefresh-downwrap .downwrap-content { 19 | width: 100%; 20 | margin-top: 0px; 21 | text-align: center; 22 | height: 50px; 23 | line-height: 50px; 24 | padding: 0; 25 | } 26 | 27 | .minirefresh-theme-jianshu .minirefresh-downwrap .drawer { 28 | position: absolute; 29 | left: 0; 30 | bottom: 0; 31 | width: 100%; 32 | background: #ffffff; 33 | text-align: center; 34 | background-clip: padding-box; 35 | box-shadow: 0 1px 2px rgba(0, 0, 0, .3); 36 | -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3); 37 | height:100%; 38 | border-radius: 50%; 39 | } 40 | 41 | .minirefresh-theme-jianshu .drawer .drawer-mask { 42 | position: absolute; 43 | left: 0; 44 | top: 0; 45 | width: 100%; 46 | height: 100%; 47 | background: #D3D3D3; 48 | /* 49 | * 最终的透明度是计算生成的 50 | */ 51 | opacity: .4; 52 | } 53 | 54 | .minirefresh-theme-jianshu .minirefresh-downwrap .downwrap-progress{ 55 | display: inline-block; 56 | width: 25px; 57 | height: 25px; 58 | border-radius: 50%; 59 | border: 1px solid gray; 60 | margin: auto auto; 61 | border-bottom-color: transparent; 62 | vertical-align: middle; 63 | background: url(http://mdn.csdu.net/img/group.png) no-repeat; 64 | background-position:center; 65 | background-size:100%; 66 | border:none; 67 | } -------------------------------------------------------------------------------- /src/theme/jianshu/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 滑动抽屉效果 3 | * 复用了default的代码 4 | * 下拉动画时完全自定义重写，不移动scroll，而是直接css动画 5 | */ 6 | import utils from '../../utils/index'; 7 | import './index.css'; 8 | 9 | 10 | /** 11 | * 一些默认提供的CSS类，一般来说不会变动（由框架提供的） 12 | * theme字段会根据不同的主题有不同值 13 | */ 14 | const CLASS_THEME = 'minirefresh-theme-jianshu'; 15 | 16 | /** 17 | * 一些常量 18 | * 默认高度是200 19 | * 其中背景默认是黑色，内容是白色，再增设阻尼系数可以较好的达到3D效果 20 | */ 21 | let DEFAULT_DOWN_HEIGHT = 200, 22 | DOWN_SHADOW_HEIGHT = 2; 23 | 24 | const defaultSetting = { 25 | down: { 26 | offset: 100, 27 | // 阻尼系数，下拉的距离大于offset时,改变下拉区域高度比例;值越接近0,高度变化越小,表现为越往下越难拉 28 | dampRate: 0.2, 29 | bounceTime: 500, 30 | successAnim: { 31 | // successAnim 32 | isEnable: false, 33 | }, 34 | // 继承了default的downWrap部分代码，需要这个变量 35 | isWrapCssTranslate: true, 36 | // 是否scroll在下拉时会进行css移动，本主题关闭它，完全自定义 37 | // 这种方案记得修改动画区域的index 38 | isScrollCssTranslate: false, 39 | }, 40 | }; 41 | 42 | class jianshu extends utils.theme.defaults { 43 | /** 44 | * 拓展自定义的配置 45 | * @param {Object} options 配置参数 46 | */ 47 | constructor(options) { 48 | options = utils.extend(true, {}, defaultSetting, options); 49 | super(options); 50 | } 51 | 52 | /** 53 | * 重写下拉刷新初始化，变为小程序自己的动画 54 | */ 55 | _initDownWrap() { 56 | // 先复用default代码，然后重写 57 | super._initDownWrap(); 58 | 59 | let container = this.container, 60 | // options = this.options, 61 | downWrap = this.downWrap; 62 | 63 | // 改写内容区域 64 | downWrap.innerHTML = `
    65 |
    66 |

    67 |
    `; 68 | 69 | // 由于直接继承的default，所以其实已经有default主题了，这里再加上本主题样式 70 | container.classList.add(CLASS_THEME); 71 | 72 | // 改写完后，对象需要重新查找，需要给default用 73 | this.downWrapProgress = downWrap.querySelector('.downwrap-progress'); 74 | this.drawer = downWrap.querySelector('.drawer'); 75 | this.drawerMask = downWrap.querySelector('.drawer-mask'); 76 | 77 | // 留一个默认值，以免样式被覆盖，无法获取 78 | // +2是去除阴影的位置 79 | this.downWrapHeight = DOWN_SHADOW_HEIGHT + downWrap.offsetHeight || DEFAULT_DOWN_HEIGHT; 80 | // 由于downWrap被改变了，重新移动 81 | this._transformDownWrap(-this.downWrapHeight); 82 | } 83 | _transformDownWrap(offset, duration) { 84 | super._transformDownWrap(offset, duration); 85 | this._transformDrawer(offset, duration); 86 | } 87 | _transformDrawer(offset, duration) { 88 | if (!this.drawerMask) { 89 | return; 90 | } 91 | 92 | offset = offset || 0; 93 | duration = duration || 0; 94 | 95 | let opacity = (-offset - this.options.down.offset) / this.downWrapHeight; 96 | 97 | opacity = Math.min(1, opacity); 98 | opacity = Math.max(0, opacity); 99 | 100 | this.drawerMask.style.opacity = opacity; 101 | this.drawerMask.style.webkitTransitionDuration = `${duration}ms`; 102 | this.drawerMask.style.transitionDuration = `${duration}ms`; 103 | } 104 | 105 | /** 106 | * 重写下拉过程动画 107 | * @param {Number} downHight 当前下拉的高度 108 | * @param {Number} downOffset 下拉的阈值 109 | */ 110 | _pullHook(downHight, downOffset) { 111 | // 复用default的同名函数代码 112 | super._pullHook(downHight, downOffset); 113 | } 114 | 115 | /** 116 | * 重写下拉动画 117 | */ 118 | _downLoaingHook() { 119 | // loading中已经translate了 120 | super._downLoaingHook(); 121 | } 122 | 123 | /** 124 | * 重写success 但是什么都不做 125 | */ 126 | _downLoaingSuccessHook() { } 127 | 128 | /** 129 | * 重写下拉end 130 | * @param {Boolean} isSuccess 是否成功 131 | */ 132 | _downLoaingEndHook(isSuccess) { 133 | super._downLoaingEndHook(isSuccess); 134 | } 135 | 136 | /** 137 | * 取消loading的回调 138 | */ 139 | _cancelLoaingHook() { 140 | super._cancelLoaingHook(); 141 | } 142 | } 143 | 144 | export default jianshu; -------------------------------------------------------------------------------- /src/theme/taobao/images/taobao-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/src/theme/taobao/images/taobao-bg.jpg -------------------------------------------------------------------------------- /src/theme/taobao/images/taobao-moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/src/theme/taobao/images/taobao-moon.png -------------------------------------------------------------------------------- /src/theme/taobao/index.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 仿淘宝的主题 3 | * 支持淘宝二楼效果 4 | */ 5 | 6 | .minirefresh-theme-taobao .minirefresh-downwrap { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | width: 100%; 11 | height: 800px; 12 | } 13 | 14 | .minirefresh-theme-taobao .minirefresh-downwrap .downwrap-bg { 15 | position: absolute; 16 | top: 0; 17 | left: 0; 18 | width: 100%; 19 | height: 100%; 20 | background-image: url(images/taobao-bg.jpg); 21 | background-size: 100% 100%; 22 | } 23 | 24 | .minirefresh-theme-taobao .minirefresh-downwrap .downwrap-moon { 25 | position: absolute; 26 | width: 120px; 27 | height: 80px; 28 | bottom: 80px; 29 | margin-left: -60px; 30 | left: 50%; 31 | background-image: url(images/taobao-moon.png); 32 | background-size: 100% 100%; 33 | } 34 | 35 | .minirefresh-theme-taobao .minirefresh-downwrap .downwrap-content { 36 | position: absolute; 37 | left: 0; 38 | bottom: 0; 39 | width: 100%; 40 | text-align: center; 41 | } 42 | 43 | 44 | /** 45 | * 以下是进入和退出秘密花园 46 | */ 47 | 48 | .minirefresh-theme-taobao .minirefresh-downwrap .secret-garden-bg-in { 49 | transform: scale(1.5) translateZ(0px); 50 | -webkit-transform: scale(1.5) translateZ(0px); 51 | transition: 1000ms; 52 | -webkit-transition: 1000ms; 53 | } 54 | 55 | .minirefresh-theme-taobao .minirefresh-downwrap .secret-garden-bg-out { 56 | transform: scale(1) translateZ(0px); 57 | -webkit-transform: scale(1) translateZ(0px); 58 | transition: 1000ms; 59 | -webkit-transition: 1000ms; 60 | } 61 | 62 | .minirefresh-theme-taobao .minirefresh-downwrap .secret-garden-moon-in { 63 | transform: translateY(-120px) translateZ(0px); 64 | -webkit-transform: translateY(-120px) translateZ(0px); 65 | transition: 1000ms; 66 | -webkit-transition: 1000ms; 67 | } 68 | 69 | .minirefresh-theme-taobao .minirefresh-downwrap .secret-garden-moon-out { 70 | transform: translateY(0px) translateZ(0px); 71 | -webkit-transform: translateY(0px) translateZ(0px); 72 | transition: 1000ms; 73 | -webkit-transition: 1000ms; 74 | } 75 | 76 | 77 | /** 78 | * 重新tips 79 | */ 80 | 81 | .minirefresh-theme-taobao .minirefresh-downwrap .downwrap-tips { 82 | font-size: 14px; 83 | color: white; 84 | } 85 | 86 | .minirefresh-theme-taobao .minirefresh-downwrap .downwrap-progress { 87 | display: inline-block; 88 | width: 16px; 89 | height: 16px; 90 | border-radius: 50%; 91 | border: 1px solid white; 92 | margin-right: 8px; 93 | border-bottom-color: transparent; 94 | vertical-align: middle; 95 | 96 | } 97 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 构建 MiniRefresh 3 | * MiniRefreshTools 是内部使用的 4 | * 外部主题会用 MiniRefresh变量 5 | */ 6 | 7 | 8 | const utils = {}; 9 | 10 | utils.noop = () => { }; 11 | 12 | utils.isFunction = obj => Object.prototype.toString.call(obj) === '[object Function]'; 13 | 14 | utils.isObject = obj => Object.prototype.toString.call(obj) === '[object Object]'; 15 | 16 | utils.isArray = Array.isArray || 17 | function (array) { 18 | return Object.prototype.toString.call(array) === '[object Array]'; 19 | }; 20 | 21 | /** 22 | * 参数拓展 23 | * @param {type} deep 是否深复制 24 | * @param {type} target 需要拓展的目标对象 25 | * @param {type} source 其它需要拓展的源，会覆盖目标对象上的相同属性 26 | * @return {Object} 拓展后的对象 27 | */ 28 | utils.extend = function () { 29 | const args = [].slice.call(arguments); 30 | 31 | // 目标 32 | let target = args[0] || {}, 33 | // 默认source从1开始 34 | index = 1, 35 | len = args.length, 36 | // 默认非深复制 37 | deep = false; 38 | 39 | if (typeof target === 'boolean') { 40 | // 如果开启了深复制 41 | deep = target; 42 | target = args[index] || {}; 43 | index++; 44 | } 45 | 46 | if (!utils.isObject(target)) { 47 | // 确保拓展的一定是object 48 | target = {}; 49 | } 50 | 51 | for (; index < len; index++) { 52 | // source的拓展 53 | const source = args[index]; 54 | 55 | if (source && utils.isObject(source)) { 56 | for (const name in source) { 57 | if (!Object.prototype.hasOwnProperty.call(source, name)) { 58 | // 防止原型上的数据 59 | continue; 60 | } 61 | 62 | const src = target[name]; 63 | const copy = source[name]; 64 | var clone, 65 | copyIsArray; 66 | 67 | if (target === copy) { 68 | // 防止环形引用 69 | continue; 70 | } 71 | 72 | if (deep && copy && (utils.isObject(copy) || (copyIsArray = utils.isArray(copy)))) { 73 | if (copyIsArray) { 74 | copyIsArray = false; 75 | clone = src && utils.isArray(src) ? src : []; 76 | } else { 77 | clone = src && utils.isObject(src) ? src : {}; 78 | } 79 | 80 | target[name] = utils.extend(deep, clone, copy); 81 | } else if (copy !== undefined) { 82 | target[name] = copy; 83 | } 84 | } 85 | } 86 | } 87 | 88 | return target; 89 | }; 90 | 91 | /** 92 | * 选择这段代码用到的太多了，因此抽取封装出来 93 | * @param {Object} element dom元素或者selector 94 | * @return {HTMLElement} 返回选择的Dom对象，无果没有符合要求的，则返回null 95 | */ 96 | utils.selector = function (element) { 97 | if (typeof element === 'string') { 98 | element = document.querySelector(element); 99 | } 100 | return element; 101 | }; 102 | 103 | /** 104 | * 获取DOM的可视区高度，兼容PC上的body高度获取 105 | * 因为在通过body获取时，在PC上会有CSS1Compat形式，所以需要兼容 106 | * @param {HTMLElement} dom 需要获取可视区高度的dom,对body对象有特殊的兼容方案 107 | * @return {Number} 返回最终的高度 108 | */ 109 | utils.getClientHeightByDom = function (dom) { 110 | let height = dom.clientHeight; 111 | if (dom === document.body && document.compatMode === 'CSS1Compat') { 112 | // PC上body的可视区的特殊处理 113 | height = document.documentElement.clientHeight; 114 | } 115 | return height; 116 | }; 117 | 118 | /** 119 | * 设置一个Util对象下的命名空间 120 | * @param {String} namespace 命名空间 121 | * @param {Object} obj 需要赋值的目标对象 122 | * @return {Object} 返回最终的对象 123 | */ 124 | utils.namespace = function (namespace, obj) { 125 | let parent = utils; 126 | 127 | if (!namespace) { 128 | return parent; 129 | } 130 | 131 | let namespaceArr = namespace.split('.'), 132 | len = namespaceArr.length; 133 | 134 | for (let i = 0; i < len - 1; i++) { 135 | const tmp = namespaceArr[i]; 136 | 137 | // 不存在的话要重新创建对象 138 | parent[tmp] = parent[tmp] || {}; 139 | // parent要向下一级 140 | parent = parent[tmp]; 141 | } 142 | parent[namespaceArr[len - 1]] = obj; 143 | 144 | return parent[namespaceArr[len - 1]]; 145 | }; 146 | 147 | export default utils; -------------------------------------------------------------------------------- /staticresource/screenshoot/base_default.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/base_default.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/base_lockdown.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/base_lockdown.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/base_multi.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/base_multi.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/base_single.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/base_single.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/base_translate.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/base_translate.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/base_vue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/base_vue.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/nested_muiscroll.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/nested_muiscroll.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/nested_slider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/nested_slider.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/nested_swipe.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/nested_swipe.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/theme_applet.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/theme_applet.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/theme_drawer3d.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/theme_drawer3d.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/theme_drawerslider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/theme_drawerslider.gif -------------------------------------------------------------------------------- /staticresource/screenshoot/theme_taobao.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/screenshoot/theme_taobao.gif -------------------------------------------------------------------------------- /staticresource/showcase/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GGwujun/MobRefresh/9ba0e2d2c845cd8c712feda8f7a20bdd02be26fa/staticresource/showcase/qrcode.png -------------------------------------------------------------------------------- /test/index.rollup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 仅仅用了rollup自动检测eslint 3 | */ 4 | import './init.spec'; 5 | import './lang.spec'; 6 | import './os.spec'; 7 | import './jsbridge.spec.js'; -------------------------------------------------------------------------------- /test/init.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import initMixin from '../src/core/init'; 3 | import osMixin from '../src/core/os'; 4 | 5 | let ejs; 6 | 7 | describe('H5下的config', () => { 8 | before(() => { 9 | ejs = {}; 10 | initMixin(ejs); 11 | osMixin(ejs); 12 | }); 13 | 14 | it('正常的ready', () => { 15 | ejs.config(); 16 | 17 | ejs.ready(() => { 18 | expect(1).to.be.equal(1); 19 | }); 20 | }); 21 | 22 | it('H5多次config', () => { 23 | ejs.error(() => { 24 | expect(1).to.be.equal(1); 25 | }); 26 | 27 | ejs.config(); 28 | }); 29 | 30 | it('H5多次ready', () => { 31 | ejs.error(() => { 32 | expect(1).to.be.equal(1); 33 | }); 34 | 35 | ejs.ready(); 36 | }); 37 | }); 38 | 39 | describe('先ready再config', () => { 40 | before(() => { 41 | ejs = {}; 42 | initMixin(ejs); 43 | osMixin(ejs); 44 | }); 45 | 46 | it('正常ready成功', () => { 47 | ejs.ready(() => { 48 | expect(1).to.be.equal(1); 49 | }); 50 | ejs.config(); 51 | }); 52 | }); -------------------------------------------------------------------------------- /test/inner/hackwindow.js: -------------------------------------------------------------------------------- 1 | export function setNavigatorProp(name, value) { 2 | if (window.navigator[name] !== value) { 3 | const prop = { 4 | get: () => value, 5 | }; 6 | 7 | try { 8 | Object.defineProperty(window.navigator, name, prop); 9 | } catch (e) { 10 | const newObj = {}; 11 | 12 | newObj[name] = prop; 13 | 14 | window.navigator = Object.create(navigator, newObj); 15 | } 16 | } 17 | } 18 | 19 | /** 20 | * hack修改userAgent，只用在单元测试中 21 | * @param {Object} userAgent 22 | * navigator.userAgent是只读，需要hack才能临时修改 23 | */ 24 | export function setUserAgent(userAgent) { 25 | setNavigatorProp('userAgent', userAgent); 26 | } 27 | 28 | export function setAppVersion(appVersion) { 29 | setNavigatorProp('appVersion', appVersion); 30 | } -------------------------------------------------------------------------------- /test/jsbridge.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import ejs from '../src/index'; 3 | import jsbridgeMixin from '../src/jsbridge/jsbridge'; 4 | 5 | jsbridgeMixin(ejs); 6 | 7 | describe('注册H5本地函数', () => { 8 | const handlerName = 'testH5'; 9 | let callback; 10 | let data; 11 | 12 | before(() => { 13 | data = { 14 | test: 11, 15 | }; 16 | }); 17 | 18 | it('触发已注册的本地函数', (done) => { 19 | callback = function innerCallback(innerData) { 20 | console.log(innerData); 21 | console.log('~'); 22 | expect(1).to.be.equal(1); 23 | done(); 24 | }; 25 | 26 | ejs.JSBridge.registerHandler(handlerName, callback); 27 | 28 | ejs.JSBridge._handleMessageFromNative({ 29 | handlerName, 30 | data, 31 | }); 32 | }); 33 | }); -------------------------------------------------------------------------------- /test/os.spec.js: -------------------------------------------------------------------------------- 1 | import { expect } from 'chai'; 2 | import osMixin from '../src/core/os'; 3 | import { 4 | setUserAgent, 5 | setAppVersion, 6 | } from './inner/hackwindow'; 7 | 8 | const ORIGINAL_NAVIGATOR = navigator.userAgent; 9 | let ejs; 10 | 11 | describe('H5环境', () => { 12 | before(() => { 13 | ejs = {}; 14 | osMixin(ejs); 15 | }); 16 | 17 | it('默认为h5', () => { 18 | expect(ejs.os.h5).to.be.equal(true); 19 | }); 20 | 21 | it('默认其它os都为假', () => { 22 | expect(ejs.os.dd).to.be.equal(undefined); 23 | expect(ejs.os.ejs).to.be.equal(undefined); 24 | }); 25 | 26 | it('默认非Android与iOS', () => { 27 | expect(ejs.os.android).to.be.equal(undefined); 28 | expect(ejs.os.ios).to.be.equal(undefined); 29 | 30 | expect(ejs.os.isBadAndroid).to.be.equal(undefined); 31 | expect(ejs.os.ipad).to.be.equal(undefined); 32 | expect(ejs.os.iphone).to.be.equal(undefined); 33 | }); 34 | }); 35 | 36 | describe('模拟Android', () => { 37 | const AGENT_ANDROID = 'Android; 1.0.2;'; 38 | const APPVERSION_BAD_ANDROID = 'firefox 50'; 39 | 40 | before(() => { 41 | // 在本区块的所有测试用例之前执行 42 | ejs = {}; 43 | 44 | setUserAgent(AGENT_ANDROID); 45 | setAppVersion(APPVERSION_BAD_ANDROID); 46 | 47 | osMixin(ejs); 48 | }); 49 | 50 | it('为Android环境', () => { 51 | expect(ejs.os.android).to.be.equal(true); 52 | }); 53 | 54 | it('版本匹配', () => { 55 | expect(ejs.os.version).to.be.equal('1.0.2'); 56 | }); 57 | 58 | it('为badAndroid', () => { 59 | expect(ejs.os.isBadAndroid).to.be.equal(true); 60 | }); 61 | 62 | after(() => { 63 | setUserAgent(ORIGINAL_NAVIGATOR); 64 | }); 65 | }); 66 | 67 | describe('模拟iphone', () => { 68 | const AGENT_IPHONE = 'iPhone OS 1_0_1;'; 69 | 70 | before(() => { 71 | // 在本区块的所有测试用例之前执行 72 | ejs = {}; 73 | 74 | setUserAgent(AGENT_IPHONE); 75 | 76 | osMixin(ejs); 77 | }); 78 | 79 | it('为iOS环境', () => { 80 | expect(ejs.os.ios).to.be.equal(true); 81 | }); 82 | 83 | it('为iphone环境', () => { 84 | expect(ejs.os.iphone).to.be.equal(true); 85 | }); 86 | 87 | it('版本号匹配', () => { 88 | expect(ejs.os.version).to.be.equal('1.0.1'); 89 | }); 90 | 91 | after(() => { 92 | setUserAgent(ORIGINAL_NAVIGATOR); 93 | }); 94 | }); 95 | 96 | describe('模拟ipad', () => { 97 | const AGENT_IPAD = 'iPad OS 1_0_2;'; 98 | 99 | before(() => { 100 | // 在本区块的所有测试用例之前执行 101 | ejs = {}; 102 | 103 | setUserAgent(AGENT_IPAD); 104 | 105 | osMixin(ejs); 106 | }); 107 | 108 | it('为iOS环境', () => { 109 | expect(ejs.os.ios).to.be.equal(true); 110 | }); 111 | 112 | it('为ipad环境', () => { 113 | expect(ejs.os.ipad).to.be.equal(true); 114 | }); 115 | 116 | it('版本号匹配', () => { 117 | expect(ejs.os.version).to.be.equal('1.0.2'); 118 | }); 119 | 120 | after(() => { 121 | setUserAgent(ORIGINAL_NAVIGATOR); 122 | }); 123 | }); 124 | 125 | describe('模拟quick、dd与ejs', () => { 126 | const AGENT_QUICK = 'QuickHybrid1.0.1'; 127 | const AGENT_EJS = 'EpointEJS1.0.1'; 128 | const AGENT_DD = 'DingTalk1.0.1'; 129 | 130 | before(() => { 131 | // 在本区块的所有测试用例之前执行 132 | ejs = {}; 133 | 134 | setUserAgent(AGENT_EJS + AGENT_DD + AGENT_QUICK); 135 | 136 | osMixin(ejs); 137 | }); 138 | 139 | it('为quick环境', () => { 140 | expect(ejs.os.quick).to.be.equal(true); 141 | }); 142 | 143 | it('为ejs环境', () => { 144 | expect(ejs.os.ejs).to.be.equal(true); 145 | }); 146 | 147 | it('为DD环境', () => { 148 | expect(ejs.os.dd).to.be.equal(true); 149 | }); 150 | 151 | after(() => { 152 | setUserAgent(ORIGINAL_NAVIGATOR); 153 | }); 154 | }); -------------------------------------------------------------------------------- /test/unit/karma.base.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | // base path that will be used to resolve all patterns (eg. files, exclude) 4 | basePath: '../../', 5 | 6 | // frameworks to use 7 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 8 | frameworks: ['mocha'], 9 | 10 | // list of files / patterns to load in the browser 11 | files: [ 12 | 'test/**/*.spec.js', 13 | ], 14 | 15 | // list of files to exclude 16 | exclude: [ 17 | '/node_modules/', 18 | ], 19 | 20 | // preprocess matching files before serving them to the browser 21 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 22 | preprocessors: { 23 | // 'coverage' 24 | 'test/**/*.spec.js': ['webpack'], 25 | }, 26 | 27 | // test results reporter to use 28 | // possible values: 'dots', 'progress' 29 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 30 | reporters: ['progress'], 31 | 32 | 33 | // web server port 34 | port: 9876, 35 | 36 | // enable / disable colors in the output (reporters and logs) 37 | colors: true, 38 | 39 | // level of logging 40 | // possible values: config.LOG_DISABLE || config.LOG_ERROR 41 | // || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 42 | // logLevel: config.LOG_INFO, 43 | // enable / disable watching file and executing tests whenever any file changes 44 | autoWatch: true, 45 | 46 | // start these browsers 47 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 48 | // Chrome 49 | browsers: ['PhantomJS'], 50 | 51 | // Continuous Integration mode 52 | // if true, Karma captures browsers, runs the tests and exits 53 | singleRun: true, 54 | 55 | // Concurrency level 56 | // how many browser should be started simultaneous 57 | concurrency: Infinity, 58 | 59 | webpack: { 60 | module: { 61 | loaders: [{ 62 | test: /\.js$/, 63 | exclude: [/node_modules/, `${__dirname}xxx/xxx/lib`], 64 | loader: 'babel-loader', 65 | query: { 66 | // 为什么这个plugin放在代码中而不是配置文件中？ 67 | // 因为配置文件是给rollup使用的，如果加入这个放污染原本的打包文件 68 | // 而这个webpack仅做单测用 69 | plugins: [ 70 | 'istanbul', 71 | ], 72 | }, 73 | }], 74 | }, 75 | }, 76 | }; -------------------------------------------------------------------------------- /test/unit/karma.cover.config.js: -------------------------------------------------------------------------------- 1 | const base = require('./karma.base.config.js'); 2 | 3 | module.exports = function coverConfig(config) { 4 | config.set(Object.assign(base, { 5 | 6 | // progress karma-htmlfile-reporter 7 | // karma-html-detailed-reporter 如果作者修改了编码，可以考虑 8 | reporters: ['progress', 'html', 'coverage'], 9 | 10 | browsers: ['PhantomJS'], 11 | 12 | singleRun: true, 13 | 14 | htmlReporter: { 15 | outputFile: '_report/units.html', 16 | 17 | // Optional 18 | pageTitle: 'ejs Tests', 19 | subPageTitle: 'unit test', 20 | groupSuites: true, 21 | useCompactStyle: true, 22 | useLegacyStyle: true, 23 | }, 24 | 25 | coverageReporter: { 26 | reporters: [ 27 | // generates ./coverage/lcov.info 28 | { 29 | type: 'lcovonly', 30 | subdir: '.', 31 | dir: '_coverage/', 32 | }, 33 | { 34 | type: 'json', 35 | subdir: '.', 36 | dir: '_coverage/', 37 | }, 38 | // generates ./coverage/coverage-final.json 39 | { 40 | type: 'html', 41 | subdir: '.', 42 | dir: '_coverage/', 43 | }, 44 | ], 45 | }, 46 | })); 47 | }; -------------------------------------------------------------------------------- /test/unit/karma.dev.config.js: -------------------------------------------------------------------------------- 1 | const base = require('./karma.base.config.js'); 2 | 3 | module.exports = function devConfig(config) { 4 | config.set(Object.assign(base, { 5 | 6 | reporters: ['progress'], 7 | 8 | // Chrome 9 | browsers: ['PhantomJS'], 10 | 11 | singleRun: false, 12 | 13 | })); 14 | }; -------------------------------------------------------------------------------- /test/unit/karma.unit.config.js: -------------------------------------------------------------------------------- 1 | const base = require('./karma.base.config.js'); 2 | 3 | module.exports = function watchConfig(config) { 4 | config.set(Object.assign(base, { 5 | 6 | reporters: ['progress'], 7 | 8 | browsers: ['Chrome', 'Firefox', 'Safari'], 9 | 10 | singleRun: true, 11 | 12 | })); 13 | }; --------------------------------------------------------------------------------