Scroll View 数据滚动视图

提示

请在移动设备查看示例

普通用法（smoothing）

<wx-scroll-view>
  <wx-list>
    <wx-list-item @click="v = true">Add a row at the end, trigger auto resize</wx-list-item>
    <wx-list-item v-for="(item, index) in items" :key="index">{{item}}</wx-list-item>
    <wx-list-item v-if="v">I'm a fresh row</wx-list-item>
  </wx-list>
</wx-scroll-view>

<script>
export default {
  data() {
    return {
      items: [],
      i: 0,
      v: false
    };
  },
  mounted() {
    this.mockData();
  },
  methods: {
    mockData() {
      let its = [];
      let count = this.items.length + 1;
      for (let i = 0; i < 40; i++) {
        its.push(`row - ${count + i}`);
      }
      this.items = this.items.concat(its);
    }
  }
};
</script>

下拉刷新/上拉加载

<wx-scroll-view @refresh="refresh" @infinite="infinite">
  <wx-list>
    <wx-list-item v-for="(item, index) in items" :key="index">{{item}}</wx-list-item>
  </wx-list>
</wx-scroll-view>

<script>
export default {
  data() {
    return {
      items: [],
      i: 0,
      v: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    mockData() {
      let its = [];
      let count = this.items.length + 1;
      for (let i = 0; i < 20; i++) {
        its.push(`row - ${count + i}`);
      }
      this.items = this.items.concat(its);
    },
    init() {
      this.i = 0;
      this.items = [];
      this.mockData();
    },
    refresh(e) {
      setTimeout(() => {
        this.init();
        e.stopRefresh();
      }, 1500);
    },
    infinite(e) {
      setTimeout(() => {
        if (this.i === 2) {
          e.stopInfinite(true);
          return;
        }
        this.mockData();
        e.stopInfinite();
        this.i++;
      }, 1000);
    }
  }
};
</script>

自定义显示文本

<wx-scroll-view
  :pull-text="pullText"
  :refresh-text="refreshText"
  :load-text="loadText"
  :no-data-text="noDataText"
  @refresh="refresh"
  @infinite="infinite"
>
  <wx-list>
    <wx-list-item v-for="(item, index) in items" :key="index">{{item}}</wx-list-item>
  </wx-list>
</wx-scroll-view>

<script>
export default {
  data() {
    return {
      pullText: "Pull to refresh",
      refreshText: "Release to refresh",
      loadText: "Loading",
      noDataText: "No more data",
      items: [],
      i: 0,
      v: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    mockData() {
      ... // 略
    },
    init() {
      ... // 略
    },
    refresh(e) {
      ... // 略
    },
    infinite(e) {
      ... // 略
    }
  }
};
</script>

Scroll View Attributes

参数	说明	类型	可选值	默认值
pullText	自定义下拉显示文本	String	-	下拉刷新
refreshText	自定义下拉释放文本	String	-	释放刷新
loadText	自定义加载更多文本	String	-	正在加载
noDataText	自定义无更多数据文本	String	-	没有更多数据

Scroll View Events

事件名称	说明	回调参数
refresh	下拉视图时触发	event: Event
infinite	滚动视图到底部时触发	event: Event

Scroll View Methods

方法名称	说明	参数
stopRefresh	停止下拉刷新	-
stopInfinite	停止上拉加载	end：boolean, 是否还有更多数据

数据滚动视图