移动端 vant
##Dom:
<van-list v-model="loading2" :finished="finished2"
:immediate-check="false" finished-text="没有更多了"
@load="onLoad2" :offset="10">
##xxxx##
##xxxx##
##xxxx##
</van-list>
##script:
data() {
return {
page_size:10,
page:1,
total: 0,//总共的数据条数
loading: false,
finished: false,
},
methods:{
onLoad() {
this.page++
getweeklist({ page: this.page, page_size: this.page_size }).then(res => {
let rows = res.data.list
this.loading = false;
this.total = res.data.count;
if (rows == null || rows.length === 0) {
// 加载结束
this.finished = true;
return;
}
// 将新数据与老数据进行合并
this.list = this.list.concat(rows);
//如果列表数据条数>=总条数,不再触发滚动加载
if (this.list.length >= this.total) {
this.finished = true;
}
});
},
}
pc端 element-ui
## Dom:
<div class="fenye" style="margin-top:15px;">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5,10, 20, 30, 40]" :page-size="pageSize" layout="total, prev, pager, next,sizes" :total="total">
</el-pagination>
</div>
methods:{
// 翻页
handleSizeChange(v) {
this.loading = true
this.pageSize = v
if (this.keywords) {
getGameList({ pageSize: this.pageSize, pageNum: this.pageNum, keywords: this.keywords }).then(res => {
this.tableData = res.data.records
this.total = res.data.total
this.loading = false
})
} else {
getGameList({ pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
this.tableData = res.data.records
this.total = res.data.total
this.loading = false
})
}
},
// 翻页
handleCurrentChange(v) {
this.loading = true
this.pageNum = v
if (this.keywords) {
getGameList({ pageSize: this.pageSize, pageNum: this.pageNum, keywords: this.keywords }).then(res => {
this.tableData = res.data.records
this.total = res.data.total
this.loading = false
})
} else {
getGameList({ pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
this.tableData = res.data.records
this.total = res.data.total
this.loading = false
})
}
},
}
网友评论