sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改选项卡轮播的处理

v1.2.0
于肖磊 2025-02-18 13:36:45 +08:00
parent 2def858d6a
commit 435ef8e718
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/model-tabs-carousel/index.vue
View File

@ -2,8 +2,8 @@
<div class="re" :style="style_container + swiper_bg_style"> <div class="re" :style="style_container + swiper_bg_style">
<div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div> <div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')"> <div class="flex-col oh" :style="style_img_container + (!isEmpty(swiper_bg_img_style) ? `background-image: url('');` : '')">
<div class="oh z-deep re" :style="tabs_container + swiper_bg_style"> <div class="oh z-deep re" :style="tabs_container + (is_rotating_background ? swiper_bg_style : '')">
<div class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div> <div v-if="is_rotating_background" class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="oh z-deep" :style="tabs_img_container"> <div class="oh z-deep" :style="tabs_img_container">
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view> <tabs-view ref="tabs" :value="tabs_list" :is-tabs="true" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div> </div>
@ -41,11 +41,12 @@ const carousel_container = ref('');
const carousel_img_container = ref(''); const carousel_img_container = ref('');
// 打开滑动固定开关之后，显示的样式 // 打开滑动固定开关之后，显示的样式
const tabs_sliding_fixed_bg = ref(''); const tabs_sliding_fixed_bg = ref('');
const is_rotating_background = ref(false);
watch( watch(
props.value, props.value,
(val) => { (val) => {
let new_data = cloneDeep(val); let new_data = cloneDeep(val);
const { home_data, is_tabs_safe_distance = '0' } = new_data.content; const { home_data, is_tabs_safe_distance = '0', rotating_background } = new_data.content;
const new_style = new_data?.style; const new_style = new_data?.style;
// 选项卡背景设置 // 选项卡背景设置
const tabs_data = { const tabs_data = {
@ -60,6 +61,9 @@ watch(
...new_style.tabs_padding, ...new_style.tabs_padding,
padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0), padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
} }
// 是否开启轮播图背景设置
is_rotating_background.value = rotating_background == '1';
// 选项卡滑动固定背景
tabs_sliding_fixed_bg.value = gradient_computer(tabs_data); tabs_sliding_fixed_bg.value = gradient_computer(tabs_data);
tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`; tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding); tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);

20
src/components/model-tabs/model-tabs-content.vue
View File

@ -33,12 +33,20 @@
<icon name="miaosha-hdgz" size="12" color="#999"></icon> <icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip> </el-tooltip>
</el-form-item> </el-form-item>
<el-form-item v-if="is_general_safe_distance && !isCommon" label="安全距离"> <template v-if="!isCommon">
<el-switch v-model="form.is_tabs_safe_distance" class="mr-10" active-value="1" inactive-value="0" /> <el-form-item v-if="is_general_safe_distance" label="安全距离">
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡是否支持安全距离</span>" raw-content placement="top"> <el-switch v-model="form.is_tabs_safe_distance" class="mr-10" active-value="1" inactive-value="0" />
<icon name="miaosha-hdgz" size="12" color="#999"></icon> <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡是否支持安全距离</span>" raw-content placement="top">
</el-tooltip> <icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-form-item> </el-tooltip>
</el-form-item>
<el-form-item label="轮播背景">
<el-switch v-model="form.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
<el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景.</span>" raw-content placement="top">
<icon name="miaosha-hdgz" size="12" color="#999"></icon>
</el-tooltip>
</el-form-item>
</template>
</card-container> </card-container>
<div class="divider-line"></div> <div class="divider-line"></div>
<card-container> <card-container>

2
src/config/const/tabs-carousel.ts
View File

@ -33,6 +33,7 @@ interface defaultTabs {
content: { content: {
content_top: object; content_top: object;
justification: string, justification: string,
rotating_background: string;
show_more: string, show_more: string,
tabs_theme: string; tabs_theme: string;
tabs_adorn_icon: string; tabs_adorn_icon: string;
@ -131,6 +132,7 @@ const defaultTabs: defaultTabs = {
show_more: '1', show_more: '1',
// 选项卡风格 // 选项卡风格
tabs_theme: '0', tabs_theme: '0',
rotating_background: '0',
// 选中装饰图标 // 选中装饰图标
tabs_adorn_icon: 'checked-smooth', tabs_adorn_icon: 'checked-smooth',
tabs_adorn_img: [], tabs_adorn_img: [],