<template>
  <div id="app">
    <header>vue-better-scroll demo</header>
    <main class="position-box">
      <vue-better-scroll class="wrapper"
                         ref="scroll"
                         :scrollbar="scrollbarObj"
                         :pullDownRefresh="pullDownRefreshObj"
                         :pullUpLoad="pullUpLoadObj"
                         :startY="parseInt(startY)"
                         @pulling-down="onPullingDown"
                         @pulling-up="onPullingUp">
        <ul class="list-content">
          <li class="list-item"
              v-for="item in items">{{item}}</li>
        </ul>
      </vue-better-scroll>
    </main>
    <button class="go-top"
            @click="scrollTo">杩斿洖椤堕儴</button>
  </div>
</template>

<script>
  // import VueBetterScroll from '../dist/vue-better-scroll'
  import VueBetterScroll from './lib'

  let count = 1
  export default {
    name: 'app',
    components: { VueBetterScroll },
    data() {
      return {
        // 杩欎釜閰嶇疆鍙互寮€鍚粴鍔ㄦ潯锛岄粯璁や负 false銆傚綋璁剧疆涓� true 鎴栬€呮槸涓€涓� Object 鐨勬椂鍊欙紝閮戒細寮€鍚粴鍔ㄦ潯锛岄粯璁ゆ槸浼� fade 鐨�
        scrollbarObj: {
          fade: true
        },
        // 杩欎釜閰嶇疆鐢ㄤ簬鍋氫笅鎷夊埛鏂板姛鑳斤紝榛樿涓� false銆傚綋璁剧疆涓� true 鎴栬€呮槸涓€涓� Object 鐨勬椂鍊欙紝鍙互寮€鍚笅鎷夊埛鏂帮紝鍙互閰嶇疆椤堕儴涓嬫媺鐨勮窛绂伙紙threshold锛� 鏉ュ喅瀹氬埛鏂版椂鏈轰互鍙婂洖寮瑰仠鐣欑殑璺濈锛坰top锛�
        pullDownRefreshObj: {
          threshold: 90,
          stop: 40,
          txt: '鍒锋柊浜嗗搱'
        },
        // 杩欎釜閰嶇疆鐢ㄤ簬鍋氫笂鎷夊姞杞藉姛鑳斤紝榛樿涓� false銆傚綋璁剧疆涓� true 鎴栬€呮槸涓€涓� Object 鐨勬椂鍊欙紝鍙互寮€鍚笂鎷夊姞杞斤紝鍙互閰嶇疆绂诲簳閮ㄨ窛绂婚槇鍊硷紙threshold锛夋潵鍐冲畾寮€濮嬪姞杞界殑鏃舵満
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: '鍔犺浇鏇村...',
            noMore: '娌℃湁鏇村鏁版嵁鍟�'
          }
        },
        startY: 0, // 绾佃酱鏂瑰悜鍒濆鍖栦綅缃�
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700,
        items: []
      }
    },
    mounted() {
      this.onPullingDown()
    },
    methods: {
      // 婊氬姩鍒伴〉闈㈤《閮�
      scrollTo() {
        this.$refs.scroll.scrollTo(this.scrollToX, this.scrollToY, this.scrollToTime)
      },
      // 妯℃嫙鏁版嵁璇锋眰
      getData() {
        return new Promise(resolve => {
          setTimeout(() => {
            const arr = []
            for (let i = 0; i < 15; i++) {
              arr.push(count++)
            }
            resolve(arr)
          }, 1000)
        })
      },
      onPullingDown() {
        // 妯℃嫙涓嬫媺鍒锋柊
        console.log('涓嬫媺鍒锋柊')
        count = 0
        this.getData().then(res => {
          this.items = res
          this.$refs.scroll.forceUpdate(true)
        })
      },
      onPullingUp() {
        // 妯℃嫙涓婃媺 鍔犺浇鏇村鏁版嵁
        console.log('涓婃媺鍔犺浇')
        this.getData().then(res => {
          this.items = this.items.concat(res)
          if (count < 40) {
            this.$refs.scroll.forceUpdate(true)
          } else {
            this.$refs.scroll.forceUpdate(false)
          }
        })
      }
    }
  }
</script>

<style>
  * {
    padding: 0;
    margin: 0;
  }

  body,
  html {
    height: 100%;
    overflow: hidden;
  }

  #app {
    font-family: '寰蒋闆呴粦', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 9;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: #009a61;
  }

  .position-box {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .list-content {
    list-style: none;
    background: #fff;
  }

  .list-item {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    padding-left: 20px;
    border-bottom: 1px solid #e5e5e5;
  }
  .go-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: #009a61;
    border-radius: 5px;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 15px;
  }
</style>