更新记录

0.0.1(2024-04-18) 下载此版本

  1. 首次发布。

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.15 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

half-popup

高性能滑动弹窗组件,是一款轻量级的弹窗组件,使用了wxs高性能的绘制方式,它有和抖音评论区一致的效果。

功能

  • 可滑动弹窗
  • 可扩展全屏弹窗
  • 易于定制,提供基础的弹窗配置

演示效果

安装

您可以在uni-app插件市场通过uni_modules的形式进行安装,此安装方式可以方便您后续在uni_modules进行一键升级

使用

简单使用示例:

<script setup>
    const show = ref(true)

    const open = () => {
        console.log('开启了')
    }
    const close = () => {
        console.log('关闭了')
    }
</script>

<template>
    <view class="page">
        <button class="title" @click="show = !show">开启</button>

        <half-popup v-model="show"  @close="close" @open="open">
            <scroll-view
                :scroll-y="true"
                style="height: 100%"
            >
                <view style="padding: 20rpx" v-for="item in 60">
                    你好呀 {{item }}
                </view>
            </scroll-view>
        </half-popup>
    </view>
</template>

Props for halfPopup

Prop name Type Default value Description
v-model Boolean true 控制弹框是否显示
height Number 980 弹框高度
radius Number 20 弹框的内容的圆角
duration Number 200 动画过渡时间
closeOnOverlay Boolean true 点击overlay关闭弹框
closeBtn Boolean true 是否显示关闭按钮
fullScreen Boolean true 是否显示可以充满屏幕按钮
zIndex Number 9999 层级
color String '' 图标颜色

联系和支持

如有任何疑问或反馈,欢迎创建 GitHub issues 或联系我们(您的联系邮箱)。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问