├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── README.md
├── babel.config.js
├── examples
    ├── App.vue
    └── main.js
├── lib
    ├── demo.html
    ├── scroll.common.js
    ├── scroll.common.js.map
    ├── scroll.umd.js
    ├── scroll.umd.js.map
    ├── scroll.umd.min.js
    └── scroll.umd.min.js.map
├── package-lock.json
├── package.json
├── packages
    ├── index.js
    └── scroll
    │   ├── index.js
    │   └── src
    │       ├── BaseView.vue
    │       ├── Loading.vue
    │       ├── LoadingCss.vue
    │       ├── Scroll.vue
    │       └── dom.js
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/airbnb',
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint',
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | examples/
 4 | packages/
 5 | public/
 6 | vue.config.js
 7 | babel.config.js
 8 | *.map
 9 | *.html
10 | 
11 | # local env files
12 | .env.local
13 | .env.*.local
14 | 
15 | # Log files
16 | npm-debug.log*
17 | yarn-debug.log*
18 | yarn-error.log*
19 | 
20 | # Editor directories and files
21 | .idea
22 | .vscode
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw*


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-custom-scrollview
 2 | 
 3 | 基于 better-scroll 的一个可自定义上下拉的移动端滚动列表组件。
 4 | 上下拉现默认动画，如果你想做成自己想要的上下拉动画，请查看[api](https://www.yuque.com/xiaotianyi/lkig5m/af04bx)
 5 | ### Use Setup
 6 | ```
 7 | npm i vue-custom-scrollview -S
 8 | ```
 9 | ### Example
10 | 
11 | [demo](https://daughterrui.github.io/xiaotianyi.github.io/#/vue-custom-scrollview)
12 | 
13 | ![demo](https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/b461949b-ab1e-44e5-a48b-218e22575236.gif)
14 | 
15 | ### Use in SPA
16 | 
17 | [examples](https://github.com/daughterRui/vue-custom-scrollview/blob/master/examples/App.vue)目录里面有demo用法，请自行下载查看
18 | 
19 | ### Attributes
20 | 
21 | [查看api文档](https://www.yuque.com/xiaotianyi/lkig5m/af04bx)
22 | 
23 | > 目前只提供了以上常用方法、Api,如有额外需要请 issue
24 | 
25 | ### More detailed settings
26 | 
27 | [better-scroll](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll)
28 | 
29 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <main class="position-box">
  4 |       <div class="test">TopTest</div>
  5 |       <vue-custom-scrollview
  6 |         ref="scroll"
  7 |         class="scroll-home"
  8 |         :probeType="3"
  9 |         :pullUpLoad="true"
 10 |         @pullingDown="onRefresh"
 11 |         @pullingUp="onLoad"
 12 |       >
 13 |           <ul class="contantView">
 14 |             <li class="list-item" v-for="item in items" :key="item">{{item}}</li>
 15 |           </ul>
 16 |           <template v-slot:pullup="slotPullUpProps">
 17 |             <div v-if="slotPullUpProps.finishPullUp" class="loadingText">加载中...</div>
 18 |             <div v-else class="loadingText">我是有底线的...</div>
 19 |           </template>
 20 |           <!-- <template v-slot:pulldown="slotProps">
 21 |             <span>{{slotProps}}</span>
 22 |           </template> -->
 23 |       </vue-custom-scrollview>
 24 |     </main>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | 
 30 | let count = 1;
 31 | 
 32 | export default {
 33 |   name: 'demo',
 34 |   components: {
 35 |   },
 36 |   data() {
 37 |     return {
 38 |       items: [],
 39 |     };
 40 |   },
 41 |   methods: {
 42 |     // 模拟数据请求
 43 |     getData() {
 44 |       return new Promise((resolve) => {
 45 |         setTimeout(() => {
 46 |           const arr = [];
 47 |           for (let i = 0; i < 10; i++) {
 48 |             arr.push(count++);
 49 |           }
 50 |           resolve(arr);
 51 |         }, 1000);
 52 |       });
 53 |     },
 54 |     onRefresh() {
 55 |       // 模拟下拉刷新
 56 |       console.log('下拉刷新', this.$refs.scroll);
 57 |       count = 0;
 58 |       this.getData().then((res) => {
 59 |         this.items = res;
 60 |         this.$refs.scroll.forceUpdate(true);
 61 |       });
 62 |     },
 63 |     onLoad() {
 64 |       // 模拟上拉 加载更多数据
 65 |       console.log('上拉加载');
 66 |       this.getData().then((res) => {
 67 |         this.items = this.items.concat(res);
 68 |         if (count < 30) {
 69 |           this.$refs.scroll.forceUpdate(true);
 70 |         } else {
 71 |           this.$refs.scroll.forceUpdate(false);
 72 |         }
 73 |       });
 74 |     },
 75 |   },
 76 |   mounted() {
 77 |     this.$nextTick(() => {
 78 |       this.$refs.scroll.autoPullDownRefresh();
 79 |     });
 80 |   },
 81 | };
 82 | </script>
 83 | <style lang="scss">
 84 | #app {
 85 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
 86 |   -webkit-font-smoothing: antialiased;
 87 |   -moz-osx-font-smoothing: grayscale;
 88 |   color: #2c3e50;
 89 |   background-color: #fff;
 90 |   -webkit-user-select: none;
 91 |  -moz-user-select: none;
 92 |  -khtml-user-select: none;
 93 |   user-select: none;
 94 | }
 95 | *{
 96 |   margin:0;
 97 |   padding:0;
 98 | }
 99 | html,body{
100 |   width:100%;
101 |   height:100%;
102 | }
103 | ul{list-style:none}
104 | a{text-decoration: none;}
105 | img{vertical-align:top;border:none}
106 | .position-box {
107 |   position: fixed;
108 |   top: 0;
109 |   left: 0;
110 |   right: 0;
111 |   bottom: 0;
112 |   .test{
113 |     height: 60px;
114 |     text-align: center;
115 |     line-height: 60px;
116 |     background-color: red
117 |   }
118 |   .scroll-home{
119 |     height: calc(100% - 60px);
120 |     overflow: hidden;
121 |     .contantView{
122 |       .list-item{
123 |         height: 100px;
124 |         text-align: center;
125 |         border-bottom: 1px solid #cecece;
126 |         line-height: 100px;
127 |       }
128 |     }
129 |   }
130 | }
131 | .loadingText{
132 |   margin-top: 10px;
133 |   height: 30px;
134 |   text-align: center;
135 |   line-height: 30px;
136 | }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Scroll from 'vue-custom-scrollview';
 3 | import App from './App.vue';
 4 | 
 5 | Vue.use(Scroll);
 6 | Vue.config.productionTip = false;
 7 | 
 8 | 
 9 | new Vue({
10 |   render: h => h(App),
11 | }).$mount('#app');
12 | 


--------------------------------------------------------------------------------
/lib/demo.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <title>scroll demo</title>
3 | <script src="./scroll.umd.js"></script>
4 | 
5 | 
6 | <script>
7 | console.log(scroll)
8 | </script>
9 | 


--------------------------------------------------------------------------------
/lib/scroll.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(t,i){"object"===typeof exports&&"object"===typeof module?module.exports=i():"function"===typeof define&&define.amd?define([],i):"object"===typeof exports?exports["scroll"]=i():t["scroll"]=i()})("undefined"!==typeof self?self:this,function(){return function(t){var i={};function e(s){if(i[s])return i[s].exports;var o=i[s]={i:s,l:!1,exports:{}};return t[s].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=t,e.c=i,e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:s})},e.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"===typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(e.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var o in t)e.d(s,o,function(i){return t[i]}.bind(null,o));return s},e.n=function(t){var i=t&&t.__esModule?function(){return t["default"]}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s="9c03")}({"0a82":function(t,i,e){var s=e("170f");"string"===typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);var o=e("85cb").default;o("244ca892",s,!0,{sourceMap:!1,shadowMode:!1})},"109e":function(t,i,e){"use strict";var s=e("0a82"),o=e.n(s);o.a},"170f":function(t,i,e){i=t.exports=e("690e")(!1),i.push([t.i,".pulldown[data-v-7ca1b9e2]{position:absolute;left:0;top:-60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:60px}",""])},"2f7c":function(t,i,e){i=t.exports=e("690e")(!1),i.push([t.i,".pswp__preloader__icn[data-v-ea894aa6]{opacity:.75;width:24px;height:24px;-webkit-animation:clockwise-data-v-ea894aa6 .5s linear infinite;animation:clockwise-data-v-ea894aa6 .5s linear infinite}.pswp__preloader__cut[data-v-ea894aa6]{position:relative;width:12px;height:24px;overflow:hidden;position:absolute;top:0;left:0}.pswp__preloader__donut[data-v-ea894aa6]{-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;border:2px solid #000;border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;position:absolute;top:0;left:0;background:none;margin:0;-webkit-animation:donut-rotate-data-v-ea894aa6 1s cubic-bezier(.4,0,.22,1) infinite;animation:donut-rotate-data-v-ea894aa6 1s cubic-bezier(.4,0,.22,1) infinite}@-webkit-keyframes clockwise-data-v-ea894aa6{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes clockwise-data-v-ea894aa6{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes donut-rotate-data-v-ea894aa6{0%{-webkit-transform:rotate(0)}50%{-webkit-transform:rotate(-140deg)}to{-webkit-transform:rotate(0)}}@keyframes donut-rotate-data-v-ea894aa6{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(-140deg);transform:rotate(-140deg)}to{-webkit-transform:rotate(0);transform:rotate(0)}}",""])},3933:function(t,i,e){var s=e("2f7c");"string"===typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);var o=e("85cb").default;o("c2820d5e",s,!0,{sourceMap:!1,shadowMode:!1})},"690e":function(t,i){function e(t,i){var e=t[1]||"",o=t[3];if(!o)return e;if(i&&"function"===typeof btoa){var n=s(o),r=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[e].concat(r).concat([n]).join("\n")}return[e].join("\n")}function s(t){var i=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),e="sourceMappingURL=data:application/json;charset=utf-8;base64,"+i;return"/*# "+e+" */"}t.exports=function(t){var i=[];return i.toString=function(){return this.map(function(i){var s=e(i,t);return i[2]?"@media "+i[2]+"{"+s+"}":s}).join("")},i.i=function(t,e){"string"===typeof t&&(t=[[null,t,""]]);for(var s={},o=0;o<this.length;o++){var n=this[o][0];"number"===typeof n&&(s[n]=!0)}for(o=0;o<t.length;o++){var r=t[o];"number"===typeof r[0]&&s[r[0]]||(e&&!r[2]?r[2]=e:e&&(r[2]="("+r[2]+") and ("+e+")"),i.push(r))}},i}},"698b":function(t,i,e){"use strict";var s=e("ae40"),o=e.n(s);o.a},"85cb":function(t,i,e){"use strict";function s(t,i){for(var e=[],s={},o=0;o<i.length;o++){var n=i[o],r=n[0],a=n[1],h=n[2],l=n[3],c={id:t+":"+o,css:a,media:h,sourceMap:l};s[r]?s[r].parts.push(c):e.push(s[r]={id:r,parts:[c]})}return e}e.r(i),e.d(i,"default",function(){return f});var o="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var n={},r=o&&(document.head||document.getElementsByTagName("head")[0]),a=null,h=0,l=!1,c=function(){},p=null,u="data-vue-ssr-id",d="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(t,i,e,o){l=e,p=o||{};var r=s(t,i);return m(r),function(i){for(var e=[],o=0;o<r.length;o++){var a=r[o],h=n[a.id];h.refs--,e.push(h)}i?(r=s(t,i),m(r)):r=[];for(o=0;o<e.length;o++){h=e[o];if(0===h.refs){for(var l=0;l<h.parts.length;l++)h.parts[l]();delete n[h.id]}}}}function m(t){for(var i=0;i<t.length;i++){var e=t[i],s=n[e.id];if(s){s.refs++;for(var o=0;o<s.parts.length;o++)s.parts[o](e.parts[o]);for(;o<e.parts.length;o++)s.parts.push(v(e.parts[o]));s.parts.length>e.parts.length&&(s.parts.length=e.parts.length)}else{var r=[];for(o=0;o<e.parts.length;o++)r.push(v(e.parts[o]));n[e.id]={id:e.id,refs:1,parts:r}}}}function g(){var t=document.createElement("style");return t.type="text/css",r.appendChild(t),t}function v(t){var i,e,s=document.querySelector("style["+u+'~="'+t.id+'"]');if(s){if(l)return c;s.parentNode.removeChild(s)}if(d){var o=h++;s=a||(a=g()),i=w.bind(null,s,o,!1),e=w.bind(null,s,o,!0)}else s=g(),i=b.bind(null,s),e=function(){s.parentNode.removeChild(s)};return i(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;i(t=s)}else e()}}var y=function(){var t=[];return function(i,e){return t[i]=e,t.filter(Boolean).join("\n")}}();function w(t,i,e,s){var o=e?"":s.css;if(t.styleSheet)t.styleSheet.cssText=y(i,o);else{var n=document.createTextNode(o),r=t.childNodes;r[i]&&t.removeChild(r[i]),r.length?t.insertBefore(n,r[i]):t.appendChild(n)}}function b(t,i){var e=i.css,s=i.media,o=i.sourceMap;if(s&&t.setAttribute("media",s),p.ssrId&&t.setAttribute(u,i.id),o&&(e+="\n/*# sourceURL="+o.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=e;else{while(t.firstChild)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},"9c03":function(t,i,e){"use strict";var s;(e.r(i),"undefined"!==typeof window)&&(e("e67d"),(s=window.document.currentScript)&&(s=s.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(e.p=s[1]));var o=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{ref:"wrapper"},[e("div",{staticClass:"contantView"},[e("div",{ref:"listWrapper"},[t._t("default"),t._t("pullup",null,{finishPullUp:t.pullUpDirty})],2),e("div",{staticClass:"pulldown"},[t.pullDownRefresh?t._t("pulldown",[e("Loading",{attrs:{isPullingDownStatus:t.isPullingDownStatus,isPullingDown:t.isPullingDown,isTouchEndStatus:t.isTouchEndStatus}})],{isPullingDownStatus:t.isPullingDownStatus,isPullingDown:t.isPullingDown}):t._e()],2)])])},n=[];
2 | /*!
3 |  * better-normal-scroll v1.15.2
4 |  * (c) 2016-2019 ustbhuangyi
5 |  * Released under the MIT License.
6 |  */
7 | function r(t,i){for(;i+1<t.length;i++)t[i]=t[i+1];t.pop()}var a=function(){function t(t,i){var e=[],s=!0,o=!1,n=void 0;try{for(var r,a=t[Symbol.iterator]();!(s=(r=a.next()).done);s=!0)if(e.push(r.value),i&&e.length===i)break}catch(h){o=!0,n=h}finally{try{!s&&a["return"]&&a["return"]()}finally{if(o)throw n}}return e}return function(i,e){if(Array.isArray(i))return i;if(Symbol.iterator in Object(i))return t(i,e);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),h=function(t){if(Array.isArray(t)){for(var i=0,e=Array(t.length);i<t.length;i++)e[i]=t[i];return e}return Array.from(t)};function l(t){t.prototype.on=function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this;this._events[t]||(this._events[t]=[]),this._events[t].push([i,e])},t.prototype.once=function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this;function s(){this.off(t,s),i.apply(e,arguments)}s.fn=i,this.on(t,s)},t.prototype.off=function(t,i){var e=this._events[t];if(e){var s=e.length;while(s--)(e[s][0]===i||e[s][0]&&e[s][0].fn===i)&&r(e,s)}},t.prototype.trigger=function(t){var i=this._events[t];if(i)for(var e=i.length,s=[].concat(h(i)),o=0;o<e;o++){var n=s[o],r=a(n,2),l=r[0],c=r[1];l&&l.apply(c,[].slice.call(arguments,1))}}}var c="undefined"!==typeof window,p=c&&navigator.userAgent.toLowerCase(),u=p&&/wechatdevtools/.test(p),d=p&&p.indexOf("android")>0;function f(){return window.performance&&window.performance.now?window.performance.now()+window.performance.timing.navigationStart:+new Date}function m(t){for(var i=arguments.length,e=Array(i>1?i-1:0),s=1;s<i;s++)e[s-1]=arguments[s];for(var o=0;o<e.length;o++){var n=e[o];for(var r in n)t[r]=n[r]}return t}function g(t){return void 0===t||null===t}function v(t,i){return Math.sqrt(t*t+i*i)}var y=c&&document.createElement("div").style,w=function(){if(!c)return!1;var t={standard:"transform",webkit:"webkitTransform",Moz:"MozTransform",O:"OTransform",ms:"msTransform"};for(var i in t)if(void 0!==y[t[i]])return i;return!1}();function b(t){return!1!==w&&("standard"===w?"transitionEnd"===t?"transitionend":t:w+t.charAt(0).toUpperCase()+t.substr(1))}function x(t,i,e,s){t.addEventListener(i,e,{passive:!1,capture:!!s})}function T(t,i,e,s){t.removeEventListener(i,e,{passive:!1,capture:!!s})}function S(t){var i=0,e=0;while(t)i-=t.offsetLeft,e-=t.offsetTop,t=t.offsetParent;return{left:i,top:e}}function _(t){var i=t.getBoundingClientRect();return{left:-(i.left+window.pageXOffset),top:-(i.top+window.pageYOffset)}}var P=w&&"standard"!==w?"-"+w.toLowerCase()+"-":"",Y=b("transform"),X=b("transition"),D=c&&b("perspective")in y,M=c&&("ontouchstart"in window||u),E=!1!==Y,k=c&&X in y,I={transform:Y,transition:X,transitionTimingFunction:b("transitionTimingFunction"),transitionDuration:b("transitionDuration"),transitionDelay:b("transitionDelay"),transformOrigin:b("transformOrigin"),transitionEnd:b("transitionEnd")},C=1,W=2,z={touchstart:C,touchmove:C,touchend:C,mousedown:W,mousemove:W,mouseup:W};function O(t){if(t instanceof window.SVGElement){var i=t.getBoundingClientRect();return{top:i.top,left:i.left,width:i.width,height:i.height}}return{top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth,height:t.offsetHeight}}function A(t,i){for(var e in i)if(i[e].test(t[e]))return!0;return!1}function H(t,i){var e=document.createEvent("Event");e.initEvent(i,!0,!0),e.pageX=t.pageX,e.pageY=t.pageY,t.target.dispatchEvent(e)}function L(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"click",e=void 0;"mouseup"===t.type||"mousecancel"===t.type?e=t:"touchend"!==t.type&&"touchcancel"!==t.type||(e=t.changedTouches[0]);var s={};e&&(s.screenX=e.screenX||0,s.screenY=e.screenY||0,s.clientX=e.clientX||0,s.clientY=e.clientY||0);var o=void 0,n=!0,r=!0;if("undefined"!==typeof MouseEvent)try{o=new MouseEvent(i,m({bubbles:n,cancelable:r},s))}catch(t){a()}else a();function a(){o=document.createEvent("Event"),o.initEvent(i,n,r),m(o,s)}o.forwardedTouchEvent=!0,o._constructed=!0,t.target.dispatchEvent(o)}function U(t){L(t,"dblclick")}function R(t,i){i.firstChild?N(t,i.firstChild):i.appendChild(t)}function N(t,i){i.parentNode.insertBefore(t,i)}function B(t,i){t.removeChild(i)}var V={startX:0,startY:0,scrollX:!1,scrollY:!0,freeScroll:!1,directionLockThreshold:5,eventPassthrough:"",click:!1,tap:!1,bounce:!0,bounceTime:800,momentum:!0,momentumLimitTime:300,momentumLimitDistance:15,swipeTime:2500,swipeBounceTime:500,deceleration:.0015,flickLimitTime:200,flickLimitDistance:100,resizePolling:60,probeType:0,preventDefault:!0,preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/},HWCompositing:!0,useTransition:!0,useTransform:!0,bindToWrapper:!1,disableMouse:M,disableTouch:!M,observeDOM:!0,autoBlur:!0,wheel:!1,snap:!1,scrollbar:!1,pullDownRefresh:!1,pullUpLoad:!1,mouseWheel:!1,stopPropagation:!1,zoom:!1,infinity:!1,dblclick:!1};function j(t){t.prototype._init=function(t){this._handleOptions(t),this._events={},this.x=0,this.y=0,this.directionX=0,this.directionY=0,this.setScale(1),this._addDOMEvents(),this._initExtFeatures(),this._watchTransition(),this.options.observeDOM&&this._initDOMObserver(),this.options.autoBlur&&this._handleAutoBlur(),this.refresh(),this.options.snap||this.scrollTo(this.options.startX,this.options.startY),this.enable()},t.prototype.setScale=function(t){this.lastScale=g(this.scale)?t:this.scale,this.scale=t},t.prototype._handleOptions=function(t){this.options=m({},V,t),this.translateZ=this.options.HWCompositing&&D?" translateZ(0)":"",this.options.useTransition=this.options.useTransition&&k,this.options.useTransform=this.options.useTransform&&E,this.options.preventDefault=!this.options.eventPassthrough&&this.options.preventDefault,this.options.scrollX="horizontal"!==this.options.eventPassthrough&&this.options.scrollX,this.options.scrollY="vertical"!==this.options.eventPassthrough&&this.options.scrollY,this.options.freeScroll=this.options.freeScroll&&!this.options.eventPassthrough,this.options.directionLockThreshold=this.options.eventPassthrough?0:this.options.directionLockThreshold,!0===this.options.tap&&(this.options.tap="tap")},t.prototype._addDOMEvents=function(){var t=x;this._handleDOMEvents(t)},t.prototype._removeDOMEvents=function(){var t=T;this._handleDOMEvents(t)},t.prototype._handleDOMEvents=function(t){var i=this.options.bindToWrapper?this.wrapper:window;t(window,"orientationchange",this),t(window,"resize",this),this.options.click&&t(this.wrapper,"click",this,!0),this.options.disableMouse||(t(this.wrapper,"mousedown",this),t(i,"mousemove",this),t(i,"mousecancel",this),t(i,"mouseup",this)),M&&!this.options.disableTouch&&(t(this.wrapper,"touchstart",this),t(i,"touchmove",this),t(i,"touchcancel",this),t(i,"touchend",this)),t(this.scroller,I.transitionEnd,this)},t.prototype._initExtFeatures=function(){this.options.snap&&this._initSnap(),this.options.scrollbar&&this._initScrollbar(),this.options.pullUpLoad&&this._initPullUp(),this.options.pullDownRefresh&&this._initPullDown(),this.options.wheel&&this._initWheel(),this.options.mouseWheel&&this._initMouseWheel(),this.options.zoom&&this._initZoom(),this.options.infinity&&this._initInfinite()},t.prototype._watchTransition=function(){if("function"===typeof Object.defineProperty){var t=this,i=!1,e=this.options.useTransition?"isInTransition":"isAnimating";Object.defineProperty(this,e,{get:function(){return i},set:function(e){i=e;for(var s=t.scroller.children.length?t.scroller.children:[t.scroller],o=i&&!t.pulling?"none":"auto",n=0;n<s.length;n++)s[n].style.pointerEvents=o}})}},t.prototype._handleAutoBlur=function(){this.on("scrollStart",function(){var t=document.activeElement;!t||"INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName||t.blur()})},t.prototype._initDOMObserver=function(){var t=this;if("undefined"!==typeof MutationObserver){var i=void 0,e=new MutationObserver(function(e){if(!t._shouldNotRefresh()){for(var s=!1,o=!1,n=0;n<e.length;n++){var r=e[n];if("attributes"!==r.type){s=!0;break}if(r.target!==t.scroller){o=!0;break}}s?t.refresh():o&&(clearTimeout(i),i=setTimeout(function(){t._shouldNotRefresh()||t.refresh()},60))}}),s={attributes:!0,childList:!0,subtree:!0};e.observe(this.scroller,s),this.on("destroy",function(){e.disconnect()})}else this._checkDOMUpdate()},t.prototype._shouldNotRefresh=function(){var t=this.x>this.minScrollX||this.x<this.maxScrollX||this.y>this.minScrollY||this.y<this.maxScrollY;return this.isInTransition||this.stopFromTransition||t},t.prototype._checkDOMUpdate=function(){var t=O(this.scroller),i=t.width,e=t.height;function s(){if(!this.destroyed){t=O(this.scroller);var s=t.width,n=t.height;i===s&&e===n||this.refresh(),i=s,e=n,o.call(this)}}function o(){var t=this;setTimeout(function(){s.call(t)},1e3)}o.call(this)},t.prototype.handleEvent=function(t){switch(t.type){case"touchstart":case"mousedown":this._start(t),this.options.zoom&&t.touches&&t.touches.length>1&&this._zoomStart(t);break;case"touchmove":case"mousemove":this.options.zoom&&t.touches&&t.touches.length>1?this._zoom(t):this._move(t);break;case"touchend":case"mouseup":case"touchcancel":case"mousecancel":this.scaled?this._zoomEnd(t):this._end(t);break;case"orientationchange":case"resize":this._resize();break;case"transitionend":case"webkitTransitionEnd":case"oTransitionEnd":case"MSTransitionEnd":this._transitionEnd(t);break;case"click":this.enabled&&!t._constructed&&(A(t.target,this.options.preventDefaultException)||(t.preventDefault(),t.stopPropagation()));break;case"wheel":case"DOMMouseScroll":case"mousewheel":this._onMouseWheel(t);break}},t.prototype.refresh=function(){var t="static"===window.getComputedStyle(this.wrapper,null).position,i=O(this.wrapper);this.wrapperWidth=i.width,this.wrapperHeight=i.height;var e=O(this.scroller);this.scrollerWidth=Math.round(e.width*this.scale),this.scrollerHeight=Math.round(e.height*this.scale),this.relativeX=e.left,this.relativeY=e.top,t&&(this.relativeX-=i.left,this.relativeY-=i.top),this.minScrollX=0,this.minScrollY=0;var s=this.options.wheel;s?(this.items=this.scroller.children,this._checkWheelAllDisabled(),this.options.itemHeight=this.itemHeight=this.items.length?this.scrollerHeight/this.items.length:0,void 0===this.selectedIndex&&(this.selectedIndex=s.selectedIndex||0),this.options.startY=-this.selectedIndex*this.itemHeight,this.maxScrollX=0,this.maxScrollY=-this.itemHeight*(this.items.length-1)):(this.maxScrollX=this.wrapperWidth-this.scrollerWidth,this.options.infinity||(this.maxScrollY=this.wrapperHeight-this.scrollerHeight),this.maxScrollX<0?(this.maxScrollX-=this.relativeX,this.minScrollX=-this.relativeX):this.scale>1&&(this.maxScrollX=this.maxScrollX/2-this.relativeX,this.minScrollX=this.maxScrollX),this.maxScrollY<0?(this.maxScrollY-=this.relativeY,this.minScrollY=-this.relativeY):this.scale>1&&(this.maxScrollY=this.maxScrollY/2-this.relativeY,this.minScrollY=this.maxScrollY)),this.hasHorizontalScroll=this.options.scrollX&&this.maxScrollX<this.minScrollX,this.hasVerticalScroll=this.options.scrollY&&this.maxScrollY<this.minScrollY,this.hasHorizontalScroll||(this.maxScrollX=this.minScrollX,this.scrollerWidth=this.wrapperWidth),this.hasVerticalScroll||(this.maxScrollY=this.minScrollY,this.scrollerHeight=this.wrapperHeight),this.endTime=0,this.directionX=0,this.directionY=0,this.wrapperOffset=S(this.wrapper),this.trigger("refresh"),!this.scaled&&this.resetPosition()},t.prototype.enable=function(){this.enabled=!0},t.prototype.disable=function(){this.enabled=!1}}var F={swipe:{style:"cubic-bezier(0.23, 1, 0.32, 1)",fn:function(t){return 1+--t*t*t*t*t}},swipeBounce:{style:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",fn:function(t){return t*(2-t)}},bounce:{style:"cubic-bezier(0.165, 0.84, 0.44, 1)",fn:function(t){return 1- --t*t*t*t}}};function $(t,i,e,s,o,n,r,a){var h=t-i,l=Math.abs(h)/e,c=r.deceleration,p=r.itemHeight,u=r.swipeBounceTime,d=r.wheel,f=r.swipeTime,m=f,g=d?4:15,v=t+l/c*(h<0?-1:1);return d&&p&&(v=a._findNearestValidWheel(v).y),v<s?(v=n?Math.max(s-n/4,s-n/g*l):s,m=u):v>o&&(v=n?Math.min(o+n/4,o+n/g*l):o,m=u),{destination:Math.round(v),duration:m}}var q=100/60;function Z(){}var G=function(){return c?window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||function(t){return window.setTimeout(t,(t.interval||q)/2)}:Z}(),J=function(){return c?window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||function(t){window.clearTimeout(t)}:Z}(),K=1,Q=-1,tt=1,it=-1,et=1,st=3;function ot(t){console.error("[BScroll warn]: "+t)}function nt(t,i){if(!t)throw new Error("[BScroll] "+i)}function rt(t){t.prototype._start=function(t){var i=z[t.type];if((i===C||0===t.button)&&!(!this.enabled||this.destroyed||this.initiated&&this.initiated!==i)){this.initiated=i,this.options.preventDefault&&!A(t.target,this.options.preventDefaultException)&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation(),this.moved=!1,this.distX=0,this.distY=0,this.directionX=0,this.directionY=0,this.movingDirectionX=0,this.movingDirectionY=0,this.directionLocked=0,this._transitionTime(),this.startTime=f(),this.options.wheel&&(this.target=t.target),this.stop();var e=t.touches?t.touches[0]:t;this.startX=this.x,this.startY=this.y,this.absStartX=this.x,this.absStartY=this.y,this.pointX=e.pageX,this.pointY=e.pageY,this.trigger("beforeScrollStart")}},t.prototype._move=function(t){if(this.enabled&&!this.destroyed&&z[t.type]===this.initiated){this.options.preventDefault&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation();var i=t.touches?t.touches[0]:t,e=i.pageX-this.pointX,s=i.pageY-this.pointY;this.pointX=i.pageX,this.pointY=i.pageY,this.distX+=e,this.distY+=s;var o=Math.abs(this.distX),n=Math.abs(this.distY),r=f();if(!(r-this.endTime>this.options.momentumLimitTime&&!this.moved&&n<this.options.momentumLimitDistance&&o<this.options.momentumLimitDistance)){if(this.directionLocked||this.options.freeScroll||(o>n+this.options.directionLockThreshold?this.directionLocked="h":n>=o+this.options.directionLockThreshold?this.directionLocked="v":this.directionLocked="n"),"h"===this.directionLocked){if("vertical"===this.options.eventPassthrough)t.preventDefault();else if("horizontal"===this.options.eventPassthrough)return void(this.initiated=!1);s=0}else if("v"===this.directionLocked){if("horizontal"===this.options.eventPassthrough)t.preventDefault();else if("vertical"===this.options.eventPassthrough)return void(this.initiated=!1);e=0}e=this.hasHorizontalScroll?e:0,s=this.hasVerticalScroll?s:0,this.movingDirectionX=e>0?it:e<0?tt:0,this.movingDirectionY=s>0?Q:s<0?K:0;var a=this.x+e,h=this.y+s,l=!1,c=!1,p=!1,u=!1,d=this.options.bounce;!1!==d&&(l=void 0===d.top||d.top,c=void 0===d.bottom||d.bottom,p=void 0===d.left||d.left,u=void 0===d.right||d.right),(a>this.minScrollX||a<this.maxScrollX)&&(a=a>this.minScrollX&&p||a<this.maxScrollX&&u?this.x+e/3:a>this.minScrollX?this.minScrollX:this.maxScrollX),(h>this.minScrollY||h<this.maxScrollY)&&(h=h>this.minScrollY&&l||h<this.maxScrollY&&c?this.y+s/3:h>this.minScrollY?this.minScrollY:this.maxScrollY),this.moved||(this.moved=!0,this.trigger("scrollStart")),this._translate(a,h),r-this.startTime>this.options.momentumLimitTime&&(this.startTime=r,this.startX=this.x,this.startY=this.y,this.options.probeType===et&&this.trigger("scroll",{x:this.x,y:this.y})),this.options.probeType>et&&this.trigger("scroll",{x:this.x,y:this.y});var m=document.documentElement.scrollLeft||window.pageXOffset||document.body.scrollLeft,g=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop,v=this.pointX-m,y=this.pointY-g;(v>document.documentElement.clientWidth-this.options.momentumLimitDistance||v<this.options.momentumLimitDistance||y<this.options.momentumLimitDistance||y>document.documentElement.clientHeight-this.options.momentumLimitDistance)&&this._end(t)}}},t.prototype._end=function(t){if(this.enabled&&!this.destroyed&&z[t.type]===this.initiated){this.initiated=!1,this.options.preventDefault&&!A(t.target,this.options.preventDefaultException)&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation(),this.trigger("touchEnd",{x:this.x,y:this.y}),this.isInTransition=!1;var i=Math.round(this.x),e=Math.round(this.y),s=i-this.absStartX,o=e-this.absStartY;if(this.directionX=s>0?it:s<0?tt:0,this.directionY=o>0?Q:o<0?K:0,!this.options.pullDownRefresh||!this._checkPullDown())if(this._checkClick(t))this.trigger("scrollCancel");else if(!this.resetPosition(this.options.bounceTime,F.bounce)){this._translate(i,e),this.endTime=f();var n=this.endTime-this.startTime,r=Math.abs(i-this.startX),a=Math.abs(e-this.startY);if(this._events.flick&&n<this.options.flickLimitTime&&r<this.options.flickLimitDistance&&a<this.options.flickLimitDistance)this.trigger("flick");else{var h=0;if(this.options.momentum&&n<this.options.momentumLimitTime&&(a>this.options.momentumLimitDistance||r>this.options.momentumLimitDistance)){var l=!1,c=!1,p=!1,u=!1,d=this.options.bounce;!1!==d&&(l=void 0===d.top||d.top,c=void 0===d.bottom||d.bottom,p=void 0===d.left||d.left,u=void 0===d.right||d.right);var m=this.directionX===it&&p||this.directionX===tt&&u?this.wrapperWidth:0,g=this.directionY===Q&&l||this.directionY===K&&c?this.wrapperHeight:0,v=this.hasHorizontalScroll?$(this.x,this.startX,n,this.maxScrollX,this.minScrollX,m,this.options,this):{destination:i,duration:0},y=this.hasVerticalScroll?$(this.y,this.startY,n,this.maxScrollY,this.minScrollY,g,this.options,this):{destination:e,duration:0};i=v.destination,e=y.destination,h=Math.max(v.duration,y.duration),this.isInTransition=!0}else this.options.wheel&&(e=this._findNearestValidWheel(e).y,h=this.options.wheel.adjustTime||400);var w=F.swipe;if(this.options.snap){var b=this._nearestSnap(i,e);this.currentPage=b,h=this.options.snapSpeed||Math.max(Math.max(Math.min(Math.abs(i-b.x),1e3),Math.min(Math.abs(e-b.y),1e3)),300),i=b.x,e=b.y,this.directionX=0,this.directionY=0,w=this.options.snap.easing||F.bounce}if(i!==this.x||e!==this.y)return(i>this.minScrollX||i<this.maxScrollX||e>this.minScrollY||e<this.maxScrollY)&&(w=F.swipeBounce),void this.scrollTo(i,e,h,w);this.options.wheel&&(this.selectedIndex=this._findNearestValidWheel(this.y).index),this.trigger("scrollEnd",{x:this.x,y:this.y})}}}},t.prototype._checkClick=function(t){var i=this.stopFromTransition&&!this.pulling;if(this.stopFromTransition=!1,!this.moved){if(this.options.wheel){if(this.target&&this.target.className===this.options.wheel.wheelWrapperClass){var e=this._findNearestValidWheel(this.y).index,s=Math.round((this.pointY+_(this.wrapper).top-this.wrapperHeight/2)/this.itemHeight);this.target=this.items[e+s]}var o=S(this.target).top,n=S(this.target).left;return o-=this.wrapperOffset.top,o-=Math.round(this.target.offsetHeight/2-this.wrapper.offsetHeight/2)||0,n-=this.wrapperOffset.left,n-=Math.round(this.target.offsetWidth/2-this.wrapper.offsetWidth/2)||0,o=this._findNearestValidWheel(o).y,this.scrollTo(n,o,this.options.wheel.adjustTime||400,F.swipe),!0}if(!i){var r=this.options.dblclick,a=!1;if(r&&this.lastClickTime){var h=r.delay,l=void 0===h?300:h;f()-this.lastClickTime<l&&(a=!0,U(t))}return this.options.tap&&H(t,this.options.tap),this.options.click&&!A(t.target,this.options.preventDefaultException)&&L(t),this.lastClickTime=a?null:f(),!0}return!1}return!1},t.prototype._resize=function(){var t=this;this.enabled&&(d&&(this.wrapper.scrollTop=0),clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(function(){t.refresh()},this.options.resizePolling))},t.prototype._startProbe=function(){J(this.probeTimer),this.probeTimer=G(i);var t=this;function i(){var e=t.getComputedPosition();t.trigger("scroll",e),t.isInTransition?t.probeTimer=G(i):t.trigger("scrollEnd",e)}},t.prototype._transitionTime=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;if(this.scrollerStyle[I.transitionDuration]=t+"ms",this.options.wheel)for(var i=0;i<this.items.length;i++)this.items[i].style[I.transitionDuration]=t+"ms";if(this.indicators)for(var e=0;e<this.indicators.length;e++)this.indicators[e].transitionTime(t)},t.prototype._transitionTimingFunction=function(t){if(this.scrollerStyle[I.transitionTimingFunction]=t,this.options.wheel)for(var i=0;i<this.items.length;i++)this.items[i].style[I.transitionTimingFunction]=t;if(this.indicators)for(var e=0;e<this.indicators.length;e++)this.indicators[e].transitionTimingFunction(t)},t.prototype._transitionEnd=function(t){if(t.target===this.scroller&&this.isInTransition){this._transitionTime();var i=!this.pulling||this.movingDirectionY===K;i&&!this.resetPosition(this.options.bounceTime,F.bounce)&&(this.isInTransition=!1,this.options.probeType!==st&&this.trigger("scrollEnd",{x:this.x,y:this.y}))}},t.prototype._translate=function(t,i,e){if(nt(!g(t)&&!g(i),"Translate x or y is null or undefined."),g(e)&&(e=this.scale),this.options.useTransform?this.scrollerStyle[I.transform]="translate("+t+"px,"+i+"px) scale("+e+")"+this.translateZ:(t=Math.round(t),i=Math.round(i),this.scrollerStyle.left=t+"px",this.scrollerStyle.top=i+"px"),this.options.wheel)for(var s=this.options.wheel.rotate,o=void 0===s?25:s,n=0;n<this.items.length;n++){var r=o*(i/this.itemHeight+n);this.items[n].style[I.transform]="rotateX("+r+"deg)"}if(this.x=t,this.y=i,this.setScale(e),this.indicators)for(var a=0;a<this.indicators.length;a++)this.indicators[a].updatePosition()},t.prototype._animate=function(t,i,e,s){var o=this,n=this.x,r=this.y,a=this.lastScale,h=this.scale,l=f(),c=l+e;function p(){var u=f();if(u>=c)return o.isAnimating=!1,o._translate(t,i,h),o.trigger("scroll",{x:o.x,y:o.y}),void(o.pulling||o.resetPosition(o.options.bounceTime)||o.trigger("scrollEnd",{x:o.x,y:o.y}));u=(u-l)/e;var d=s(u),m=(t-n)*d+n,g=(i-r)*d+r,v=(h-a)*d+a;o._translate(m,g,v),o.isAnimating&&(o.animateTimer=G(p)),o.options.probeType===st&&o.trigger("scroll",{x:o.x,y:o.y})}this.isAnimating=!0,J(this.animateTimer),p()},t.prototype.scrollBy=function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:F.bounce;t=this.x+t,i=this.y+i,this.scrollTo(t,i,e,s)},t.prototype.scrollTo=function(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:F.bounce,o=arguments[4];if(this.options.wheel&&(i=this._findNearestValidWheel(i).y),t!==this.x||i!==this.y)if(this.isInTransition=this.options.useTransition&&e>0&&(this.x!==t||this.y!==i),!e||this.options.useTransition){if(this._transitionTimingFunction(s.style),this._transitionTime(e),this._translate(t,i),e&&this.options.probeType===st&&this._startProbe(),!e&&!o){if(this.options.zoom)return;this.trigger("scroll",{x:t,y:i}),this._reflow=document.body.offsetHeight,this.resetPosition(this.options.bounceTime,F.bounce)||this.trigger("scrollEnd",{x:t,y:i})}this.options.wheel&&(this.selectedIndex=this._findNearestValidWheel(i).index)}else this._animate(t,i,e,s.fn)},t.prototype.scrollToElement=function(t,i,e,s,o){if(t&&(t=t.nodeType?t:this.scroller.querySelector(t),!this.options.wheel||t.classList.contains(this.options.wheel.wheelItemClass))){var n=S(t);n.left-=this.wrapperOffset.left,n.top-=this.wrapperOffset.top,!0===e&&(e=Math.round(t.offsetWidth/2-this.wrapper.offsetWidth/2)),!0===s&&(s=Math.round(t.offsetHeight/2-this.wrapper.offsetHeight/2)),n.left-=e||0,n.top-=s||0,n.left=n.left>this.minScrollX?this.minScrollX:n.left<this.maxScrollX?this.maxScrollX:n.left,n.top=n.top>this.minScrollY?this.minScrollY:n.top<this.maxScrollY?this.maxScrollY:n.top,this.options.wheel&&(n.top=this._findNearestValidWheel(n.top).y),this.scrollTo(n.left,n.top,i,o)}},t.prototype.resetPosition=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:F.bounce,e=this.x,s=Math.round(e);!this.hasHorizontalScroll||s>this.minScrollX?e=this.minScrollX:s<this.maxScrollX&&(e=this.maxScrollX);var o=this.y,n=Math.round(o);return!this.hasVerticalScroll||n>this.minScrollY?o=this.minScrollY:n<this.maxScrollY&&(o=this.maxScrollY),(e!==this.x||o!==this.y)&&(this.scrollTo(e,o,t,i),!0)},t.prototype.getComputedPosition=function(){var t=window.getComputedStyle(this.scroller,null),i=void 0,e=void 0;return this.options.useTransform?(t=t[I.transform].split(")")[0].split(", "),i=+(t[12]||t[4]),e=+(t[13]||t[5])):(i=+t.left.replace(/[^-\d.]/g,""),e=+t.top.replace(/[^-\d.]/g,"")),{x:i,y:e}},t.prototype.stop=function(){if(this.options.useTransition&&this.isInTransition){this.isInTransition=!1,J(this.probeTimer);var t=this.getComputedPosition();this._translate(t.x,t.y),this.options.wheel?this.target=this.items[this._findNearestValidWheel(t.y).index]:this.trigger("scrollEnd",{x:this.x,y:this.y}),this.stopFromTransition=!0}else!this.options.useTransition&&this.isAnimating&&(this.isAnimating=!1,J(this.animateTimer),this.trigger("scrollEnd",{x:this.x,y:this.y}),this.stopFromTransition=!0)},t.prototype.destroy=function(){this.destroyed=!0,this.trigger("destroy"),this.options.useTransition?J(this.probeTimer):J(this.animateTimer),this._removeDOMEvents(),this._events={}}}function at(t){t.prototype._initSnap=function(){var t=this;this.currentPage={};var i=this.options.snap;if(i.loop){var e=this.scroller.children;e.length>1?(R(e[e.length-1].cloneNode(!0),this.scroller),this.scroller.appendChild(e[1].cloneNode(!0))):i.loop=!1}var s=i.el;"string"===typeof s&&(s=this.scroller.querySelectorAll(s)),this.on("refresh",function(){if(t.pages=[],t.wrapperWidth&&t.wrapperHeight&&t.scrollerWidth&&t.scrollerHeight){var e=i.stepX||t.wrapperWidth,o=i.stepY||t.wrapperHeight,n=0,r=void 0,a=void 0,h=void 0,l=0,c=void 0,p=0,u=void 0,d=void 0;if(s)for(c=s.length,u=-1;l<c;l++)d=O(s[l]),(0===l||d.left<=O(s[l-1]).left)&&(p=0,u++),t.pages[p]||(t.pages[p]=[]),n=Math.max(-d.left,t.maxScrollX),r=Math.max(-d.top,t.maxScrollY),a=n-Math.round(d.width/2),h=r-Math.round(d.height/2),t.pages[p][u]={x:n,y:r,width:d.width,height:d.height,cx:a,cy:h},n>t.maxScrollX&&p++;else{a=Math.round(e/2),h=Math.round(o/2);while(n>-t.scrollerWidth){t.pages[l]=[],c=0,r=0;while(r>-t.scrollerHeight)t.pages[l][c]={x:Math.max(n,t.maxScrollX),y:Math.max(r,t.maxScrollY),width:e,height:o,cx:n-a,cy:r-h},r-=o,c++;n-=e,l++}}t._checkSnapLoop();var f=i._loopX?1:0,m=i._loopY?1:0;t._goToPage(t.currentPage.pageX||f,t.currentPage.pageY||m,0,void 0,!0);var g=i.threshold;g%1===0?(t.snapThresholdX=g,t.snapThresholdY=g):(t.snapThresholdX=Math.round(t.pages[t.currentPage.pageX][t.currentPage.pageY].width*g),t.snapThresholdY=Math.round(t.pages[t.currentPage.pageX][t.currentPage.pageY].height*g))}}),this.on("scrollEnd",function(){i.loop&&(i._loopX?(0===t.currentPage.pageX&&t._goToPage(t.pages.length-2,t.currentPage.pageY,0,void 0,!0),t.currentPage.pageX===t.pages.length-1&&t._goToPage(1,t.currentPage.pageY,0,void 0,!0)):(0===t.currentPage.pageY&&t._goToPage(t.currentPage.pageX,t.pages[0].length-2,0,void 0,!0),t.currentPage.pageY===t.pages[0].length-1&&t._goToPage(t.currentPage.pageX,1,0,void 0,!0)))}),!1!==i.listenFlick&&this.on("flick",function(){var e=i.speed||Math.max(Math.max(Math.min(Math.abs(t.x-t.startX),1e3),Math.min(Math.abs(t.y-t.startY),1e3)),300);t._goToPage(t.currentPage.pageX+t.directionX,t.currentPage.pageY+t.directionY,e)}),this.on("destroy",function(){if(i.loop){var e=t.scroller.children;e.length>2&&(B(t.scroller,e[e.length-1]),B(t.scroller,e[0]))}})},t.prototype._checkSnapLoop=function(){var t=this.options.snap;t.loop&&this.pages&&this.pages.length&&(this.pages.length>1&&(t._loopX=!0),this.pages[0]&&this.pages[0].length>1&&(t._loopY=!0),t._loopX&&t._loopY&&ot("Loop does not support two direction at the same time."))},t.prototype._nearestSnap=function(t,i){if(!this.pages.length)return{x:0,y:0,pageX:0,pageY:0};var e=0;if(Math.abs(t-this.absStartX)<=this.snapThresholdX&&Math.abs(i-this.absStartY)<=this.snapThresholdY)return this.currentPage;t>this.minScrollX?t=this.minScrollX:t<this.maxScrollX&&(t=this.maxScrollX),i>this.minScrollY?i=this.minScrollY:i<this.maxScrollY&&(i=this.maxScrollY);for(var s=this.pages.length;e<s;e++)if(t>=this.pages[e][0].cx){t=this.pages[e][0].x;break}s=this.pages[e].length;for(var o=0;o<s;o++)if(i>=this.pages[0][o].cy){i=this.pages[0][o].y;break}return e===this.currentPage.pageX&&(e+=this.directionX,e<0?e=0:e>=this.pages.length&&(e=this.pages.length-1),t=this.pages[e][0].x),o===this.currentPage.pageY&&(o+=this.directionY,o<0?o=0:o>=this.pages[0].length&&(o=this.pages[0].length-1),i=this.pages[0][o].y),{x:t,y:i,pageX:e,pageY:o}},t.prototype._goToPage=function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,e=arguments[2],s=arguments[3],o=arguments[4],n=this.options.snap;if(n&&this.pages&&this.pages.length&&(s=s||n.easing||F.bounce,t>=this.pages.length?t=this.pages.length-1:t<0&&(t=0),this.pages[t])){i>=this.pages[t].length?i=this.pages[t].length-1:i<0&&(i=0);var r=this.pages[t][i].x,a=this.pages[t][i].y;e=void 0===e?n.speed||Math.max(Math.max(Math.min(Math.abs(r-this.x),1e3),Math.min(Math.abs(a-this.y),1e3)),300):e,this.currentPage={x:r,y:a,pageX:t,pageY:i},this.scrollTo(r,a,e,s,o)}},t.prototype.goToPage=function(t,i,e,s){var o=this.options.snap;if(o&&this.pages&&this.pages.length){if(o.loop){var n=void 0;o._loopX?(n=this.pages.length-2,t>=n?t=n-1:t<0&&(t=0),t+=1):(n=this.pages[0].length-2,i>=n?i=n-1:i<0&&(i=0),i+=1)}this._goToPage(t,i,e,s)}},t.prototype.next=function(t,i){var e=this.options.snap;if(e){var s=this.currentPage.pageX,o=this.currentPage.pageY;s++,s>=this.pages.length&&this.hasVerticalScroll&&(s=0,o++),this._goToPage(s,o,t,i)}},t.prototype.prev=function(t,i){var e=this.options.snap;if(e){var s=this.currentPage.pageX,o=this.currentPage.pageY;s--,s<0&&this.hasVerticalScroll&&(s=0,o--),this._goToPage(s,o,t,i)}},t.prototype.getCurrentPage=function(){var t=this.options.snap;if(!t)return null;if(t.loop){var i=void 0;return i=t._loopX?m({},this.currentPage,{pageX:this.currentPage.pageX-1}):m({},this.currentPage,{pageY:this.currentPage.pageY-1}),i}return this.currentPage}}function ht(t){t.prototype.wheelTo=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;if(this.options.wheel){var i=-t*this.itemHeight;this.scrollTo(0,i)}},t.prototype.getSelectedIndex=function(){return this.options.wheel&&this.selectedIndex},t.prototype._initWheel=function(){var t=this.options.wheel;t.wheelWrapperClass||(t.wheelWrapperClass="wheel-scroll"),t.wheelItemClass||(t.wheelItemClass="wheel-item"),t.wheelDisabledItemClass||(t.wheelDisabledItemClass="wheel-disabled-item"),void 0===t.selectedIndex&&(t.selectedIndex=0)},t.prototype._findNearestValidWheel=function(t){t=t>0?0:t<this.maxScrollY?this.maxScrollY:t;var i=this.options.wheel,e=Math.abs(Math.round(-t/this.itemHeight)),s=e,o=this.items;while(e>=0){if(-1===o[e].className.indexOf(i.wheelDisabledItemClass))break;e--}if(e<0){e=s;while(e<=o.length-1){if(-1===o[e].className.indexOf(i.wheelDisabledItemClass))break;e++}}return e===o.length&&(e=s),{index:this.wheelItemsAllDisabled?-1:e,y:-e*this.itemHeight}},t.prototype._checkWheelAllDisabled=function(){var t=this.options.wheel,i=this.items;this.wheelItemsAllDisabled=!0;for(var e=0;e<i.length;e++)if(-1===i[e].className.indexOf(t.wheelDisabledItemClass)){this.wheelItemsAllDisabled=!1;break}}}var lt=8;function ct(t){t.prototype._initScrollbar=function(){var t=this,i=this.options.scrollbar,e=i.fade,s=void 0===e||e,o=i.interactive,n=void 0!==o&&o;this.indicators=[];var r=void 0;this.options.scrollX&&(r={el:pt("horizontal"),direction:"horizontal",fade:s,interactive:n},this._insertScrollBar(r.el),this.indicators.push(new ut(this,r))),this.options.scrollY&&(r={el:pt("vertical"),direction:"vertical",fade:s,interactive:n},this._insertScrollBar(r.el),this.indicators.push(new ut(this,r))),this.on("refresh",function(){for(var i=0;i<t.indicators.length;i++)t.indicators[i].refresh()}),s&&(this.on("scrollEnd",function(){for(var i=0;i<t.indicators.length;i++)t.indicators[i].fade()}),this.on("scrollCancel",function(){for(var i=0;i<t.indicators.length;i++)t.indicators[i].fade()}),this.on("scrollStart",function(){for(var i=0;i<t.indicators.length;i++)t.indicators[i].fade(!0)}),this.on("beforeScrollStart",function(){for(var i=0;i<t.indicators.length;i++)t.indicators[i].fade(!0,!0)})),this.on("destroy",function(){t._removeScrollBars()})},t.prototype._insertScrollBar=function(t){this.wrapper.appendChild(t)},t.prototype._removeScrollBars=function(){for(var t=0;t<this.indicators.length;t++)this.indicators[t].destroy()}}function pt(t){var i=document.createElement("div"),e=document.createElement("div");return i.style.cssText="position:absolute;z-index:9999;pointerEvents:none",e.style.cssText="box-sizing:border-box;position:absolute;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);border-radius:3px;",e.className="bscroll-indicator","horizontal"===t?(i.style.cssText+=";height:7px;left:2px;right:2px;bottom:0",e.style.height="100%",i.className="bscroll-horizontal-scrollbar"):(i.style.cssText+=";width:7px;bottom:2px;top:2px;right:1px",e.style.width="100%",i.className="bscroll-vertical-scrollbar"),i.style.cssText+=";overflow:hidden",i.appendChild(e),i}function ut(t,i){this.wrapper=i.el,this.wrapperStyle=this.wrapper.style,this.indicator=this.wrapper.children[0],this.indicatorStyle=this.indicator.style,this.scroller=t,this.direction=i.direction,i.fade?(this.visible=0,this.wrapperStyle.opacity="0"):this.visible=1,this.sizeRatioX=1,this.sizeRatioY=1,this.maxPosX=0,this.maxPosY=0,this.x=0,this.y=0,i.interactive&&this._addDOMEvents()}function dt(t){t.prototype._initPullDown=function(){this.options.probeType=st},t.prototype._checkPullDown=function(){var t=this.options.pullDownRefresh,i=t.threshold,e=void 0===i?90:i,s=t.stop,o=void 0===s?40:s;return!(this.directionY!==Q||this.y<e)&&(this.pulling||(this.pulling=!0,this.trigger("pullingDown")),this.scrollTo(this.x,o,this.options.bounceTime,F.bounce),this.pulling)},t.prototype.finishPullDown=function(){this.pulling=!1,this.resetPosition(this.options.bounceTime,F.bounce)},t.prototype.openPullDown=function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.options.pullDownRefresh=t,this._initPullDown()},t.prototype.closePullDown=function(){this.options.pullDownRefresh=!1},t.prototype.autoPullDownRefresh=function(){var t=this.options.pullDownRefresh,i=t.threshold,e=void 0===i?90:i,s=t.stop,o=void 0===s?40:s;this.pulling||(this.pulling=!0,this.scrollTo(this.x,e),this.trigger("pullingDown"),this.scrollTo(this.x,o,this.options.bounceTime,F.bounce))}}function ft(t){t.prototype._initPullUp=function(){this.options.probeType=st,this.pullupWatching=!1,this._watchPullUp()},t.prototype._watchPullUp=function(){this.pullupWatching||(this.pullupWatching=!0,this.on("scroll",this._checkToEnd))},t.prototype._checkToEnd=function(t){var i=this,e=this.options.pullUpLoad.threshold,s=void 0===e?0:e;this.movingDirectionY===K&&t.y<=this.maxScrollY+s&&(this.once("scrollEnd",function(){i.pullupWatching=!1}),this.trigger("pullingUp"),this.off("scroll",this._checkToEnd))},t.prototype.finishPullUp=function(){var t=this;this.pullupWatching?this.once("scrollEnd",function(){t._watchPullUp()}):this._watchPullUp()},t.prototype.openPullUp=function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.options.pullUpLoad=t,this._initPullUp()},t.prototype.closePullUp=function(){this.options.pullUpLoad=!1,this.pullupWatching&&(this.pullupWatching=!1,this.off("scroll",this._checkToEnd))}}function mt(t){t.prototype._initMouseWheel=function(){var t=this;this._handleMouseWheelEvent(x),this.on("destroy",function(){clearTimeout(t.mouseWheelTimer),clearTimeout(t.mouseWheelEndTimer),t._handleMouseWheelEvent(T)}),this.firstWheelOpreation=!0},t.prototype._handleMouseWheelEvent=function(t){t(this.wrapper,"wheel",this),t(this.wrapper,"mousewheel",this),t(this.wrapper,"DOMMouseScroll",this)},t.prototype._onMouseWheel=function(t){var i=this;if(this.enabled){t.preventDefault(),this.options.stopPropagation&&t.stopPropagation(),this.firstWheelOpreation&&this.trigger("scrollStart"),this.firstWheelOpreation=!1;var e=this.options.mouseWheel,s=e.speed,o=void 0===s?20:s,n=e.invert,r=void 0!==n&&n,a=e.easeTime,h=void 0===a?300:a;clearTimeout(this.mouseWheelTimer),this.mouseWheelTimer=setTimeout(function(){i.options.snap||h||i.trigger("scrollEnd",{x:i.x,y:i.y}),i.firstWheelOpreation=!0},400);var l=void 0,c=void 0;switch(!0){case"deltaX"in t:1===t.deltaMode?(l=-t.deltaX*o,c=-t.deltaY*o):(l=-t.deltaX,c=-t.deltaY);break;case"wheelDeltaX"in t:l=t.wheelDeltaX/120*o,c=t.wheelDeltaY/120*o;break;case"wheelDelta"in t:l=c=t.wheelDelta/120*o;break;case"detail"in t:l=c=-t.detail/3*o;break;default:return}var p=r?-1:1;l*=p,c*=p,this.hasVerticalScroll||(l=c,c=0);var u=void 0,d=void 0;if(this.options.snap)return u=this.currentPage.pageX,d=this.currentPage.pageY,l>0?u--:l<0&&u++,c>0?d--:c<0&&d++,void this._goToPage(u,d);u=this.x+Math.round(this.hasHorizontalScroll?l:0),d=this.y+Math.round(this.hasVerticalScroll?c:0),this.movingDirectionX=this.directionX=l>0?-1:l<0?1:0,this.movingDirectionY=this.directionY=c>0?-1:c<0?1:0,u>this.minScrollX?u=this.minScrollX:u<this.maxScrollX&&(u=this.maxScrollX),d>this.minScrollY?d=this.minScrollY:d<this.maxScrollY&&(d=this.maxScrollY);var f=this.y===d;this.scrollTo(u,d,h,F.swipe),this.trigger("scroll",{x:this.x,y:this.y}),clearTimeout(this.mouseWheelEndTimer),f&&(this.mouseWheelEndTimer=setTimeout(function(){i.trigger("scrollEnd",{x:i.x,y:i.y})},h))}}}function gt(t){t.prototype._initZoom=function(){var t=this.options.zoom,i=t.start,e=void 0===i?1:i,s=t.min,o=void 0===s?1:s,n=t.max,r=void 0===n?4:n;this.scale=Math.min(Math.max(e,o),r),this.setScale(this.scale),this.scrollerStyle[I.transformOrigin]="0 0"},t.prototype._zoomTo=function(t,i,e,s){this.scaled=!0;var o=t/(s||this.scale);this.setScale(t),this.refresh();var n=Math.round(this.startX-(i-this.relativeX)*(o-1)),r=Math.round(this.startY-(e-this.relativeY)*(o-1));n>this.minScrollX?n=this.minScrollX:n<this.maxScrollX&&(n=this.maxScrollX),r>this.minScrollY?r=this.minScrollY:r<this.maxScrollY&&(r=this.maxScrollY),this.x===n&&this.y===r||this.scrollTo(n,r,this.options.bounceTime),this.scaled=!1},t.prototype.zoomTo=function(t,i,e){var s=_(this.wrapper),o=s.left,n=s.top,r=i+o-this.x,a=e+n-this.y;this._zoomTo(t,r,a)},t.prototype._zoomStart=function(t){var i=t.touches[0],e=t.touches[1],s=Math.abs(i.pageX-e.pageX),o=Math.abs(i.pageY-e.pageY);this.startDistance=v(s,o),this.startScale=this.scale;var n=_(this.wrapper),r=n.left,a=n.top;this.originX=Math.abs(i.pageX+e.pageX)/2+r-this.x,this.originY=Math.abs(i.pageY+e.pageY)/2+a-this.y,this.trigger("zoomStart")},t.prototype._zoom=function(t){if(this.enabled&&!this.destroyed&&z[t.type]===this.initiated){this.options.preventDefault&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation();var i=t.touches[0],e=t.touches[1],s=Math.abs(i.pageX-e.pageX),o=Math.abs(i.pageY-e.pageY),n=v(s,o),r=n/this.startDistance*this.startScale;this.scaled=!0;var a=this.options.zoom,h=a.min,l=void 0===h?1:h,c=a.max,p=void 0===c?4:c;r<l?r=.5*l*Math.pow(2,r/l):r>p&&(r=2*p*Math.pow(.5,p/r));var u=r/this.startScale,d=this.startX-(this.originX-this.relativeX)*(u-1),f=this.startY-(this.originY-this.relativeY)*(u-1);this.setScale(r),this.scrollTo(d,f,0)}},t.prototype._zoomEnd=function(t){if(this.enabled&&!this.destroyed&&z[t.type]===this.initiated){this.options.preventDefault&&t.preventDefault(),this.options.stopPropagation&&t.stopPropagation(),this.isInTransition=!1,this.isAnimating=!1,this.initiated=0;var i=this.options.zoom,e=i.min,s=void 0===e?1:e,o=i.max,n=void 0===o?4:o,r=this.scale>n?n:this.scale<s?s:this.scale;this._zoomTo(r,this.originX,this.originY,this.startScale),this.trigger("zoomEnd")}}}ut.prototype.handleEvent=function(t){switch(t.type){case"touchstart":case"mousedown":this._start(t);break;case"touchmove":case"mousemove":this._move(t);break;case"touchend":case"mouseup":case"touchcancel":case"mousecancel":this._end(t);break}},ut.prototype.refresh=function(){this._shouldShow()&&(this.transitionTime(),this._calculate(),this.updatePosition())},ut.prototype.fade=function(t,i){var e=this;if(!i||this.visible){var s=t?250:500;t=t?"1":"0",this.wrapperStyle[I.transitionDuration]=s+"ms",clearTimeout(this.fadeTimeout),this.fadeTimeout=setTimeout(function(){e.wrapperStyle.opacity=t,e.visible=+t},0)}},ut.prototype.updatePosition=function(){if("vertical"===this.direction){var t=Math.round(this.sizeRatioY*this.scroller.y);if(t<0){this.transitionTime(500);var i=Math.max(this.indicatorHeight+3*t,lt);this.indicatorStyle.height=i+"px",t=0}else if(t>this.maxPosY){this.transitionTime(500);var e=Math.max(this.indicatorHeight-3*(t-this.maxPosY),lt);this.indicatorStyle.height=e+"px",t=this.maxPosY+this.indicatorHeight-e}else this.indicatorStyle.height=this.indicatorHeight+"px";this.y=t,this.scroller.options.useTransform?this.indicatorStyle[I.transform]="translateY("+t+"px)"+this.scroller.translateZ:this.indicatorStyle.top=t+"px"}else{var s=Math.round(this.sizeRatioX*this.scroller.x);if(s<0){this.transitionTime(500);var o=Math.max(this.indicatorWidth+3*s,lt);this.indicatorStyle.width=o+"px",s=0}else if(s>this.maxPosX){this.transitionTime(500);var n=Math.max(this.indicatorWidth-3*(s-this.maxPosX),lt);this.indicatorStyle.width=n+"px",s=this.maxPosX+this.indicatorWidth-n}else this.indicatorStyle.width=this.indicatorWidth+"px";this.x=s,this.scroller.options.useTransform?this.indicatorStyle[I.transform]="translateX("+s+"px)"+this.scroller.translateZ:this.indicatorStyle.left=s+"px"}},ut.prototype.transitionTime=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;this.indicatorStyle[I.transitionDuration]=t+"ms"},ut.prototype.transitionTimingFunction=function(t){this.indicatorStyle[I.transitionTimingFunction]=t},ut.prototype.destroy=function(){this._removeDOMEvents(),this.wrapper.parentNode.removeChild(this.wrapper)},ut.prototype._start=function(t){var i=t.touches?t.touches[0]:t;t.preventDefault(),t.stopPropagation(),this.transitionTime(),this.initiated=!0,this.moved=!1,this.lastPointX=i.pageX,this.lastPointY=i.pageY,this.startTime=f(),this._handleMoveEvents(x),this.scroller.trigger("beforeScrollStart")},ut.prototype._move=function(t){var i=t.touches?t.touches[0]:t;t.preventDefault(),t.stopPropagation(),this.moved||this.scroller.trigger("scrollStart"),this.moved=!0;var e=i.pageX-this.lastPointX;this.lastPointX=i.pageX;var s=i.pageY-this.lastPointY;this.lastPointY=i.pageY;var o=this.x+e,n=this.y+s;this._pos(o,n)},ut.prototype._end=function(t){if(this.initiated){this.initiated=!1,t.preventDefault(),t.stopPropagation(),this._handleMoveEvents(T);var i=this.scroller.options.snap;if(i){var e=i.speed,s=i.easing,o=void 0===s?F.bounce:s,n=this.scroller._nearestSnap(this.scroller.x,this.scroller.y),r=e||Math.max(Math.max(Math.min(Math.abs(this.scroller.x-n.x),1e3),Math.min(Math.abs(this.scroller.y-n.y),1e3)),300);this.scroller.x===n.x&&this.scroller.y===n.y||(this.scroller.directionX=0,this.scroller.directionY=0,this.scroller.currentPage=n,this.scroller.scrollTo(n.x,n.y,r,o))}this.moved&&this.scroller.trigger("scrollEnd",{x:this.scroller.x,y:this.scroller.y})}},ut.prototype._pos=function(t,i){t<0?t=0:t>this.maxPosX&&(t=this.maxPosX),i<0?i=0:i>this.maxPosY&&(i=this.maxPosY),t=Math.round(t/this.sizeRatioX),i=Math.round(i/this.sizeRatioY),this.scroller.scrollTo(t,i),this.scroller.trigger("scroll",{x:this.scroller.x,y:this.scroller.y})},ut.prototype._shouldShow=function(){return"vertical"===this.direction&&this.scroller.hasVerticalScroll||"horizontal"===this.direction&&this.scroller.hasHorizontalScroll?(this.wrapper.style.display="",!0):(this.wrapper.style.display="none",!1)},ut.prototype._calculate=function(){if("vertical"===this.direction){var t=this.wrapper.clientHeight;this.indicatorHeight=Math.max(Math.round(t*t/(this.scroller.scrollerHeight||t||1)),lt),this.indicatorStyle.height=this.indicatorHeight+"px",this.maxPosY=t-this.indicatorHeight,this.sizeRatioY=this.maxPosY/this.scroller.maxScrollY}else{var i=this.wrapper.clientWidth;this.indicatorWidth=Math.max(Math.round(i*i/(this.scroller.scrollerWidth||i||1)),lt),this.indicatorStyle.width=this.indicatorWidth+"px",this.maxPosX=i-this.indicatorWidth,this.sizeRatioX=this.maxPosX/this.scroller.maxScrollX}},ut.prototype._addDOMEvents=function(){var t=x;this._handleDOMEvents(t)},ut.prototype._removeDOMEvents=function(){var t=T;this._handleDOMEvents(t),this._handleMoveEvents(t)},ut.prototype._handleMoveEvents=function(t){this.scroller.options.disableTouch||t(window,"touchmove",this),this.scroller.options.disableMouse||t(window,"mousemove",this)},ut.prototype._handleDOMEvents=function(t){this.scroller.options.disableTouch||(t(this.indicator,"touchstart",this),t(window,"touchend",this)),this.scroller.options.disableMouse||(t(this.indicator,"mousedown",this),t(window,"mouseup",this))};var vt=30,yt=10,wt=200,bt=2e3;function xt(t){t.prototype._initInfinite=function(){this.options.probeType=3,this.maxScrollY=-bt,this.infiniteScroller=new St(this,this.options.infinity)}}function Tt(t){if(t&&t.classList)return t.classList.contains("tombstone")}function St(t,i){var e=this;this.options=i,nt("function"===typeof this.options.createTombstone,"Infinite scroll need createTombstone Function to create tombstone"),nt("function"===typeof this.options.fetch,"Infinite scroll need fetch Function to fetch new data."),nt("function"===typeof this.options.render,"Infinite scroll need render Function to render each item."),this.firstAttachedItem=0,this.lastAttachedItem=0,this.anchorScrollTop=0,this.anchorItem={index:0,offset:0},this.tombstoneHeight=0,this.tombstoneWidth=0,this.tombstones=[],this.tombstonesAnimationHandlers=[],this.items=[],this.loadedItems=0,this.requestInProgress=!1,this.hasMore=!0,this.scroller=t,this.wrapperEl=this.scroller.wrapper,this.scrollerEl=this.scroller.scroller,this.scroller.on("resize",function(){e.onResize()}),this.scroller.on("destroy",function(){e.destroy()}),this._onResizeHandler=setTimeout(function(){e.onResize(),e.scroller.on("scroll",function(){e.onScroll()})})}function _t(t,i){this.wrapper="string"===typeof t?document.querySelector(t):t,this.wrapper||ot("Can not resolve the wrapper DOM."),this.scroller=this.wrapper.children[0],this.scroller||ot("The wrapper need at least one child element to be scroller."),this.scrollerStyle=this.scroller.style,this._init(i)}St.prototype.destroy=function(){var t=this;clearTimeout(this._onResizeHandler),this.tombstonesAnimationHandlers.forEach(function(t){clearTimeout(t)}),this.tombstonesAnimationHandlers=null,this.items.forEach(function(i){i.node&&(t.scrollerEl.removeChild(i.node),i.node=null)}),this.scroller.infiniteScroller=null,this.scroller=null,this.wrapperEl=null,this.scrollerEl=null,this.items=null,this.tombstones=null},St.prototype.onScroll=function(){var t=-this.scroller.y,i=t-this.anchorScrollTop;this.anchorItem=0===t?{index:0,offset:0}:this._calculateAnchoredItem(this.anchorItem,i),this.anchorScrollTop=t;var e=this._calculateAnchoredItem(this.anchorItem,this.scroller.wrapperHeight),s=this.anchorItem.index,o=e.index;i<0?(s-=vt,o+=yt):(s-=yt,o+=vt),this.fill(s,o),this.maybeRequestContent()},St.prototype.onResize=function(){var t=this.options.createTombstone();t.style.position="absolute",this.scrollerEl.appendChild(t),t.style.display="",this.tombstoneHeight=t.offsetHeight,this.tombstoneWidth=t.offsetWidth,this.scrollerEl.removeChild(t);for(var i=0;i<this.items.length;i++)this.items[i].height=this.items[i].width=0;this.onScroll()},St.prototype.fill=function(t,i){this.firstAttachedItem=Math.max(0,t),this.hasMore||(i=Math.min(i,this.items.length)),this.lastAttachedItem=i,this.attachContent()},St.prototype.maybeRequestContent=function(){var t=this;if(!this.requestInProgress&&this.hasMore){var i=this.lastAttachedItem-this.loadedItems;i<=0||(this.requestInProgress=!0,this.options.fetch(i).then(function(i){if(t.requestInProgress=!1,i)t.addContent(i);else{t.hasMore=!1;var e=t._removeTombstones(),s=0;t.anchorItem.index<=t.items.length?(s=t._fixScrollPosition(),t._setupAnimations({},s),t.scroller.resetPosition(t.scroller.options.bounceTime)):(t.anchorItem.index-=e,s=t._fixScrollPosition(),t._setupAnimations({},s),t.scroller.stop(),t.scroller.resetPosition(),t.onScroll())}}))}},St.prototype.addContent=function(t){for(var i=0;i<t.length;i++)this.items.length<=this.loadedItems&&this._addItem(),this.items[this.loadedItems++].data=t[i];this.attachContent(),this.maybeRequestContent()},St.prototype.attachContent=function(){var t=this._collectUnusedNodes(),i=this._createDOMNodes(t);this._cleanupUnusedNodes(t),this._cacheNodeSize();var e=this._fixScrollPosition();this._setupAnimations(i,e)},St.prototype.resetMore=function(){this.hasMore=!0},St.prototype._removeTombstones=function(){for(var t=void 0,i=0,e=this.items.length,s=0;s<e;s++){var o=this.items[s].node,n=this.items[s].data;o&&!Tt(o)||n||(void 0===t&&(t=s),o&&this.scrollerEl.removeChild(o))}return i=e-t,this.items.splice(t),this.lastAttachedItem=Math.min(this.lastAttachedItem,this.items.length),i},St.prototype._collectUnusedNodes=function(){for(var t=[],i=0;i<this.items.length;i++)if(i!==this.firstAttachedItem){var e=this.items[i].node;e&&(Tt(e)?(this.tombstones.push(e),this.tombstones[this.tombstones.length-1].style.display="none"):t.push(e)),this.items[i].node=null}else i=this.lastAttachedItem-1;return t},St.prototype._createDOMNodes=function(t){for(var i={},e=this.firstAttachedItem;e<this.lastAttachedItem;e++){while(this.items.length<=e)this._addItem();var s=this.items[e].node,o=this.items[e].data;if(s){if(!Tt(s)||!o)continue;s.style.zIndex=1,i[e]=[s,this.items[e].top-this.anchorScrollTop],this.items[e].node=null}var n=o?this.options.render(o,t.pop()):this._getTombStone();n.style.position="absolute",this.items[e].top=-1,this.scrollerEl.appendChild(n),this.items[e].node=n}return i},St.prototype._cleanupUnusedNodes=function(t){while(t.length)this.scrollerEl.removeChild(t.pop())},St.prototype._cacheNodeSize=function(){for(var t=this.firstAttachedItem;t<this.lastAttachedItem;t++){var i=this.items[t];if(i.data&&!i.height){var e=Tt(i.node);i.height=e?this.tombstoneHeight:i.node.offsetHeight,i.width=e?this.tombstoneWidth:i.node.offsetWidth}}},St.prototype._fixScrollPosition=function(){this.anchorScrollTop=0;for(var t=0;t<this.anchorItem.index;t++)this.anchorScrollTop+=this.items[t].height||this.tombstoneHeight;this.anchorScrollTop+=this.anchorItem.offset;var i=this.anchorScrollTop-this.anchorItem.offset,e=this.anchorItem.index;while(e>this.firstAttachedItem)i-=this.items[e-1].height||this.tombstoneHeight,e--;return i},St.prototype._setupAnimations=function(t,i){var e=this;for(var s in t){var o=t[s];this.items[s].node.style[I.transform]="translateY("+(this.anchorScrollTop+o[1])+"px) scale("+this.tombstoneWidth/this.items[s].width+", "+this.tombstoneHeight/this.items[s].height+")",this.items[s].node.offsetTop,o[0].offsetTop,this.items[s].node.style[I.transition]=P+"transform "+wt+"ms"}for(var n=this.firstAttachedItem;n<this.lastAttachedItem;n++){var r=t[n];if(r){var a=r[0];a.style[I.transition]=P+"transform "+wt+"ms, opacity "+wt+"ms",a.style[I.transform]="translateY("+i+"px) scale("+this.items[n].width/this.tombstoneWidth+", "+this.items[n].height/this.tombstoneHeight+")",a.style.opacity=0}i!==this.items[n].top&&(r||(this.items[n].node.style[I.transition]=""),this.items[n].node.style[I.transform]="translateY("+i+"px)"),this.items[n].top=i,i+=this.items[n].height||this.tombstoneHeight}this.scroller.maxScrollY=-(i-this.scroller.wrapperHeight+(this.hasMore?bt:0));var h=setTimeout(function(){for(var i in t){var s=t[i];s[0].style.display="none",e.tombstones.push(s[0])}},wt);this.tombstonesAnimationHandlers.push(h)},St.prototype._getTombStone=function(){var t=this.tombstones.pop();return t?(t.style.display="",t.style.opacity=1,t.style[I.transform]="",t.style[I.transition]="",t):this.options.createTombstone()},St.prototype._addItem=function(){this.items.push({data:null,node:null,height:0,width:0,top:0})},St.prototype._calculateAnchoredItem=function(t,i){if(0===i)return t;var e=t.index,s=0;if(i+=t.offset,i<0){while(i<0&&e>0&&this.items[e-1].height)i+=this.items[e-1].height,e--;s=Math.max(-e,Math.ceil(Math.min(i,0)/this.tombstoneHeight))}else{while(i>0&&e<this.items.length&&this.items[e].height&&this.items[e].height<i)i-=this.items[e].height,e++;(e>=this.items.length||!this.items[e].height)&&(s=Math.floor(Math.max(i,0)/this.tombstoneHeight))}return e+=s,i-=s*this.tombstoneHeight,{index:e,offset:i}},j(_t),rt(_t),l(_t),at(_t),ht(_t),ct(_t),dt(_t),ft(_t),mt(_t),gt(_t),xt(_t),_t.Version="1.15.2";var Pt=_t;function Yt(t){if(t instanceof window.SVGElement){const i=t.getBoundingClientRect();return{top:i.top,left:i.left,width:i.width,height:i.height}}return{top:t.offsetTop,left:t.offsetLeft,width:t.offsetWidth,height:t.offsetHeight}}var Xt=function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"loading"},[t.isTouchEndStatus||t.isPullingDown?e("div",[e("LoadingCss")],1):e("img",{class:[t.isPullingDownStatus?t.imgAnimation:t.scrollImg],attrs:{src:"https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/d8a3286d-ea1c-4c84-be1f-c221573f2dd9.svg"}}),t.isTouchEndStatus||t.isPullingDown?t._e():e("span",{staticClass:"pullDownText"},[t._v(t._s(t.isPullingDownStatus?"松开立即刷新":"下拉可以刷新"))])])},Dt=[],Mt=function(){var t=this,i=t.$createElement;t._self._c;return t._m(0)},Et=[function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"pswp__preloader__icn"},[e("div",{staticClass:"pswp__preloader__cut"},[e("div",{staticClass:"pswp__preloader__donut"})])])}],kt={name:"loadingCss"},It=kt;e("a389");function Ct(t,i,e,s,o,n,r,a){var h,l="function"===typeof t?t.options:t;if(i&&(l.render=i,l.staticRenderFns=e,l._compiled=!0),s&&(l.functional=!0),n&&(l._scopeId="data-v-"+n),r?(h=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},l._ssrRegister=h):o&&(h=a?function(){o.call(this,this.$root.$options.shadowRoot)}:o),h)if(l.functional){l._injectStyles=h;var c=l.render;l.render=function(t,i){return h.call(i),c(t,i)}}else{var p=l.beforeCreate;l.beforeCreate=p?[].concat(p,h):[h]}return{exports:t,options:l}}var Wt=Ct(It,Mt,Et,!1,null,"ea894aa6",null),zt=Wt.exports,Ot={name:"loading",props:{isPullingDownStatus:{type:Boolean,default:!1},isPullingDown:{type:Boolean,default:!1},isTouchEndStatus:{type:Boolean,default:!0}},components:{LoadingCss:zt},watch:{isPullingDown:{handler(t){},immediate:!0}},data(){return{scrollImg:"scrollImg",imgAnimation:"imgAnimation"}}},At=Ot,Ht=(e("698b"),Ct(At,Xt,Dt,!1,null,"1c4209c0",null)),Lt=Ht.exports,Ut={name:"vue-custom-scrollview",props:{probeType:{type:Number,default:1},eventPassthrough:{type:String,default:""},click:{type:Boolean,default:!0},scrollX:{type:Boolean,default:!1},scrollY:{type:Boolean,default:!0},scrollbar:{type:[Object,Boolean],default:!1},listenScroll:{type:Boolean,default:!0},pullDownRefresh:{type:[Object,Boolean],default(){return{threshold:60,stop:50}}},pullUpLoad:{type:[Object,Boolean],default:!1},refreshDelay:{type:Number,default:20}},components:{Loading:Lt},data(){return{scroll:null,isPullingDown:!1,isPullingUp:!1,pullUpDirty:!0,isPullingDownStatus:!1,isTouchEndStatus:!0}},watch:{},mounted(){this.$nextTick(()=>{this._initScroll()})},methods:{_initScroll(){if(this.$refs.wrapper){if(this.$refs.listWrapper&&(this.$refs.listWrapper.style.minHeight=`${Yt(this.$refs.wrapper).height+1}px`),this.scroll=new Pt(this.$refs.wrapper,{probeType:this.probeType,click:this.click,scrollX:this.scrollX,scrollY:this.scrollY,scrollbar:this.scrollbar,eventPassthrough:this.eventPassthrough,pullDownRefresh:this.pullDownRefresh,pullUpLoad:this.pullUpLoad,useTransition:!1}),this.listenScroll&&this.scroll.on("scroll",t=>{t.y>60?this.isPullingDownStatus=!0:this.isPullingDownStatus=!1,this.$emit("scroll",t)}),this.pullUpLoad){const t=this;t.scroll.on("pullingUp",()=>{t.pullUpDirty&&(t.isPullingUp=!0,t.$emit("pullingUp"))})}this.pullDownRefresh&&(this.scroll.on("pullingDown",()=>{this.isPullingDown=!0,this.$emit("pullingDown")}),this.scroll.on("touchEnd",t=>{t.y>60?this.isTouchEndStatus=!0:this.isTouchEndStatus=!1}),this.scroll.on("beforeScrollStart",()=>{this.isTouchEndStatus=!1}))}},enable(){this.scroll&&this.scroll.enable()},disable(){this.scroll&&this.scroll.disable()},destroy(){this.scroll&&this.scroll.destroy()},autoPullDownRefresh(){this.scroll&&this.scroll.autoPullDownRefresh()},closePullUp(){this.scroll&&this.scroll.closePullUp()},openPullUp(){this.scroll&&this.scroll.openPullUp()},refresh(){this.scroll&&this.scroll.refresh()},scrollTo(){this.scroll&&this.scroll.scrollTo.apply(this.scroll,arguments)},scrollToElement(){this.scroll&&this.scroll.scrollToElement.apply(this.scroll,arguments)},forceUpdate(t){this.$nextTick(()=>{this.pullUpDirty=t,this.pullDownRefresh?this._reboundPullDown().then(()=>{this._afterPullDown()}):this.pullUpLoad?(this.scroll.finishPullUp(),this.refresh()):this.refresh()})},_reboundPullDown(){const{stopTime:t=600}=this.pullDownRefresh;return new Promise(i=>{this.reboundPullDownTimer=setTimeout(()=>{this.isPullingDown=!1,this.scroll.finishPullUp(),this.scroll.finishPullDown(),i()},t)})},_afterPullDown(){this.afterPullDownTimer=setTimeout(()=>{this.refresh()},this.scroll.options.bounceTime)}},destroyed(){this.scroll&&this.scroll.destroy(),this.reboundPullDownTimer&&clearTimeout(this.reboundPullDownTimer),this.reboundPullDownTimer=null,this.afterPullDownTimer&&clearTimeout(this.afterPullDownTimer),this.afterPullDownTimer=null}},Rt=Ut,Nt=(e("109e"),Ct(Rt,o,n,!1,null,"7ca1b9e2",null)),Bt=Nt.exports;Bt.install=t=>t.component(Bt.name,Bt.default),"undefined"!==typeof window&&window.Vue&&window.Vue.use(Bt);var Vt=Bt;const jt=[Vt],Ft=function(t){Ft.installed||(Ft.installed=!0,jt.map(i=>{t.component(i.name,i)}))};"undefined"!==typeof window&&window.Vue&&Ft(window.Vue);var $t={install:Ft,scroll:Vt};i["default"]=$t},a389:function(t,i,e){"use strict";var s=e("3933"),o=e.n(s);o.a},ae40:function(t,i,e){var s=e("ea2e");"string"===typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);var o=e("85cb").default;o("5597d13a",s,!0,{sourceMap:!1,shadowMode:!1})},e67d:function(t,i){(function(t){var i="currentScript",e=t.getElementsByTagName("script");i in t||Object.defineProperty(t,i,{get:function(){try{throw new Error}catch(s){var t,i=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(s.stack)||[!1])[1];for(t in e)if(e[t].src==i||"interactive"==e[t].readyState)return e[t];return null}}})})(document)},ea2e:function(t,i,e){i=t.exports=e("690e")(!1),i.push([t.i,".loading[data-v-1c4209c0]{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.loading .scrollImg[data-v-1c4209c0]{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.loading .imgAnimation[data-v-1c4209c0],.loading .scrollImg[data-v-1c4209c0]{width:20px;-webkit-transition:.5s;transition:.5s}.loading .imgAnimation[data-v-1c4209c0]{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.loading .pullDownText[data-v-1c4209c0]{font-size:14px}",""])}})});
8 | //# sourceMappingURL=scroll.umd.min.js.map


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-custom-scrollview",
 3 |   "version": "0.1.4",
 4 |   "author": "xiaotianyi <13006378969@163.com>",
 5 |   "license": "MIT",
 6 |   "description": "基于 Vue better-scroll的移动端滚动组件,支持自定义上下拉样式",
 7 |   "private": false,
 8 |   "main": "lib/scroll.umd.min.js",
 9 |   "scripts": {
10 |     "serve": "vue-cli-service serve",
11 |     "build": "vue-cli-service build",
12 |     "lint": "vue-cli-service lint",
13 |     "lib": "vue-cli-service build --target lib --name scroll --dest lib packages/index.js"
14 |   },
15 |   "dependencies": {
16 |     "better-scroll": "^1.15.2",
17 |     "core-js": "^2.6.5",
18 |     "vue": "^2.6.10",
19 |     "vue-custom-scrollview": "^0.1.4",
20 |     "vue-router": "^3.0.3",
21 |     "vuex": "^3.0.1"
22 |   },
23 |   "devDependencies": {
24 |     "@vue/cli-plugin-babel": "^3.10.0",
25 |     "@vue/cli-plugin-eslint": "^3.10.0",
26 |     "@vue/cli-service": "^3.10.0",
27 |     "@vue/eslint-config-airbnb": "^4.0.0",
28 |     "babel-eslint": "^10.0.1",
29 |     "eslint": "^5.16.0",
30 |     "eslint-plugin-vue": "^5.0.0",
31 |     "node-sass": "^4.9.0",
32 |     "sass-loader": "^7.1.0",
33 |     "vue-template-compiler": "^2.6.10"
34 |   },
35 |   "repository": {
36 |     "type": "git",
37 |     "url": "git+https://github.com/daughterRui/vue-scroll.git"
38 |   },
39 |   "keywords": [
40 |     "vue",
41 |     "better-scroll",
42 |     "vue-scroll",
43 |     "vue-better-scroll",
44 |     "vue-custom-scrollview",
45 |     "custom-scroll"
46 |   ],
47 |   "bugs": {
48 |     "url": "https://github.com/daughterRui/vue-scroll/issues"
49 |   },
50 |   "homepage": "https://github.com/daughterRui/vue-scroll#readme"
51 | }
52 | 


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | // 导入颜色选择器组件
 2 | import scroll from './scroll';
 3 | 
 4 | // 存储组件列表
 5 | const components = [
 6 |   scroll,
 7 | ];
 8 | 
 9 | // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
10 | const install = function (Vue) {
11 |   if (install.installed) return;
12 |   install.installed = true;
13 |   // 遍历并注册全局组件
14 |   components.map((component) => {
15 |     Vue.component(component.name, component);
16 |   });
17 | };
18 | 
19 | // 判断是否是直接引入文件
20 | if (typeof window !== 'undefined' && window.Vue) {
21 |   install(window.Vue);
22 | }
23 | 
24 | export default {
25 |   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
26 |   install,
27 |   // 以下是具体的组件列表
28 |   scroll,
29 | };
30 | 


--------------------------------------------------------------------------------
/packages/scroll/index.js:
--------------------------------------------------------------------------------
 1 | // 引入组件
 2 | import Scroll from './src/Scroll.vue';
 3 | 
 4 | Scroll.install = Vue => Vue.component(Scroll.name, Scroll.default);
 5 | 
 6 | if (typeof window !== 'undefined' && window.Vue) {
 7 |   window.Vue.use(Scroll);
 8 | }
 9 | 
10 | export default Scroll;
11 | 


--------------------------------------------------------------------------------
/packages/scroll/src/BaseView.vue:
--------------------------------------------------------------------------------
 1 | <!--
 2 |  * @Description: BaseView
 3 |  * @Author: 肖天翼
 4 |  * @LastEditors: Please set LastEditors
 5 |  * @Date: 2018-12-24 16:38:22
 6 |  * @LastEditTime: 2019-05-24 14:02:38
 7 |  -->
 8 | <template>
 9 |   <div :style="{height: height + 'px'}" class="base">
10 |       <slot name="contentView"></slot>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'baseView',
17 |   props: {
18 | 
19 |   },
20 |   components: {
21 |   },
22 | 
23 |   data() {
24 |     return {
25 |       height: document.documentElement.clientHeight,
26 |     };
27 |   },
28 |   watch: {
29 |     height(val) {
30 |     // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
31 |       if (!this.timer) {
32 |         // 一旦监听到的height值改变，就将其重新赋给data里的height
33 |         this.height = val;
34 |         this.timer = true;
35 |         const that = this;
36 |         setTimeout(() => {
37 |           // 打印height变化的值
38 |           console.log(that.height);
39 |           that.timer = false;
40 |         }, 400);
41 |       }
42 |     },
43 |   },
44 |   computed: {
45 | 
46 |   },
47 |   methods: {
48 | 
49 |   },
50 |   created() {
51 | 
52 |   },
53 |   mounted() {
54 |     window.onresize = () => {
55 |       this.height = document.documentElement.clientHeight;
56 |     };
57 |   },
58 | };
59 | </script>
60 | <style scoped lang="scss">
61 | .base{
62 |   position: fixed;
63 |   width: 100%;
64 |   height: 100%;
65 | }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/packages/scroll/src/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="loading">
 3 |     <img v-if="!isTouchEndStatus && !isPullingDown" :class="[isPullingDownStatus ? imgAnimation : scrollImg]" src="https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/d8a3286d-ea1c-4c84-be1f-c221573f2dd9.svg">
 4 |     <div v-else>
 5 |       <LoadingCss />
 6 |     </div>
 7 |     <span v-if="!isTouchEndStatus && !isPullingDown" class="pullDownText">{{isPullingDownStatus ? '松开立即刷新': '下拉可以刷新'}}</span>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import LoadingCss from './LoadingCss.vue';
13 | 
14 | export default {
15 |   name: 'loading',
16 |   props: {
17 |     isPullingDownStatus: {
18 |       type: Boolean,
19 |       default: false,
20 |     },
21 |     isPullingDown: {
22 |       type: Boolean,
23 |       default: false,
24 |     },
25 |     isTouchEndStatus: {
26 |       type: Boolean,
27 |       default: true,
28 |     },
29 |   },
30 |   components: {
31 |     LoadingCss,
32 |   },
33 |   watch: {
34 |     isPullingDown: {
35 |       handler(val) {
36 |         // console.log('val', val)
37 |       },
38 |       immediate: true,
39 |     },
40 |   },
41 |   data() {
42 |     return {
43 |       scrollImg: 'scrollImg',
44 |       imgAnimation: 'imgAnimation',
45 |     };
46 |   },
47 | };
48 | </script>
49 | 
50 | <style lang="scss" scoped>
51 | .loading {
52 |   display: flex;
53 |   height: 100%;
54 |   align-items: center;
55 |   .scrollImg {
56 |     width: 20px;
57 |     transform: rotate(0deg);
58 |     transition: .5s
59 |   }
60 |   .imgAnimation{
61 |     width: 20px;
62 |     transform: rotate(-180deg);
63 |     transition: .5s
64 |   }
65 |   .pullDownText{
66 |     font-size: 14px;
67 |   }
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/packages/scroll/src/LoadingCss.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pswp__preloader__icn">
 3 |     <div class="pswp__preloader__cut">
 4 |       <div class="pswp__preloader__donut"></div>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | 
11 | 
12 | export default {
13 |   name: 'loadingCss',
14 | };
15 | </script>
16 | 
17 | <style scoped lang="scss" >
18 | .pswp__preloader__icn {
19 |   opacity:0.75;
20 |   width: 24px;
21 |   height: 24px;
22 |   -webkit-animation: clockwise 500ms linear infinite;
23 |   animation: clockwise 500ms linear infinite;
24 | }
25 | 
26 | /* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
27 | .pswp__preloader__cut {
28 |   position: relative;
29 |   width: 12px;
30 |   height: 24px;
31 |   overflow: hidden;
32 |   position: absolute;
33 |   top: 0;
34 |   left: 0;
35 | }
36 | 
37 | .pswp__preloader__donut {
38 |   box-sizing: border-box;
39 |   width: 24px;
40 |   height: 24px;
41 |   border: 2px solid #000;
42 |    border-radius: 50%;
43 |   border-left-color: transparent;
44 |   border-bottom-color: transparent;
45 |   position: absolute;
46 |   top: 0;
47 |   left: 0;
48 |   background: none;
49 |   margin:0;
50 |    -webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
51 |   animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
52 | }
53 | 
54 | @-webkit-keyframes clockwise {
55 |   0% { -webkit-transform: rotate(0deg) }
56 |   100% { -webkit-transform: rotate(360deg) }
57 | }
58 | @keyframes clockwise {
59 |   0% { transform: rotate(0deg) }
60 |   100% { transform: rotate(360deg) }
61 | }
62 | @-webkit-keyframes donut-rotate {
63 |   0% { -webkit-transform: rotate(0) }
64 |   50% { -webkit-transform: rotate(-140deg) }
65 |   100% { -webkit-transform: rotate(0) }
66 | }
67 | @keyframes donut-rotate {
68 |   0% { transform: rotate(0) }
69 |   50% { transform: rotate(-140deg) }
70 |   100% { transform: rotate(0) }
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/packages/scroll/src/Scroll.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 |  * @Description: better-scroll插件vue化
  3 |  * @Author: xty
  4 |  * @LastEditors: Please set LastEditors
  5 |  * @Date: 2019-05-10 22:27:35
  6 |  * @LastEditTime: 2019-07-15 22:17:45
  7 |  -->
  8 | 
  9 | <template>
 10 |   <div ref="wrapper">
 11 |     <div class="contantView">
 12 |       <div ref="listWrapper">
 13 |         <slot>
 14 |         </slot>
 15 |         <slot name="pullup" :finishPullUp="pullUpDirty">
 16 |         </slot>
 17 |       </div>
 18 |       <div class="pulldown">
 19 |         <slot v-if="pullDownRefresh" name="pulldown" :isPullingDownStatus="isPullingDownStatus" :isPullingDown="isPullingDown">
 20 |           <Loading
 21 |             :isPullingDownStatus="isPullingDownStatus"
 22 |             :isPullingDown="isPullingDown"
 23 |             :isTouchEndStatus="isTouchEndStatus"
 24 |           ></Loading>
 25 |         </slot>
 26 |       </div>
 27 |     </div>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import BScroll from 'better-scroll';
 33 | import { getRect } from './dom';
 34 | import Loading from './Loading.vue';
 35 | 
 36 | export default {
 37 |   name: 'vue-custom-scrollview',
 38 |   props: {
 39 |     probeType: {
 40 |       type: Number,
 41 |       default: 1,
 42 |     },
 43 |     eventPassthrough: {
 44 |       type: String,
 45 |       default: '',
 46 |     },
 47 |     click: {
 48 |       type: Boolean,
 49 |       default: true,
 50 |     },
 51 |     scrollX: {
 52 |       type: Boolean,
 53 |       default: false,
 54 |     },
 55 |     scrollY: {
 56 |       type: Boolean,
 57 |       default: true,
 58 |     },
 59 |     scrollbar: {
 60 |       type: [Object, Boolean],
 61 |       default: false,
 62 |     },
 63 |     listenScroll: {
 64 |       type: Boolean,
 65 |       default: true,
 66 |     },
 67 |     // 下拉刷新默认添加，不需要传false
 68 |     pullDownRefresh: {
 69 |       type: [Object, Boolean],
 70 |       default() {
 71 |         return {
 72 |           threshold: 60,
 73 |           stop: 50,
 74 |         };
 75 |       },
 76 |     },
 77 |     // 上拉加载
 78 |     pullUpLoad: {
 79 |       type: [Object, Boolean],
 80 |       default: false,
 81 |     },
 82 |     refreshDelay: {
 83 |       type: Number,
 84 |       default: 20,
 85 |     },
 86 |   },
 87 |   components: {
 88 |     Loading,
 89 |   },
 90 |   data() {
 91 |     return {
 92 |       scroll: null,
 93 |       isPullingDown: false, // 是否执行下拉的状态
 94 |       // movingDirectionY: 0, // 下拉是否已拿到数据
 95 |       isPullingUp: false, // 上拉状态
 96 |       pullUpDirty: true, // 此变量用来检查是否加载到了最后一页(默认为未加载到最后一页)
 97 |       isPullingDownStatus: false, // 下拉刷新是否该执行的状态
 98 |       isTouchEndStatus: true,
 99 |     };
100 |   },
101 |   watch: {
102 | 
103 |   },
104 |   mounted() {
105 |     this.$nextTick(() => {
106 |       this._initScroll();
107 |     });
108 |   },
109 |   methods: {
110 |     _initScroll() {
111 |       if (!this.$refs.wrapper) {
112 |         return;
113 |       }
114 |       if (this.$refs.listWrapper) {
115 |         this.$refs.listWrapper.style.minHeight = `${getRect(this.$refs.wrapper).height + 1}px`;
116 |       }
117 |       // better-scroll的初始化
118 |       this.scroll = new BScroll(this.$refs.wrapper, {
119 |         probeType: this.probeType, // 是否实时刷新scroll
120 |         click: this.click, // 列表中是否添加click事件
121 |         scrollX: this.scrollX, // 是否开启横向滑动
122 |         scrollY: this.scrollY, // 是否开启纵向滑动
123 |         scrollbar: this.scrollbar, // 是否需要开启显示滚动条
124 |         eventPassthrough: this.eventPassthrough, // 嵌套滑动是否互斥
125 |         pullDownRefresh: this.pullDownRefresh, // 是否开启下拉刷新
126 |         pullUpLoad: this.pullUpLoad, // 是否开启上拉加载
127 |         useTransition: false, // 是否启动css动画,false启动js动画
128 |       });
129 |       // 是否派发滚动事件
130 |       if (this.listenScroll) {
131 |         this.scroll.on('scroll', (pos) => {
132 |           if (pos.y > 60) {
133 |             this.isPullingDownStatus = true;
134 |           } else {
135 |             this.isPullingDownStatus = false;
136 |           }
137 |           this.$emit('scroll', pos);
138 |         });
139 |       }
140 |       // 是否派发滚动到底部事件，用于上拉加载
141 |       if (this.pullUpLoad) {
142 |         const _this = this;
143 |         _this.scroll.on('pullingUp', () => {
144 |           if (_this.pullUpDirty) {
145 |             _this.isPullingUp = true;
146 |             _this.$emit('pullingUp');
147 |           }
148 |         });
149 |       }
150 |       // 是否派发顶部下拉事件，用于下拉刷新
151 |       if (this.pullDownRefresh) {
152 |         this.scroll.on('pullingDown', () => {
153 |           this.isPullingDown = true;
154 |           this.$emit('pullingDown');
155 |         });
156 |         // 监听手指离开的事件
157 |         this.scroll.on('touchEnd', (pos) => {
158 |           if (pos.y > 60) {
159 |             this.isTouchEndStatus = true;
160 |           } else {
161 |             this.isTouchEndStatus = false;
162 |           }
163 |         });
164 |         // 监听手指触摸前的事件
165 |         this.scroll.on('beforeScrollStart', () => {
166 |           this.isTouchEndStatus = false;
167 |         });
168 |       }
169 |     },
170 |     // 代理better-scroll的enable方法
171 |     enable() {
172 |       this.scroll && this.scroll.enable();
173 |     },
174 |     // 代理better-scroll的disable方法
175 |     disable() {
176 |       this.scroll && this.scroll.disable();
177 |     },
178 |     // 代理better-scroll的destroy方法
179 |     destroy() {
180 |       this.scroll && this.scroll.destroy();
181 |     },
182 |     // 代理better-scroll的autoPullDownRefresh方法
183 |     autoPullDownRefresh() {
184 |       this.scroll && this.scroll.autoPullDownRefresh();
185 |     },
186 |     // 代理better-scroll的closePullUp方法
187 |     closePullUp() {
188 |       this.scroll && this.scroll.closePullUp();
189 |     },
190 |     // 代理better-scroll的openPullUp方法
191 |     openPullUp() {
192 |       this.scroll && this.scroll.openPullUp();
193 |     },
194 |     // 代理better-scroll的refresh方法
195 |     refresh() {
196 |       this.scroll && this.scroll.refresh();
197 |     },
198 |     // 代理better-scroll的scrollTo方法
199 |     scrollTo() {
200 |       this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments);
201 |     },
202 |     // 代理better-scroll的scrollToElement方法
203 |     scrollToElement() {
204 |       this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments);
205 |     },
206 |     forceUpdate(dirty) {
207 |       this.$nextTick(() => {
208 |         this.pullUpDirty = dirty;
209 |         if (this.pullDownRefresh) {
210 |           this._reboundPullDown().then(() => {
211 |             this._afterPullDown();
212 |           });
213 |         } else if (this.pullUpLoad) {
214 |           this.scroll.finishPullUp();
215 |           this.refresh();
216 |         } else {
217 |           this.refresh();
218 |         }
219 |       });
220 |     },
221 |     _reboundPullDown() {
222 |       const { stopTime = 600 } = this.pullDownRefresh;
223 |       return new Promise((resolve) => {
224 |         this.reboundPullDownTimer = setTimeout(() => {
225 |           this.isPullingDown = false;
226 |           this.scroll.finishPullUp();
227 |           this.scroll.finishPullDown();
228 |           resolve();
229 |         }, stopTime);
230 |       });
231 |     },
232 |     _afterPullDown() {
233 |       this.afterPullDownTimer = setTimeout(() => {
234 |         this.refresh();
235 |       }, this.scroll.options.bounceTime);
236 |     },
237 |   },
238 |   destroyed() {
239 |     this.scroll && this.scroll.destroy();
240 |     this.reboundPullDownTimer && clearTimeout(this.reboundPullDownTimer);
241 |     this.reboundPullDownTimer = null;
242 |     this.afterPullDownTimer && clearTimeout(this.afterPullDownTimer);
243 |     this.afterPullDownTimer = null;
244 |   },
245 | };
246 | </script>
247 | 
248 | <style lang="scss" scoped>
249 | .pulldown{
250 |   position: absolute;
251 |   left: 0;
252 |   top: -60px;
253 |   display: flex;
254 |   justify-content: center;
255 |   align-items: center;
256 |   width: 100%;
257 |   height: 60px;
258 | }
259 | </style>
260 | 


--------------------------------------------------------------------------------
/packages/scroll/src/dom.js:
--------------------------------------------------------------------------------
 1 | export function hasClass(el, className) {
 2 |   const reg = new RegExp(`(^|\\s)${className}(\\s|$)`);
 3 |   return reg.test(el.className);
 4 | }
 5 | 
 6 | export function addClass(el, className) {
 7 |   if (hasClass(el, className)) {
 8 |     return;
 9 |   }
10 | 
11 |   const newClass = el.className.split(' ');
12 |   newClass.push(className);
13 |   el.className = newClass.join(' ');
14 | }
15 | export function getRect(el) {
16 |   if (el instanceof window.SVGElement) {
17 |     const rect = el.getBoundingClientRect();
18 |     return {
19 |       top: rect.top,
20 |       left: rect.left,
21 |       width: rect.width,
22 |       height: rect.height,
23 |     };
24 |   }
25 |   return {
26 |     top: el.offsetTop,
27 |     left: el.offsetLeft,
28 |     width: el.offsetWidth,
29 |     height: el.offsetHeight,
30 |   };
31 | }
32 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/daughterRui/vue-custom-scrollview/861547f744b40c15098799e0c8d73a682e9fe744/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-floating</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-floating doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // 修改 src 目录 为 examples 目录
 3 |   pages: {
 4 |     index: {
 5 |       entry: 'examples/main.js',
 6 |       template: 'public/index.html',
 7 |       filename: 'index.html',
 8 |     },
 9 |   },
10 |   // 强制内联CSS
11 |   css: { extract: false },
12 |   // 扩展 webpack 配置，使 packages 加入编译
13 |   chainWebpack: (config) => {
14 |     config.module
15 |       .rule('js')
16 |       .include
17 |       .add('/packages')
18 |       .end()
19 |       .use('babel')
20 |       .loader('babel-loader')
21 |       .tap(options => options);
22 |   },
23 | };
24 | 


--------------------------------------------------------------------------------