小程序自定义弹窗

效果图

1. 自定义弹窗封装成组件

组件代码：

  

     {{title}}

    {{content}}

    

       {{btn_no}}

       {{btn_ok}}

    

  

/* component/popup.wxss */

.wx-popup {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, .5);

}

.popup-container {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 80%;

  max-width: 600rpx;

  border: 2rpx solid #ccc;

  border-radius: 10rpx;

  box-sizing: bordre-box;

  transform: translate(-50%, -50%);

  overflow: hidden;

  background: #fff;

}

.wx-popup-title {

  width: 100%;

  padding: 20rpx;

  text-align: center;

  font-size: 40rpx;

  border-bottom: 2rpx solid red;

}

.wx-popup-con {

  margin: 60rpx 10rpx;

  text-align: center;

}

.wx-popup-btn {

  display: flex;

  justify-content: space-around;

  margin-bottom: 40rpx;

}

.wx-popup-btn text {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 30%;

  height: 88rpx;

  border: 2rpx solid #ccc;

  border-radius: 88rpx;

}

js代码

Component({

  options: {

    multipleSlots: true // 在组件定义时的选项中启用多slot支持

  },

  /**

   * 组件的属性列表

   */

  properties: {

    title: {            // 属性名

      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

      value: '标题' // 属性初始值（可选），如果未指定则会根据类型选择一个

    },

    // 弹窗内容

    content: {

      type: String,

      value: '内容'

    },

    // 弹窗取消按钮文字

    btn_no: {

      type: String,

      value: '取消'

    },

    // 弹窗确认按钮文字

    btn_ok: {

      type: String,

      value: '确定'

    }

  },

  /**

   * 组件的初始数据

   */

  data: {

    flag: true,

  },

  /**

   * 组件的方法列表

   */

  methods: {

    //隐藏弹框

    hidePopup: function () {

      this.setData({

        flag: !this.data.flag

      })

    },

    //展示弹框

    showPopup () {

      this.setData({

        flag: !this.data.flag

      })

    },

    /*

    * 内部私有方法建议以下划线开头

    * triggerEvent 用于触发事件

    */

    _error () {

      //触发取消回调

      this.triggerEvent("error")

    },

    _success () {

      //触发成功回调

      this.triggerEvent("success");

    }

  }

})

json文件：

{

  "usingComponents": {

    "popup": "/component/popup/popup"

  }

}

引入组件index.html

  

     点我

  

  

      title='小组件'

      content='学会了吗'

      btn_no='没有'

      btn_ok='学会了'

      bind:error="_error" 

      bind:success="_success">

  

index.js

//index.js

//获取应用实例

const app = getApp()

Page({

  onReady: function () {

    //获得popup组件

    this.popup = this.selectComponent("#popup");

  },

  showPopup() {

    this.popup.showPopup();

  },

  //取消事件

  _error() {

    console.log('你点击了取消');

    this.popup.hidePopup();

  },

  //确认事件

  _success() {

    console.log('你点击了确定');

    this.popup.hidePopup();

  }

})

到此就结束，一个简单的自定义弹窗封装好了