当前位置：首页 > news >正文

底部Taber的抽取

news 2025/7/14 19:10:01

1.会抽取一个布局样式
2.布局样式里面抽取一个底部样式
在这里插入图片描述
这个是layout的代码

<template><view class="layout-wrapper"><view class="layout-content"><slot></slot></view><!-- 底部 --><Tabbar :activeIndex="activeIndex"></Tabbar></view>
</template><script>import Tabbar from './tabbar.vue'export default {name:"layout",props: ['activeIndex'],components: {Tabbar},data() {return {};}}
</script><style lang="scss">.layout-wrapper {width: 100vw;height: 100vh;.layout-content {height: calc(100vh - 120rpx);overflow-y: auto;}}
</style>

这个是底部的代码

<template><view class="tabbar-wrapper"><text v-for="(item, index) in tabbarList" :key="item.pagePath" @click="clickTabbar(item)":class="{active: index === activeIndex}">{{ item.text }} - {{ activeIndex }}</text></view>
</template><script>export default {props: ['activeIndex'],data() {return {tabbarList: [{pagePath: '/pages/xingqing/xingqing',text: '心情'},{pagePath: '/pages/add/add',text: '加号'},{pagePath: '/pages/my/my',text: '我的'},]}},methods: {clickTabbar(item) {uni.switchTab({url: item.pagePath})}}}
</script><style>.tabbar-wrapper {height: 120rpx;width: 100%;border-top: 1px solid red;box-sizing: border-box;}.active {color: red;}
</style>