微信小程序模态框

歪歪的橘猫

已于 2022-06-07 18:30:46 修改

阅读量2.3k

点赞数 1

分类专栏：模态框弹框文章标签：微信小程序 javascript 小程序

于 2022-06-07 18:12:58 首次发布

本文链接：https://blog.youkuaiyun.com/zzaixiao/article/details/125170522

版权

本文介绍了如何在微信小程序中自定义模态框组件，详细讲解了组件界面设计、WXML、JS和WXSS代码实现，并提供了使用方法，旨在方便开发者在不同页面中灵活运用弹框。

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

微信小程序模态框：

项目开发时很多页面都需要用到弹框，弹框展示内容都不一致，为了方便，自己自定义了弹框组件

组件界面：

在这里插入图片描述

可以扫码查看是否符合自己的需求
在这里插入图片描述

wxml：

<!--components/dialog/index.wxml-->
<view wx:if="{
    { showDialog }}" class="dialog-container">
  <view class="dialog-bg" style="opacity: {
       {
        isOpen ? 1 : 0 }}"></view>
  <view class="dialog-body" style="background-color: {
       {
        bodyBg }}; border-radius: {
       {
        bodyBg == 'transparent' ? '0' : '16rpx' }}; width: {
       {
        width }}; top: {
       {
        top }}; opacity: {
       {
        isOpen ? 1

最低0.47元/天解锁文章