```html
<div class="demo-block" id="pulldown-demo1">
  <lx-divider>Pull Down to Refresh</lx-divider>
  <lx-scroller
    ref="demo1"
    lock-x
    scrollbar-y
    use-pulldown
    height="200px"
    @on-pulldown-loading="load1"
  >
    <div class="box2">
      <p
        v-for="i in n1"
        :key="i"
      >
        placeholder {{ i }}
      </p>
    </div>
  </lx-scroller>

  <lx-divider>Chinese: 下拉刷新</lx-divider>
  <lx-scroller
    v-model="status1"
    lock-x
    scrollbar-y
    use-pulldown
    :pulldown-config="{content:'下拉刷新',downContent:'下拉刷新',upContent:'释放刷新',loadingContent:'加载中'}"
    height="200px"
    @on-pulldown-loading="load2"
  >
    <div class="box2">
      <p
        v-for="i in 80"
        :key="i"
      >
        占位 {{ i }}
      </p>
    </div>
  </lx-scroller>

  <lx-divider>custom pulldown html template</lx-divider>
  <lx-scroller
    ref="demo3"
    v-model="status2"
    lock-x
    scrollbar-y
    use-pulldown
    height="200px"
    @on-pulldown-loading="load3"
  >
    <!--content slot-->
    <div class="box2">
      <p
        v-for="i in 80"
        :key="i"
      >
        placeholder {{ i }}
      </p>
    </div>

    <!--pulldown slot-->
    <div
      slot="pulldown"
      class="xs-plugin-pulldown-container xs-plugin-pulldown-down"
      style="position: absolute; width: 100%; height: 60px; line-height: 60px; top: -60px; text-align: center;"
    >
      <span v-show="status2.pulldownStatus === 'default'" />
      <span
        v-show="status2.pulldownStatus === 'down' || status2.pulldownStatus === 'up'"
        class="pulldown-arrow"
        :class="{'rotate': status2.pulldownStatus === 'up'}"
      >↓</span>
      <span v-show="status2.pulldownStatus === 'loading'"><lx-spinner type="ios-small" /></span>
    </div>
  </lx-scroller>
</div>


<script>
// Pulldown.md
new Vue({
  el: '#pulldown-demo1',
  
  data: {
      n1: 10,
      status: {
        pulldownStatus: 'default'
      },
      status1: {
        pulldownStatus: 'default'
      },
      status2: {
        pulldownStatus: 'default'
      }
  },
  methods: {
    load1 () {
      this.n1 += 10
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.demo1.donePulldown()
        }, 1000)
      })
    },
    load2 () {
      setTimeout(() => {
        this.status1.pulldownStatus = 'default'
      }, 2000)
    },
    load3 () {
      setTimeout(() => {
        this.$refs.demo3.donePulldown()
      }, 2000)
    }
  }
})
</script>

<style>
.box1 {
  height: 100px;
  position: relative;
  width: 1490px;
}
.box1-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.rotate {
  transform: rotate(-180deg);
}
.pulldown-arrow {
  display: inline-block;
  transition: all linear 0.2s;
  color: #666;
  font-size: 25px;
}
</style>
```