首页瀑布流

pages/house/house.vue

@@ -25,8 +25,8 @@
 					@change="onSearch"></uni-data-select>
 			</view>
 		</view>
-		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
+		<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
-			@scrolltolower="lower" @scroll="onScroll">
+			@scrolltolower="lower" @scroll="onScroll"> -->
 			<uv-waterfall ref="waterfall" v-model="list" left-gap="10" right-gap="10" column-gap="8"
 				@changeList="changeList">
 				<!-- 第一列数据 -->
@@ -90,7 +90,7 @@
 			<!-- </view> -->
 			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
 			</u-empty>
-		</scroll-view>
+		<!-- </scroll-view> -->
 	</view>
 </template>
 

pages/index/index.vue

@@ -31,7 +31,46 @@
 		<view class="tabs">
 			<u-tabs :list="menu" @click="onClick"></u-tabs>
 		</view>
-		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
+		<uv-waterfall ref="waterfall" v-model="list" left-gap="10" right-gap="10" column-gap="8"
+			@changeList="changeList">
+			<!-- 第一列数据 -->
+			<template v-slot:list1>
+				<!-- 为了磨平部分平台的BUG，必须套一层view -->
+				<view class="house-list">
+					<block v-for="(item,index) in list1" :key="index">
+						<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
+							<image :src="item.files[0].url" mode="widthFix">
+							</image>
+							<view class="info">
+								<view class="title">{{ item.houseTitle }}</view>
+								<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
+								<view class="price">{{ item.monthlyRent }}元/月</view>
+							</view>
+						</view>
+					</block>
+				</view>
+			</template>
+			<!-- 第二列数据 -->
+			<template v-slot:list2>
+				<!-- 为了磨平部分平台的BUG，必须套一层view -->
+				<view class="house-list">
+					<block v-for="(item,index) in list2" :key="index">
+						<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
+							<image :src="item.files[0].url" mode="widthFix">
+							</image>
+							<view class="info">
+								<view class="title">{{ item.houseTitle }}</view>
+								<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
+								<view class="price">{{ item.monthlyRent }}元/月</view>
+							</view>
+						</view>
+					</block>
+				</view>
+			</template>
+		</uv-waterfall>
+		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
+		</u-empty>
+		<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
 			@scrolltolower="lower" @scroll="onScroll">
 			<view class="house-list" v-if="list.length > 0">
 				<block v-for="(item,index) in list" :key="index">
@@ -48,7 +87,7 @@
 			</view>
 			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
 			</u-empty>
-		</scroll-view>
+		</scroll-view> -->
 	</view>
 </template>
 
@@ -74,6 +113,8 @@
 		data() {
 			return {
 				list: [],
+				list1: [],
+				list2: [],
 				loadMore: true,
 				status: '加载更多',
 				page: 1,
@@ -126,6 +167,9 @@
 			}
 		},
 		methods: {
+			changeList(e) {
+				this[e.name].push(e.value);
+			},
 			getDict() {
 				DictApi.getDictionaryOptions({
 					dictCode: 'region'
@@ -233,11 +277,11 @@
 		}
 
 		.house-list {
-			width: 700rpx;
+			// width: 700rpx;
-			margin: 20rpx auto;
+			// margin: 20rpx auto;
-			display: flex;
+			// display: flex;
-			flex-wrap: wrap;
+			// flex-wrap: wrap;
-			justify-content: space-between;
+			// justify-content: space-between;
 
 			.item {
 				margin-bottom: 40rpx;