vux loadmore + axios 實現點選載入更多
阿新 • • 發佈:2019-07-07
在微信專案中有應用過幾個上拉載入更多的元件,但總會出現一些相容性方面的bug,需要各種補漏(注:元件都是基於iscroll實現的, iscroll原本就有些坑)。Vux也有提供Scroller元件實現上拉載入或下拉重新整理,但官方已經不再維護該元件(未實際使用過,不知是否有坑)。所以這次我們採用更為簡單的方式來實現載入更多資料效果,廢話不多說,直接看效果圖。
實際效果圖
實現思路
元件模板
<template> <div> <div v-for="(item,idx) in tableData" :key="idx" class="box"> <slot :item="item"></slot> </div> <load-more v-if="loading" tip="正在載入"></load-more> <load-more v-else :show-loading="false" @click.prevent.native="load" :tip="tipText" background-color="#fbf9fe"></load-more> </div> </template>
結合後端分頁查詢介面
export default { data () { const _this = this return { tableData: [], // 列表資料 loading: false, isLoadMore: true, // 查詢引數 queryJson: (() => { const { params } = _this return params })(), pageIndex: 1, // 當前頁 total: 0 // 資料總條數 } }, methods: { load () { if (!this.isLoadMore) { return } this.fetch() }, fetch () { this.loading = true let { url, pageSize, pageIndex, sortName, sordName, listField, totalField, pageIndexField, pageSizeField, sortNameField, sordField } = this let params = Object.assign({}, this.queryJson) // 分頁引數 params = Object.assign(params, { [pageIndexField]: pageIndex, [pageSizeField]: pageSize }) // 排序引數 params = Object.assign(params, { [sortNameField]: sortName, [sordField]: sordName }) axios.get(url, { params }).then(response => { this.total = response[totalField] // 總數 let result = response[listField] // 當次載入的資料 // 是否還可以載入更多 此種邏輯設計存在缺陷,如果在瀏覽列表的同時,又增加了新的記錄 this.isLoadMore = result.length === pageSize this.pageIndex++ for (let item of result) { this.tableData.push(item) } }).catch(error => { console.error('獲取資料失敗 ', error) }).finally(() => { this.loading = false }) } } }
變更loadmore元件內容
判斷isLoadMore(是否正在載入)的值,以及tableData(顯示資料列表內容) 的長度來控制底部loadmore元件顯示的內容
computed: { tipText () { // 暫無資料, 沒有更多資料, 輕按載入更多 if (!this.tableData || this.tableData.length === 0) { return '暫無資料' } return this.isLoadMore ? '輕按載入更多' : '沒有更多資料' } },
監聽查詢引數的變化
watch: {
params: function (val) {
this.queryJson = val
this.pageIndex = 1
this.tableData = []
this.fetch()
}
},
具體應用
<template>
<div>
<group title='錢包明細'>
<vloadmore v-bind="table">
<template slot-scope="{ item }">
<cell-box>
<!-- 具體每一行的佈局 -->
</cell-box>
</template>
</vloadmore>
</group>
</div>
</template>
<script>
import { Group, CellBox } from 'vux'
import { CsLoadMore } from '@/components'
export default {
data () {
return {
table: {
url: '/pms/wallet/getpagelist',
pageSize: 3
}
}
},
components: {
Group,
CellBox,
vloadmore: CsLoadMore
}
}
</script>
原始碼
元件原始碼請檢視https://github.com/yinboxie/BlogExampleDemo/tree/master/