WARNING

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

scroll props

属性	描述	类型	默认值
options	scroll的配置 （options的详细配置，better-scroll文档）	object	{}
data	绑定的数据列表	array	[]
direction	滚动方向，有vertical和horizontal可选	string	vertical
hasPullUpMore	是否还可以继续触发上拉加载更多事件	boolean	true
pullUpLoadingTxt	上拉加载更多的文案	string	加载更多
pullUpOverTxt	上拉加载更多全部加载完成时的文案	string	没有数据啦
pullDownRefreshSuccessTxt	下拉刷新成功时的文案	string	更新成功
pullingDownStartTxt	下拉刷新开始时的文案	string	请继续下拉
pullingDownEndTxt	下拉刷新到最后时的文案	string	松开立即刷新
nestMode	内部嵌套scroll的配置选项，默认不嵌套时none，嵌套时是native	string	none

scroll slot

名称	描述	参数
pulldown	下拉刷新区域	beforePullDown: 是否是下拉开始之前的状态, isPullingDown: 是否在下拉的状态， isPullDownUpdating: 是否是下拉的更新状态, isPullDownThreshold: 是否到了下拉的最大阈值
pullup	上拉加载更多区域	-

scroll events

事件	说明	回调参数
scroll	滚动触发	{ x: '水平方向的距离', y: '竖直方向的距离'}
scrollEnd	滚动结束触发	{ x: '水平方向的距离', y: '竖直方向的距离'}
beforeScrollStart	开始滚动触发	-
pullingUp	当 pullUpLoad 属性为 true 时，在上拉超过阈值时触发	-
pullingDown	当 pullDownRefresh 属性为 true 时，在下拉超过阈值时触发	-

scroll 方法

名称	描述	参数
disable	禁用 scroll，DOM 事件（如 touchstart、touchmove、touchend）的回调函数不再响应	-
enable	启用 scroll	-
destroy	销毁 scroll，解绑事件	-
scrollTo	滚动到指定位置	x: number, 横向位置,y: number, 纵向位置,time: number, 过渡动画时间 (ms),ease: EasingFn, 缓动曲线
refresh	刷新 scroll	-

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">竖直滚动</p>
      <div class="v_wrapper">
        <vill-scroll :data="mocklist" @scroll="handleScroll" @scrollEnd="scrollEnd" @beforeScrollStart="handleBeforeScrollStart">
          <div class="v_item" v-for="(item, index) in mocklist" :key="index">
            {{ item }}
          </div>
        </vill-scroll>
      </div>
    </div>
    <div class="items">
      <p class="item_title">水平滚动</p>
      <div class="h_wrapper">
        <vill-scroll direction="horizontal" :data="mocklist">
          <div class="h_item" v-for="(item, index) in mocklist" :key="index">
            {{ item }}
          </div>
        </vill-scroll>
      </div>
    </div>
    <div class="items">
      <p class="item_title">混合滚动</p>
      <div class="mx_wrapper">
        <vill-scroll :data="mocklist">
          <!-- 横向滚动 -->
          <vill-scroll style="margin-bottom: 10px" direction="horizontal" :data="mocklist">
            <div class="mx_h_item" v-for="(item, index) in mocklist" :key="'h_' + index">
              {{ item }}
            </div>
          </vill-scroll>
          <div class="mx_item" v-for="(item, index) in mocklist.slice(0, 16)" :key="'v1_' + index">
            <div class="mx_text">{{ item }}</div>
          </div>
          <!-- 内嵌的纵向滚动 -->
          <div class="m_v_scroll">
            <vill-scroll :data="mocklist" nestMode="native">
              <div class="m_v_item" v-for="(item, index) in mocklist" :key="index" @click="handleClick(item, index)">
                {{ item }}
              </div>
            </vill-scroll>
          </div>
          <div class="mx_item" v-for="(item, index) in mocklist.slice(16)" :key="'v2_' + index">
            <!-- 最外层的纵向滚动 -->
            <div class="mx_text">{{ item }}</div>
          </div>
        </vill-scroll>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mocklist: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      setTimeout(() => {
        let arr = []
        for (let i=1; i <= 30; i++) {
          arr.push('选项' + i)
        }
        this.mocklist = arr
      }, 200)
    },

    handleClick(item, index) {
      console.log(item, index)
    },

    handleScroll(data) {
      console.log('scroll', data)
    },

    handleBeforeScrollStart() {
      console.log('BeforeScrollStart')
    },

    scrollEnd(data) {
      console.log('scrollEnd', data)
    }

  }
}
</script>
<style lang="scss" scoped>
.v_wrapper{
  width: 100%;
  height: 500px;
  .v_item{
    height: 60px;
    text-align: center;
    line-height: 60px;
    background: #13bb86;
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 10px;
    &:last-of-type{
      margin-bottom: 0;
    } 
  }
}

.h_wrapper{
  width: 100%;
  background: #ffffff;
  .h_item{
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
    padding: 0 14px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #13bb86;
    color: #ffffff;
    font-size: 16px;
    margin-right: 10px;
    &:last-of-type{
      margin-right: 0;
    }
  }
}

.mx_wrapper{
  width: 100%;
  height: 500px;
  .mx_item{
    margin-bottom: 10px;
    &:last-of-type{
      margin-bottom: 0;
    }
    .mx_text{
       height: 60px;
      text-align: center;
      line-height: 60px;
      background: #13bb86;
      color: #ffffff;
      font-size: 16px;
    }
    
  }
}

.mx_h_item{
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  padding: 0 14px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: orange;
  color: #ffffff;
  font-size: 16px;
  margin-right: 10px;
  &:last-of-type{
    margin-right: 0;
  }
}
.m_v_scroll{
  width: 100%;
  height: 300px;
  background: #ffffff;
  margin-bottom: 10px;
  .m_v_item{
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: palevioletred;
    color: #ffffff;
    font-size: 16px;
    margin: 10px 0;
    &:last-of-type{
      margin-bottom: 0;
    }
  }
}
</style>