下面是实现的效果
步骤1 创建一个组件 文件名和组件名要一致
步骤2 在组件中实现阴影效果
<template>
<view>
<view class="tabbar-shadow"> </view>
</view>
</template>
<script>
export default {
name: "tabbar-shadow",
data() {
return {};
}
}
</script>
<style lang="scss" scoped>
.tabbar-shadow {
position: fixed;
bottom: -14px;
z-index: 3333;
left: 0;
width: 100%;
height: 12px;
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); // 根据需求自定义阴影颜色大小
}
</style>
步骤3 在tabbar 页面使用 直接使用即可不用引入