```html
<div class="demo-block" id="pulldown-pullup-demo1">
  <lx-divider>下拉刷新和上拉加载更多组合</lx-divider>
  <lx-scroller
    lock-x
    scrollbar-y
    use-pullup
    use-pulldown
    height="200px"
    :pullup-status.sync="pullupStatus"
    ref:scroller
    @pullup:loading="loadMore"
    @pulldown:loading="refresh"
  >
    <div class="box2">
      <p
        v-for="i in n"
        :key="i"
      >
        placeholder {{ i }}
      </p>
    </div>
    <!--pullup slot-->
    <div
      slot="pullup"
      class="xs-plugin-pullup-container xs-plugin-pullup-up"
      style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;"
    >
      <span v-show="pullupStatus === 'default'" />
      <span
        v-show="pullupStatus === 'down' || pullupStatus === 'up'"
        class="pullup-arrow"
        :class="{'rotate': pullupStatus === 'up'}"
      >↑</span>
      <span v-show="pullupStatus === 'loading'"><lx-spinner type="ios-small" /></span>
    </div>
  </lx-scroller>
  <lx-group>
    <lx-x-switch
      :title="pullupEnabled ? '禁用Pullup' : '启用Pullup'"
      :value="true"
      @on-change="changePullupStatus"
    />
  </lx-group>

  <lx-divider>上拉加载重置</lx-divider>
  <lx-scroller
    lock-x
    scrollbar-y
    use-pullup
    height="200px"
    ref:scroller1
    @pullup:loading="loadMore1"
  >
    <div class="box2">
      <p
        v-for="j in n1"
        :key="j"
      >
        placeholder {{ j }}
      </p>
    </div>
  </lx-scroller>
</div>

<script>
// PulldownPullup.md
new Vue({
  el: '#pulldown-pullup-demo1',
  
  create () {
    console.log('Spinner')
  },
  data: {
    n: 10,
    n1: 10,
    pullupEnabled: true,
    pullupStatus: 'default'
  },
  methods: {
    loadMore (uuid) {
      setTimeout(() => {
        this.n += 10
        this.$nextTick(() => {
          this.$broadcast('pullup:reset', uuid)
        })
      }, 2000)
    },
    refresh (uuid) {
      setTimeout(() => {
        this.n = 10
        this.$nextTick(() => {
          this.$broadcast('pulldown:reset', uuid)
        })
      }, 2000)
    },
    changePullupStatus (enabled) {
      if (enabled) {
        this.$broadcast('pullup:enable', this.$refs.scroller.uuid)
        this.pullupEnabled = true
      } else {
        this.$broadcast('pullup:disable', this.$refs.scroller.uuid)
        this.pullupEnabled = false
      }
    },
    loadMore1 (uuid) {
      setTimeout(() => {
        this.n1 += 10
        this.$nextTick(() => {
          this.$broadcast('pullup:reset', uuid)
          if (this.n1 >= 30) {
            this.$broadcast('pullup:disable', uuid)
            console.log('No more data, Pullup disabled!')
          }
        })
      }, 2000)
    }
  }
})
</script>
<style>
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.rotate {
  display: inline-block;
  transform: rotate(-180deg);
}
.pullup-arrow {
  transition: all linear 0.2s;
  color: #666;
  font-size: 25px;
}
</style>
```