vue 中使用 iscroll的使用方法

vue中使用 iscroll的方法

第一步：先安装scroll的依赖包
cnpm install iscroll -s (按下回车键安装)

/*下载成功以后是这个样子的*/
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 420ms(network 418ms), speed 4.02kB/s, json 1(1.68kB), tarball 0B)

我们可以在package.json的文件夹出现了

"dependencies": {

    * "iscroll": "^5.2.0", 
    
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

第二部：下载完成以后就可以在项目文件中引入了

import Iscroll from 'iscroll'

然后在 script标签中进行配置

mounted() {
            //阻止浏览器的默认行为
               document.addEventListener("touchmove", function (ev) {
                    ev.preventDefault()
                }, { passive: false })
            let iscroll = new Iscroll("#wrapper",{
                scrollX:true,
                scrollY:false
            })
        },

这是我编写的一个移动端的头部导航的案例

（附：代码如下）

<template>
    <div class="Viedo">
        <div class="viedo-main">
            <nav id="wrapper">
                <ul>
                    <li><a href="">山楂</a></li>
                    <li><a href="">梨子</a></li>
                    <li><a href="">菠萝</a></li>
                    <li><a href="">香蕉</a></li>
                    <li><a href="">芒果</a></li>
                    <li><a href="">猕猴桃</a></li>
                    <li><a href="">西柚</a></li>
                    <li><a href="">火龙果</a></li>
                    <li><a href="">橙子</a></li>
                </ul>
            </nav>
        </div>
    </div>
</template>

<script>
import Iscroll from 'iscroll'
    export default {
        name:"Viedo",
        data() {
            return {
                
            }
        },
        //在页面更新之后在执行的钩子函数
        mounted() {
            //阻止浏览器的默认行为
               document.addEventListener("touchmove", function (ev) {
                    ev.preventDefault()
                }, { passive: false })
            let iscroll = new Iscroll("#wrapper",{
                scrollX:true,
                scrollY:false
            })
        },
    }
</script>

<style lang="scss" scoped>
nav{
    width: 100%;
    height: 1rem;
    line-height: 1rem;   
    background-color: green;
    overflow: auto;
    ul{
        width: 150%;
        display: flex;
        align-items: center;
        li{
            flex: 1;
        }
    }
}
</style>

*安装iscroll以后鼠标左右滑动导航条的时候是有弹性的，如果不安装的话也可以的使用overflow: auto;这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条；不过没有安装iscroll的方法在鼠标滑动的时候更有弹性的。

大家还可以参考iscroll的官网：

（附：网站）
		https://iiunknown.gitbooks.io/iscroll-5-api-cn/content/snap.html