background

Every time you write, you write the background, which is commonly known as the word count, hahahahahaha, when I did the project, I wrote a navigation, left and right

setup

First, of course, is version “iscroll”: “^5.2.0”,

Below is the 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>
Copy the code

Then there’s initialization

export default {
    mounted () {
        const IScroll = require('iscroll');
        const tabScroll = new IScroll(this.$refs.channelList, {
            scrollX: true.scrollY: false.click: false./* A problem that prevents clicking events from jumping twice */
            disablePointer: true.// Pointer events
            disableTouch: false.// Disable touch event to solve slide stutter problem
            disableMouse: false.// Disable mouse events to resolve slide stutter
            tap: true.// freeScroll: true,
            eventPassthrough: true /* Keep the native vertical scrollbar but want to add iScroll functionality for horizontal scrollbars */
        });
        tabScroll.scrollToElement('.active'.200.true.true); }},Copy the code