【小程序】如何实现从底部弹出对话框

最新推荐文章于 2023-12-11 17:35:13 发布

feelang

最新推荐文章于 2023-12-11 17:35:13 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/FeeLang/article/details/131423712

这篇文章介绍了如何在微信小程序中创建一个可从底部弹出的对话框组件，包括布局设计、CSS动画实现以及JavaScript事件处理，展示了如何通过条件渲染和点击事件控制对话框的显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面两篇两篇文章介绍了如何在小程序中实现上下滑动效果以及如何用 Canvas 绘制一张图片，这一篇作为前两篇的延续，介绍如何从底部弹出一个对话框。

相比而言，底部弹出对话框的功能比较通用，因此非常适合定义成组件（component）。

先来看一下最终实现效果：

首先是布局文件：

<view wx:if='{
    
    {visible}}'>
  <view class='wrap {
    
    {wrapAnimate}}' style='background:rgba(0,0,0,{ 
       { 
       bgOpacity}});'></view>
  <view catchtap='hideFrame' class='frame-wrapper {
    
    {frameAnimate}}'>
    <view catchtap='catchNone' class='frame'>
      <view class="share-btn-wrapper">
        <button class="share-btn" open-type='share'>分享给好友</button>
        <button class="share-btn" bindtap