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

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

在这里插入图片描述
其中列表部分支持滚动，所以信息承载能力很强。
实现代码：
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里面的内容可以动态获取

来源：oschina

链接：https://my.oschina.net/u/4340796/blog/4817253

标签

微信小程序

javascript