修改页面显示内容
parent
194f79fdab
commit
09db70c327
|
|
@ -2,19 +2,23 @@
|
||||||
<view :style="style_container">
|
<view :style="style_container">
|
||||||
<view class="w h re" :style="style_img_container">
|
<view class="w h re" :style="style_img_container">
|
||||||
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
|
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
|
||||||
<view v-for="(item, index) in data_source_content_list" :key="index">
|
<view class="flex-row flex-wrap" :style="'row-gap:' + new_style.row_gap + 'px;column-gap:' + new_style.column_gap + 'px;'">
|
||||||
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container">
|
<view v-for="(item, index) in data_source_content_list" :key="index" class="ht-auto" :style="gap_width">
|
||||||
<view class="wh-auto ht-auto" :style="style_chunk_img_container">
|
<view v-for="(item1, index1) in item.split_list" :key="index1">
|
||||||
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
|
<view :style="style_chunk_container">
|
||||||
|
<view class="wh-auto ht-auto" :style="style_chunk_img_container">
|
||||||
|
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh pr">
|
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh pr">
|
||||||
<swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
|
<swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'" :next-margin="form.data_source_direction != 'horizontal' ? '0rpx' : '-' + content_outer_spacing_magin" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
|
||||||
<swiper-item v-for="(item, index) in data_source_content_list" :key="index">
|
<swiper-item v-for="(item, index) in data_source_content_list" :key="index">
|
||||||
<view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
|
<view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'" :style="form.data_source_direction == 'horizontal' ? 'margin-right:' + content_outer_spacing_magin : ''">
|
||||||
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container + swiper_width">
|
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container + swiper_width + (form.data_source_direction == 'horizontal' ? '' : 'margin-bottom:' + content_outer_spacing_magin)"">
|
||||||
<div class="w h" :style="style_chunk_img_container">
|
<div class="w h" :style="style_chunk_img_container">
|
||||||
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
|
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -130,7 +134,9 @@
|
||||||
margin_bottom: 0,
|
margin_bottom: 0,
|
||||||
margin_left: 0,
|
margin_left: 0,
|
||||||
margin_right: 0,
|
margin_right: 0,
|
||||||
}
|
},
|
||||||
|
content_outer_spacing_magin: '0rpx',
|
||||||
|
gap_width: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
@ -173,9 +179,12 @@
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
list = new_form.data_source_content?.data_list || [];
|
list = new_form.data_source_content?.data_list || [];
|
||||||
}
|
}
|
||||||
|
// 数组处理
|
||||||
const new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
|
const new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
|
||||||
|
// 初始化数据
|
||||||
const { margin_left = 0, margin_right = 0, padding_left = 0, padding_right = 0 } = new_style.common_style;
|
const { margin_left = 0, margin_right = 0, padding_left = 0, padding_right = 0 } = new_style.common_style;
|
||||||
|
// 自定义组件宽度
|
||||||
const width = sys_width - margin_left - margin_right - padding_left - padding_right - this.propOuterContainerPadding;
|
const width = sys_width - margin_left - margin_right - padding_left - padding_right - this.propOuterContainerPadding;
|
||||||
const new_data_style = !isEmpty(new_style.data_style) ? new_style.data_style : this.old_data_style;
|
const new_data_style = !isEmpty(new_style.data_style) ? new_style.data_style : this.old_data_style;
|
||||||
// 判断是平移还是整屏滚动
|
// 判断是平移还是整屏滚动
|
||||||
|
|
@ -183,12 +192,18 @@
|
||||||
let swiper_height = 0;
|
let swiper_height = 0;
|
||||||
// 商品数量大于列数的时候,高度是列数,否则是当前的数量
|
// 商品数量大于列数的时候,高度是列数,否则是当前的数量
|
||||||
const col = new_list.length > Number(new_form.data_source_carousel_col) ? Number(new_form.data_source_carousel_col) : new_list.length;
|
const col = new_list.length > Number(new_form.data_source_carousel_col) ? Number(new_form.data_source_carousel_col) : new_list.length;
|
||||||
|
// 间距
|
||||||
|
const space_between = new_form.data_source_direction == 'horizontal' ? new_style.column_gap : new_style.row_gap;
|
||||||
// 轮播图高度控制
|
// 轮播图高度控制
|
||||||
if (new_form.data_source_direction == 'horizontal') {
|
if (new_form.data_source_direction == 'horizontal') {
|
||||||
swiper_height = new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top;
|
swiper_height = new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top;
|
||||||
} else {
|
} else {
|
||||||
swiper_height = (new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top) * col;
|
swiper_height = (new_form.height * (width / 390) + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((Number(new_form.data_source_carousel_col) - 1) * space_between);
|
||||||
}
|
}
|
||||||
|
// 拿到对应的数量
|
||||||
|
const model_number = Number(new_form.data_source_carousel_col);
|
||||||
|
// 计算间隔的空间。(gap * gap数量) / 模块数量
|
||||||
|
let gap = (new_style.column_gap * (model_number - 1)) / model_number;
|
||||||
// 横向的时候,根据选择的行数和每行显示的个数来区分具体是显示多少个
|
// 横向的时候,根据选择的行数和每行显示的个数来区分具体是显示多少个
|
||||||
const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
|
const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
|
||||||
this.setData({
|
this.setData({
|
||||||
|
|
@ -209,6 +224,8 @@
|
||||||
indicator_location_style: get_indicator_location_style(new_style),
|
indicator_location_style: get_indicator_location_style(new_style),
|
||||||
swiper_height: swiper_height,
|
swiper_height: swiper_height,
|
||||||
swiper_width: swiper_width,
|
swiper_width: swiper_width,
|
||||||
|
content_outer_spacing_magin: space_between + 'px',
|
||||||
|
gap_width: `width: calc(${100 / model_number}% - ${gap}px);`,
|
||||||
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col ) : 1,
|
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col ) : 1,
|
||||||
show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
|
show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
|
||||||
});
|
});
|
||||||
|
|
@ -216,7 +233,7 @@
|
||||||
get_list(list, form, new_style) {
|
get_list(list, form, new_style) {
|
||||||
// 深拷贝一下,确保不会出现问题
|
// 深拷贝一下,确保不会出现问题
|
||||||
const cloneList = JSON.parse(JSON.stringify(list));
|
const cloneList = JSON.parse(JSON.stringify(list));
|
||||||
if (new_style.rolling_fashion != 'translation') {
|
if (new_style.rolling_fashion != 'translation' && form.data_source_direction != 'vertical') {
|
||||||
// 如果是分页滑动情况下,根据选择的行数和每行显示的个数来区分具体是显示多少个
|
// 如果是分页滑动情况下,根据选择的行数和每行显示的个数来区分具体是显示多少个
|
||||||
if (cloneList.length > 0) {
|
if (cloneList.length > 0) {
|
||||||
// 每页显示的数量
|
// 每页显示的数量
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c">
|
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c">
|
||||||
<view v-if="form.content.positioning_name_float !== '1'" class="flex-row align-c gap-2">
|
<view v-if="form.content.positioning_name_float !== '1'" class="flex-row align-c gap-2">
|
||||||
<view :style="location_margin">
|
<view :style="location_margin">
|
||||||
<component-choice-location :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIconLocationSize="location_left_size" :propIconArrowSize="location_right_size" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="['4'].includes(form.content.theme) ? '300rpx' : '150rpx'" @onBack="choice_location_back"></component-choice-location>
|
<component-choice-location :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" :propTextDefaultName="form.content.positioning_name" :propIsLeftIconArrow="form.content.is_location_left_icon_show == '1'" :propLeftImgValue="form.content.location_left_img" :propLeftIconValue="'icon-' + form.content.location_left_icon" :propIconLocationSize="location_left_size" :propIconArrowSize="location_right_size" :propIsRightIconArrow="form.content.is_location_right_icon_show == '1'" :propRightImgValue="form.content.location_right_img" :propRightIconValue="'icon-' + form.content.location_right_icon" :propTextMaxWidth="location_name_style" @onBack="choice_location_back"></component-choice-location>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<template v-if="['5'].includes(form.content.theme) && !is_search_alone_row">
|
<template v-if="['5'].includes(form.content.theme) && !is_search_alone_row">
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
<view v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
|
<view v-if="is_search_alone_row || is_icon_alone_row" class="model-head-content flex-row align-c gap-16">
|
||||||
<template v-if="['3', '5'].includes(form.content.theme) && is_search_alone_row">
|
<template v-if="['3', '5'].includes(form.content.theme) && is_search_alone_row">
|
||||||
<view class="flex-1">
|
<view class="flex-1">
|
||||||
<componentDiySearch :propValue="form" :propIsPageSettings="true"></componentDiySearch>
|
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propLocationMargin="location_margin" propSearchType="header" :propLocationContainerStyle="style_location_container" :propLocationImgContainerStyle="style_location_img_container" :propBaseColor="location_color" :propIconLocationSize="location_left_size" :propIconArrowSize="location_right_size" @onBack="choice_location_back"></componentDiySearch>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<view v-if="!isEmpty(form.content.icon_setting) && is_icon_alone_row" class="flex-row align-c z-i" :class="['1'].includes(form.content.theme) ? 'right-0' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
|
<view v-if="!isEmpty(form.content.icon_setting) && is_icon_alone_row" class="flex-row align-c z-i" :class="['1'].includes(form.content.theme) ? 'right-0' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
|
||||||
|
|
@ -193,6 +193,7 @@
|
||||||
location_right_size: '24rpx',
|
location_right_size: '24rpx',
|
||||||
location_margin: '', // 悬浮之后有间距,所以要将margin设置成外padding
|
location_margin: '', // 悬浮之后有间距,所以要将margin设置成外padding
|
||||||
location_color: '', // 定位颜色
|
location_color: '', // 定位颜色
|
||||||
|
location_name_style: '', // 定位样式
|
||||||
// 默认数据
|
// 默认数据
|
||||||
old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
|
old_radius: { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 },
|
||||||
old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
|
old_padding: { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 },
|
||||||
|
|
@ -281,10 +282,26 @@
|
||||||
location_left_size: !isEmpty(new_style.location_left_icon_size) ? new_style.location_left_icon_size * 2 + 'rpx' : '24rpx',
|
location_left_size: !isEmpty(new_style.location_left_icon_size) ? new_style.location_left_icon_size * 2 + 'rpx' : '24rpx',
|
||||||
location_right_size: !isEmpty(new_style.location_right_icon_size) ? new_style.location_right_icon_size * 2 + 'rpx' : '24rpx',
|
location_right_size: !isEmpty(new_style.location_right_icon_size) ? new_style.location_right_icon_size * 2 + 'rpx' : '24rpx',
|
||||||
location_color: !isEmpty(new_style.location_color) ? new_style.location_color : new_style?.position_color || '',
|
location_color: !isEmpty(new_style.location_color) ? new_style.location_color : new_style?.position_color || '',
|
||||||
|
location_name_style: this.get_location_name_style(new_content),
|
||||||
location_margin: `padding: ${location_margin.margin_top * 2}rpx ${location_margin.margin_right * 2}rpx ${location_margin.margin_bottom * 2}rpx ${location_margin.margin_left * 2}rpx;`, // 悬浮之后有间距,所以要将margin设置成外padding
|
location_margin: `padding: ${location_margin.margin_top * 2}rpx ${location_margin.margin_right * 2}rpx ${location_margin.margin_bottom * 2}rpx ${location_margin.margin_left * 2}rpx;`, // 悬浮之后有间距,所以要将margin设置成外padding
|
||||||
});
|
});
|
||||||
this.$emit('onImmersionModelCallBack', this.is_immersion_model);
|
this.$emit('onImmersionModelCallBack', this.is_immersion_model);
|
||||||
},
|
},
|
||||||
|
get_location_name_style (new_content) {
|
||||||
|
const is_search_alone_row = new_content.data_alone_row_value && new_content.data_alone_row_value.includes('search');
|
||||||
|
const is_icon_alone_row = new_content.data_alone_row_value && new_content.data_alone_row_value.includes('icon');
|
||||||
|
let width = 0;
|
||||||
|
if (is_search_alone_row && is_icon_alone_row) {
|
||||||
|
width = 200;
|
||||||
|
} else if (is_search_alone_row || is_icon_alone_row) {
|
||||||
|
width = 100;
|
||||||
|
}
|
||||||
|
if (new_content.theme == '4') {
|
||||||
|
return `${ (150 + width) * 2 }rpx;`;
|
||||||
|
} else {
|
||||||
|
return `${ (100 + width) * 2 }rpx;`;
|
||||||
|
}
|
||||||
|
},
|
||||||
// 定位设置
|
// 定位设置
|
||||||
get_style_location_container(new_style) {
|
get_style_location_container(new_style) {
|
||||||
const { location_margin = this.old_margin, location_radius = this.old_radius} = new_style;
|
const { location_margin = this.old_margin, location_radius = this.old_radius} = new_style;
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<view v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
|
<view v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
|
||||||
<view v-for="(item, index) in data_source_content_list" :key="index">
|
<view class="flex-row flex-wrap" :style="'row-gap:' + new_style.row_gap + 'px;column-gap:' + new_style.column_gap + 'px;'">
|
||||||
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container">
|
<view v-for="(item, index) in data_source_content_list" :key="index" class="ht-auto" :style="gap_width">
|
||||||
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
|
<view v-for="(item1, index1) in item.split_list" :key="index1">
|
||||||
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
|
<view :style="style_container">
|
||||||
|
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
|
||||||
|
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh pr">
|
<div v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh pr">
|
||||||
<swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
|
<swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'" :next-margin="form.data_source_direction != 'horizontal' ? '0rpx' : '-' + content_outer_spacing_magin" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
|
||||||
<swiper-item v-for="(item, index) in data_source_content_list" :key="index">
|
<swiper-item v-for="(item, index) in data_source_content_list" :key="index">
|
||||||
<view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
|
<view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'" :style="form.data_source_direction == 'horizontal' ? 'margin-right:' + content_outer_spacing_magin : ''">
|
||||||
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width">
|
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width + (form.data_source_direction == 'horizontal' ? '' : 'margin-bottom:' + content_outer_spacing_magin)">
|
||||||
<div class="w h" :style="style_img_container">
|
<div class="w h" :style="style_img_container">
|
||||||
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
|
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -82,6 +85,8 @@ export default {
|
||||||
swiper_height: 0,
|
swiper_height: 0,
|
||||||
swiper_width: 'width: 100%;',
|
swiper_width: 'width: 100%;',
|
||||||
show_data: { data_key: 'id', data_name: 'name' },
|
show_data: { data_key: 'id', data_name: 'name' },
|
||||||
|
gap_width: '',
|
||||||
|
content_outer_spacing_magin: '0rpx',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
@ -136,6 +141,8 @@ export default {
|
||||||
const { margin_left, margin_right, margin_bottom, margin_top } = data_chunk_margin;
|
const { margin_left, margin_right, margin_bottom, margin_top } = data_chunk_margin;
|
||||||
const width = new_form.width - padding_left - padding_right - margin_left - margin_right - (this.propDataSpacing / 2);
|
const width = new_form.width - padding_left - padding_right - margin_left - margin_right - (this.propDataSpacing / 2);
|
||||||
const new_scale = (width / new_form.width) * this.propMagicScale;
|
const new_scale = (width / new_form.width) * this.propMagicScale;
|
||||||
|
// 间距
|
||||||
|
const space_between = new_form.data_source_direction == 'horizontal' ? new_style.column_gap : new_style.row_gap;
|
||||||
// 判断是平移还是整屏滚动
|
// 判断是平移还是整屏滚动
|
||||||
let swiper_height = 0;
|
let swiper_height = 0;
|
||||||
// 商品数量大于列数的时候,高度是列数,否则是当前的数量
|
// 商品数量大于列数的时候,高度是列数,否则是当前的数量
|
||||||
|
|
@ -144,8 +151,12 @@ export default {
|
||||||
if (new_form.data_source_direction == 'horizontal') {
|
if (new_form.data_source_direction == 'horizontal') {
|
||||||
swiper_height = new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top;
|
swiper_height = new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top;
|
||||||
} else {
|
} else {
|
||||||
swiper_height = (new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top) * col;
|
swiper_height = (new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((Number(new_form.data_source_carousel_col) - 1) * space_between);
|
||||||
}
|
}
|
||||||
|
// 拿到对应的数量
|
||||||
|
const model_number = Number(new_form.data_source_carousel_col);
|
||||||
|
// 计算间隔的空间。(gap * gap数量) / 模块数量
|
||||||
|
let gap = (new_style.column_gap * (model_number - 1)) / model_number;
|
||||||
// 横向的时候,根据选择的行数和每行显示的个数来区分具体是显示多少个
|
// 横向的时候,根据选择的行数和每行显示的个数来区分具体是显示多少个
|
||||||
const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
|
const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
|
||||||
this.setData({
|
this.setData({
|
||||||
|
|
@ -161,14 +172,16 @@ export default {
|
||||||
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col) : 1,
|
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col) : 1,
|
||||||
swiper_height: swiper_height,
|
swiper_height: swiper_height,
|
||||||
swiper_width: swiper_width,
|
swiper_width: swiper_width,
|
||||||
show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
|
show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' },
|
||||||
|
content_outer_spacing_magin: space_between + 'px',
|
||||||
|
gap_width: `width: calc(${100 / model_number}% - ${gap}px);`,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
get_list(list, form, new_style) {
|
get_list(list, form, new_style) {
|
||||||
// 深拷贝一下,确保不会出现问题
|
// 深拷贝一下,确保不会出现问题
|
||||||
const cloneList = JSON.parse(JSON.stringify(list));
|
const cloneList = JSON.parse(JSON.stringify(list));
|
||||||
if (new_style.rolling_fashion != 'translation') {
|
if (new_style.rolling_fashion != 'translation' && form.data_source_direction != 'vertical') {
|
||||||
// 如果是分页滑动情况下,根据选择的行数和每行显示的个数来区分具体是显示多少个
|
// 如果是分页滑动情况下,根据选择的行数和每行显示的个数来区分具体是显示多少个
|
||||||
if (cloneList.length > 0) {
|
if (cloneList.length > 0) {
|
||||||
// 每页显示的数量
|
// 每页显示的数量
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<view class="search wh-auto pr">
|
<view class="search wh-auto pr">
|
||||||
<view class="box oh flex-row align-c" :style="box_style">
|
<view class="box oh flex-row align-c" :style="box_style">
|
||||||
<view v-if="form.positioning_name_float == '1' && propSearchType == 'header'" :style="propLocationMargin">
|
<view v-if="form.positioning_name_float == '1' && propSearchType == 'header'" :style="propLocationMargin">
|
||||||
<component-choice-location propType="search" :propLocationContainerStyle="propLocationContainerStyle" :propLocationImgContainerStyle="propLocationImgContainerStyle" :propBaseColor="propBaseColor" :propTextDefaultName="form.positioning_name" :propIsLeftIconArrow="form.is_location_left_icon_show == '1'" :propLeftImgValue="form.location_left_img" :propLeftIconValue="'icon-' + form.location_left_icon" :propIconLocationSize="propIconLocationSize" :propIconArrowSize="propIconArrowSize" :propIsRightIconArrow="form.is_location_right_icon_show == '1'" :propRightImgValue="form.location_right_img" :propRightIconValue="'icon-' + form.location_right_icon" :propTextMaxWidth="['4'].includes(form.theme) ? '300rpx' : '150rpx'" @onBack.stop="choice_location_back"></component-choice-location>
|
<component-choice-location propType="search" :propLocationContainerStyle="propLocationContainerStyle" :propLocationImgContainerStyle="propLocationImgContainerStyle" :propBaseColor="propBaseColor" :propTextDefaultName="form.positioning_name" :propIsLeftIconArrow="form.is_location_left_icon_show == '1'" :propLeftImgValue="form.location_left_img" :propLeftIconValue="'icon-' + form.location_left_icon" :propIconLocationSize="propIconLocationSize" :propIconArrowSize="propIconArrowSize" :propIsRightIconArrow="form.is_location_right_icon_show == '1'" :propRightImgValue="form.location_right_img" :propRightIconValue="'icon-' + form.location_right_icon" :propTextMaxWidth="['4'].includes(form.theme) ? '300rpx' : '200rpx'" @onBack.stop="choice_location_back"></component-choice-location>
|
||||||
</view>
|
</view>
|
||||||
<view :class="'oh flex-1 ht-auto flex-row align-c gap-10' + (form.is_center == '1' ? ' tips-float' : '')" @tap.stop="search_tap">
|
<view :class="'oh flex-1 ht-auto flex-row align-c gap-10' + (form.is_center == '1' ? ' tips-float' : '')" @tap.stop="search_tap">
|
||||||
<view v-if="form.is_icon_show == '1'" class="pr">
|
<view v-if="form.is_icon_show == '1'" class="pr">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue