更新记录

1.0.1（2024-11-05） 下载此版本

增加width和height参数，解决一些需要手动赋值占位宽高的场景

1.0.0（2024-11-02） 下载此版本

组件发布

平台兼容性

uni-app

hbxw-fixed组件

介绍

css fixed定位组件

在以往需求中，经常会遇到底部浮动元素的需求，但是浮动的元素会遮挡文挡的内容，如果你想元素浮动的时候，有一块同等高度区域占位来解决文挡内容不被遮挡，此组件应该适合你

使用示例

<template>
    <view class="test-container-fixed">
    <view class="content"></view>
    <view>我是最后的内容，看我有没有被挡住就能知道，浮动组件是否占位生效了</view>
        <hbxw-fixed :bottom="0" :left="0">
      <view class="fixed-main">
        <view class="fixed-main-test">我是fixed内容</view>
      </view>
    </hbxw-fixed>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style scoped>
.test-container-fixed{
  width: 100%;
}
.content{
  width:100%;
  height: 900px;
  background-color: green;
}
.fixed-main{
  width: 750rpx;
  background-color: white;
  color: green;
  box-shadow:0 0 10rpx rgba(0,0,0,.3);
}
.fixed-main-test{
  width: 750rpx;
  height: 168rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>

API

Props