更新记录

1.0（2025-07-22） 下载此版本

无

平台兼容性

uni-app(4.71)

感谢

感谢 928***@qq.com 提供的 https://ext.dcloud.net.cn/plugin?id=2328 仿高德操作面板滑动插件，本插件基于此插件基上修改而来。

介绍

微信小程序、Chrome中测试及真实项目过，其它真机未测试。

• 最小高度 55vh
• 最大高度 78vh

当屏幕高度小于 750 时

• 最小高度 45vh
• 最大高度 72vh

solt 插槽 组件有两个 solt 插槽

top、mian 插槽

使用示例

请在script中引用组件

import panel from '@/components/bsk-epx-panel/bsk-epx-panel'

components: { panel },

<panel ref="panel">
    <view slot="top">
        --自定义内容--
    </view>
    <view slot="main">
        <view class="kuangji" @click="triggerSlideUp()">按钮</view>
    </view>
</panel>

//外部触发组件示例
triggerSlideUp() {
    this.$nextTick(() => {
        const p = this.$refs.panel
        if (!p) {
            console.error('panel 引用失败')
            return
        }
        if (this.panelState === 'down') {
            // 从下滑到上                        
            if (typeof p.slideUpExternally === 'function') {
                p.slideUpExternally()
                this.panelState = 'up'
            }
        } else {
            // 从上滑到下
            if (typeof p.collapse === 'function') { 
                p.collapse()
                this.panelState = 'down'
            } else {
                // 如果组件未实现 collapse，可调用 slideDownExternally()
                p.slideDownExternally && p.slideDownExternally()
                this.panelState = 'down'
            }
        }
    })
}

页面完整示例

<template>
    <view>
        <panel ref="panel">
            <view slot="top">
                --自定义内容--
            </view>
            <view slot="main">
                <view class="kuangji" @click="triggerSlideUp()">按钮</view>
            </view>
        </panel>
    </view>
</template>

<script>
    import panel from '@/components/bsk-epx-panel/bsk-epx-panel'
    export default {
        components: {
            panel
        },
        data() {
            panelState: 'down'
        },
        methods: {
            triggerSlideUp() {
                this.$nextTick(() => {
                    const p = this.$refs.panel
                    if (!p) {
                        return
                    }
                    if (this.panelState === 'down') {
                        // 从下滑到上                        
                        if (typeof p.slideUpExternally === 'function') {
                            p.slideUpExternally()
                            this.panelState = 'up'
                        }
                    } else {
                        // 从上滑到下
                        if (typeof p.collapse === 'function') { 
                            p.collapse()
                            this.panelState = 'down'
                        } else {
                            p.slideDownExternally && p.slideDownExternally()
                            this.panelState = 'down'
                        }
                    }
                })
            }
        }
    }
</script>