微信小程序：自定义滚动弹窗

微信小程序：自定义滚动弹窗

微信小程序虽然有三种自带的弹窗，但是毕竟功能有限，有时候难以满足我们的需求，所以我们可以自己尝试制作自定义弹窗，话不多说，直接上图：

实现代码：
wxml:

<button class="showModal" bindtap="showModal_click">唤出弹窗button>

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{
      {showModal}}">view>
<view class="modal-dialog" wx:if="{
      {showModal}}">
  <view class="modal-title">标题view>
  <view class="modal-title-sc">副标题view>
  <view class="modal-content">
    <scroll-view scroll-y="true" style="height:100px;">
      <block wx:for="{
      {data}}" wx:key="id">
        <button class="info">
          <view class="name_List">{
    {item.name}}view>
          <view class="quantity_List">×{
    {item.quantity}}view>
          <view class="reason_List">{
    {item.message}}view>
        button>
      block>
    scroll-view>
  view>
  <view class="modal-content-return">
    此处可随意添加文本内容
  view>
  <view class="modal-footer">
    <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消view>
    <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定view>
  view>
view>

wxss:

.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;
}

js:

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();
  }
})

直接拿过去就可以用，data里面的内容可以动态获取