微信小程序自定义弹窗组件

以下是个人封装的一个组件希望对大家有所帮助 

示例：

 封装过程如下：

        我们先在小程序里面新建component文件夹用来存放公共组件

 如大家所见，里面已经新建了popup文件夹及其相关文件

 首先

 1、popup.wxml

<view class="wx-popup" hidden="{{flag}}">
  <view class='popup-container'>
    <view class="wx-popup-con">{{content}}</view>
    <view class="wx-popup-btn">
      <text class="btn-no" bindtap='_error'>{{btn_no}}</text>
      <text class="btn-ok" style="border-right:0;color: #FFAA01;" bindtap='_success'>{{btn_ok}}</text>
    </view>
  </view>
</view>

　2、popup.wxss

/* pages/actiondetail/index.wxss */
page{
  height: 100%;
}
.wx-popup {
  position: absolute;
  left: 0;
  top: 0;
   100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 999;
}
.popup-container {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 368rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
   80%;
  max- 600rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%); 
  overflow: hidden;
}
.wx-popup-con {
  height: 260rpx;
  display: flex;
  justify-content: center;
  align-items: center;
   100%;
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}
.wx-popup-btn {
  height: calc(100% - 260rpx);
   100%;
  display: flex;
}
.wx-popup-btn text{
  display: flex;
  align-items: center;
  justify-content: center;
   50%;
  height: 100%;
  border-top: 1rpx solid #E6E6E6;
  border-right: 1rpx solid #E6E6E6;
  color: #999999;
  font-size: 32rpx;
  font-weight: 600;
}

　3、popup.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");
    }
  }
})

　　公共组件我们已经写好了 ，接下来就是如何使用

1、大家根据自己实际情况引用组件哦，我这里是在date这个页面引入，就当做例子示范了

   先配置我们的json文件（usingComponents）就是将组件引入到这个页面

 2、在页面使用他（ date.wxml）

 <popup id='popup' 
      content='是否要安排当日训练计划日程' 
      btn_no='否' 
      btn_ok='是'
      bind:error="_error"  
      bind:success="_success">
  </popup>

　date.js

 this.popup.showPopup()  ----- 这个是判断弹框显示的    可写在你需要让他弹出的事件里
某个事件: function (){
  this.popup.showPopup()
},
 //取消事件
  _error() {
    console.log('你点击了取消');
    this.popup.hidePopup();
  },
  //确认事件
  _success() {
    console.log('你点击了确定');
    this.popup.hidePopup();
  },

　　

我们想要的组件就封装完毕了

捎带这里加一个 date的页面 大家可以看也可以不看  就是记录下

date.wxml

<view style="height:100%;">
    <view class="message disf">
        <image class="img1" src="/imgs/icon-Message-notification.png"></image>
        <view>把训练计划加入日程里，可以有效安排训练时间和监督自己</view>
        <image src="/imgs/icon-messages-turning-off.png" class="img2"></image>
    </view>
    <image src="/imgs/1photo-my.png" class="bgImg"></image>
    <view class="date">
        <view class="date-y-m">
            <view class="y-m disf" style="padding-left: 25rpx;" bindtap="yearTap">
                <view>{{year}}</view>
                <image src="/imgs/pagedown.png"></image>
            </view>
            <view class="y-m disf" style="padding-right: 25rpx;" bindtap="monthTap">
                <view>{{month}}月</view>
                <image src="/imgs/pagedown.png"></image>
            </view>
        </view>
        <view class="date-d">
            <view class='header'>
                <view wx:for='{{date}}' wx:key="index" class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}<view></view></view>
            </view>
            <view class='date-box'>
                <view wx:for='{{dateArr}}' wx:key="index" class='{{isToday == item.isToday ? "nowDay" : ""}}' data-date='{{item.isToday}}' data-index="{{index}}" bindtap="dateTap">            
                    <view class='date-head disf' style="{{item.status?'background: #FF4D3A;color: #FFFFFF;':''}}">
                        <view class="view" style="{{isToday == item.isToday ? 'transform: translateY(-2px);':''}}">{{item.dateNum}}</view>
                        <view class='{{isToday == item.isToday ? "dian" : "text"}}'>{{isToday == item.isToday ? "" : "练"}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <view class="datePopup" wx:if="{{datePopupShow}}">
        <view class="datePopup-bottom">
            <view class="popup-header">
                <view class="no" data-type="0" bindtap="datePopupTap">取消</view>
                <view class="yes" data-type="1" bindtap="datePopupTap">确定</view>
            </view>
            <view class="popup-footer">
                <picker-view indicator-style="height: 50px;" style="100%;height:240rpx;" value="{{value}}" bindchange="bindChange">
                    <picker-view-column>
                    <view wx:for="{{years}}" class="disf" wx:key="index" style="height:80rpx;">{{item}}年</view>
                    </picker-view-column>
                    <picker-view-column>
                    <view wx:for="{{months}}" class="disf" wx:key="index" style="height:80rpx;">{{item}}月</view>
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
    </view>
    <popup id='popup' 
      content='是否要安排当日训练计划日程' 
      btn_no='否' 
      btn_ok='是'
      bind:error="_error"  
      bind:success="_success">
  </popup>
</view>

　　date.wxss

/* pages/actiondetail/index.wxss */
page{
  height: 100%;
}
.disf{
  display: flex;
  justify-content: center;
  align-items: center;
}
.message{
   100%;
  height: 80rpx;
  background: rgba(255, 51, 51, 0.1);
  font-size: 24rpx;
  color: #FF3333;
  position: absolute;
  top: 0;
  z-index: 20;
}
.message .img1{
   34rpx;
  height: 26rpx;
}
.message .img2{
   13rpx;
  height: 13rpx;
  margin-left: 10rpx;
}
.bgImg{
  height: 480rpx;
   100%;
  position: relative;
  top: -150rpx;
}
.date{
  position: relative;
  top: -335rpx;
   calc(100% - 48rpx);
  padding: 24rpx;
  background: rgba(255, 51, 51, 0);
}
.date .date-y-m{
   315rpx;
  height: 68rpx;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 0px 0px 125rpx 0px rgba(169, 172, 189, 0.25);
  border-radius: 33rpx;
  display: flex;
}
.date .date-y-m .y-m{
   50%;
  height: 100%;
  flex-direction: row;
}
.date .date-y-m .y-m view{
  color: #333333;
  font-size: 22rpx;
  margin-right: 16rpx;
}
.date .date-y-m .y-m image{
   20rpx;
  height: 10rpx;
}
.date .date-d{
  height: 692rpx;
   100%;
  background-image: url(data:image/png;base64,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);
  background-size: 100%;
  background-repeat: no-repeat;
}
.header{
  font-size: 0;
  padding: 80rpx 24rpx 0 24rpx;
}
.header>view{
  display: inline-block;
   14.285%;
  color: #333;
  font-size: 30rpx;
  text-align: center;
  padding: 20rpx 0;
}
.weekMark{
  position: relative;
}
.weekMark view{
  position: absolute;
  bottom: 0;
  left: 0;
   100%;
}
.date-box{
  font-size: 0;
  padding: 10rpx 25rpx;
}
.date-box>view{
  position: relative;
  display: inline-block;
   14.285%;
  color: #020202;
  font-size: 40rpx;
  text-align: center;
  vertical-align: middle;
  margin: 7rpx 0;
}
.date-head{
   70rpx;
  height: 70rpx;
  font-size: 28rpx;
  color: #333333;
  border-radius: 50%;
  flex-direction: column;
  margin: 0 auto;
}
.nowDay .date-head{
  color: #FF4D3A;
  padding-bottom: 16rpx;
  height: 48rpx;
}
.date-head .dian{
   10rpx;
  height: 10rpx;
  background: #FF4D3A;
  border-radius: 50%;

}
.date-head .text{
  font-size: 22rpx;
  color: #FFFFFF;
}
.date-weight{
  font-size: 22rpx;
  padding: 15rpx 0;
}
.nowDay .date-weight{
  color: #22A7F6;
}
.datePopup{
  height: 100%;
   100%;
  background: rgba(0, 0, 0, .28);
  position: absolute;
  top: 0;
  z-index: 999;
}
.datePopup .datePopup-bottom{
   100%;
  height: 500rpx;
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 0;
}
.datePopup .popup-header{
  margin-top: 48rpx;
  padding: 0 30rpx;
   calc(100% - 60rpx);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.popup-header .no{
  color: #999999;
  font-size: 30rpx;
}
.popup-header .yes{
  color: #FFAA01;
  font-size: 30rpx;
}
.popup-footer{
  height: 240rpx;
   622rpx;
  margin: 80rpx auto;
  overflow: hidden;
  display: flex;
}
.intro {
  margin: 30px;
  text-align: center;
}

date.js

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

  /**
   * 页面的初始数据
   */
  data: {
    name: '',
    year: 0,
    month: 0,
    date: ['日', '一', '二', '三', '四', '五', '六'],
    dateArr: [],
    isToday: 0,
    isTodayWeek: false,
    todayIndex: 0,
    datePopupShow: false, // 日历弹窗
    years: [],// 2000-2040年
    months: [1,2,3,4,5,6,7,8,9,10,11,12], // 12个月
    value: [21, 0],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    console.log(year, month)
    this.dateInit();
    var arr = []
    for( let i = 0; i < 40; i++) {
      arr.push(2000+i)
    }
    this.setData({
      year: year,
      month: month,
      isToday: '' + year + month + now.getDate(),
      years: arr
    })
  },
  dateInit: function (setYear, setMonth) { // 公用方法 获取日期天数
    //全部时间的月份都是按0~11基准，显示月份才+1
    let dateArr = [];                        //需要遍历的日历数组数据
    let arrLen = 0;                            //dateArr的数组长度
    let now = setYear ? new Date(setYear, setMonth) : new Date();
    let year = setYear || now.getFullYear();
    let nextYear = 0;
    let month = setMonth || now.getMonth() + 1;  //没有+1方便后面计算当月总天数
    let nextMonth = (month) > 11 ? 1 : (month);
    let startWeek = new Date(year + ',' + (month) + ',' + 1).getDay();   //目标月1号对应的星期
    let dayNums = new Date(year, nextMonth, 0).getDate();  //获取目标月有多少天
    let obj = {};
    let num = 0;

    if (month > 11) {
      nextYear = year + 1;
      dayNums = new Date(nextYear, nextMonth, 0).getDate();
    }
    arrLen = startWeek + dayNums;
    for (let i = 0; i < arrLen; i++) {
      if (i >= startWeek) {
        num = i - startWeek + 1;
        obj = {
          isToday: '' + year + (month) + num,
          dateNum: num,
          weight: 5,
          status: false
        }
      } else {
        obj = {};
      }
      dateArr[i] = obj;
    }
    // console.log('dateArr', dateArr)
    this.setData({
      dateArr: dateArr
    })

    let nowDate = new Date();
    let nowYear = nowDate.getFullYear();
    let nowMonth = nowDate.getMonth() + 1;
    let nowWeek = nowDate.getDay();
    let getYear = setYear || nowYear;
    let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;

    if (nowYear == getYear && nowMonth == getMonth) {
      this.setData({
        isTodayWeek: true,
        todayIndex: nowWeek
      })
    } else {
      this.setData({
        isTodayWeek: false,
        todayIndex: -1
      })
    }
  },
  yearMonthTap () { // 显示日期选择框
    this.setData({
      datePopupShow: true
    })
  },
  datePopupTap (e) { // 日期选择框点击确定时
    var type = e.currentTarget.dataset.type
    if (type == 0) {
      this.setData({
        datePopupShow: false
      })
    } else {
      this.setData({
        year: this.data.years[this.data.value[0]],
        month: this.data.months[this.data.value[1]],
        datePopupShow: false
      })
      let year = this.data.year
      let month = this.data.month
      console.log(year, month)
      this.dateInit(year, month)
    }
  },
  bindChange: function (e) { // 日期选择器框发生改变
    const val = e.detail.value
    this.setData({
      value: val
    })
  },
  dateTap (e) { // 点击某一天日期触发事件
    this.popup.showPopup()
    var index = e.currentTarget.dataset.index
    var fictionList = this.data.dateArr
    var fictionStatus = 'dateArr[' + index + '].status'
    for (let i = 0; i < fictionList.length; i++) {
      // var otherFiction = 'dateArr[' + i + '].status'
      if (i == index) {
        this.setData({
          [fictionStatus]: true
        })
      }
    }
  },
  //取消事件
  _error() {
    console.log('你点击了取消');
    this.popup.hidePopup();
  },
  //确认事件
  _success() {
    console.log('你点击了确定');
    this.popup.hidePopup();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
     //获得popup组件
     this.popup = this.selectComponent("#popup");
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})