vue移动UI框架滑动加载数据的方法(2)

<template> <div> <r-scroll ref="scroll" @loadmore="queryDate"> <div v-for="(item, index) in list">{{item}}</div> </r-scroll> </div> </template> <script> import rScroll from '../../components/scroll' function timeout (ms) { return new Promise((resolve, reject) => { setTimeout(resolve, ms, 'done') }) } export default{ components: {rScroll}, data () { return { i: 0, list: [] } }, methods: { async queryDate () { await timeout(1000) let i = this.i let data = [] for (let j = 0; j < 40; j++) { data.push(i + j) this.i = this.i + 1 } this.list = this.list.concat(data) // 调用组件中的loaded函数，如果数据加载完成后记得调用组件的compleate函数 this.$refs.scroll.loaded() } }, mounted () { this.queryDate() } } </script> <style lang="scss"> .item{ background-color: #f2f2f2; border-bottom: 1px solid #fff; height: 40px; line-height: 40px; text-align: center; } </style>