Merge branch 'dev-sws' into dev
commit
0670cd9cdd
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- 文章列表 -->
|
||||
<view class="article-tabs ou" :style="style_container">
|
||||
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<view class="oh">
|
||||
<componentDiyArticleList v-if="hackReset" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
|
||||
</view>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, padding_computer, margin_computer, background_computer, gradient_computer } from '@/common/js/common/common.js';
|
||||
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
|
||||
import componentDiyArticleList from '@/components/diy/article-list'; // 状态栏高度
|
||||
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
default: 0,
|
||||
},
|
||||
propCustomNavHeight: {
|
||||
type: String,
|
||||
default: '66rpx',
|
||||
type: Number,
|
||||
default: 33,
|
||||
},
|
||||
propScrollTop: {
|
||||
type: Number,
|
||||
|
|
@ -50,15 +50,28 @@
|
|||
top_up: '0',
|
||||
tabs_style: '',
|
||||
tabs_top: 0,
|
||||
tabs_background: 'transparent',
|
||||
tabs_background: 'background:transparent',
|
||||
custom_nav_height: 33,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
propScrollTop(newVal) {
|
||||
if (newVal >= this.tabs_top) {
|
||||
this.tabs_background = 'rgba(255,255,255,1)';
|
||||
if (newVal + this.propTop + this.custom_nav_height >= this.tabs_top) {
|
||||
let new_style = this.propValue.style || {};
|
||||
let tabs_bg = new_style.common_style.color_list;
|
||||
let new_tabs_background = '';
|
||||
if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
|
||||
new_tabs_background = gradient_computer(new_style.common_style);
|
||||
}
|
||||
let new_tabs_background_img = background_computer(new_style.common_style);
|
||||
if (new_tabs_background_img.length > 0) {
|
||||
new_tabs_background_img += 'background-position: top left;';
|
||||
}
|
||||
this.setData({
|
||||
tabs_background: (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img,
|
||||
});
|
||||
} else {
|
||||
this.tabs_background = 'transparent';
|
||||
this.tabs_background = 'background:transparent';
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -66,7 +79,18 @@
|
|||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
this.getTop();
|
||||
this.$nextTick(() => {
|
||||
const self = this;
|
||||
setTimeout(() => {
|
||||
self.getTop();
|
||||
});
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
// 获取自定义导航栏高度
|
||||
this.setData({
|
||||
custom_nav_height: this.propCustomNavHeight,
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
|
@ -138,7 +162,6 @@
|
|||
this.setData({
|
||||
tabs_top: res.top,
|
||||
});
|
||||
console.log('article', res);
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
<view class="pr header">
|
||||
<componentDiyHeader v-if="hack_reset" :propValue="header_data.com_data"></componentDiyHeader>
|
||||
</view>
|
||||
<view class="content flex-col" :style="'padding-top:' + temp_is_header_top ? temp_header_top : '0'">
|
||||
<view class="content flex-col" :style="'padding-top:' + (temp_is_header_top ? temp_header_top : '0')">
|
||||
<view v-for="(item, index) in tabs_data" :key="item.key">
|
||||
<componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
|
||||
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
|
||||
<componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="is_header_top ? is_header_top && temp_is_header_top : temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
|
||||
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="temp_sticky_top" :propNavIsTop="is_header_top" :propTabsIsTop="is_header_top ? is_header_top && temp_is_header_top : temp_is_header_top" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
|
||||
</view>
|
||||
<template v-if="is_tabs_type">
|
||||
<template v-if="diy_data.length > 0">
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
<componentDiyNotice v-else-if="item.key == 'notice'" :propValue="item.com_data"></componentDiyNotice>
|
||||
<componentDiyVideo v-else-if="item.key == 'video'" :propValue="item.com_data"></componentDiyVideo>
|
||||
<componentDiyArticleList v-else-if="item.key == 'article-list'" :propValue="item.com_data"></componentDiyArticleList>
|
||||
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></componentDiyArticleTabs>
|
||||
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></componentDiyGoodsTabs>
|
||||
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? 33 : 0"></componentDiyArticleTabs>
|
||||
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :propScrollTop="scroll_top" :propCustomNavHeight="is_header_top ? 33 : 0"></componentDiyGoodsTabs>
|
||||
|
||||
<componentDiyGoodsList v-else-if="item.key == 'goods-list'" :propValue="item.com_data"></componentDiyGoodsList>
|
||||
<componentDiyDataMagic v-else-if="item.key == 'data-magic'" :propValue="item.com_data"></componentDiyDataMagic>
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<!-- 当前diy页面底部菜单(非公共底部菜单) -->
|
||||
<block v-if="is_show_footer == 1">
|
||||
<componentDiyFooter v-if="hack_reset" :propValue="footer_data.com_data" @footer-height="footer_height_value_event"></componentDiyFooter>
|
||||
<view v-if="footer_height_value > 0" :style="'height:'+footer_height_value+'rpx;'"></view>
|
||||
<view v-if="footer_height_value > 0" :style="'height:' + footer_height_value + 'rpx;'"></view>
|
||||
</block>
|
||||
|
||||
<!-- 底部卡槽 -->
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
propDataId: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
componentDiyHeader,
|
||||
|
|
@ -430,7 +430,7 @@
|
|||
if (e.detail.scrollTop >= this.sticky_top + 33) {
|
||||
this.setData({
|
||||
temp_sticky_top: 0,
|
||||
temp_header_top: this.tabs_height + 'px',
|
||||
temp_header_top: 0,
|
||||
temp_is_header_top: true,
|
||||
});
|
||||
} else {
|
||||
|
|
@ -445,11 +445,11 @@
|
|||
},
|
||||
|
||||
// 底部菜单高度
|
||||
footer_height_value_event(value) {
|
||||
footer_height_value_event(value) {
|
||||
this.setData({
|
||||
footer_height_value: (value*2)+20
|
||||
footer_height_value: value * 2 + 20,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="goods-tabs ou" :style="style_container">
|
||||
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight * 2 + 'rpx'" :propTabsBackground="tabs_background" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<view class="oh">
|
||||
<componentGoodsList v-if="hackReset" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
|
||||
</view>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
|
||||
import { common_styles_computer, padding_computer, margin_computer, background_computer, gradient_computer } from '@/common/js/common/common.js';
|
||||
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
|
||||
import componentGoodsList from '@/components/diy/goods-list'; // 状态栏高度
|
||||
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
default: 0,
|
||||
},
|
||||
propCustomNavHeight: {
|
||||
type: String,
|
||||
default: '66rpx',
|
||||
type: Number,
|
||||
default: 33,
|
||||
},
|
||||
propScrollTop: {
|
||||
type: Number,
|
||||
|
|
@ -49,15 +49,28 @@
|
|||
// 是否滑动置顶
|
||||
top_up: '0',
|
||||
tabs_top: 0,
|
||||
tabs_background: 'transparent',
|
||||
tabs_background: 'background:transparent',
|
||||
custom_nav_height: 33,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
propScrollTop(newVal) {
|
||||
if (newVal >= this.tabs_top) {
|
||||
this.tabs_background = 'rgba(255,255,255,1)';
|
||||
if (newVal + this.propTop + this.custom_nav_height >= this.tabs_top) {
|
||||
let new_style = this.propValue.style || {};
|
||||
let tabs_bg = new_style.common_style.color_list;
|
||||
let new_tabs_background = '';
|
||||
if (tabs_bg.length > 0 && tabs_bg[0].color !== '') {
|
||||
new_tabs_background = gradient_computer(new_style.common_style);
|
||||
}
|
||||
let new_tabs_background_img = background_computer(new_style.common_style);
|
||||
if (new_tabs_background_img.length > 0) {
|
||||
new_tabs_background_img += 'background-position: top left;';
|
||||
}
|
||||
this.setData({
|
||||
tabs_background: (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img,
|
||||
});
|
||||
} else {
|
||||
this.tabs_background = 'transparent';
|
||||
this.tabs_background = 'background:transparent';
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -65,7 +78,18 @@
|
|||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
this.getTop();
|
||||
this.$nextTick(() => {
|
||||
const self = this;
|
||||
setTimeout(() => {
|
||||
self.getTop();
|
||||
});
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
// 获取自定义导航栏高度
|
||||
this.setData({
|
||||
custom_nav_height: this.propCustomNavHeight,
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
|
@ -132,7 +156,6 @@
|
|||
tabs_top: res.top,
|
||||
});
|
||||
}
|
||||
console.log('goods', res);
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,40 +1,42 @@
|
|||
<template>
|
||||
<view v-if="(propValue || null) !== null" class="header-container" :style="roll_style + position">
|
||||
<view class="bg-white" :style="top_content_style">
|
||||
<view class="header-content flex-row align-c">
|
||||
<view class="model-top flex-1">
|
||||
<view class="roll pr z-i">
|
||||
<view class="model-head pr padding-horizontal-sm flex-row align-c" :style="header_style">
|
||||
<view class="flex-row align-c jc-sb gap-16 wh-auto padding-horizontal-main pr">
|
||||
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
|
||||
<template v-if="['2', '3'].includes(form.content.theme)">
|
||||
<view class="logo-outer-style">
|
||||
<imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
|
||||
<template v-if="['3', '5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10">
|
||||
<view class="flex-row align-c gap-2" @tap="go_map_event">
|
||||
<iconfont name="icon-location" size="12" color="0"></iconfont>
|
||||
<text class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</text>
|
||||
<iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
|
||||
<view v-if="(propValue || null) !== null" class="header-container">
|
||||
<view class="wh-auto header-z-3" :style="roll_style + position">
|
||||
<view class="bg-white" :style="top_content_style">
|
||||
<view class="header-content flex-row align-c">
|
||||
<view class="model-top flex-1">
|
||||
<view class="roll pr z-i">
|
||||
<view class="model-head pr flex-row align-c" :style="header_style">
|
||||
<view class="flex-row align-c jc-sb gap-16 wh-auto">
|
||||
<view v-if="['1', '2', '3'].includes(form.content.theme)" class="flex-1 flex-row align-c jc-c ht-auto gap-16 padding-left-main" :style="text_style + 'justify-content:' + form.content.indicator_location || 'center'">
|
||||
<template v-if="['2', '3'].includes(form.content.theme)">
|
||||
<view class="logo-outer-style">
|
||||
<imageEmpty :propImageSrc="form.content.logo[0]" propImgFit="heightFix" propErrorStyle="width:40rpx;height:40rpx;"></imageEmpty>
|
||||
</view>
|
||||
</template>
|
||||
<view v-if="['1', '2'].includes(form.content.theme)">{{ form.content.title }}</view>
|
||||
<template v-if="['3', '5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<template v-if="['5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
|
||||
<view v-else-if="['4', '5'].includes(form.content.theme)" class="flex-1 flex-row align-c h gap-10 padding-left-main">
|
||||
<view class="flex-row align-c gap-2" @tap="go_map_event">
|
||||
<iconfont name="icon-location" size="12" color="0"></iconfont>
|
||||
<text class="size-14 cr-3 text-line-1">{{ form.content.positioning_name }}</text>
|
||||
<iconfont v-if="form.content.is_arrows_show == '1'" name="icon-arrow-right" size="24rpx" color="#000"></iconfont>
|
||||
</view>
|
||||
<template v-if="['5'].includes(form.content.theme)">
|
||||
<view class="flex-1">
|
||||
<componentDiySearch :propValue="form" :propIsPageSettings="true" :propIsClick="is_click" @search_tap="search_tap"></componentDiySearch>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
|
||||
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }" :data-value="item.link.page" @tap="url_event">
|
||||
<imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
|
||||
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view v-if="!isEmpty(form.content.icon_setting)" class="flex-row align-c" :class="['1'].includes(form.content.theme) ? 'right-0 padding-right-main' : ''" :style="{ gap: form.style.img_space * 2 + 'rpx' }">
|
||||
<view v-for="(item, index) in form.content.icon_setting" :key="index" :style="{ width: form.style.img_size * 2 + 'rpx', height: form.style.img_size * 2 + 'rpx' }" :data-value="item.link.page" @tap="url_event">
|
||||
<imageEmpty v-if="item.img.length > 0" :propImageSrc="item.img[0].url" :propErrorStyle="'width: ' + Number(form.style.img_size) * 2 + 'rpx;height:' + Number(form.style.img_size) * 2 + 'rpx;'"></imageEmpty>
|
||||
<iconfont v-else :name="'icon-' + item.icon" :size="form.style.img_size * 2 + 'rpx'" color="#666"></iconfont>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -42,8 +44,15 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
|
||||
</view>
|
||||
<hotWordList v-if="is_click" :propValue="form.content.hot_word_list" :prophotWordsColor="form.style.hot_words_color" :propIsPageSettings="true" @search_hot_close="search_hot_close"></hotWordList>
|
||||
<!-- #ifndef H5 || MP-TOUTIAO -->
|
||||
<view v-if="is_positon_realative" class="wh-auto pf top-0 left-0 right-0" :style="roll_style">
|
||||
<view class="bg-white" :style="top_content_style">
|
||||
<view style="height: 66rpx"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -89,6 +98,7 @@
|
|||
// #ifdef APP
|
||||
top_content_style: 'padding-top:' + bar_height + 'px;padding-bottom:12px;',
|
||||
// #endif
|
||||
is_positon_realative: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -117,11 +127,12 @@
|
|||
|
||||
// #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-KUAISHOU
|
||||
const custom = uni.getMenuButtonBoundingClientRect();
|
||||
menuButtonInfo = `max-width:calc(100% - ${custom.width + 30}px);`;
|
||||
menuButtonInfo = `max-width:calc(100% - ${custom.width + 10}px);`;
|
||||
// #endif
|
||||
this.setData({
|
||||
form: this.propValue,
|
||||
position: new_style.up_slide_display == '1' ? 'position:fixed;' : 'position:relative;',
|
||||
is_positon_realative: new_style.up_slide_display == '1' ? false : true,
|
||||
roll_style: new_roll_style,
|
||||
text_style: `font-weight:${new_style.header_background_title_typeface}; font-size: ${new_style.header_background_title_size * 2}rpx; color: ${new_style.header_background_title_color};`,
|
||||
header_style: menuButtonInfo,
|
||||
|
|
@ -132,13 +143,13 @@
|
|||
},
|
||||
search_tap(value) {
|
||||
this.setData({
|
||||
is_click: value
|
||||
})
|
||||
is_click: value,
|
||||
});
|
||||
},
|
||||
search_hot_close() {
|
||||
this.setData({
|
||||
is_click: false
|
||||
})
|
||||
is_click: false,
|
||||
});
|
||||
},
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
|
|
@ -149,8 +160,12 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.header-container {
|
||||
z-index: 102;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
.header-z-3 {
|
||||
z-index: 3;
|
||||
}
|
||||
.header-content {
|
||||
height: 66rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- 文章列表 66rpx是自定义顶部导航栏的高度-->
|
||||
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight">
|
||||
<view class="flex-row gap-10 jc-sb align-c" :style="propStyle + 'background:' + propTabsBackground">
|
||||
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="custom_nav_height">
|
||||
<view class="tabs-view flex-row gap-10 jc-sb align-c" :style="propStyle + propTabsBackground">
|
||||
<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 + 'rpx;'">
|
||||
|
|
@ -122,10 +122,20 @@
|
|||
// #ifdef APP
|
||||
tabs_top: 'calc(' + bar_height + 0 + 12 + 'px+ 66rpx);',
|
||||
// #endif
|
||||
custom_nav_height: '66rpx',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
// 延迟执行,等待dom渲染完成
|
||||
this.$nextTick(() => {
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
// 获取自定义导航栏高度
|
||||
this.setData({
|
||||
custom_nav_height: this.propCustomNavHeight,
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<template>
|
||||
<!-- 选项卡 -->
|
||||
<view class="tabs pr" :style="'padding-top:' + tabs_padding_top">
|
||||
<view :class="top_up == '1' ? 'tabs-top bg-white' : ''" :style="style_container">
|
||||
<componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propStyle="propStyle" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
|
||||
<view :class="top_up == '1' ? 'tabs-top bg-white' : ''" :style="tabs_top_style">
|
||||
<view class="max-w tabs-content" :style="style_container">
|
||||
<componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propStyle="propStyle" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="top_up == '1'" class="tabs-seat" :style="'height:' + tabs_seat_height + 'px'"></view>
|
||||
</view>
|
||||
|
|
@ -58,11 +60,15 @@
|
|||
tabs_seat_height: 0,
|
||||
// 置顶时,选项卡距离顶部高度
|
||||
tabs_padding_top: 0,
|
||||
// 置顶时,选项卡样式
|
||||
tabs_top_style: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.$nextTick(() => {
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.get_tabs_height();
|
||||
});
|
||||
},
|
||||
|
|
@ -83,20 +89,24 @@
|
|||
let new_tabs_data = JSON.parse(JSON.stringify(this.propValue));
|
||||
new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
|
||||
// 判断选项卡是否置顶
|
||||
let other_style = '';
|
||||
if (new_content.tabs_top_up == '1') {
|
||||
other_style = 'calc(' + this.propTop + 'px' + ' + 66rpx)';
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
if (this.propTabsIsTop) {
|
||||
other_style = '0';
|
||||
}
|
||||
// #endif
|
||||
let other_style = 'calc(' + this.propTop + 'px' + ' + 66rpx)';
|
||||
|
||||
let new_tabs_top_style = this.propNavIsTop || this.propTabsIsTop || new_content.tabs_top_up == '1' ? (new_content.tabs_top_up == '1' ? 'top:' + other_style + ';z-index:3;' : '') : '';
|
||||
let new_top_up = new_content.tabs_top_up;
|
||||
// #ifdef H5 || MP-TOUTIAO
|
||||
if (this.propTabsIsTop) {
|
||||
other_style = '0';
|
||||
}
|
||||
new_tabs_top_style = 'top:' + other_style + ';z-index:3;';
|
||||
new_top_up = this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0';
|
||||
// #endif
|
||||
|
||||
this.setData({
|
||||
tabs_data: new_tabs_data,
|
||||
style_container: common_styles_computer(new_style.common_style) + 'top:' + other_style + ';z-index:3;',
|
||||
style_container: common_styles_computer(new_style.common_style),
|
||||
tabs_top_style: new_tabs_top_style,
|
||||
// 判断是否置顶
|
||||
top_up: this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0',
|
||||
top_up: new_top_up,
|
||||
tabs_padding_top: this.propNavIsTop || this.propTabsIsTop ? other_style : '0',
|
||||
});
|
||||
},
|
||||
|
|
@ -107,7 +117,7 @@
|
|||
// 选择我们想要的元素
|
||||
query
|
||||
.in(this)
|
||||
.select('.tabs-top')
|
||||
.select('.tabs-content')
|
||||
.boundingClientRect((res) => {
|
||||
if ((res || null) != null) {
|
||||
// data包含元素的宽度、高度等信息
|
||||
|
|
@ -144,6 +154,7 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
z-index: 4;
|
||||
.tabs-top {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue