Scroller

可下拉刷新上拉加载的容器组件

示例

通用数据代码和回调示例

        <template>
          <div class="scroller-container">
            <nut-scroller 
              :on-refresh="onRefresh"
              :on-infinite="onInfinite">
              <div v-for="(item, index) in list" :key="index" class="content-item">{{'滚动区域的内容' + (index + 1)}}</div>
            </nut-scroller>
          </div>
        </template>
        <style lang="scss">
          .scroller-container {
            position: relative;
            width: 100%;
            height: 300px;
            background: #f2f2f2;
          }
          .content-item {
            padding: 5px;
            line-height: 20px;
            background: #cccccc;
            margin-bottom: 10px;
            font-size: 14px;
          }
        </style>
          export default {
            data() {
              retuen {
                list: [...Array(10)]
              }
            },
            methods: {
              onRefresh(done) {
                setTimeout(() => {
                  this.list = [...Array(10)]
                    done()
                }, 2000)
              },
              onInfinite(done) {
                setTimeout(() => {
                  if (this.list && this.list.length < 30) {
                    this.list = [...this.list, ...Array(10)]
                    done(true);
                    return
                  }
                  done(false) // 回传没有更多数据的标识
                }, 2000)
              }
            }
          }
      

示例

下拉刷新松开刷新数据

滚动区域的内容1

滚动区域的内容2

滚动区域的内容3

滚动区域的内容4

滚动区域的内容5

滚动区域的内容6

滚动区域的内容7

滚动区域的内容8

滚动区域的内容9

滚动区域的内容10

没有更多数据了

Props

插槽