3

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

 3 years ago
source link: https://blog.csdn.net/botellei/article/details/111403325
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

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


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK