vue 里面 iscroll 的使用

1,137 阅读1分钟

背景

每次写之前先写一下背景,也就是俗称,水字数,哈哈哈哈哈 做项目的时候,写了个导航,左右滑动

setup

首先当然是版本 "iscroll": "^5.2.0",

下面是template

<template>
    <div class="header-tab">
        <div
            ref="channelList"
            class="channel-list"
        >
            <ul>
                <li
                    v-for="(val, index) in tabs"
                    :key="index"
                >
                    <a
                        :href="val.url"
                        :data-name="val.name"
                        :class="{'active': val.name === curTab}"
                    >{{ val.title }}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

然后是初始化

export default {
    mounted () {
        const IScroll = require('iscroll');
        const tabScroll = new IScroll(this.$refs.channelList, {
            scrollX: true,
            scrollY: false,
            click: false, /* 阻止点击事件跳转两次的问题 */
            disablePointer: true, // 指针事件
            disableTouch: false, // 禁止触摸事件解决滑动卡顿问题
            disableMouse: false, // 禁止鼠标事件解决滑动卡顿问题
            tap: true,
            // freeScroll: true,
            eventPassthrough: true /* 保留原生纵向的滚动条但想为横向滚动条增加iScroll功能 */
        });
        tabScroll.scrollToElement('.active', 200, true, true);
    },
}