微信小程序学习之自定义滚动弹窗

唤出弹窗



 标题
 副标题
 
 
  
  
   {{item.name}}
   ×{{item.quantity}}
   {{item.message}}
  
  
 
 
 
 此处可随意添加文本内容
 
 
 取消
 确定
 

.showModal{
 position:absolute;
 height:50px;
 left:30%;
 width:40%;
 top:40%;
 background: rgb(95, 228, 83);
 color:#fff;
 font-size: 20px;
}
/*以下全是弹窗样式*/
.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
 color: #fff;
}
.modal-dialog {
 width: 80%;
 overflow: hidden;
 position: fixed;
 top: 40%;
 left: 0;
 z-index: 9999;
 background: #f9f9f9;
 margin-top: -180rpx;
 margin-left: 10%;
 border-radius: 36rpx;
}
.modal-title {
 padding-top: 30rpx;
 font-size: 20px;
 color: #030303;
 text-align: center;
}
.modal-title-sc {
 padding-top: 10rpx;
 font-size: 15px;
 color: #bebcbc;
 text-align: center;
}
.modal-content {
 padding: 10rpx 32rpx;
}
.info{
 height:30px;
 left:0%;
 text-align: left;
 font-size: 12px;
 color:#bebcbc;
}
.info::after{
 border: 0px;
}
.name_List{
 position:absolute;
 left:0%;
 width:40%;
 text-align: left;
}
.quantity_List{
 position:absolute;
 left:40%;
 width:10%;
 text-align: left;
}
.reason_List{
 position:absolute;
 left:50%;
 width:50%;
 text-align: right;
 overflow: hidden;
}
.modal-content-return{
 padding: 15rpx 32rpx;
 font-size: 15px;
 color: #bebcbc;
}
.modal-footer {
 display: flex;
 flex-direction: row;
 height: 86rpx;
 border-top: 1px solid #dedede;
 font-size: 34rpx;
 line-height: 86rpx;
}
.btn-cancel {
 width: 50%;
 color: #666;
 text-align: center;
 border-right: 1px solid #dedede;
}
.btn-confirm {
 width: 50%;
 color: #ec5300;
 text-align: center;
}

Page({
 data: {
  data:null,
  showModal:false
 },
 onLoad: function () {
  var data=[
   {id:1,name:"cc",quantity:2,message:"爱玩游戏"},
   {id:2,name:"ha",quantity:4,message:"爱谈恋爱"},
   {id:3,name:"lxl",quantity:6,message:"爱看电视"},
   {id:4,name:"cc",quantity:2,message:"爱玩游戏"},
   {id:5,name:"ha",quantity:4,message:"爱谈恋爱"},
   {id:6,name:"lxl",quantity:6,message:"爱看电视"},
  ]
  this.setData({
   data:data
  })
 },
 showModal_click:function(){
  this.setData({
   showModal:true
  })
 },
 //弹窗事件
 hideModal: function () {
  this.setData({
   showModal: false
  });
 },
 onCancel: function () {
  this.hideModal();
 },
 onConfirm: function () {
  this.hideModal();
 }
})