<template>
  <view class="xd-swipe">
    <scroll-view
      class="xd-swipe__scroll"
      scroll-y
      :show-scrollbar="false"
      @scroll="handleScroll"
      :scroll-into-view="selectId"
      :croll-with-animation="true"
    >
      <view class="xd-swipe__item" :id="getId(index)" v-for="(item,index) in 20" :key="index">{{item}}</view>

    </scroll-view>
  </view>

</template>

<script>
  export default {
    name: "XdSwipeSelect",
    data(){
      return {
        selectId: 'xd-swipe-item-0',
        timeer: null,

        top: 0,
        itemHeight: 0,
        boxHeight: 0
      }
    },

    created(){
      setTimeout(()=> {
        this.selectId = 'xd-swipe-item-10';
      }, 300);

      this.$nextTick(()=>{
        setTimeout(()=>{
          this.$xdUniHelper.getWindowHeight(['#xd-swipe-item-0','.xd-swipe'], this)
            .then(res => {
              this.itemHeight = res['#xd-swipe-item-0'].height;
              this.boxHeight = res['.xd-swipe'].height;
            })
            .catch()
        }, 50)

      })

    },

    methods: {
      handleScrollStop(e){
        console.log(e)
      },
      handleScroll(e){
        if(this.timeer) {
          clearTimeout(this.timeer);
          this.timeer = null;
        }
        this.timeer = setTimeout(()=>{
          this.handleScrollStop(e);
        }, 100)
      },
      getId(index){
        return `xd-swipe-item-${index}`;
      }
    }
  }
</script>

<style scoped lang="less">

  /* #ifdef MP-WEIXIN || APP-PLUS */
  /deep/ .uni-scroll-view::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    display: none
  }
  /* #endif */

  .xd-swipe {
    &__scroll {
      height: unit(500, rpx);
      width: unit(300, rpx);
      padding: unit(30, rpx);
      box-sizing: border-box;
    }

    &__item {
      height: unit(60, rpx);
      background: #eee;
      margin: unit(20, rpx) 0;
    }
  }





</style>
