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

修改自定义显示

v1.1.0
于肖磊 2024-11-15 18:57:25 +08:00
parent d14d70a8ad
commit a021d8c2c1
4 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/model-custom/index.vue
View File

@ -1,5 +1,5 @@
<template>
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == '1'">
<template v-if="data_source_content_list.length > 0 && form.data_source_direction == '0'">
<div v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_container">
<div class="w h" :style="style_img_container">
<div class="w h re custom-other">
@ -24,8 +24,8 @@
</div>
</div>
</template>
<div v-else-if="data_source_content_list.length > 0 && form.data_source_direction == '0'" class="re oh">
<swiper :key="carouselKey" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<div v-else-if="data_source_content_list.length > 0 && ['1', '2'].includes(form.data_source_direction)" class="re oh" :style="form.data_source_direction == '1' ? `height:100%;` : `height: ${ swiper_height }px;`">
<swiper :key="carouselKey" class="w flex" :direction="form.data_source_direction == '1' ? 'horizontal': 'vertical'" :height="swiper_height" :loop="true" :autoplay="autoplay" :slides-per-view="form.data_source_carousel_col" :slides-per-group="slides_per_group" :allow-touch-move="false" :pause-on-mouse-enter="true" :modules="modules" @slide-change="slideChange">
<swiper-slide v-for="(item1, index1) in data_source_content_list" :key="index1">
<div :style="style_container">
<div class="w h" :style="style_img_container">
@ -176,6 +176,7 @@ const carouselKey = ref('0');
const autoplay = ref<boolean | object>(false);
const slides_per_group = ref(1);
const dot_list = ref<unknown[]>([]);
const swiper_height = ref(390);
// 内容参数的集合
watchEffect(() => {
// 是否滚动
@ -190,6 +191,13 @@ watchEffect(() => {
// 判断是平移还是整屏滚动
slides_per_group.value = new_style.value.rolling_fashion == 'translation' ? 1 : form.value.data_source_carousel_col;
const num = new_style.value.rolling_fashion == 'translation' ? data_source_content_list.value.length : Math.ceil(data_source_content_list.value.length / form.value.data_source_carousel_col);
const { padding_top, padding_bottom, margin_bottom, margin_top } = new_style.value.common_style;
// 轮播图高度控制
if (form.value.data_source_direction == '1') {
swiper_height.value = form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top;
} else {
swiper_height.value = (form.value.height * scale.value + padding_top + padding_bottom + margin_bottom + margin_top) * form.value.data_source_carousel_col;
}
dot_list.value = Array(num);
// 更新轮播图的key，确保更换时能重新更新轮播图
carouselKey.value = get_math();

8
src/components/model-custom/model-custom-content.vue
View File

@ -16,11 +16,12 @@
<div class="mb-12">显示设置</div>
<el-form-item label="铺满方式">
<el-radio-group v-model="form.data_source_direction">
<el-radio value="0">横向滑动</el-radio>
<el-radio value="1">纵向</el-radio>
<el-radio value="0">纵向展示</el-radio>
<el-radio value="2">纵向滑动</el-radio>
<el-radio value="1">横向滑动</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.data_source_direction == '0'" label="每屏显示">
<el-form-item v-if="['1', '2'].includes(form.data_source_direction)" label="每屏显示">
<el-radio-group v-model="form.data_source_carousel_col">
<el-radio :value="1">单列展示</el-radio>
<el-radio :value="2">两列展示</el-radio>
@ -203,6 +204,7 @@ const changeDataSource = (key: string) => {
const type_data = options.value.filter((item) => item.type == key);
processing_data(key);
if (type_data.length > 0 && !isEmpty(type_data[0].appoint_data)) {
form.value.data_source_direction = '0';
form.value.data_source_content = {
// 存放手动输入的id
data_ids: [],

2
src/components/model-custom/model-custom-styles.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="w">
<template v-if="data.data_source_direction == '0'">
<template v-if="['1', '2'].includes(data.data_source_direction)">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">轮播设置</div>

4
src/config/const/custom.ts
View File

@ -113,8 +113,8 @@ const defaultSearch: defaultSearch = {
},
// 数据源类型 商品(goods) 文章(article) 品牌(brand) 用户信息(user-info)
data_source:'',
// 铺满方式 0 横向 1 纵向
data_source_direction: '1',
// 铺满方式 0 纵向展示 1 横向滑动 2 纵向滑动
data_source_direction: '0',
// 横向滑动时的显示 轮播数量
data_source_carousel_col: 1,
// 自定义内容列表