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

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

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文件中

<dialog title="警告" status="{{status}}" bind:cancel='handlecancel' bind:confirm="handleConfirm" content='啦啦啦我也不知道这什么哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈'>
  <image src='https://gw.alicdn.com/imgextra/i1/O1CN016q4k5T1IPNCZM2RTx_!!6000000000885-0-tps-640-260.jpg_Q75.jpg'></image>

</dialog>
<view bindtap='handleTap' class='show'>显示</view>

.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文件

<view class="mask" wx:if="{{status}}">
  <view class="dialog">
    <view class="dialog-header">
        {{title}}
    </view>
    <view class="dialog-body">
      <view wx:if="{{content}}" class='content'>{{content}}</view>
      <slot></slot>
    </view>
    <view class="dialog-footer">
      <view class="dialog-btn" bindtap='handleCancel'>取消</view>
      <view class="dialog-btn" bindtap='handleConfirm'>确认</view>
    </view>
  </view>
</view>

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%;

}

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

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