<template>
<view>
<view :style="{paddingTop: paddingTop + 'rpx'}"></view>
<view class="uni-fixed-bottom">
<slot name="fixed_bottom"></slot>
</view>
</view>
</template>
<script>
export default {
props: {
paddingTop: {
type: String,
default: '0'
}
}
}
</script>
<style lang="scss" scoped>
.uni-fixed-bottom {
width: 100%;
bottom: 0upx;
padding: 20upx;
position: fixed;
background: #FFFFFF;
transform: translateZ(0);
bottom: env(safe-area-inset-bottom);
box-shadow: 0rpx -5rpx 14rpx #e3e6e6;
bottom: constant(safe-area-inset-bottom);
}
</style>
父组件使用:
<uni-fixed-bottom paddingTop="50">
<view slot="fixed_bottom">
<view class="">
11111
</view>
</view>
</uni-fixed-bottom>