微信小程序弹窗组件使用详解

<view class="wx-popup" style="margin:-{{windowHeight/2}}px 0 0 -{{windowWidth/2}}px" hidden="{{flag}}">
  <view class='popup-container'>
    <view class="wx-popup-title">{{title}}</view>
    <!-- <view class="wx-popup-con" >{{content}}</view> -->
    <view class="wx-popup-con" >
      <text>{{content_leftText}}</text>
      <text class="content_money">{{content_money}}</text>
      <text>{{content_rightText}}</text>
    </view>
    <view class="wx-popup-btn">
      <view class="closeBtn">
        <view class="close-popup" bindtap='_close'>
          <view>X</view>
        </view>
      </view>
    </view>
  </view>
</view>

.wx-popup {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
}
.popup-container {
  position: fixed;
  left: 10%;
  top: 20%;
  width: 80%;
  max-width: 600rpx;
  border-radius: 20rpx;
  box-sizing: bordre-box;
  background: #fff;
  z-index: 2000;
}
.wx-popup-title {
  width: 100%;
  padding: 28rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  border-bottom: 5rpx solid #9EA3BA;
  box-sizing: border-box;
}
.wx-popup-con {
  margin: 50rpx 10rpx;
  text-align: center;
  padding: 0 86rpx;
}
.wx-popup-con text {
  padding-bottom: 10rpx;
}
.content_money {
  color: #FFB258;
}
.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;
}
.wx-popup-btn .closeBtn {
  position: fixed;
  left: 45%;
  bottom: 30%;
}
.wx-popup-btn .close-popup {
  position: relative;
  height: 80rpx;
  width: 80rpx;
  border: 5rpx solid #fff;
  border-radius: 50%;
}
 .wx-popup-btn .close-popup view {
   position: absolute;
   left: 30%;
   top: 8%;
   font-size: 50rpx;
   color: #fff;
 }

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content_leftText: {
      type: String,
      value: '内容'
    },
    content_money: {
      type: String,
      value: '内容'
    },
    content_rightText: {
      type: String,
      value: '内容'
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏弹框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showPopup () {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    * triggerEvent 用于触发事件
    */
    _close() {
      this.triggerEvent("close");
    }
  }
})

<view class="index_popup">
    <view class="btn-area">
        <button type="primary" bindtap="showPopup">点击预测价钱</button>
    </view>
    <popup id='popup'
        title='预测价格' 
        content_leftText='您好,预测价格为'
        content_money='{{content_money}}' 
        content_rightText='元 , 预测价格和实际价格存在偏差,请耐心等候专业顾问为您服务。'  
        bind:close="_close">
    </popup>
</view>

.index_popup .btn-area button {
  background-image: linear-gradient(to right, rgba(36, 162, 255), rgba(36, 172, 255), rgba(36, 192, 255));
  font-size: 34rpx;
  font-weight: normal;
  border-radius: 50rpx;
  padding: 18rpx 30rpx;
  margin-top: 100rpx;
}

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
    content_money: '1000万'
  },
  onReady: function () {
    //获得popup组件
    this.popup = this.selectComponent("#popup");
  },
  showPopup() {
    this.popup.showPopup();
  },
  //取消事件
  _close() {
    console.log('你点击了关闭按钮');
    this.popup.hidePopup();
  },
  onLoad() {
  },
})