realty/virgo.wzfrontend/yui_wx/pages/myHouse/myHouse.vue

<template>
	<view class="my-house-list">
		<mescroll-body top="40" bottom="40" @init="mescrollInit" @down="downCallback" @up="upCallback" :option="{}">
			<view class="my-house">
				<custom-waterfalls-flow :value="list" @wapperClick="clickItem" @imageClick="clickItem">
					<!-- #ifdef MP-WEIXIN -->
					<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.desc}}</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="item">
							<view class="title">{{item.title}}</view>
							<view class="desc">{{item.desc}}</view>
						</view>
					</template>
					<!-- #endif -->
				</custom-waterfalls-flow>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getHouseListByPage
	} from '@/request/api/house.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: []
			}
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				getHouseListByPage({
					currPage: page.num,
					pageSize: 10,
					chargePersonId: this.$store.getters.user.userId
				}).then(res => {
					if (res.code === 200) {
						this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						console.log(res.data.dataList);
						let data = res.data.dataList.map(node => {
							return {
								houseId: node.id,
								image: this.imageUrl(node.showPicture),
								title: `${node.projectItemName}-${node.projectItemTargetName}-${node.roomNumber}`
							}
						})
						console.log(data);
						this.list = this.list.concat(data); //追加新数据
					} else {
						this.mescroll.endErr();
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			imageUrl(data) {
				if (!data || data === '[]') return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
				return JSON.parse(data)[0].url;
			},
			clickItem(item) {
				this.$navigateTo('/pages/house/house?houseId=' + item.houseId);
			}
		}
	}
</script>

<style lang="scss">
	.my-house-list {
		.my-house {
			padding: 0 30rpx;
			box-sizing: border-box;

			.item {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 56rpx;
				background-color: rgba(0, 0, 0, 0.6);
				line-height: 56rpx;
				font-size: 24rpx;
				font-weight: 300;
				padding: 0 20rpx;
				overflow: hidden;
				color: #fff;
			}
		}
	}
</style>