contentClass="['u-flex', 'u-flex-wrap']" :setItemStyle="setItemStyle1">
<template #list-item="{item}">
<view class="u-flex u-flex-col item-activity u-m-b-24 good-active" @tap="fnOpenActInfo(item)">
<u-image class="item-activity-cover" :src="item.files | getCover"
width="328" height="188">
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u-image>
<view
class="u-flex-1 item-activity-title u-font-28 u-main-color u-text-center u-line-2 active-title">
{{item.contentTitle}}
</view>
</view>
</template>
</all-list>
</view>
<view class="zyz" v-if="nCurrentTabIndex === 2">
<all-listIndex class="u-flex u-flex-wrap" ref="zyzAllList" :params="oListParams"
contentClass="['u-flex', 'u-flex-wrap']" :setItemStyle="setItemStyle2">
<template #list-item="{item}"><view class="item-zyz u-bg-color-white u-flex u-flex-col u-m-b-24 good-volueter"
@tap="fnOpenDetailVol(item)">
<view class="item-zyz-cover">
<u-image class="item-list-cover" :src="item.userIconCode | getFileUrl"
width="211" height="211">
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u-image>
</view>
<view class="u-font-24 u-main-color item-zyz-bottom">{{item.title}} </view>
</view>
</template>
</all-listIndex>
</view> ···
···· <template>
<view class="list-content-warp" :style="contentWarpStyle">
<view class="list-content" v-if="dataList.length" :class="contentClass">
<slot name="list-item" v-for="(item,index) in dataList" :item="item" :index="index"/>
<!--
<view class="list-item" v-for="(item,index) in dataList" :key="item.id || index" :style="setItemStyle(item, index)">
<slot name="list-item" :item="item" :index="index"/>
</view>
-->
</view>
<view class="list-status">
<u-loadmore v-if="!emptyStatus" :status="status" color="#e1e1e1" font-size="32" margin-top="20"
margin-bottom="20" @loadmore="getList" />
<u-empty v-else color="#e1e1e1" font-size="32" margin-top="40" />
</view>
</view>
</template>
<script>
export default {
name: "all-list",
props: {
params: {
type: Object,
default: () => ({})
},
contentClass: {
type: Object | Array,
default: null
},
contentWarpStyle: {
type: Object,
default: () => ({})
},
beforeData: {
type: Function,
default: null
},
setItemStyle: {
type: Function,
default: () => ({})
}
},
data() {
return {
status: 'loadmore', //加载前:loadmore 加载中:loading 没有数据:nomore
emptyStatus: false,
dataList: [],
pages: 1,
queryListParams: {
urlType: '',
page: 1,
size: 10
}
};
},
watch: {
params: {
handler(val){
for(let i in val){
this.queryListParams[i] = val[i];
}
},
deep: true,
immediate: true
}
},
methods: {
changeDataList(fn = () => {}, isRemove = false){
this.dataList = !isRemove ? this.dataList.map(fn) : this.dataList.filter(fn);
},
setParams(params = {}, isGetList = false) {
for (let i in params) {
this.queryListParams[i] = params[i];
}
this.$emit('update:params', this.queryListParams);
isGetList && this.getList('search');
},
setData(data = [], isEmpty) {
if (isEmpty) {
this.dataList = data
} else {
this.dataList = this.dataList.concat(data);
}
},
//请求列表
getList(type) {
this.status = 'loading'
this.emptyStatus = false
if(type === 'search'){
this.queryListParams.page = 1
this.dataList = []
}
this.$u.api.getAction(this.queryListParams).then(res => {
this.renderList(type, res);
}).catch(() => {
if (type === 'refresh') {
uni.stopPullDownRefresh()
}
this.status = 'loadmore'
this.isLoading = false;
})
},
//渲染列表
renderList(type, res) {
let data = [];
if (type === 'refresh') {
//下拉刷新
data = res ? res.data : []
uni.stopPullDownRefresh()
} else if (type === 'search') {
//搜索
data = res ? res.data : []
} else {
//上拉加载
data = this.dataList.concat(res ? res.data : [])
}
this.beforeData && (data = this.beforeData(data));
this.dataList = data;
this.pages = res ? res.pages : 1;
this.emptyStatus = !this.dataList.length;
if (this.queryListParams.page < this.pages) {
this.status = 'loadmore'
} else {
this.status = 'nomore'
}
this.isLoading = false;
},
// 加载更多
loadmore(params) {
if (this.isLoading) return;
this.setParams(params);
if (this.queryListParams.page < this.pages) {
this.isLoading = true;
this.queryListParams.page++;
this.getList()
}
},
// 刷新
refresh(params) {
this.setParams(params);
this.queryListParams.page = 1;
this.getList('refresh')
}
}
}
</script>
<style lang="scss" scoped>
.list-content-warp{
width: 100%;
padding: 23rpx 35rpx;
}
.list-status{
width: 100%;
}
</style>
···