npm下载量：

欢迎使用 c-bottom-fixed

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?id=23103
npm i c-bottom-fixed

使用方法

<template>
    <view class="box">
        <c-bottom-fixed ref="bottomFixed">
			<template #box>
				<view class="" style="height: 100vh;background-color: #fff;">
					666
				</view>
			</template>
			<template #bottom>
				<view class="" style="display: flex;padding: 30rpx;" v-if="showBottom">
					<button>按钮1</button>
					<button>按钮2</button>
					<button>按钮3</button>
				</view>
			</template>
		</c-bottom-fixed>
    </view>
</template>

<script>
	// 以下导入方式按照安装方式导入，二选一
	// 插件市场导入方法：无需引入，可直接使用
	// npm导入方法如下：
	import cBottomFixed from "c-bottom-fixed/components/c-bottom-fixed/c-bottom-fixed.vue";
    export default {
		// npm导入需要添加components，插件市场导入不需要
        components: {
            cBottomFixed
        },
        data() {
            return {
                showBottom: false
            }
        },
		onLoad() {
			this.getData();
		},
		methods: {
			// 模拟请求调用
			getData() {
				setTimeout(() => {
					this.showBottom = true;
					this.$nextTick(function() {
						// 底部已经完全显示出来
						this.$refs.bottomFixed.getBottom();
					})
				}, 3000)
			}
		}
    }
</script>

API

Props

|参数|说明|类型|默认值|可选值| |--|--|--|--|--| |safe-area-inset-bottom|是否开启底部安全区适配，c-bottom-fixed外层没有设置，需要开启|Boolean|false|true| |box-style|盒子样式|Object|{}|-| |bottom-bg|底部背景色|String|#fff|-| |bottom-shadow|底部阴影|String|0 -2rpx 20rpx -16rpx rgba(0, 0, 0, 0.3)|-| |bottom-zindex|底部层级|Number|10|-| |bottom-style|底部样式|Object|{}|-| |box-bottom-gap|盒子和底部之间的间隙，单位rpx|String|Number|20|-|

Methods，需要通过ref手动调用

|事件名|说明|回调参数| |--|--|--| |getBottom|底部盒子内容变化时调用|-|