1.diy---header
parent
797b34abae
commit
72ab207e9e
|
|
@ -148,7 +148,15 @@
|
|||
// 是否是模块数据或者是九宫格商品分类样式数据, 默认模块数据
|
||||
is_tabs_type: true,
|
||||
|
||||
header_top: bar_height + 120,
|
||||
// #ifdef MP
|
||||
header_top: 'padding-top:' + (bar_height + 154) + 'rpx;',
|
||||
// #endif
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
header_top: 'padding-top:' + (bar_height + 158) + 'rpx;',
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
header_top: 'padding-top:' + (bar_height + 144) + 'rpx;',
|
||||
// #endif
|
||||
|
||||
header_data: {},
|
||||
footer_data: {},
|
||||
|
|
@ -177,7 +185,7 @@
|
|||
},
|
||||
computed: {
|
||||
diy_content_style() {
|
||||
return `padding-top:${this.header_top}rpx;padding-bottom:${this.padding_footer_computer}rpx`;
|
||||
return this.header_top + `padding-bottom:${this.padding_footer_computer}rpx;`;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="header-container" :style="roll_style + position">
|
||||
<view class="bg-white pf top-0 left-0 right-0 margin-bottom-sm" :style="top_content_style">
|
||||
<view class="bg-white pf top-0 left-0 right-0 padding-bottom" :style="top_content_style">
|
||||
<view class="header-content flex-row align-c">
|
||||
<view class="model-top flex-1">
|
||||
<view class="roll pr z-i">
|
||||
|
|
@ -111,7 +111,8 @@
|
|||
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU
|
||||
const custom = uni.getMenuButtonBoundingClientRect();
|
||||
menuButtonInfo = `max-width:calc(100% - ${custom.width + 130}rpx);`;
|
||||
console.log(custom);
|
||||
menuButtonInfo = `max-width:calc(100% - ${custom.width + 30}px);`;
|
||||
// #endif
|
||||
this.setData({
|
||||
form: this.value,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<view class="flex-row gap-10 jc-sb align-c">
|
||||
<view class="tabs flex-1 flex-width">
|
||||
<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true" :scroll-into-view="'one-nav-item-' + active_index" class="wh-auto">
|
||||
<view class="flex-row" :style="'column-gap: ' + tabs_spacing + 'px;'">
|
||||
<view class="flex-row" :style="'column-gap: ' + tabs_spacing + 'rpx;'">
|
||||
<view v-for="(item, index) in tabs_list" :key="index" :id="'one-nav-item-' + index" class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == active_index ? ' active' : '')" :data-index="index" @tap="handle_event">
|
||||
<image v-if="!isEmpty(item.img)" :src="item.img[0].url" class="img" mode="widthFix" />
|
||||
<view class="title" :style="index == active_index ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</view>
|
||||
|
|
@ -104,11 +104,11 @@
|
|||
};
|
||||
// 标题样式
|
||||
const new_tabs_theme_style = {
|
||||
tabs_title_checked: `font-weight: ${new_style.tabs_weight_checked};font-size: ${new_style.tabs_size_checked}px;color:${new_style.tabs_color_checked};` + (['2', '4'].includes(this.tabs_theme_index) ? this.tabs_check : ``),
|
||||
tabs_title: `font-weight: ${new_style.tabs_weight};font-size: ${new_style.tabs_size}px;color:${new_style.tabs_color};`,
|
||||
tabs_title_checked: `font-weight: ${new_style.tabs_weight_checked};font-size: ${new_style.tabs_size_checked * 2}rpx;color:${new_style.tabs_color_checked};` + (['2', '4'].includes(this.tabs_theme_index) ? this.tabs_check : ``),
|
||||
tabs_title: `font-weight: ${new_style.tabs_weight};font-size: ${new_style.tabs_size * 2}rpx;color:${new_style.tabs_color};`,
|
||||
};
|
||||
this.setData({
|
||||
tabs_spacing: new_style.tabs_spacing,
|
||||
tabs_spacing: Number(new_style.tabs_spacing * 2),
|
||||
tabs_list: new_content.tabs_list,
|
||||
// 选项卡主题
|
||||
tabs_theme: this.get_tabs_theme(new_content),
|
||||
|
|
|
|||
Loading…
Reference in New Issue