bingyi/shopxo-uniapp
1
0
Fork 0
mirror of https://gitee.com/zongzhige/shopxo-uniapp.git synced 2026-06-06 02:38:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改头部上滑显示逻辑

Browse Source
This commit is contained in:
于肖磊
2025-05-16 15:18:46 +08:00
parent 482fa2ab44
commit ca5137a59b
3 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

@ -7,10 +7,10 @@
data: {
// 基础配置
// 数据接口请求地址
request_url:'https://d1.shopxo.vip/',
request_url:'http://shopxo.com/',
// 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
static_url:'https://d1.shopxo.vip/',
static_url:'http://shopxo.com/',
// 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
system_type: 'default',

12
components/choice-location/choice-location.vue
View File

@ -7,16 +7,16 @@
<image :src="propLeftImgValue[0].url" class="dis-block" mode="heightFix"></image>
</block>
<block v-else>
<iconfont :name="propLeftIconValue" :size="propIconLocationSize" propClass="lh" :color="propIconLocationColor || propBaseColor" :propContainerDisplay="propContainerDisplay"></iconfont>
<iconfont :name="propLeftIconValue" :size="propIconLocationSize" propClass="lh" :color="propIconLocationColor || propBaseColor" :propStyle="propUpSlideStyle" :propContainerDisplay="propContainerDisplay"></iconfont>
</block>
</view>
<view :class="'va-m dis-inline-block margin-left-xs single-text text' + (propType == 'header' ? ' text-size-md' : ' text-size-xs')" :style="'max-width:' + propTextMaxWidth + ';color:' + (propTextColor || propBaseColor) + ';'">{{ location.text || '' }}</view>
<view :class="'va-m dis-inline-block margin-left-xs single-text text' + (propType == 'header' ? ' text-size-md' : ' text-size-xs')" :style="'max-width:' + propTextMaxWidth + ';color:' + (propTextColor || propBaseColor) + ';' + propUpSlideStyle">{{ location.text || '' }}</view>
<view v-if="propIsRightIconArrow" class="va-m lh dis-inline-block margin-left-xs">
<block v-if="(propRightImgValue || null) != null && propRightImgValue.length > 0">
<image :src="propRightImgValue[0].url" class="dis-block" mode="heightFix"></image>
</block>
<block v-else>
<iconfont :name="propRightIconValue" :size="propIconArrowSize" propClass="lh-xs" :color="propIconArrowColor || propBaseColor" :propContainerDisplay="propContainerDisplay"></iconfont>
<iconfont :name="propRightIconValue" :size="propIconArrowSize" propClass="lh-xs" :color="propIconArrowColor || propBaseColor" :propStyle="propUpSlideStyle" :propContainerDisplay="propContainerDisplay"></iconfont>
</block>
</view>
</view>
@ -109,7 +109,11 @@
propContainerDisplay: {
type: String,
default: 'inline-block',
}
},
propUpSlideStyle: {
type: String,
default: '',
},
},
// 页面被展示
created: function () {

27
pages/diy/components/diy/header.vue
View File

@ -15,14 +15,14 @@
<!-- 支付宝小程序自带返回按钮，这里就不给返回按钮了，这里给留出一点空间就行 -->
<!-- #ifndef MP-ALIPAY -->
<view v-if="!is_tabbar_pages && is_left_back_btn_show == '1'" class="z-i dis-inline-block margin-top-xs" @tap="top_nav_left_back_event">
<iconfont name="icon-arrow-left" size="40rpx" propContainerDisplay="flex" :color="form.style.left_back_btn_color || '#333'"></iconfont>
<iconfont name="icon-arrow-left" size="40rpx" propContainerDisplay="flex" :propStyle="up_slide_left_back_btn_style"></iconfont>
</view>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<view class="dis-inline-block padding-left-sm"></view>
<!-- #endif -->
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1">
<view class="flex-row align-c jc-c ht-auto gap-16" :class="position_class" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
<view class="flex-row align-c jc-c ht-auto gap-16" :class="position_class" :style="text_style + up_slide_title_style + 'justify-content:' + form.content.indicator_location || 'center'">
<template v-if="['2', '3'].includes(form.content.theme)">
<view v-if="form.content.logo.length > 0" class="logo-outer-style re flex-row align-c" :data-value="form.content.link.page" @tap.stop="url_event">
<template v-if="form.style.up_slide_logo && form.style.up_slide_logo.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-if="form.content.positioning_name_float !== '1'" class="flex-row align-c gap-2">
<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="location_name_style" propContainerDisplay="flex" @onBack="choice_location_back"></component-choice-location>
<component-choice-location :propLocationContainerStyle="style_location_container" :propUpSlideStyle="up_slide_location_style" :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" propContainerDisplay="flex" @onBack="choice_location_back"></component-choice-location>
</view>
</view>
<template v-if="['5'].includes(form.content.theme) && !is_search_alone_row">
@ -181,6 +181,9 @@
up_slide_style: '',
up_slide_img_style: '',
up_slide_icon_style: '',
up_slide_title_style: '',
up_slide_location_style: '',
up_slide_left_back_btn_style: '',
// 当前页面是否在底部菜单中
is_tabbar_pages: app.globalData.is_tabbar_pages(),
is_left_back_btn_show: '0',
@ -205,7 +208,7 @@
watch: {
// 监听滚动距离
propScrollTop(newVal) {
const { up_slide_background_color_list, up_slide_background_direction, up_slide_background_img, up_slide_background_img_style, up_slide_display, img_color = '', up_slide_icon_color = '' } = this.propValue.style || {};
const { up_slide_background_color_list, up_slide_background_direction, up_slide_background_img, up_slide_background_img_style, up_slide_display, img_color = '', up_slide_icon_color = '', header_background_title_color = '', up_slide_title_color = '', location_color = '', up_slide_location_color = '', left_back_btn_color = '#333', up_slide_left_back_btn_color = '' } = this.propValue.style || {};
if (up_slide_display == '1') {
// 渐变
const gradient = { color_list: up_slide_background_color_list, direction: up_slide_background_direction };
@ -220,10 +223,14 @@
// =0是大小误差
this.up_slide_style = gradient_computer(gradient) + up_slide_opacity;
// 图标更换
this.up_slide_icon_style = up_slide_icon_color == '' || opacity <= 0 ? `color: ${ img_color };` : `color: ${ up_slide_icon_color };${ this.up_slide_opacity }`;
this.up_slide_icon_style = this.get_up_slide_style(img_color, up_slide_icon_color, opacity);
// 标题更换
this.up_slide_title_style = this.get_up_slide_style(header_background_title_color, up_slide_title_color, opacity);
// 定位更换
this.up_slide_location_style = this.get_up_slide_style(location_color, up_slide_location_color, opacity);
// 返回图标更换
this.up_slide_left_back_btn_style = this.get_up_slide_style(left_back_btn_color, up_slide_left_back_btn_color, opacity);
this.up_slide_img_style = background_computer(back);
} else {
this.up_slide_icon_style = `color: ${ img_color };`
}
},
propKey(val) {
@ -314,6 +321,12 @@
return `${(100 + width) * 2}rpx;`;
}
},
// 封装公共逻辑函数
get_up_slide_style(defaultColor, customColor, opacityValue) {
const opacityStr = opacityValue > 0 ? `opacity: ${opacityValue};` : '';
const color = (customColor === '' || opacityValue <= 0) ? defaultColor : customColor;
return `color: ${color};${opacityStr}`;
},
// 定位设置
get_style_location_container(new_style) {
const { location_margin = this.old_margin, location_radius = this.old_radius } = new_style;