微信小程序实现点击出现弹窗

本文实例为大家分享了微信小程序实现点击出现弹窗的具体代码，供大家参考，具体内容如下

1.现在page文件里面定义一个dh的文件，然后在component定义一个可复用的组件为dislog

然后在dh的json文件中引入这个组件

{
  "usingComponents": {
    "dialog":"../../component/dialog/index"
            }
    }

2.dh中.js文件

// pages/dh/index.js
Page({

  data: {
    status:false
  },
  handleTap(){
    this.setData({
      status:true
    })
  },
  handlecancel(){
    this.setData({
      status:false
    })
  },
  handleConfirm(){
    this.setData({
      status:false
    })
  }
})

.wxml文件中

  


显示

.wxss文件

/* pages/dh/index.wxss */
.show{
  /* width:100%;
  height:100vh; */
  width:200rpx;
  height:140rpx;
  background:#ccc;
  border-radius:20rpx;
  color:#fff;
  text-align:center;
  line-height:140rpx;
  font-size:40rpx;
  margin:0 auto;
  margin-top:470rpx;
}

在组件中dialog文件中
index.js文件

// component/dialog/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:"标题"
    },
    content:String,
    status:{
      type:Boolean,
      value:false,

    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleCancel(){
      this.triggerEvent("cancel")
    },
    handleConfirm(){
      // this.triggerEvent('confirm')
        this.triggerEvent('confirm')
    }
  }
})

wxml文件

  
    
        {{title}}
    
    
      {{content}}
      
    
    
      取消
      确认
    
  

wxss文件

.mask{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgb(0,0,0,0.3);
  display:flex;
  align-items: center;
  justify-content:center;
}
.dialog{
  width:600rpx;
  height:auto;
  background:#fff;
  border-radius:30rpx;
}
.dialog-header{
  padding:30rpx 0;
  text-align:center;
  font-size:36rpx;

}
.dialog-footer{
  display:flex;
}
.dialog-btn{
  flex:1;
  text-align:center;
  padding:40rpx 0;
  border-top:1rpx solid #eee;
}
.dialog-btn:first-child{
  border-right:1rpx solid #eee;
}
.dialog-body{
  padding:30rpx;

}
.content {
  text-indent: 72rpx;
  color:#333;
}
.dialog-body image{
  width:100%;

}

这样就可以实现一个简单的点击出现弹窗的效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。