option：配置iscroll参数，这里面注意scrollX，scrollY两个属性，代表的是横向还是竖向滚动；
instance：回调方法的调用， vIscroll.js 中执行回调方法，通过该组件方法 getIscroll() 获取到 iscroll 的实例。
3、上下滚动区域联动
上面的代码可以解决开篇场景中的问题，现在实现上下区域联动，通过点击横向滚动条某个按钮，使其变成选中状态，然后竖向滚动条对应的项跳到首位，如图所以：
联动示例图
3-1、联动实现方法
点击按钮的方法：
tabEvent (item, currentIndex) {
this.currentId = item.id
this.currentIndex = currentIndex
<!--这里实现按钮始终居中显示，暂时省略，下面补充-->
...
<!--传给竖向滚动组件-->
this.$emit("switchTab", this.currentId, this.currentIndex)
},竖向滚动区域组件【App.vue】代码部分如下，并对 switchTab() 方法进行详细注释：
<template>
<div id="app">
<TabList
:list="list"
@switchTab="switchTab"
></TabList>
<!-- v-iscroll="defalutOption" -->
<div
v-iscroll="{
option: defalutOption,
instance: getIscroll
}"
class="tab-content-container"
ref="detailItemContainer"
>
<ul class="tab-list-container">
<li
v-for="item in list"
:key="item.id"
class="list-item"
ref="detailItem"
>
<div>{{item.value}}</div>
</li>
</ul>
</div>
</div>
</template><script>
import TabList from './components/tabList.vue'
export default {
name: 'App',
components: {
TabList,
},
data () {
return {
list: [
{ id: 1, value: '这是第1题', num: 1 },
<!--...省略数据展示-->
{ id: 16, value: '这是第16题', num: 16 }
],
defalutOption: {
bounce: true,
mouseWheel: true,
click: true,
scrollX: false,
scrollY: true
},
myScroll: null
}
},
methods: {
switchTab (currentId, currentIndex) {
<!--对选中的当前项，这里就是“3”按钮对应的“这是第3题”，求出它距离父元素的上边距offsetTop值-->
const offsetTop = this.$refs.detailItem[currentIndex].offsetTop
<!--滚动的范围不能超过这个滚动体的底部，这里面用到iscroll的属性maxScrollY-->
const y = offsetTop >= Math.abs(this.myScroll.maxScrollY) ? this.myScroll.maxScrollY : -offsetTop
<!--调用iscroll的方法进行滚动到相应的位置-->
