mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit 141d784412f74e36f25902f3086db89b366595ed 1 parent a81710a7

首页楼层高度计算优化 review by days

Inline Side-by-side
Showing 1 changed file with 220 additions and 192 deletions
... ... @@ -32,198 +32,7 @@ function calcluateFloorHeight(payload) {
continue;
}
const {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
const DEVICE_WIDTH_RATIO_6 = width / 375;
let floorHeight = 0;
let headerHeight = 40;
switch(templateName) {
case 'focus': {
floorHeight = Math.ceil(155 * DEVICE_WIDTH_RATIO);
break;
}
case 'app_icon_list': {
let count = parseInt(item.number);
count = count > 0 ? count : 5;
let tail = (data.length % count != 0) ? 1 : 0;
let lineNumber = data.length/count + tail;
let padding5 = (width - 42*5)/12;
let padding4 = (width - 51*4)/10;
let padding = count == 4 ? padding4 : padding5;
floorHeight = (count == 4 ? 84 : 75) * lineNumber + padding * (lineNumber - 1) + 12;
break;
}
case 'app_hot_brands': {
let listLength = data.list.length;
let lineNumber = parseInt((listLength + 3) / 4);
if (listLength % 4 == 0) {
lineNumber += 1;
}
let imageHeight = Math.floor(87 * DEVICE_WIDTH_RATIO);
let listHeight = Math.ceil(lineNumber * imageHeight);
floorHeight = headerHeight + listHeight;
break;
}
case 'announcement': {
floorHeight = Math.ceil(35 * DEVICE_WIDTH_RATIO);
break;
}
case 'single_image': {
floorHeight = Math.ceil(100 * DEVICE_WIDTH_RATIO);
break;
}
case 'single_name_image': {
floorHeight = headerHeight + Math.ceil(100 * DEVICE_WIDTH_RATIO);
break;
}
case 'recommend_content_one': {
let bannerHeight = Math.ceil(200 * DEVICE_WIDTH_RATIO);
let listHeight = Math.ceil(190 * DEVICE_WIDTH_RATIO);
floorHeight = headerHeight + bannerHeight + listHeight;
break;
}
case 'recommend_content_two': {
let bannerHeight = Math.ceil(200 * DEVICE_WIDTH_RATIO);
let listHeight = Math.ceil(190 * DEVICE_WIDTH_RATIO);
floorHeight = headerHeight + bannerHeight + listHeight;
break;
}
case 'recommend_content_three': {
let imageHeight = Math.floor(87 * DEVICE_WIDTH_RATIO);
let lineNumber = parseInt((data.list.length + 3) / 4);
let listHeight = Math.floor(lineNumber * imageHeight);
let bannerHeight = Math.ceil(100 * DEVICE_WIDTH_RATIO);
floorHeight = bannerHeight + listHeight
break;
}
case 'recommend_content_five': {
let imageHeight = Math.floor(87 * DEVICE_WIDTH_RATIO);
let lineNumber = parseInt((data.list.length + 3) / 4);
let listHeight = Math.floor(lineNumber * imageHeight);
floorHeight = listHeight + headerHeight;
break;
}
case 'trendsetter_collocation': {
let topCellWidth = (width - 45) / 2;
let cellWidth = Math.floor(82 * width / 375);
floorHeight = headerHeight + topCellWidth + 15 * 2 + headerHeight + cellWidth;
break;
}
case 'trendgoods_topic': {
let imageHeight = Math.ceil(182 * DEVICE_WIDTH_RATIO);
let pageHeight = imageHeight + 15 + 16 + 9 + 12 + 30;
floorHeight = headerHeight + 15 + pageHeight;
break;
}
case 'custom_brands': {
let imageHeight = Math.ceil(55 * DEVICE_WIDTH_RATIO);
let marginTop = 15;
floorHeight = headerHeight + imageHeight + marginTop * 3;
break;
}
case 'kids_brands':{
let itemWidth = width / 4 - 0.5;
let itemHeight = itemWidth + 20;
floorHeight = headerHeight + itemHeight * 2 + 0.5;
break;
}
case 'small_pic': {
floorHeight = Math.ceil(80 * (width - 45) / 2 / 137.5);
break;
}
case 'divideImage': {
floorHeight = 15;
break;
}
case 'NewProductFloor': {
let leftBigImageWidth = width * 315 / 750;
let leftBigImageHeight = leftBigImageWidth * 420 / 315;
floorHeight = headerHeight + leftBigImageHeight;
break;
}
case 'popular_single_product': {
let bannerHeight = Math.ceil(width * 234 / 750);
floorHeight = headerHeight + bannerHeight + 192;
break;
}
case 'shopRecommend': {
let storeHeight = Math.ceil(239 * DEVICE_WIDTH_RATIO_6 + 10);
floorHeight = headerHeight + storeHeight;
break;
}
case 'sixLinesFloor': {
let imageWidth = Math.floor(width / 2);
let imageHeight = Math.floor(imageWidth * 180 / 375);
let lineNumber = Math.floor((data.list.length + 1)/2);
floorHeight = headerHeight + lineNumber * imageHeight;
break;
}
case 'livePicture': {
let imageWidth = Math.ceil((width - 64) / 3);
let imageHeight = Math.ceil(imageWidth * 86 / 64);
floorHeight = headerHeight + imageHeight;
break;
}
case 'sale-1t-1l-4r': {
let bannerHeight = Math.floor(width / 3);
let leftBigImageWidth = width * 310 / 740;
let leftBigImageHeight = leftBigImageWidth * 422 / 310;
let containerHeight = headerHeight + leftBigImageHeight;
if(data.big_image.length > 0){
containerHeight = containerHeight + bannerHeight;
}
floorHeight = containerHeight;
break;
}
case 'vipUse': {
let bannerHeight = Math.ceil((234 / 750) * width);
let cellHeight = 210;
floorHeight = headerHeight + bannerHeight + cellHeight;
break;
}
case 'activityProductFloor': {
//1 VIP 专享 2 新人专享 3 学生专享 4 新品到着
const TYPE_VIP = 1;
const TYPE_NEW_USER = 2;
const TYPE_STUDENT = 3;
const TYPE_NEW_PRODUCT = 4;
let type = item.type;
let bannerHeight = Math.ceil((234 / 750) * width);
let sectionHeight = Math.ceil((419 / 750) * width);
let cellWidth = 90;
let cellHeight = 210;
let cellH = 0;
if (type == TYPE_VIP || type == TYPE_STUDENT) {
cellH = cellHeight;
} else {
cellH = cellHeight - 20;
}
floorHeight = cellH + headerHeight + bannerHeight;
break;
}
case 'hot_category_individualization': {
let cellWidth = width / 4;
let imageWidth = cellWidth - 14 * 2;
let imageHeight = imageWidth * 168 / 126;
let cellHeight = imageHeight + 20;
let lineNumber = parseInt((data.list.length + 3) / 4);
let listHeight = Math.floor(lineNumber * cellHeight);
let containerHeight = listHeight + headerHeight;
floorHeight = containerHeight;
break;
}
case 'new_user_floor': {
let leftBigImageWidth = width * 315 / 750;
let leftBigImageHeight = leftBigImageWidth * 420 / 315;
let containerHeight = headerHeight + leftBigImageHeight;
floorHeight = containerHeight;
break;
}
}
let floorHeight = heightForFloor(item);
item.floorHeight = floorHeight;
allFloorHeight = allFloorHeight + floorHeight;
... ... @@ -233,6 +42,224 @@ function calcluateFloorHeight(payload) {
return payload;
}
function heightForFloor(item, immutable=false) {
if (!item) {
return 0;
}
let templateName;
let data;
if (immutable) {
templateName = item.get('template_name');
data = item.get('data').toJS();
} else {
templateName = item.template_name;
data = item.data;
}
if (!templateName || !data) {
return 0;
}
const {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
const DEVICE_WIDTH_RATIO_6 = width / 375;
let floorHeight = 0;
let headerHeight = 40;
switch(templateName) {
case 'focus': {
floorHeight = Math.ceil(155 * DEVICE_WIDTH_RATIO);
break;
}
case 'app_icon_list': {
let count = parseInt(item.number);
count = count > 0 ? count : 5;
let tail = (data.length % count != 0) ? 1 : 0;
let lineNumber = data.length/count + tail;
let padding5 = (width - 42*5)/12;
let padding4 = (width - 51*4)/10;
let padding = count == 4 ? padding4 : padding5;
floorHeight = (count == 4 ? 84 : 75) * lineNumber + padding * (lineNumber - 1) + 12;
break;
}
case 'app_hot_brands': {
let listLength = data.list.length;
let lineNumber = parseInt((listLength + 3) / 4);
if (listLength % 4 == 0) {
lineNumber += 1;
}
let imageHeight = Math.floor(87 * DEVICE_WIDTH_RATIO);
let listHeight = Math.ceil(lineNumber * imageHeight);
floorHeight = headerHeight + listHeight;
break;
}
case 'announcement': {
floorHeight = Math.ceil(35 * DEVICE_WIDTH_RATIO);
break;
}
case 'single_image': {
floorHeight = Math.ceil(100 * DEVICE_WIDTH_RATIO);
break;
}
case 'single_name_image': {
floorHeight = headerHeight + Math.ceil(100 * DEVICE_WIDTH_RATIO);
break;
}
case 'recommend_content_one': {
let bannerHeight = Math.ceil(200 * DEVICE_WIDTH_RATIO);
let listHeight = Math.ceil(190 * DEVICE_WIDTH_RATIO);
floorHeight = headerHeight + bannerHeight + listHeight;
break;
}
case 'recommend_content_two': {
let bannerHeight = Math.ceil(200 * DEVICE_WIDTH_RATIO);
let listHeight = Math.ceil(190 * DEVICE_WIDTH_RATIO);
floorHeight = headerHeight + bannerHeight + listHeight;
break;
}
case 'recommend_content_three': {
let imageHeight = Math.floor(87 * DEVICE_WIDTH_RATIO);
let lineNumber = parseInt((data.list.length + 3) / 4);
let listHeight = Math.floor(lineNumber * imageHeight);
let bannerHeight = Math.ceil(100 * DEVICE_WIDTH_RATIO);
floorHeight = bannerHeight + listHeight
break;
}
case 'recommend_content_five': {
let imageHeight = Math.floor(87 * DEVICE_WIDTH_RATIO);
let lineNumber = parseInt((data.list.length + 3) / 4);
let listHeight = Math.floor(lineNumber * imageHeight);
floorHeight = listHeight + headerHeight;
break;
}
case 'trendsetter_collocation': {
let topCellWidth = (width - 45) / 2;
let cellWidth = Math.floor(82 * width / 375);
floorHeight = headerHeight + topCellWidth + 15 * 2 + headerHeight + cellWidth;
break;
}
case 'trendgoods_topic': {
let imageHeight = Math.ceil(182 * DEVICE_WIDTH_RATIO);
let pageHeight = imageHeight + 15 + 16 + 9 + 12 + 30;
floorHeight = headerHeight + 15 + pageHeight;
break;
}
case 'custom_brands': {
let imageHeight = Math.ceil(55 * DEVICE_WIDTH_RATIO);
let marginTop = 15;
floorHeight = headerHeight + imageHeight + marginTop * 3;
break;
}
case 'kids_brands':{
let itemWidth = width / 4 - 0.5;
let itemHeight = itemWidth + 20;
floorHeight = headerHeight + itemHeight * 2 + 0.5;
break;
}
case 'small_pic': {
floorHeight = Math.ceil(80 * (width - 45) / 2 / 137.5);
break;
}
case 'divideImage': {
floorHeight = 15;
break;
}
case 'NewProductFloor': {
let leftBigImageWidth = width * 315 / 750;
let leftBigImageHeight = leftBigImageWidth * 420 / 315;
floorHeight = headerHeight + leftBigImageHeight;
break;
}
case 'popular_single_product': {
let bannerHeight = Math.ceil(width * 234 / 750);
floorHeight = headerHeight + bannerHeight + 192;
break;
}
case 'shopRecommend': {
let storeHeight = Math.ceil(239 * DEVICE_WIDTH_RATIO_6 + 10);
floorHeight = headerHeight + storeHeight;
break;
}
case 'sixLinesFloor': {
let imageWidth = Math.floor(width / 2);
let imageHeight = Math.floor(imageWidth * 180 / 375);
let lineNumber = Math.floor((data.list.length + 1)/2);
floorHeight = headerHeight + lineNumber * imageHeight;
break;
}
case 'livePicture': {
let imageWidth = Math.ceil((width - 64) / 3);
let imageHeight = Math.ceil(imageWidth * 86 / 64);
floorHeight = headerHeight + imageHeight;
break;
}
case 'sale-1t-1l-4r': {
let bannerHeight = Math.floor(width / 3);
let leftBigImageWidth = width * 310 / 740;
let leftBigImageHeight = leftBigImageWidth * 422 / 310;
let containerHeight = headerHeight + leftBigImageHeight;
if(data.big_image.length > 0){
containerHeight = containerHeight + bannerHeight;
}
floorHeight = containerHeight;
break;
}
case 'vipUse': {
let bannerHeight = Math.ceil((234 / 750) * width);
let cellHeight = 210;
floorHeight = headerHeight + bannerHeight + cellHeight;
break;
}
case 'activityProductFloor': {
//1 VIP 专享 2 新人专享 3 学生专享 4 新品到着
const TYPE_VIP = 1;
const TYPE_NEW_USER = 2;
const TYPE_STUDENT = 3;
const TYPE_NEW_PRODUCT = 4;
let type = item.type;
let bannerHeight = Math.ceil((234 / 750) * width);
let sectionHeight = Math.ceil((419 / 750) * width);
let cellWidth = 90;
let cellHeight = 210;
let cellH = 0;
if (type == TYPE_VIP || type == TYPE_STUDENT) {
cellH = cellHeight;
} else {
cellH = cellHeight - 20;
}
floorHeight = cellH + headerHeight + bannerHeight;
break;
}
case 'hot_category_individualization': {
let cellWidth = width / 4;
let imageWidth = cellWidth - 14 * 2;
let imageHeight = imageWidth * 168 / 126;
let cellHeight = imageHeight + 20;
let lineNumber = parseInt((data.list.length + 3) / 4);
let listHeight = Math.floor(lineNumber * cellHeight);
let containerHeight = listHeight + headerHeight;
floorHeight = containerHeight;
break;
}
case 'new_user_floor': {
let leftBigImageWidth = width * 315 / 750;
let leftBigImageHeight = leftBigImageWidth * 420 / 315;
let containerHeight = headerHeight + leftBigImageHeight;
floorHeight = containerHeight;
break;
}
}
return floorHeight;
}
function homeDataParse(data, channel) {
let {list, cached, isFetching, isFirstLoad, endReached, favorite, bottomBanner, hotList, newList, selectIndex} = data;
let floorList = list.size > 0 ? list.toArray() : cached.get('list').toArray();
... ... @@ -372,6 +399,7 @@ function parseRecommendPop(json) {
module.exports = {
calcluateFloorHeight,
heightForFloor,
homeDataParse,
channelCacheKey,
parseHomeFloor,
... ...