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

1.diy---置顶开发

master
sws 2024-09-27 17:58:51 +08:00
parent 4f44c73939
commit ba239c95fa
7 changed files with 195 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<!-- 文章列表 -->
<view class="ou" :style="style_container">
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<componentDiyModulesTabsView :propValue="article_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentDiyArticleList v-if="hackReset" :propValue="article_tabs" :propIsCommonStyle="false"></componentDiyArticleList>
</view>
@ -27,6 +27,10 @@
type: Number,
default: 0,
},
propCustomNavHeight: {
type: String,
default: '66rpx',
},
},
components: {
componentDiyModulesTabsView,

60
components/diy/diy.vue
View File

@ -1,14 +1,14 @@
<template>
<view class="ht-auto min-ht">
<scroll-view :scroll-y="true" class="ht" @scroll="on_scroll_event">
<!-- 头部小程序兼容 -->
<view class="pr header">
<componentDiyHeader v-if="hackReset" :propValue="header_data.com_data"></componentDiyHeader>
</view>
<view class="content flex-col" :style="'padding-top:' + header_top">
<template v-for="(item, index) in tabs_data">
<componentDiyTabs v-if="item.key == 'tabs'" :key="index" :propValue="item.com_data" :propTop="sticky_top" @tabs-click="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :propTop="sticky_top" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
</template>
<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>
</view>
<template v-if="is_tabs_type">
<template v-if="diy_data.length > 0">
<view v-for="(item, index) in diy_data" :key="index" :style="{ 'margin-top': ['float-window'].includes(item.key) ? '0rpx' : -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx;z-index:1;' }">
@ -20,9 +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="sticky_top"></componentDiyArticleTabs>
<componentDiyGoodsTabs v-else-if="item.key == 'goods-tabs'" :propValue="item.com_data" :propTop="sticky_top"></componentDiyGoodsTabs>
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :propValue="item.com_data" :propTop="temp_sticky_top + tabs_height" :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" :propCustomNavHeight="is_header_top ? '66rpx' : '0rpx'"></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>
@ -60,7 +59,7 @@
<view v-if="is_show_footer == 1" class="footer">
<componentDiyFooter v-if="hackReset" :propValue="footer_data.com_data"></componentDiyFooter>
</view>
</view>
</scroll-view>
</template>
<script>
@ -152,7 +151,7 @@
// 5,7,0 是误差，， 12 是下边距，66是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
sticky_top: bar_height + 5 + 12,
header_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
header_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66px);',
// #endif
// #ifdef H5 || MP-TOUTIAO
sticky_top: bar_height + 7 + 12,
@ -162,6 +161,12 @@
sticky_top: bar_height + 0 + 12,
header_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
// #endif
temp_sticky_top: 0,
temp_header_top: '0px',
is_header_top: false,
temp_is_header_top: false,
// 选项卡高度
tabs_height: 0,
header_data: {},
footer_data: {},
@ -222,6 +227,10 @@
footer_data: this.propValue.footer,
diy_data: this.propValue.diy_data,
tabs_data: this.propValue.tabs_data,
// 判断顶部导航是否置顶
is_header_top: this.propValue.header.com_data.style.up_slide_display == '1' ? true : false,
temp_sticky_top: this.sticky_top,
temp_header_top: this.header_top,
});
uni.setStorageSync(this.cache_key + this.tabs_home_id, this.propValue.diy_data);
},
@ -284,6 +293,13 @@
});
}
},
// 选项卡高度
tabs_height_event(height) {
console.log(height);
this.setData({
tabs_height: height,
});
},
// 滚动加载
scroll_lower(e) {
@ -391,6 +407,28 @@
},
});
},
on_scroll_event(e) {
// 判断顶部导航是否置顶
if (!this.is_header_top) {
if (e.detail.scrollTop >= this.sticky_top + 33) {
// #ifdef H5 || MP-TOUTIAO
this.setData({
temp_sticky_top: 0,
temp_header_top: this.tabs_height + 'px',
temp_is_header_top: true,
});
// #endif
} else {
// #ifdef H5 || MP-TOUTIAO
this.setData({
temp_header_top: this.header_top,
temp_sticky_top: this.sticky_top,
temp_is_header_top: false,
});
// #endif
}
}
},
},
};
</script>

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

@ -1,6 +1,6 @@
<template>
<view class="ou" :style="style_container">
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<componentDiyModulesTabsView :propValue="goods_tabs" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style + 'padding-bottom:24rpx;'" :propCustomNavHeight="propCustomNavHeight" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="oh">
<componentGoodsList v-if="hackReset" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
</view>
@ -32,6 +32,10 @@
type: Number,
default: 0,
},
propCustomNavHeight: {
type: String,
default: '66rpx',
},
},
data() {
return {

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

@ -1,6 +1,6 @@
<template>
<!-- 文章列表 66rpx是自定义顶部导航栏的高度-->
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" zIndex="2" customNavHeight="66rpx" bgColor="#fff">
<uv-sticky :disabled="!propIsTop" :offset-top="propTop" :zIndex="propZIndex" :customNavHeight="propCustomNavHeight">
<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">
@ -75,6 +75,14 @@
type: String,
default: '',
},
propZIndex: {
type: Number,
default: 2,
},
propCustomNavHeight:{
type: String,
default: '66rpx',
}
},
components: {
componentPopup,

57
components/diy/tabs-carousel.vue
View File

@ -1,17 +1,17 @@
<template>
<view class="flex-col ou" :style="style_container">
<componentDiyModulesTabsView :propValue="propValue" :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="tabs_style" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<componentDiyTabs :propValue="propValue" :propTop="propTop" :propNavIsTop="propNavIsTop" :propTabsIsTop="propTabsIsTop" @computer-height="tabs_height_event" @tabs-click="tabs_click_event"></componentDiyTabs>
<componentDiycarousel :propValue="propValue" :propIsCommon="false"></componentDiycarousel>
</view>
</template>
<script>
import { common_styles_computer, padding_computer, margin_computer } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentDiyTabs from '@/components/diy/tabs';
import componentDiycarousel from '@/components/diy/carousel';
export default {
components: {
componentDiyModulesTabsView,
componentDiyTabs,
componentDiycarousel,
},
props: {
@ -25,6 +25,16 @@
type: Number,
default: 0,
},
// 是否导航栏置顶
propNavIsTop: {
type: Boolean,
default: true,
},
// 是否选项卡置顶
propTabsIsTop: {
type: Boolean,
default: false,
},
},
data() {
return {
@ -48,32 +58,43 @@
created() {
this.init();
},
// 属性值改变监听
watch: {
// 数据
propTabsIsTop(value, old_value) {
this.init();
},
},
methods: {
init() {
const new_content = this.propValue.content || {};
const new_style = this.propValue.style || {};
let tabs_style_obj = {
padding_top: new_style.common_style.padding_top,
padding_left: new_style.common_style.padding_left,
padding_right: new_style.common_style.padding_right,
margin_top: new_style.common_style.margin_top,
margin_left: new_style.common_style.margin_left,
margin_right: new_style.common_style.margin_right,
};
let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
let common_style = Object.assign({}, new_style.common_style, {
padding_top: 0,
margin_top: 0,
});
// let tabs_style_obj = {
// padding_top: new_style.common_style.padding_top,
// padding_left: new_style.common_style.padding_left,
// padding_right: new_style.common_style.padding_right,
// margin_top: new_style.common_style.margin_top,
// margin_left: new_style.common_style.margin_left,
// margin_right: new_style.common_style.margin_right,
// };
// let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
// let common_style = Object.assign({}, new_style.common_style, {
// padding_top: 0,
// margin_top: 0,
// });
this.setData({
style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
// style_container: `${common_styles_computer(common_style)};gap:${new_style.data_spacing * 2}rpx`,
style_container: `${common_styles_computer(new_style.common_style)};gap:${new_style.data_spacing * 2}rpx`,
top_up: new_content.tabs_top_up,
tabs_style: new_tabs_style,
// tabs_style: new_tabs_style,
});
},
tabs_click_event(tabs_id, is_micro_page) {
this.$emit('tabs-click', tabs_id, is_micro_page);
},
tabs_height_event(height) {
this.$emit('computer-height', height);
},
},
};
</script>

84
components/diy/tabs.vue
View File

@ -1,6 +1,11 @@
<template>
<!-- 选项卡 -->
<componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propIsTop="top_up == '1'" :propTop="propTop" :propStyle="style_container" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<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>
<view v-if="top_up == '1'" class="tabs-seat" :style="'height:' + tabs_seat_height + 'px'"></view>
</view>
</template>
<script>
@ -18,10 +23,25 @@
type: Object,
default: () => ({}),
},
// 置顶距离顶部高度
propTop: {
type: Number,
default: 0,
},
// 是否导航栏置顶
propNavIsTop: {
type: Boolean,
default: true,
},
// 是否选项卡置顶
propTabsIsTop: {
type: Boolean,
default: false,
},
propStyle: {
type: String,
default: '',
},
},
components: {
componentDiyModulesTabsView,
@ -34,10 +54,27 @@
// 是否滑动置顶
top_up: '0',
// 置顶时，选项卡高度
tabs_seat_height: 0,
// 置顶时，选项卡距离顶部高度
tabs_padding_top: 0,
};
},
created() {
this.init();
this.$nextTick(() => {
this.get_tabs_height();
});
},
// 属性值改变监听
watch: {
// 数据
propTabsIsTop(value, old_value) {
this.init();
this.$nextTick(() => {
this.get_tabs_height();
});
},
},
methods: {
init() {
@ -45,12 +82,46 @@
const new_style = this.propValue.style || {};
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
}
this.setData({
tabs_data: new_tabs_data,
style_container: common_styles_computer(new_style.common_style),
top_up: new_content.tabs_top_up,
style_container: common_styles_computer(new_style.common_style) + 'top:' + other_style + ';z-index:3;',
// 判断是否置顶
top_up: this.propNavIsTop || this.propTabsIsTop ? new_content.tabs_top_up : '0',
tabs_padding_top: this.propNavIsTop || this.propTabsIsTop ? other_style : '0',
});
},
// 获取选项卡高度
get_tabs_height() {
if (this.top_up == '1') {
const query = uni.createSelectorQuery();
// 选择我们想要的元素
query
.in(this)
.select('.tabs-top')
.boundingClientRect((res) => {
if ((res || null) != null) {
// data包含元素的宽度、高度等信息
this.setData({
tabs_seat_height: res.height,
});
this.$emit('computer-height', this.tabs_seat_height);
}
})
.exec(); // 执行查询
} else {
this.$emit('computer-height', 0);
}
},
// 选项卡回调
tabs_click_event(index, item) {
let tabs_id = '';
@ -73,6 +144,11 @@
<style lang="scss" scoped>
.tabs {
max-height: 100rpx;
.tabs-top {
position: fixed;
left: 0;
right: 0;
max-width: 100%;
}
}
</style>

8
uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue
View File

@ -76,6 +76,14 @@
return this.zIndex ? this.zIndex : 970;
},
},
watch: {
offsetTop(val) {
this.getStickyTop();
},
customNavHeight(val) {
this.getStickyTop();
},
},
created() {
this.elId = this.$uv.guid();
},