微信小程序（原生）封装弹框组件

最新推荐文章于 2025-07-03 09:50:58 发布

一个前端程序猿

最新推荐文章于 2025-07-03 09:50:58 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序小程序 javascript 前端

本文链接：https://blog.csdn.net/ZHANG157111/article/details/128728111

本文介绍如何在微信小程序中封装一个原生的弹框组件，该组件包含确定按钮并支持通过数据控制显示隐藏。只需在app.json引入组件，并在页面data中调整相关属性即可使用。

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

小程序封装原生弹框组件（一个弹框，点击确定关闭弹框，有需要的直接复制哦）

<!-- 成功后弹框 -->
<van-popup show="{{ onePop }}" round >
<view class="succpop">
  <view class="pop_title">温馨提示</view>
  <view class="pop_content">{{onePopMsg}}</view>
  <view class="bott_btn" bindtap="closeSUcc">确定</view>
</view>
</van-popup>

// components/pop/pop.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    onePop:Boolean,
    onePopMsg:String,
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
  // 多个按钮
  closeSUcc(){
    this.setData({
      succePop:false
    })
  },
  }
})

.succpop  {
  width: 707rpx;
}
.succpop .pop_title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 37rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.succpop .pop_content {
  text-align: center;
  margin: 65rpx 0 65rpx 0;
  font-size: 31rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  padding: 0 40rpx;
}
.succpop .bott_btn {
  width: 520rpx;
  height: 88rpx;
  background: #FE9804;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0,0,0,0.1);
  font-size: 41rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
  border-radius: 50rpx;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 30rpx;
  margin-bottom: 40rpx;
}

上面是组件的内容，下面是引用方法

首先第一步在app.json或者单文件json文件引入

"pop-one":"/components/pop-one/pop-one"

我用的比较多就在app.json引入的

下面是文件使用方法:

<pop-one succePop="{{succePop}}" successMessage="{{successMessage}}"></pop-one>

 succePop:true,
 successMessage:'你好'

只需要子啊data中控制这两个属性就可以了，喜欢的点个赞哦