├── .babelrc ├── test └── test.js ├── src ├── index.js └── index.vue ├── spec └── support │ └── jasmine.json ├── docs ├── src │ ├── template.html │ ├── main.js │ ├── App.vue │ └── md │ │ └── content.md ├── index.html └── webpack.config.js ├── .eslintrc.js ├── webpack.config.js ├── .gitignore ├── LICENSE ├── package.json ├── index.js └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": "es2015" 3 | } 4 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const Vue = require('vue') 3 | const IScrollView = require('../index.js') 4 | 5 | describe('iscroll', () => { 6 | }) 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import IScrollView from './index.vue' 2 | 3 | export default { 4 | install (Vue, options = {}) { 5 | Vue._IScroll = options.IScroll || options 6 | Vue.component('iscroll-view', IScrollView) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /spec/support/jasmine.json: -------------------------------------------------------------------------------- 1 | { 2 | "spec_dir": "spec", 3 | "spec_files": [ 4 | "**/*[sS]pec.js" 5 | ], 6 | "helpers": [ 7 | "helpers/**/*.js" 8 | ], 9 | "stopSpecOnExpectationFailure": false, 10 | "random": false 11 | } 12 | -------------------------------------------------------------------------------- /docs/src/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-iscroll-view 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-iscroll-view 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import IScrollView from '../../src/index.js' 3 | import IScroll from 'iscroll' 4 | 5 | import 'github-markdown-css' 6 | import 'highlight.js/styles/github.css' 7 | 8 | import App from './App.vue' 9 | 10 | Vue.use(IScrollView, IScroll) 11 | 12 | const rootNode = document.createElement('div') 13 | document.body.appendChild(rootNode) 14 | 15 | /* eslint-disable no-new */ 16 | new Vue({ 17 | el: rootNode, 18 | render (h) { 19 | return h(App) 20 | } 21 | }) 22 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | 'rules': { 15 | // allow paren-less arrow functions 16 | 'arrow-parens': 0, 17 | // allow async-await 18 | 'generator-star-spacing': 0, 19 | // allow debugger during development 20 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/index.js', 6 | output: { 7 | path: path.resolve(__dirname, './'), 8 | filename: 'index.js', 9 | library: 'VueIscrollView', 10 | libraryTarget: 'umd' 11 | }, 12 | externals: { 13 | vue: 'vue' 14 | }, 15 | module: { 16 | loaders: [ 17 | { 18 | test: /\.vue$/, 19 | loader: 'vue-loader', 20 | exclude: /node_modules/ 21 | }, 22 | { 23 | test: /\.js$/, 24 | loader: 'babel-loader', 25 | exclude: /node_modules/ 26 | } 27 | ] 28 | }, 29 | } 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /docs/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | 31 | 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 马金花儿 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: './docs/src/main.js', 7 | output: { 8 | path: path.resolve(__dirname, './'), 9 | filename: 'index.js' 10 | }, 11 | module: { 12 | loaders: [ 13 | { 14 | test: /\.vue$/, 15 | use: ['vue-loader', 'eslint-loader'], 16 | exclude: /node_modules/ 17 | }, 18 | { 19 | test: /\.md$/, 20 | use: 'vue-markdown-loader', 21 | exclude: /node_modules/ 22 | }, 23 | { 24 | test: /\.js$/, 25 | use: ['babel-loader', 'eslint-loader'], 26 | exclude: [/node_modules/, /md/] 27 | }, 28 | { 29 | test: /\.css$/, 30 | use: ['style-loader', 'css-loader'] 31 | } 32 | ] 33 | }, 34 | plugins: [ 35 | new HtmlWebpackPlugin({ 36 | template: './docs/src/template.html' 37 | }) 38 | ] 39 | }; 40 | -------------------------------------------------------------------------------- /docs/src/md/content.md: -------------------------------------------------------------------------------- 1 | # VUE ISCROLL VIEW 2 | 3 | [IScroll](https://github.com/cubiq/iscroll) component for Vue 2.0 4 | 5 | ## Install 6 | 7 | ```bash 8 | $ npm i vue-iscroll-view 9 | $ npm i iscroll 10 | ``` 11 | 12 | ## Usage 13 | 14 | ```javascript 15 | import IScrollView from 'vue-iscroll-view' 16 | 17 | /* Using these kinds of IScroll class for different cases. */ 18 | import IScroll from 'iscroll' 19 | // import IScroll from 'iscroll/build/iscroll-infinite.js 20 | // import IScroll from 'iscroll/build/iscroll-probe.js 21 | // import IScroll from 'iscroll/build/iscroll-view.js 22 | // import IScroll from 'iscroll/build/iscroll-zoom.js 23 | // import IScroll from 'iscroll/build/iscroll-lite.js 24 | 25 | Vue.use(IScrollView, IScroll) 26 | ``` 27 | ## Example 28 | 29 | ### Preview 30 | 31 | This page is rendered by vue-iscroll-view, Pull it up and down to preview. 32 | 33 | ### Source Code 34 | 35 | ```html 36 | 42 | 43 | 58 | 59 | 73 | ``` -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-iscroll-view", 3 | "version": "1.0.3", 4 | "description": "IScroll for Vue 2.0 Component", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "webpack -p", 8 | "build:docs": "webpack -p --config ./docs/webpack.config.js", 9 | "dev": "webpack-dev-server --content-base docs --config ./docs/webpack.config.js --hot --inline", 10 | "lint": "eslint --ext .js,.vue src docs/src build" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/Dafrok/vue-iscroll-view.git" 15 | }, 16 | "keywords": [ 17 | "iscroll", 18 | "vue", 19 | "vue 2.0", 20 | "iscroll", 21 | "vue-component" 22 | ], 23 | "author": "Dafrok ", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/Dafrok/vue-iscroll-view/issues" 27 | }, 28 | "homepage": "https://github.com/Dafrok/vue-iscroll-view#readme", 29 | "peerDependencies": { 30 | "iscroll": ">=5.2.0", 31 | "vue": ">=2.0.7" 32 | }, 33 | "devDependencies": { 34 | "babel-core": "^6.22.1", 35 | "babel-eslint": "^7.2.3", 36 | "babel-loader": "^6.2.7", 37 | "babel-preset-es2015": "^6.18.0", 38 | "css-loader": "^0.26.2", 39 | "eslint": "^4.0.0", 40 | "eslint-config-standard": "^10.2.1", 41 | "eslint-loader": "^1.7.1", 42 | "eslint-plugin-html": "^3.0.0", 43 | "eslint-plugin-import": "^2.3.0", 44 | "eslint-plugin-node": "^5.0.0", 45 | "eslint-plugin-promise": "^3.5.0", 46 | "eslint-plugin-standard": "^3.0.1", 47 | "github-markdown-css": "^2.4.1", 48 | "highlight.js": "^9.9.0", 49 | "html-webpack-plugin": "^2.28.0", 50 | "iscroll": "^5.2.0", 51 | "pug": "^2.0.0-beta6", 52 | "style-loader": "^0.13.2", 53 | "vue": "^2.1.10", 54 | "vue-loader": "^9.9.5", 55 | "vue-markdown-loader": "^0.6.2", 56 | "vue-template-compiler": "^2.1.10", 57 | "webpack": "^2.2.1", 58 | "webpack-dev-server": "^2.3.0" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 125 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):"object"==typeof exports?exports.VueIscrollView=e(require("vue")):t.VueIscrollView=e(t.vue)}(this,function(t){return function(t){function e(o){if(r[o])return r[o].exports;var n=r[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,e),n.l=!0,n.exports}var r={};return e.m=t,e.c=r,e.i=function(t){return t},e.d=function(t,r,o){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=4)}([function(t,e,r){var o,n;o=r(1);var l=r(2);n=o=o||{},"object"!=typeof o.default&&"function"!=typeof o.default||(n=o=o.default),"function"==typeof n&&(n=n.options),n.render=l.render,n.staticRenderFns=l.staticRenderFns,t.exports=o},function(t,e,r){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=r(3),l=o(n);e.default={name:"iscroll-view",props:{options:{type:Object,default:function(){return{}}},wrapperClass:{type:Object,default:function(){return{}}},wrapperStyle:{type:Object,default:function(){return{}}},scrollerClass:{type:Object,default:function(){return{}}},scrollerStyle:{type:Object,default:function(){return{}}}},methods:{_registPullEvents:function(){var t=this,e=this.iscroll;e.on("scrollEnd",function(r){e.y<=e.maxScrollY?t.$emit("pullUp",e):e.y>=0&&t.$emit("pullDown",e)})},zoom:function(){var t=this,e=arguments;this.$nextTick(function(){return t.iscroll.zoom.apply(t.iscroll,e)})},goToPage:function(){var t=this,e=arguments;this.$nextTick(function(){return t.iscroll.goToPage.apply(t.iscroll,e)})},next:function(){var t=this,e=arguments;this.$nextTick(function(){return t.iscroll.next.apply(t.iscroll,e)})},prev:function(){var t=this,e=arguments;this.$nextTick(function(){return t.iscroll.prev.apply(t.iscroll,e)})},scrollToElement:function(){var t=this,e=arguments;this.$nextTick(function(){return t.iscroll.scrollToElement.apply(t.iscroll,e)})},scrollBy:function(){var t=this,e=arguments;this.$nextTick(function(){return t.iscroll.scrollBy.apply(t.iscroll,e)})},scrollTo:function(){var t=this,e=arguments;this.$nextTick(function(){return t.iscroll.scrollTo.apply(t.iscroll,e)})},refresh:function(){var t=this,e=arguments;this.$nextTick(function(){return t.iscroll.refresh.apply(t.iscroll,e)})}},beforeDestroy:function(){this.iscroll&&this.iscroll.destroy(),this.iscroll=null},mounted:function(){var t=this,e=["beforeScrollStart","scrollCancel","scrollStart","scrollEnd","scroll","flick","zoomStart","zoomEnd"];setTimeout(function(){var e=void 0,r=void 0,o=t.$refs.scrollView.attributes;t.$refs.scrollView.scrollTop=0;for(e in o)r=o[e],r instanceof Attr&&r.name.indexOf("data-v-")>-1&&t.$refs.scroller.attributes.setNamedItem(document.createAttribute(r.name));try{location.hash&&t.iscroll.scrollToElement(location.hash,0)}catch(t){}},0),this.$nextTick(function(){var r=l.default._IScroll;t.iscroll=new r(t.$refs.scrollView,t.options),e.forEach(function(e){t.iscroll.on(e,function(){return t.$emit(e,t.iscroll)})}),t._registPullEvents()})}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{ref:"scrollView",class:t.wrapperClass,style:t.wrapperStyle},[r("div",{ref:"scroller",class:t.scrollerClass,style:t.scrollerStyle},[t._t("default")],2)])},staticRenderFns:[]}},function(e,r){e.exports=t},function(t,e,r){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=r(0),l=o(n);e.default={install:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t._IScroll=e.IScroll||e,t.component("iscroll-view",l.default)}}}])}); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/vue-iscroll-view.svg)](https://badge.fury.io/js/vue-iscroll-view) 2 | 3 | # vue-iscroll-view 4 | 5 | [IScroll](https://github.com/cubiq/iscroll) component for Vue 2.x 6 | 7 | ## Demo 8 | 9 | > https://dafrok.github.io/vue-iscroll-view/ 10 | 11 | ## Built with vue-iscroll-view 12 | - [vue-flexible-app](https://github.com/momopig/vue-flexible-app) 13 | 14 | ## Install 15 | 16 | ```bash 17 | $ npm i vue-iscroll-view 18 | $ npm i iscroll 19 | ``` 20 | 21 | ## Get Start 22 | 23 | ```javascript 24 | import IScrollView from 'vue-iscroll-view' 25 | 26 | /* Using these kinds of IScroll class for different cases. */ 27 | import IScroll from 'iscroll' 28 | // import IScroll from 'iscroll/build/iscroll-infinite.js 29 | // import IScroll from 'iscroll/build/iscroll-probe.js 30 | // import IScroll from 'iscroll/build/iscroll-view.js 31 | // import IScroll from 'iscroll/build/iscroll-zoom.js 32 | // import IScroll from 'iscroll/build/iscroll-lite.js 33 | 34 | Vue.use(IScrollView, IScroll) 35 | ``` 36 | 37 | ```vue 38 |