更新记录

1.0.1（2025-04-18） 下载此版本

更新

1.0.0（2025-04-18） 下载此版本

初次发布

平台兼容性

npm下载量：

欢迎使用 c-bottom-fixed

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：
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

Methods，需要通过ref手动调用