vuevantvan-pull-refresh下拉刷新vant-list上拉加载（⼆次封装。。。components 下拉刷新、上拉加载、⾸屏⾻架、空状态封装组件
<template>
<!--
* @FileDescription: 该⽂件的描述信息
* @author Sun Yan
* @Date $
-->
<van-pull-refresh v-model="$$freshing"
:
loosing-text="释放刷新"
pulling-text="下拉刷新"
loading-text="努⼒加载中"
:success-text="$$dSuccessText"
success-duration="500"
:disabled="!refresh"
@refresh="$$RefreshInitList">
<van-list
v-if="($$parent[listName] || []).length"
v-model="$$parent.loading"
:finished="$$parent.finished"
:finished-text="finishedText"
:error.sync="$$"
:
error-text="errorText"
@load="$$parent[onLoadName]"
:immediate-check="false">
<slot></slot>
</van-list>
<van-empty v-else-if="$$parent.finished" type="list" :description="description"/>
<div v-else-if="!$$parent.finished">
<van-skeleton avatar :row="4" v-for="i in 6" :key="i"/>
</div>
</van-pull-refresh>
</template>
<script>/**
* @description: ⽅法描述
* @param {参数类型} 参数名称
* @param {参数类型} 参数名称
* @return void
*/
export default {
name: "com-load-list",
created() {
this.$$parent = {};
this.parentVm(this);
},
methods: {
parentVm(VmComponent) {
try {
if(typeof VmComponent.$Load === 'function'
&& String.call( VmComponent.$parent.loading ) === '[object Boolean]'
&& String.call( VmComponent.$parent.finished ) === '[object Boolean]'
&& String.call( VmComponent.$parent[this.listName] ) === '[object Array]') {
this.$$parent = VmComponent.$parent;
} else {
this.parentVm(VmComponent.$parent)
}
} catch (e) {
throw new Error('不到⽬标 VmComponent.$parent 该⽗组件必须具备 onLoad ⽅法并且结合 list_page 乱混使⽤')
}
},
},
props: {
refresh: {
type: Boolean,
default: false,
},
refreshMinHeight: {
type: String,
default: function () {
fresh ? 'calc(100vh - 100px)' : '50vh'      },
马赛艳舞},
listName: {
type: String,
default: 'list',
},
onLoadName: {
type: String,
default: 'onLoad',
},
description: {
type: String,
default: '暂⽆数据列表',
},
errorText: {
type: String,
default: '请求失败，点击重新加载',
},
finishedText: {
type: String,
default: '没有更多了',
}
},
}
</script>
<style scoped>
</style>
mixin 共同点抽离
># load-list.js
import {_PAGE__COUNT, ERR_OK} from "@/config"; // 上拉加载
export default {
data () {
return {
page: 1, // page码
pageSize: _PAGE__COUNT, // 请求条数
rowcount: 0, // 最⼤数
list: [], // view 渲染列表通⽤化 list 注意page命名      loading: false,      // 上拉加载
finished: false,      // 加载完毕火炬之光2法师
refreshing: false,      // 下拉刷新
怎样做水煮肉片endSuccessText: '刷新成功', // 成功失败
error: false, // 请求结果错误
}
},
methods: {
onRefreshInitList() {
this.page = 1;
< = false;
},
// 请求下拉加载结束处理项
onEndLoad (res, resListName, cb) {
this.loading = false;
if (Code === ERR_OK && res.datedec) {
qq登陆异常wcount = wcount || 0;
// 请求第⼀页结束清除加载中ui  mixins 【 loadingState 】组合使⽤
Loading === "function" && Loading();
// 列表数据读取回调处理返回结果 or 使⽤name 主动读取 or 没有name 这层结构问题拦截处理。。        let newsList =  [];
if(typeof cb === "function") {
newsList = cb()
} else if(resListName) {
newsList = res.datedec[resListName]
} else {
//....
}
// 第⼀页代表着初始状态
if(this.page === 1 ) {
this.list = []
this.finished = false;
}
this.list = [...this.list, ...newsList]
//没有更多
wcount === 0 || this.list.length === wcount || newsList.length !== this.pageSize) {
this.finished = true;
this.page !== 1 && this.$toast('已经到底了，没有更多～');
} else {
this.page++;
}
newsList = null
} else {
// 请求结果错误
< = true;
}
}
}
}
>### loading.js
export default {
data() {
return {
toastLoading: '',
}
},
/
/离开页⾯移除加载中
beforeDestroy() {
},
//离开页⾯移除加载中
deactivated() {
},
methods: {
// 添加加载中
async addLoading(message = '加载中..') {
Loading('none')
message,
duration: 0
})
},
// 移除加载中
async rmLoading(type = 'time') {
if(type === 'time') await window.setTimeout(() => {}, 800);      if (astLoading !== '') {
}
}
},
}
组件使⽤实例
<template>
// 开启下拉刷新
<com-load-list :refresh=“true”>
<van-cell v-for="item in list" >
//...
</van-cell>
</ com-load-list>
</template>
import loadingState from "@/mixins/loading-state";
import list_page from "@/mixins/load-list";
推荐一个好地方的作文四年级export default {
mixins: [loadingState, list_page],
created() {
this.addLoading();
},
methods: {
/
/ 获取页⾯数据
async onLoad() {
const res = await Id);
//EndLoad(res, 'data')
// 此处只关⼼数据处理
如何选车牌号码
this.accessTaskAuthor = res.datedec.accessTaskAuthor || {};        this.bsf = res.datedec.bsf;
this.isAdmin = res.datedec.isadmin;
//...
return res.datedec.data;
})
},
}
}