Skip to content
vue iscroll 指令
JavaScript
Branch: master
Clone or download
Latest commit 37fb837 Jan 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode 修改钩子函数,使用es5语法 Mar 9, 2017
dist remove console.log Jul 24, 2017
src remove console.log Jul 24, 2017
test/unit fix unit test Jan 23, 2017
.gitignore move coverage to test Jan 23, 2017
LICENSE Initial commit Dec 3, 2016
karma.conf.js move coverage to test Jan 23, 2017
package.json Update package.json Jan 6, 2019
readme.md add demo Nov 28, 2017

readme.md

Vue iscroll directive

An iscroll directive for Vue

DEMO

online demo: https://marxjiao.com/viscroll-demo/

code: https://github.com/MarxJiao/viscroll-demo

Install

npm install viscroll

USE

Use this directive in the vue components

<template>
    <!-- add directive to the iscroll wrapper-->
    <div v-iscroll>
        <!-- content -->
    </div>

    <!-- this will replease the config in 'use' key word -->
    <div v-iscroll="iscrollConf">
        <!-- content -->
    </div>

    <!-- use a fonction to get the instance of Iscroll -->
    <div v-iscroll=getIscroll>
        <!-- content -->
    </div>
</template>

<script>

import VIscroll from 'viscroll';

Vue.use(VIscroll, {
    mouseWheel: true,
    click: false,
    preventDefault: true,
    tap: false,
    bounce: false,
    disableTouch: true
});

export {
    data() {
        return {
            iscrollConf: {
                mouseWheel: true,
                vScrollbar: true,
                click: true,
                preventDefault: true,
                tap: true,
                bounce: false,
                disableTouch: true
            }
        }
    },
    methods: {

        /**
         * get the instance of Iscroll
         *
         * @param {Object} iscroll A instance of Iscroll
         */
        getIscroll(iscroll) {
            // do something with iscroll instance
        }
    }
}

</script>
You can’t perform that action at this time.