背景
每次写之前先写一下背景,也就是俗称,水字数,哈哈哈哈哈 做项目的时候,写了个导航,左右滑动
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);
},
}