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