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

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

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

实现代码：
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里面的内容可以动态获取