All Projects → MarxJiao → vue-iscroll-directive

MarxJiao / vue-iscroll-directive

Licence: MIT License
vue iscroll 指令

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to vue-iscroll-directive

Scroller
React版iScroll并且集成下拉刷新,上拉加载更多,Sticky等功能
Stars: ✭ 52 (+73.33%)
Mutual labels:  iscroll
Better Scroll
📜 inspired by iscroll, and it supports more features and has a better scroll perfermance
Stars: ✭ 15,199 (+50563.33%)
Mutual labels:  iscroll
Mescroll
精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器 (JS framework for pull-refresh and pull-up-loading)
Stars: ✭ 3,775 (+12483.33%)
Mutual labels:  iscroll

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>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].