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

1.diy---置顶开发

master
sws 2024-09-26 14:57:24 +08:00
parent 3227ab2fca
commit 3915794ff0
5 changed files with 84 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
common/css/page.css
View File

@ -196,6 +196,9 @@ button:before {
.oa {
overflow: auto;
}
.ou {
overflow: unset !important;
}
.dis-none {
display: none !important;
}

44
components/diy/article-tabs.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- 文章列表 -->
<view class="overflow-unset" :style="style_container">
<componentDiyModulesTabsView :propValue="article_tabs" :isTop="top_up == '1'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="ou" :style="style_container">
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="tabs_top" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="padding-top oh">
<componentDiyArticleList :key="key" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
</view>
@ -9,9 +9,14 @@
</template>
<script>
const app = getApp();
import { common_styles_computer, get_math } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentDiyArticleList from '@/components/diy/article-list';
import componentDiyArticleList from '@/components/diy/article-list'; // 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
bar_height = 0;
// #endif
export default {
props: {
propValue: {
@ -33,12 +38,30 @@
style: '',
article_tabs: {},
key: 1,
// 是否滑动置顶
top_up: '0',
// 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
sticky_offset: bar_height + 5 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
// #endif
// #ifdef H5 || MP-TOUTIAO
sticky_offset: bar_height + 7 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
// #endif
// #ifdef APP
sticky_offset: bar_height + 0 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
// #endif
tabs_style: '',
};
},
created() {
this.init();
},
mounted() {
window.addEventListener('scroll', this.handle_scroll);
},
methods: {
init() {
const new_content = this.propValue.content || {};
@ -81,11 +104,16 @@
key: get_math(),
});
},
handle_scroll() {
// 判断是否吸顶了
if (window.scrollY >= this.sticky_offset) {
const new_style = this.propValue.style || {};
this.setData({
tabs_style: 'padding-top:' + new_style.common_style.padding_top * 2 + 'rpx;',
});
}
},
},
};
</script>
<style lang="scss" scoped>
.overflow-unset {
overflow: unset !important;
}
</style>
<style lang="scss" scoped></style>

44
components/diy/goods-tabs.vue
View File

@ -1,6 +1,6 @@
<template>
<view class="overflow-unset" :style="style_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="ou" :style="style_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="tabs_top" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="padding-top oh">
<componentGoodsList :key="key" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
</view>
@ -8,9 +8,14 @@
</template>
<script>
const app = getApp();
import { common_styles_computer, get_math } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentGoodsList from '@/components/diy/goods-list';
import componentGoodsList from '@/components/diy/goods-list'; // 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
bar_height = 0;
// #endif
export default {
components: {
componentDiyModulesTabsView,
@ -29,12 +34,30 @@
style_container: '',
goods_tabs: {},
key: 1,
// 是否滑动置顶
top_up: '0',
// 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
sticky_offset: bar_height + 5 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
// #endif
// #ifdef H5 || MP-TOUTIAO
sticky_offset: bar_height + 7 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
// #endif
// #ifdef APP
sticky_offset: bar_height + 0 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
// #endif
tabs_style: '',
};
},
created() {
this.init();
},
mounted() {
window.addEventListener('scroll', this.handle_scroll);
},
methods: {
init() {
const new_content = this.propValue.content || {};
@ -70,12 +93,17 @@
key: get_math(),
});
},
handle_scroll() {
// 判断是否吸顶了
if (window.scrollY >= this.sticky_offset) {
const new_style = this.propValue.style || {};
this.setData({
tabs_style: 'padding-top:' + new_style.common_style.padding_top * 2 + 'rpx;',
});
}
},
},
};
</script>
<style scoped lang="scss">
.overflow-unset {
overflow: unset !important;
}
</style>
<style scoped lang="scss"></style>

9
components/diy/modules/tabs-view.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- 文章列表 -->
<view class="container" :class="propIsTop ? 'tabs-top' : ''" :style="'top:' + propTop + 'px;'">
<view class="flex-row gap-10 jc-sb align-c">
<view class="container" :class="propIsTop ? 'tabs-top' : ''" :style="'top:' + propTop">
<view class="flex-row gap-10 jc-sb align-c" :style="propStyle">
<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;'">
@ -70,6 +70,11 @@
type: String,
default: '0',
},
// 指定样式
propStyle: {
type: String,
default: '',
},
},
components: {
componentPopup,

25
components/diy/tabs.vue
View File

@ -1,18 +1,7 @@
<template>
<!-- 选项卡 -->
<view class="pr">
<view v-if="top_up == '1'" class="tabs-top">
<view class="seize-seat" :style="tabs_top"></view>
<view :style="style_container">
<componentDiyModulesTabsView :propValue="tabs_data" isTabs @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
</view>
</view>
<!-- 占位 -->
<view class="pr" :class="top_up == '1' ? 'vs-hide' : ''">
<view :style="style_container">
<componentDiyModulesTabsView :propValue="tabs_data" isTabs @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
</view>
</view>
<view class="ou" :style="style_container">
<componentDiyModulesTabsView :propValue="tabs_data" :propIsTabs="top_up == '1'" :propTop="tabs_top" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
</view>
</template>
@ -103,14 +92,4 @@
z-index: 101;
position: relative;
}
.vs-hide {
visibility: hidden;
}
.tabs-top {
position: fixed;
z-index: 101;
left: 0;
right: 0;
top: 0;
}
</style>