1.diy---- footer开发

master
sws 2024-09-09 17:29:06 +08:00
parent 38c8a4ce35
commit 6c06dd50d0
2 changed files with 19 additions and 13 deletions

View File

@ -37,16 +37,14 @@
};
},
computed: {
diy_content_style(){
return {
paddingBottom: this.padding_footer_computer
}
}
},
computed: {
diy_content_style() {
return `padding-bottom:${this.padding_footer_computer}rpx`;
},
},
methods: {
footer_height_computer(number) {
this.padding_footer_computer = number * 2 + 'rpx';
this.padding_footer_computer = number * 2;
},
},
};

View File

@ -1,14 +1,14 @@
<template>
<view class="footer-nav flex-row jc-c align-c">
<view class="footer-nav flex-row jc-c align-c bottom-line-exclude">
<view class="footer-nav-content flex-row jc-c align-c wh" :style="style_container">
<ul class="flex-row jc-sa align-c wh padding-0">
<li v-for="(item, index) in nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_active = index" @mouseleave="is_active = 0">
<li v-for="(item, index) in nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" :data-index="index" @click="handle_event">
<view v-if="nav_style !== 2" class="img pr">
<view class="img-item pa border-radius-xs animate-linear" :class="is_active != index ? 'active' : ''">
<img :src="item.img[0].url" class="wh-auto" />
<img :src="item.img[0].url" class="wh-auto ht-auto" />
</view>
<view class="img-item pa border-radius-xs animate-linear" :class="is_active == index ? 'active' : ''">
<img :src="item.img_checked[0].url" class="wh-auto" />
<img :src="item.img_checked[0].url" class="wh-auto ht-auto" />
</view>
</view>
<span v-if="nav_style !== 1" class="animate-linear size-12 pr z-i" :style="is_active == index ? text_color_checked : default_text_color">{{ item.name }}</span>
@ -52,13 +52,22 @@
this.style_container = common_styles_computer(new_style.common_style);
let footer_height = new_style.common_style.padding_top + new_style.common_style.padding_bottom + new_style.common_style.margin_top + new_style.common_style.margin_bottom + 50;
// #ifndef APP
//
footer_height = footer_height + uni.getSystemInfoSync().statusBarHeight - 40;
// #endif
if (footer_height >= 70) {
footer_height = footer_height;
} else {
footer_height = 70;
}
console.log(footer_height);
this.$emit('footer-height', footer_height);
},
handle_event(e) {
console.log(e);
this.is_active = e.currentTarget.dataset.index;
},
},
};
</script>
@ -74,7 +83,6 @@
max-width: 800px;
/* #endif */
margin: 0 auto;
padding: 0;
cursor: pointer;
background-color: transparent;
.footer-nav-content {