微信小程序如何制作简单的点击弹窗效果-群英

上一篇：Node.js的子进程如何理解，实例是怎样下一篇：vue中时间格式转化是怎样，有什么简单实例

这篇文章主要介绍了微信小程序如何制作简单的点击弹窗效果相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序如何制作简单的点击弹窗效果文章都会有所收获，下面我们一起来看看吧。

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='//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%;

}

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

这篇关于“微信小程序如何制作简单的点击弹窗效果”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！