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

修改指示器的显示处理

master
于肖磊 2024-11-21 15:20:01 +08:00
parent 3635c25327
commit add7c5c508
4 changed files with 11 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/diy/carousel.vue
View File

@ -49,7 +49,7 @@
</swiper-item>
</block>
</swiper>
<view v-if="new_style.is_show == '1'" :class="{ 'dot-center': new_style.indicator_location == 'center', 'dot-right': new_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="dot_style">
<view v-if="new_style.is_show == '1'" :class="['left', 'right'].includes(new_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="indicator_location_style">
<template v-if="new_style.indicator_style == 'num'">
<view :style="indicator_style" class="dot-item">
<text :style="{ color: new_style.actived_color }">{{ actived_index + 1 }}</text>
@ -66,7 +66,7 @@
<script>
const app = getApp();
import { common_styles_computer, common_img_computer, radius_computer, isEmpty, gradient_computer, padding_computer } from '@/common/js/common/common.js';
import { common_styles_computer, common_img_computer, radius_computer, isEmpty, gradient_computer, padding_computer, get_indicator_location_style, get_indicator_style } from '@/common/js/common/common.js';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
@ -173,7 +173,8 @@
style_container: this.propIsCommon ? common_styles_computer(common_style) : '', // 公共样式显示
style_img_container: this.propIsCommon ? common_img_computer(common_style, this.propIndex) : '', // 公共样式显示
img_style: radius_computer(new_style), // 图片的设置
indicator_style: this.get_indicator_style(new_style), // 指示器的样式
indicator_style: get_indicator_style(new_style), // 指示器的样式
indicator_location_style: get_indicator_location_style(new_style),
dot_style: `bottom: ${ new_style.indicator_bottom * scale }px;`, // 指示器位置
img_fit: fit, // 图片风格 默认为aspectFill
video_style: this.get_video_style(new_style), // 视频播放按钮显示逻辑
@ -206,27 +207,6 @@
// });
// });
},
get_indicator_style(new_style) {
const { indicator_radius, indicator_style, indicator_size, color } = new_style;
let styles = '';
if (!isEmpty(indicator_radius)) {
styles += radius_computer(indicator_radius);
}
// 数字类型的指示器
if (indicator_style == 'num') {
styles += `color: ${color || '#DDDDDD'};`;
styles += `font-size: ${indicator_size * 2}rpx;`;
} else if (indicator_style == 'elliptic') {
// 宽的指示器，按照宽高1:3 来计算
styles += `background: ${color || '#DDDDDD'};`;
styles += `width: ${indicator_size * 6}rpx; height: ${indicator_size * 2}rpx;`;
} else {
// 圆点指示器
styles += `background: ${color || '#DDDDDD'};`;
styles += `width: ${indicator_size * 2}rpx; height: ${indicator_size * 2}rpx;`;
}
return styles;
},
get_seat_list(form) {
if (form.carousel_list.length > 3) {
return [];

28
components/diy/data-magic.vue
View File

@ -36,7 +36,7 @@
<template v-else>
<videoIndex :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
</template>
<view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{ 'dot-center': item.data_style.indicator_location == 'center', 'dot-right': item.data_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="{ bottom: item.data_style.indicator_bottom * 2 + 'rpx' }">
<view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
<template v-if="item.data_style.indicator_style == 'num'">
<view :style="item.data_style.indicator_styles" class="dot-item">
<text class="num-active" :style="{ color: item.data_style.actived_color }">{{ item.actived_index + 1 }}</text
@ -83,7 +83,7 @@
<template v-else>
<videoIndex :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
</template>
<view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{ 'dot-center': item.data_style.indicator_location == 'center', 'dot-right': item.data_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="{ bottom: item.data_style.indicator_bottom * 2 + 'rpx' }">
<view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
<template v-if="item.data_style.indicator_style == 'num'">
<view :style="item.data_style.indicator_styles" class="dot-item">
<text class="num-active" :style="{ color: item.data_style.actived_color }">{{ item.actived_index + 1 }}</text>
@ -107,7 +107,7 @@
import magicCarousel from '@/components/diy/modules/data-magic/magic-carousel.vue';
import customIndex from '@/components/diy/modules/data-magic/custom';
import videoIndex from '@/components/diy/modules/data-magic/video';
import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer } from '@/common/js/common/common.js';
import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer, get_indicator_location_style, get_indicator_style } from '@/common/js/common/common.js';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
export default {
@ -208,7 +208,8 @@
const data_style = item.data_style;
item.actived_index = 0;
// 指示器样式
data_style.indicator_styles = this.indicator_style(data_style);
data_style.indicator_styles = get_indicator_style(data_style);
data_style.indicator_location_style = get_indicator_location_style(data_style);
data_style.background_style = gradient_computer(data_style);
data_style.background_img_style = background_computer(data_style);
let fit = '';
@ -343,25 +344,6 @@
text_style(typeface, size, color) {
return `font-weight:${typeface}; font-size: ${size * 2}rpx; color: ${color};`;
},
// 指示器的样式
indicator_style(item) {
let styles = '';
if (!isEmpty(item.indicator_radius)) {
styles += radius_computer(item.indicator_radius);
}
const size = item.indicator_size || 5;
if (item.indicator_style == 'num') {
styles += `color: ${item.color || '#DDDDDD'};`;
styles += `font-size: ${size * 2}rpx;`;
} else if (item.indicator_style == 'elliptic') {
styles += `background: ${item.color || '#DDDDDD'};`;
styles += `width: ${size * 6}rpx; height: ${size * 2}rpx;`;
} else {
styles += `background: ${item.color || '#DDDDDD'};`;
styles += `width: ${size * 2}rpx; height: ${size * 2}rpx;`;
}
return styles;
},
carousel_change(actived_index, index) {
if (this.data_magic_list[index]) {
this.data_magic_list[index].actived_index = actived_index;

2
components/diy/nav-group.vue
View File

@ -113,6 +113,7 @@
img_style: radius_computer(new_style), // 图片的设置
text_style: `font-size: ${new_style.title_size * 2 || 24}rpx; color: ${new_style.title_color || '#000'};`, // 标题的样式
indicator_style: get_indicator_style(new_style), // 指示器的样式
indicator_location_style: get_indicator_location_style(new_style), // 指示器位置处理
actived_color: new_style.actived_color || '#2A94FF', // 轮播图显示样式
slides_per_group: group, // 每个轮播图显示的个数
group_width: group_width, // 每个导航所占位置
@ -121,7 +122,6 @@
img_size: 'width:' + (new_style.img_size || 0) * 2 + 'rpx;height:' + (new_style.img_size || 0) * 2 + 'rpx;', // 图片大小
nav_style: new_content.nav_style || 'image_with_text', // 是否显示文字和图片
nav_content_list: this.get_nav_content_list(new_content, new_style),
indicator_location_style: get_indicator_location_style(new_style),
});
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);

2
components/diy/seckill.vue
View File

@ -505,7 +505,7 @@
style_config(typeface, size, color, type, new_style) {
let style = `font-weight:${typeface}; font-size: ${size * 2}rpx;`;
if (type == 'gradient') {
style += gradient_handle(new_style.shop_button_color, '180deg') + `color: ${color};`;
style += gradient_handle(new_style.shop_button_color, '180deg');
} else if (type == 'title') {
style += `line-height: ${size > 0 ? (size + 3) * 2 : 0}rpx;height: ${size > 0 ? (size + 3) * 4 : 0}rpx;color: ${color};`;
} else if (type == 'desc') {