WARNING

最外层容器必须要给明宽度或高度，具体根据你时水平滚动还是竖直滚动而定，如果觉得给定具体的宽高太死板，可用fixed定位配合top，bottom，left，right来设置 容器的大小，或者通过js，css的calc动态来计算最外层容器的大小

scrollNavBar props

属性	描述	类型	默认值
options	scroll的配置 （options的详细配置，better-scroll文档）	object	{}
list	绑定的数据列表	array	[]
direction	滚动方向，有vertical和horizontal可选	string	vertical
valueKey	list选项value的key值	string	value
labelKey	list选项label的key值	string	label
currentIndex	初始选中的下标	number	0
padding	每个选项的padding样式	string	15px 15px
fontSize	每个选项的fontSize样式	number	15

scrollNavBar slot

名称	描述	参数
default	滚动区域	data: 当前项的信息， index: 当前项的下标

scrollNavBar events

事件	说明	回调参数
change	选中下标改变时触发	index
click	选项点击时触发	{ data: '当前选项的信息', index: '当前选项的下标'}
input	选中的下标改变时触发	index

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">横向滚动插槽（数据量很多）</p>
      <vill-scroll-nav-bar
        v-model="index"
        direction="horizontal"
        :list="list"
        @click="handleClick"
        @change="handleChange"
      >
        <template #default="{data, index}">
          <span>{{data + '_' + index}}</span>
        </template>
      </vill-scroll-nav-bar>
      <p class="item_change">{{index}}</p>
    </div>
    <div class="items">
      <p class="item_title">横向滚动（数据量很少）</p>
      <vill-scroll-nav-bar
        direction="horizontal"
        :list="list.slice(0, 3)"
        padding="10px 15px"
        :fontSize="14"
      />
    </div>
    <div class="items">
      <p class="item_title">纵向滚动</p>
      <div class="v_w">
        <vill-scroll-nav-bar
          v-model="index"
          direction="vertical"
          :list="h_list"
          labelKey="text"
          valueKey="val"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      h_list: [],
      index: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(data) {
      console.log('click', data)
    },

    handleChange(data) {
      console.log('change', data)
    },

    getList() {
      setTimeout(() => {
        this.list = [
          '苹果',
          '天马流星拳',
          '香蕉',
          '大兄弟',
          'yes',
          '葡萄',
          '西红柿',
          '番茄',
          '守护雅典娜',
          '顶不住',
          '阿波罗',
          'kobe',
          'james',
          'java',
          'javaScript',
          'golang',
          'python'
        ]
        this.index = 1
        this.h_list = this.list.map(item => ({
          val: item,
          text: `- ${item} -`
        }))
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.v_w{
  width: 100px;
  height: 500px;
  border-right: 1px solid #eeeeee;
}
</style>