<!-- 组件说明,该组件为列表封装,只用设置数据源、请求前和请求后的数据处理的
钩子,即可自动化完成数据请求、数据渲染、分页加载、下拉刷新等一系列重复性的
操作,且对自动根据当前运行环境对列表滑动进行兼容性支持 -->
<!-- comp.vue文件 -->
<template>
<view>
<slot v-for="(item, index) in data" :row="item" :index="index"></slot>
</view>
</template>
<script>
export default {
props: {
beforeRequest: {
type: Function,
default: (data) => { return data }
},
afterRequest: {
type: Function,
default: (resp) => { return resp }
}
},
data() {
return {
query: {
from: 0,
limit: 10
},
data: []
}
},
created() {
console.log('处理前参数为:'+JSON.stringify(this.query));
const data = this.beforeRequest(this.query)
console.log('处理后参数为:'+JSON.stringify(data));
// 模拟请求
setTimeout(() => {
// 模拟请求结果
const resp = { success: true, data: [{ id: 1, info: "{\"name\":\"abc\"}" }], message: '请求成功!'}
// 开始调用处理钩子
console.log('处理前结果为:'+JSON.stringify(this.query));
const finalResp = this.afterRequest(resp)
console.log('处理后结果为:'+JSON.stringify(this.query));
// 开始渲染
this.data = finalResp.data
}, 2000)
}
}
</script>
<!-- test.vue文件 -->
<template>
<view style="display: flex; justify-content: center;align-items: center;height: 100vh;">
<comp :beforeRequest="beforeRequest" :afterRequest="afterRequest" v-slot="{ row, index }">
<view>{{toJsonString(row)}}</view>
</comp>
</view>
</template>
<script>
import comp from './comp.vue'
export default {
components: { comp },
data() {
return {
search: '中国'
}
},
methods: {
beforeRequest(data) {
data.search0 = 'search0'
data.search1 = this.search
data.search2 = 'search2'
data.search3 = data.from + 5
return data
},
afterRequest(resp) {
for (const item of resp.data) {
item.info = JSON.parse(item.info)
item.info.name += this.search
}
return resp
},
toJsonString(row) {
return JSON.stringify(row)
}
}
}
</script>
<!-- H5与APP运行结果 -->
处理前参数为:{"from":0,"limit":10} at pages/comp.vue:29
处理后参数为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5} at pages/comp.vue:31
处理前结果为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5} at pages/comp.vue:37
处理后结果为:{"from":0,"limit":10,"search0":"search0","search1":"中国","search2":"search2","search3":5} at pages/comp.vue:39
<!-- 微信小程序运行结果 -->
comp.js? [sm]:173 处理前参数为:{"from":0,"limit":10}
comp.js? [sm]:175 处理后参数为:{"from":0,"limit":10,"search0":"search0","search2":"search2","search3":5}
comp.js? [sm]:188 处理前结果为:{"from":0,"limit":10,"search0":"search0","search2":"search2","search3":5}
comp.js? [sm]:190 处理后结果为:{"from":0,"limit":10,"search0":"search0","search2":"search2","search3":5}
1***@qq.com (作者)
已提供Demo与截图,希望尽快核对排查
2023-04-17 14:21