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

<template>
	<view class="high-seas-container">
		<navbar>
			<view class="nav">
				<view class="nav-city" @click="$navigateTo('/pages/city/city?activeCity='+JSON.stringify(activeCity))">
					<uni-icons class="city-icon" type="location-filled" size="16"></uni-icons>
					<text class="city-name">{{activeCity.cityName}}</text>
				</view>
				<view class="nav-search"
					:style="'height:' + boundingClientRect.height + 'px;border-radius:' + boundingClientRect.height + 'px;line-height:'+(boundingClientRect.height-2)+'px'">
					搜索房源或项目
				</view>
				<view class="wx-operation"
					:style="'width:' + boundingClientRect.width + 'px;height:'+ boundingClientRect.height+'px;'">
				</view>
			</view>
		</navbar>
		<mescroll-body :top="getNavBarHeight()" bottom="20" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="house-list">
				<house-item v-for="(item,index) in list" :house="item" :key="item.id"></house-item>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import navbar from "@/components/common/navbar.vue";
	import houseItem from "@/components/house/houseItem.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getOpenHouseListByPage
	} from '@/request/api/house.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				boundingClientRect: {},
				list: [],
				activeCity: {
					cityName: '上海市',
					cityCode: '310100'
				},
			}
		},
		onShow() {
			this.boundingClientRect = wx.getMenuButtonBoundingClientRect();
		},
		onLoad() {
			uni.$on('changeCity', data => {
				this.activeCity = data;
			})
		},
		methods: {
			// 获取状态栏高度
			geStatusBarHeight() {
				return uni.getSystemInfoSync()['statusBarHeight']
			},
			// 获取导航栏高度
			getNavBarHeight() {
				// #ifdef MP-WEIXIN
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
				let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()[
					'statusBarHeight']) * 2 + 2
				// #endif
				// #ifdef APP-PLUS || H5
				let navbarHeight = 44
				// #endif
				return (navbarHeight + this.geStatusBarHeight()) * 2;
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				getOpenHouseListByPage({
					currPage: page.num,
					pageSize: 10
				}).then(res => {
					if (res.code === 200) {
						this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.data.dataList); //追加新数据
					} else {
						this.mescroll.endErr();
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			}
		},
		components: {
			navbar,
			houseItem
		}
	}
</script>

<style lang="scss">
	.high-seas-container {
		.nav {
			height: 100%;
			background: #fff;
			width: 100%;
			display: flex;
			align-items: center;

			.nav-city {
				height: 50rpx;
				max-width: 160rpx;
				min-width: 120rpx;
				border-radius: 50rpx;
				border: 1px solid $uni-primary;
				margin-left: 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin-bottom: 4rpx;

				.city-icon {
					margin-left: 10rpx;
					margin-top: 4rpx;

					.uni-icons {
						color: $uni-primary !important;
					}
				}

				.city-name {
					color: $uni-primary;
					font-size: 24rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding: 0 20rpx 0 6rpx;
				}
			}

			.nav-search {
				flex: 1;
				width: 0;
				border: 1px solid $uni-border-1;
				line-height: 1;
				padding-left: 30rpx;
				color: $uni-secondary-color;
				margin: 0 20rpx;
				box-sizing: border-box;
				margin-bottom: 4rpx;
				font-weight: 200;
			}

			.wx-operation {
				margin-right: 8px;
				margin-bottom: 4rpx;
			}
		}

		.house-list {
			padding: 30rpx;
		}
	}
</style>