微信小程序手写底部弹出框

 <!-- 规格弹框 -->
  <!--屏幕背景变暗的背景  -->
  <view class="background_screen" catchtouchmove="true" catchtap="hideModal" data-type="address" wx:if="{{showModalStatus}}"></view>
  <!--弹出框  -->
  <view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}" catchtouchmove="true">
    <view class="dialog-box">
      <view class="addressTitel">
        <view style="width:650rpx;text-align: center;"><text>请选择收货地址</text></view>
        <image bindtap="hideModal" data-type="address" src="../../../images/convenient/hidIcon.png" style="height:30rpx;width:30rpx;"></image>
      </view>
      <!-- 地址列表 -->
      <view class="addressList" wx:if="{{addressList.length>0}}">
        <scroll-view scroll-y="true" style="height:750rpx;" >
        <radio-group bindchange="radioChange" style="width: 100%;">
          <view class="addressItem" wx:for="{{addressList}}" wx:key="index" bindtap="chooseAddress" data-index="{{index}}">
            <text wx:if="{{item.isNear==1}}">附近地址</text>
            <view class="addressInfo" >
            <view class="flex" style="height: 100rpx;">
              <radio class="checkBtn" value="{{item.id}}" checked="{{item.checked}}"/>
              <view class="detail">
                <text class="fw600">{{item.locateAddress}}{{item.detailAddress}}</text>
                <view>
                  <text >{{item.commitUserName}}</text>
                  <text class="addressPhone">{{item.commitUserPhone}}</text>
                </view>
              </view>
            </view>
              <image src="/images/convenient/edit.png" style="width:40rpx;height: 40rpx;" bindtap="editAddress" data-index="{{index}}"></image>
            </view>
          </view>
        </radio-group>
      </scroll-view>
      </view>
      <view class="noMore" wx:if="{{addressList.length<1}}">
        <image src="{{noMore}}" style="width: 150rpx;height: 150rpx;margin: 0 auto;"></image>
        <text>暂无更多</text>
     </view>
      <!-- 新增按钮 -->
      <view class="addAddressBtn" bindtap="goAddAddress">新增收货地址</view>
    </view>
  </view>

隐藏弹框

  //隐藏弹框
  hideModal(e) {
    var type = e.currentTarget.dataset.type
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(554).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
      })
        this.setData({
          showModalStatus: false,
        })
    }.bind(this), 200)
  },

显示弹框

/// 显示遮罩层、弹框
  showModal(e) {
    var type = e.currentTarget.dataset.type
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(554).step()
    this.setData({
      animationData: animation.export(),
    })
      this.setData({
        showModalStatus: true,
      })
 
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },

样式

 /*模态框*/
/*使屏幕变暗  */
.background_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.4;
  overflow: hidden;
  z-index: 1000;
  /* color: #fff; */
}

/*对话框 */
.attr_box {
  background: #F5F5F5;
  opacity: 1;
  /* border-radius: 0px 0px 0px 0px; */
  /* height: 500rpx; */
  min-height: 1025rpx;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  box-sizing: border-box;
  border-radius: 21rpx 21rpx 0rpx 0rpx;
}
.dialog-box {
  width: 100%;
  height: 100%;
}
.addressTitel{
  width: 100%;
  padding: 40rpx 40rpx;
  display: flex;
  font-size:28rpx;
  color: #171717;
  font-weight: 600;
  background: #ffffff;
}
.addressList{
  width: 95%;
  margin: 0 auto;
}
.addressItem{
  width: 100%;
  min-height:164rpx;
  font-size: 24rpx;
  color: #171717;
  background: #fff;
  border-radius: 21rpx;
  padding: 22rpx 30rpx;
  margin-top: 12rpx;
}
.addressInfo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120rpx;
}
.checkBtn {
  margin-right: 20rpx;
  transform: scale(0.7);
  align-self: center;
}
.checkBtn .wx-checkbox-input {
  border-radius: 50%;
}
/*checkbox选中后样式  */
radio .wx-radio-input.wx-radio-input-checked {
  background:#2787F6 !important;
  border-color:#2787F6 !important;
}
.detail{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.addressPhone{
  margin-left: 20rpx;
}
.addAddressBtn{
  width: 637rpx;
height: 95rpx;
background:#2787F6;
border-radius: 48rpx;
text-align: center;
line-height: 95rpx;
position: fixed;
bottom:58rpx;
left:57rpx;
color: #fff;
font-size: 28rpx;
}
/* 弹框结束 */

效果