提交
This commit is contained in:
A1300399510
parent
e77f6950cb
commit
86523cff25
@ -44,8 +44,6 @@ Page({
|
||||
*/
|
||||
timer: null,
|
||||
onLoad: function (options) {
|
||||
console.log("articles", this.data.articles);
|
||||
|
||||
this.getLocationData()
|
||||
|
||||
wx.showLoading()
|
||||
@ -86,6 +84,8 @@ Page({
|
||||
})
|
||||
this.getTopTitle()
|
||||
|
||||
this.ratio = app.globalData.screen_data['windowWidth'] / 750
|
||||
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
that.get_config()
|
||||
@ -407,20 +407,101 @@ Page({
|
||||
listData: data
|
||||
})
|
||||
|
||||
this.calculate()
|
||||
this.query = wx.createSelectorQuery();
|
||||
this.calculateProcessingCenter()
|
||||
})
|
||||
},
|
||||
|
||||
listDataIndex: 0,
|
||||
leftHeight: 0, // px 单位
|
||||
rightHeight: 0,
|
||||
ratio: 0,
|
||||
query: null,
|
||||
// 计算
|
||||
calculateProcessingCenter() {
|
||||
// let
|
||||
if (this.listDataIndex >= this.data.listData.length) {
|
||||
|
||||
this.setData({
|
||||
listDataLeft: this.data.listDataLeft,
|
||||
listDataRight: this.data.listDataRight
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
let ratio = this.ratio
|
||||
|
||||
if (this.ratio) this.ratio = this.data.screen_data['windowWidth'] / 750
|
||||
let targetData = this.data.listData[this.listDataIndex]
|
||||
let type = targetData['type']
|
||||
if (type == 'adv') {
|
||||
this.getPictureHeight(targetData.image).then(res => {
|
||||
this.whichSide(res, targetData)
|
||||
})
|
||||
} else {
|
||||
let altitude = 0 // rpx
|
||||
|
||||
if (type == 'apartment') {
|
||||
altitude = 105
|
||||
if (targetData['specifications'].length > 2) altitude += 100
|
||||
else altitude += 64 * targetData['specifications'].length
|
||||
} else {
|
||||
altitude = 141
|
||||
}
|
||||
|
||||
altitude = altitude * ratio // 转 px
|
||||
|
||||
this.setData({
|
||||
targetData
|
||||
})
|
||||
|
||||
this.getPictureHeight(targetData.image).then(res => {
|
||||
altitude += res
|
||||
let select = type == 'apartment' ? '#apartment' : '#general'
|
||||
|
||||
this.query.select(select).boundingClientRect(rect => {
|
||||
let height = rect.height;
|
||||
altitude += height
|
||||
this.whichSide(altitude, targetData)
|
||||
}).exec();
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
console.log(this.data.listDataLeft, this.data.listDataRight);
|
||||
},
|
||||
|
||||
// 判断在哪边的
|
||||
whichSide(res, targetData) {
|
||||
console.log(this.leftHeight <= this.rightHeight, this.leftHeight, this.rightHeight);
|
||||
if (this.leftHeight <= this.rightHeight) {
|
||||
this.leftHeight = this.leftHeight + res
|
||||
this.data.listDataLeft.push(targetData)
|
||||
} else {
|
||||
this.rightHeight = this.rightHeight + res
|
||||
this.data.listDataRight.push(targetData)
|
||||
}
|
||||
|
||||
this.setData({
|
||||
targetData: null
|
||||
})
|
||||
this.listDataIndex++
|
||||
this.calculateProcessingCenter()
|
||||
},
|
||||
|
||||
// 获取图片高度
|
||||
getPictureHeight() {
|
||||
new Promise((resolve, reject) => {
|
||||
getPictureHeight(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.getImageInfo({
|
||||
src: '',
|
||||
src,
|
||||
success: res => {
|
||||
let {
|
||||
width,
|
||||
height
|
||||
} = res
|
||||
let actual = height / width * 337 * this.ratio
|
||||
resolve(actual)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,4 +1,13 @@
|
||||
<view class="container" wx:if="{{ !loding }}">
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<view class="" id="apartment">
|
||||
<view class="apartment1-name">{{ targetData['title'] }}</view>
|
||||
<view class="apartment1-introduce">{{ targetData['propaganda'] }}</view>
|
||||
</view>
|
||||
<view class="general-name flexacenter" id="general">{{ targetData['title'] }}</view>
|
||||
|
||||
<!-- <header-nav inner-text="Some text" isIndexPage="index">寄托港校租房</header-nav> -->
|
||||
<header-nav inner-text="Some text" isIndexPage="index">{{ topTitle }}</header-nav>
|
||||
|
||||
@ -146,57 +155,33 @@
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<view class="pinterest-list flexflex" wx:if="{{ envVersionState && true }}">
|
||||
<block wx:for="{{ listData }}" wx:key="index">
|
||||
<!-- 广告 -->
|
||||
<image wx:if="{{ item.type == 'adv' }}" class="pinterest-list-item" mode="widthFix" src="{{ item.image }}" bindtap="handleSwiper" data-id="{{ item.id }}" data-url="{{ item.url }}"></image>
|
||||
<view class="pinterest-list-left flex1">
|
||||
<block wx:for="{{ listDataLeft }}" wx:key="index">
|
||||
<block wx:if="{{item.type == 'adv'}}">
|
||||
<template is="adv" data="{{ item }}"></template>
|
||||
</block>
|
||||
<block wx:elif="{{item.type == 'apartment'}}">
|
||||
<template is="apartment" data="{{ item }}"></template>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<template is="general" data="{{ item }}"></template>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 公寓 -->
|
||||
<view wx:elif="{{ item.type == 'apartment' }}" class="pinterest-list-item apartment">
|
||||
<view class="apartment-top flexcenter">
|
||||
<image class="apartment-icon" mode="widthFix" src="/img/apartment-icon.png"></image>
|
||||
<image class="apartment-text" mode="widthFix" src="/img/apartment-text.png"></image>
|
||||
</view>
|
||||
<image class="apartment-img" mode="widthFix" src="{{ item.image }}"></image>
|
||||
<view class="apartment-name">{{ item.title }}</view>
|
||||
<view class="apartment-introduce">{{ item.propaganda }}</view>
|
||||
<view class="apartment-price">
|
||||
<block wx:for="{{ item.specifications }}" wx:for-item="it" wx:key="index">
|
||||
<view wx:if="{{ index < 2 }}" class="apartment-price-item flexacenter">
|
||||
<view class="apartment-price-name">{{ it.title }}</view>
|
||||
<view class="apartment-price-cost flex1 flexacenter">
|
||||
<view class="apartment-price-unit">HK$</view>
|
||||
<view class="apartment-price-number">{{ it.value }}</view>
|
||||
/月
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view wx:if="{{ item.specifications.length > 2 }}" class="apartment-price-more flexcenter">更多</view>
|
||||
</view>
|
||||
|
||||
<!-- 普通 -->
|
||||
<view wx:else class="pinterest-list-item general">
|
||||
<view class="top-right-corner flexcenter" wx:if="{{ item.gptype }}">{{ item.gptype }}</view>
|
||||
<image class="general-img" mode="widthFix" src="{{ item.image }}"></image>
|
||||
<view class="general-name" wx:if="{{ item.title }}">
|
||||
<view class="general-tag flexcenter" wx:if="{{ item.leaseterm }}">{{ item.leaseterm }}</view>
|
||||
{{ item.title }}
|
||||
</view>
|
||||
|
||||
<view class="label-list flexacenter">
|
||||
<view class="label-item" wx:if="{{ item.housingtype }}">{{ item.housingtype }}</view>
|
||||
<view class="label-item" wx:if="{{ item.gender }}">{{ item.gender }}</view>
|
||||
<view class="label-item" wx:if="{{ item.leaseterm }}">{{ item.leaseterm }}</view>
|
||||
</view>
|
||||
|
||||
<view class="general-cost flex1 flexacenter">
|
||||
<view class="general-unit">HK$</view>
|
||||
<view class="general-number">{{ item.rent }}</view>
|
||||
/月
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</block>
|
||||
<view class="pinterest-list-left flex1" style="display:flex;flex-direction:column;align-items: flex-end;">
|
||||
<block wx:for="{{ listDataRight }}" wx:key="index">
|
||||
<block wx:if="{{item.type == 'adv'}}">
|
||||
<template is="adv" data="{{ item }}"></template>
|
||||
</block>
|
||||
<block wx:elif="{{item.type == 'apartment'}}">
|
||||
<template is="apartment" data="{{ item }}"></template>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<template is="general" data="{{ item }}"></template>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
@ -378,4 +363,59 @@
|
||||
</page-container>
|
||||
|
||||
<announcement-popup interface="home" init="{{ initState }}"></announcement-popup>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 广告 -->
|
||||
<template name="adv">
|
||||
<image class="pinterest-list-item" mode="widthFix" src="{{ item.image }}" bindtap="handleSwiper" data-id="{{ item.id }}" data-url="{{ item.url }}"></image>
|
||||
</template>
|
||||
|
||||
<!-- 公寓 -->
|
||||
<template name="apartment">
|
||||
<view class="pinterest-list-item apartment">
|
||||
<view class="apartment-top flexcenter">
|
||||
<image class="apartment-icon" mode="widthFix" src="/img/apartment-icon.png"></image>
|
||||
<image class="apartment-text" mode="widthFix" src="/img/apartment-text.png"></image>
|
||||
</view>
|
||||
<image class="apartment-img" mode="widthFix" src="{{ item.image }}"></image>
|
||||
<view class="apartment-name">{{ item.title }}</view>
|
||||
<view class="apartment-introduce">{{ item.propaganda }}</view>
|
||||
<view class="apartment-price">
|
||||
<block wx:for="{{ item.specifications }}" wx:for-item="it" wx:key="index">
|
||||
<view wx:if="{{ index < 2 }}" class="apartment-price-item flexacenter">
|
||||
<view class="apartment-price-name one-line-display">{{ it.title }}</view>
|
||||
<view class="apartment-price-cost flex1 flexacenter">
|
||||
<view class="apartment-price-unit">HK$</view>
|
||||
<view class="apartment-price-number">{{ it.value }}</view>
|
||||
/月
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view wx:if="{{ item.specifications.length > 2 }}" class="apartment-price-more flexcenter">更多</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 普通 -->
|
||||
<template name="general">
|
||||
<view class="pinterest-list-item general">
|
||||
<view class="top-right-corner flexcenter" wx:if="{{ item.gptype }}">{{ item.gptype }}</view>
|
||||
<image class="general-img" mode="widthFix" src="{{ item.image }}"></image>
|
||||
<view class="general-name flexacenter" wx:if="{{ item.title }}">
|
||||
<view class="general-tag flexcenter" wx:if="{{ item.leaseterm }}">{{ item.leaseterm }}</view>
|
||||
{{ item.title }}
|
||||
</view>
|
||||
|
||||
<view class="label-list flexacenter">
|
||||
<view class="label-item" wx:if="{{ item.housingtype }}">{{ item.housingtype }}</view>
|
||||
<view class="label-item" wx:if="{{ item.gender }}">{{ item.gender }}</view>
|
||||
<view class="label-item" wx:if="{{ item.leaseterm }}">{{ item.leaseterm }}</view>
|
||||
</view>
|
||||
|
||||
<view class="general-cost flex1 flexacenter">
|
||||
<view class="general-unit">HK$</view>
|
||||
<view class="general-number">{{ item.rent }}</view>
|
||||
/月
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -824,6 +824,13 @@
|
||||
color: #000000;
|
||||
line-height: 48rpx;
|
||||
padding: 0 15rpx;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
/* display: flex; */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.pinterest-list .pinterest-list-item.general .general-tag {
|
||||
@ -943,4 +950,31 @@
|
||||
|
||||
.waterfall-item {
|
||||
width: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.apartment1-name {
|
||||
font-size: 27rpx;
|
||||
color: #000000;
|
||||
font-weight: 650;
|
||||
padding: 13.5rpx 15rpx;
|
||||
}
|
||||
|
||||
.apartment1-introduce {
|
||||
color: #aaaaaa;
|
||||
font-size: 21rpx;
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
.general-name1 {
|
||||
font-size: 27rpx;
|
||||
color: #000000;
|
||||
line-height: 48rpx;
|
||||
padding: 0 15rpx;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
/* display: flex; */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@ -373,6 +373,7 @@ Page({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (ishere) {
|
||||
searchindex = i;
|
||||
this.setData({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user