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

滑动固定显示数据

v1.4.0
于肖磊 2025-08-05 17:57:15 +08:00
parent bef492de6b
commit 324c36e4fb
3 changed files with 51 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/common/tabs-view/index.vue
View File

@ -64,6 +64,10 @@ const props = defineProps({
tabsSlidingFixedBg: {
type: String,
default: '',
},
slidingFixedStyle: {
type: String,
default: '',
}
});
// const tabs = ref(props.value);
@ -91,7 +95,7 @@ const tabs_theme = computed(() => {
});
const item_style = computed(() => {
return (index: number, is_sliding_fixed: string) => {
return `padding-left: ${ index == 0 ? '0' : new_style.value.tabs_spacing / 2}px;padding-right:${ index + 1 == form.value.tabs_list.length ? '0' : new_style.value.tabs_spacing / 2 }px;${ is_sliding_fixed == '1' ? props.tabsSlidingFixedBg : ''}`
return `padding-left: ${ index == 0 ? '0' : new_style.value.tabs_spacing / 2}px;padding-right:${ index + 1 == form.value.tabs_list.length ? '0' : new_style.value.tabs_spacing / 2 }px;${ is_sliding_fixed == '1' ? (isEmpty(props.slidingFixedStyle) ? props.tabsSlidingFixedBg : props.slidingFixedStyle) : ''}`
}
});
const tabs_bottom_line_theme = computed(() => {

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

@ -5,7 +5,7 @@
<div class="oh z-deep re" :style="tabs_container + (is_rotating_background ? swiper_bg_style : '')">
<div v-if="is_rotating_background" class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="oh re 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" :sliding-fixed-style="is_rotating_background ? sliding_fixed_style : ''" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
<div class="oh" :style="carousel_container">
@ -91,6 +91,27 @@ const actived_index = ref(0);
const slideChange = (index: number) => {
actived_index.value = index;
};
// 滑动固定的背景样式
const sliding_fixed_style = computed(() => {
const style = form.value?.carousel_list?.[actived_index.value]?.style;
if (style && !isEmpty(style.color_list)) {
const color_list = style.color_list;
const list = color_list.filter((item: { color: string }) => !isEmpty(item.color));
if (list.length > 0) {
try {
if (style.background_img.length > 0) {
return `background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 0%)`;
} else {
return gradient_computer(style);
}
} catch (error) {
return '';
}
}
return '';
}
return '';
});
const swiper_bg_style = computed(() => {
const style = form.value?.carousel_list?.[actived_index.value]?.style;

25
src/components/model-tabs-magic/index.vue
View File

@ -5,7 +5,7 @@
<div class="oh z-deep re" :style="tabs_container + (is_rotating_background ? swiper_bg_style : '')">
<div v-if="is_rotating_background" class="abs z-i top-0 w h" :style="swiper_bg_img_style"></div>
<div class="oh re 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" :sliding-fixed-style="is_rotating_background ? sliding_fixed_style : ''" :active-index="tabs_active_index" :tabs-sliding-fixed-bg="tabs_sliding_fixed_bg"></tabs-view>
</div>
</div>
<div :style="magic_container">
@ -113,6 +113,29 @@ const actived_index = ref(0);
const slideChange = (index: number) => {
actived_index.value = index;
};
// 滑动固定的背景样式
const sliding_fixed_style = computed(() => {
if (tabs_magic_type.value == 'carousel') {
const style = tabs_magic_value.value.content?.carousel_list?.[actived_index.value]?.style;
if (style && !isEmpty(style.color_list)) {
const color_list = style.color_list;
const list = color_list.filter((item: { color: string }) => !isEmpty(item.color));
if (list.length > 0) {
try {
if (style.background_img.length > 0) {
return `background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 0%)`;
} else {
return gradient_computer(style);
}
} catch (error) {
return '';
}
}
return '';
}
}
return '';
});
// 轮播更新背景色
const swiper_bg_style = computed(() => {
if (tabs_magic_type.value == 'carousel') {