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 16:28:19 +08:00
parent ffd3174ca9
commit f8e5eed6cf
5 changed files with 80 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<!-- 文章列表 -->
<view class="ou" :style="style_container">
<view class="article-tabs 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>
@ -42,18 +42,19 @@
top_up: '0',
// 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
sticky_offset: bar_height + 5 + 12 + 33,
sticky_offset_postion: 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,
sticky_offset_postion: bar_height + 7 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
// #endif
// #ifdef APP
sticky_offset: bar_height + 0 + 12 + 33,
sticky_offset_postion: bar_height + 0 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
// #endif
tabs_style: '',
sticky_offset: 0,
};
},
created() {
@ -105,15 +106,35 @@
});
},
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;',
});
}
const query = uni.createSelectorQuery().in(this);
query
.select('.goods-tabs')
.boundingClientRect((data) => {
if (data) {
const new_style = this.propValue.style || {};
this.setData({
sticky_offset: data.top - new_style.common_style.padding_top,
});
// 判断是否吸顶了
console.log(this.sticky_offset);
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;',
});
} else {
this.setData({
tabs_style: '',
});
}
}
})
.exec();
},
},
destroyed() {
window.removeEventListener('scroll', this.handle_scroll);
},
};
</script>
<style lang="scss" scoped></style>

16
components/diy/diy.vue
View File

@ -4,12 +4,12 @@
<view class="pr header">
<componentDiyHeader :key="key" :propValue="header_data.com_data"></componentDiyHeader>
</view>
<view class="pr content" :style="header_top">
<view v-for="(item, index) in tabs_data" :key="index">
<componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" :key="key" @tabs-click="tabs_click_event"></componentDiyTabs>
<view class="content flex-col" :style="header_top">
<block v-for="(item, index) in tabs_data">
<componentDiyTabs v-if="item.key == 'tabs'" :propValue="item.com_data" @tabs-click="tabs_click_event"></componentDiyTabs>
<componentDiyTabsCarousel v-else-if="item.key == 'tabs-carousel'" :propValue="item.com_data" :key="key + index" @tabs-click="tabs_click_event"></componentDiyTabsCarousel>
</view>
<view v-if="is_tabs_type" class="diy">
</block>
<block 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': -(item.com_data.style.common_style.floating_up * 2 || 0) + 'rpx' }">
<!-- 基础组件 -->
@ -38,8 +38,8 @@
<componentDiyAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :propValue="item.com_data"></componentDiyAuxiliaryBlank>
</view>
</template>
</view>
<view v-else>
</block>
<block v-else>
<!-- goods九宫格数据 -->
<!-- 列表 -->
<scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="60">
@ -53,7 +53,7 @@
<!-- 结尾 -->
<component-bottom-line :propStatus="goods_bottom_line_status"></component-bottom-line>
</scroll-view>
</view>
</block>
</view>
<view v-if="is_show_footer == 1" class="footer">
<componentDiyFooter :key="key" :propValue="footer_data.com_data"></componentDiyFooter>

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

@ -1,5 +1,5 @@
<template>
<view class="ou" :style="style_container">
<view class="goods-tabs 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 v-if="hackReset" :propValue="goods_tabs" :propIsCommonStyle="false"></componentGoodsList>
@ -39,18 +39,19 @@
top_up: '0',
// 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
sticky_offset: bar_height + 5 + 12 + 33,
sticky_offset_postion: 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,
sticky_offset_postion: bar_height + 7 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
// #endif
// #ifdef APP
sticky_offset: bar_height + 0 + 12 + 33,
sticky_offset_postion: bar_height + 0 + 12 + 33,
tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
// #endif
tabs_style: '',
sticky_offset: 0,
};
},
created() {
@ -101,14 +102,33 @@
},
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;',
});
}
const query = uni.createSelectorQuery().in(this);
query
.select('.goods-tabs')
.boundingClientRect((data) => {
if (data) {
const new_style = this.propValue.style || {};
this.setData({
sticky_offset: data.top - new_style.common_style.padding_top,
});
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;',
});
} else {
this.setData({
tabs_style: '',
});
}
}
})
.exec();
},
},
destroyed() {
window.removeEventListener('scroll', this.handle_scroll);
},
};
</script>

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

@ -15,7 +15,7 @@
</view>
</scroll-view>
</view>
<iconfont v-if="propIsTabs" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" @click="category_check_event"></iconfont>
<iconfont v-if="propIsTabsIcon" :name="'icon-' + icon.more_icon_class || 'category-more'" :size="icon.more_icon_size + '' || '14'" :color="icon.more_icon_color || '#000'" @click="category_check_event"></iconfont>
</view>
<componentPopup :propShow="popup_status" :propIsBar="propIsBar" propPosition="top" :propMask="true" :propTop="tabs_top" @onclose="quick_close_event">
<view class="padding-vertical-lg">
@ -56,7 +56,7 @@
type: Object,
default: () => {},
},
propIsTabs: {
propIsTabsIcon: {
type: Boolean,
default: false,
},

17
components/diy/tabs.vue
View File

@ -1,7 +1,7 @@
<template>
<!-- 选项卡 -->
<view class="ou" :style="style_container">
<componentDiyModulesTabsView :propValue="tabs_data" :propIsTabs="top_up == '1'" :propTop="tabs_top" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
<view class="ou tabs" :style="style_container">
<componentDiyModulesTabsView :propValue="tabs_data" propIsTabsIcon :propIsTop="top_up == '1'" :propTop="tabs_top" @tabs-click="tabs_click_event"></componentDiyModulesTabsView>
</view>
</template>
@ -42,13 +42,13 @@
top_up: '0',
// 5,7,0 是误差，， 12 是下边距，60是高度，bar_height是不同小程序下的导航栏距离顶部的高度
// #ifdef MP
tabs_top: 'padding-top:calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
tabs_top: 'calc(' + (bar_height + 5 + 12) + 'px + 66rpx);',
// #endif
// #ifdef H5 || MP-TOUTIAO
tabs_top: 'padding-top:calc(' + (bar_height + 7 + 12) + 'px + 66rpx);',
tabs_top: '0',
// #endif
// #ifdef APP
tabs_top: 'padding-top:calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
tabs_top: 'calc(' + (bar_height + 0 + 12) + 'px + 66rpx);',
// #endif
};
},
@ -59,7 +59,7 @@
init() {
const new_content = this.propValue.content || {};
const new_style = this.propValue.style || {};
let new_tabs_data = this.propValue;
let new_tabs_data = JSON.parse(JSON.stringify(this.propValue));
new_tabs_data.content.tabs_list.unshift(new_tabs_data.content.home_data);
this.setData({
tabs_data: new_tabs_data,
@ -88,8 +88,7 @@
</script>
<style lang="scss" scoped>
.seize-seat {
z-index: 101;
position: relative;
.tabs {
max-height: 100rpx;
}
</style>