2020-05-13

原生小程序中     自定义     实现从底部弹出内容框效果  根据不同的场景可以自行修改。

效果图如下：

点我实现从底部弹出内容框

------------------html---------------

这是从底部弹出的内容框 content

 

        内容框的 头部

     

         取消

         完成

       

       这里写你的内容

   

   这是最外面的盒子  mask  主要是实现蒙层的效果

css 样式如下

/* 全屏遮罩层 */

.mask {

  position: fixed;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.6);

  top: 0;

  left: 0;

  z-index: 90;

}

/*内容框*/

.content {

  width: 100%;

  position: fixed;

  bottom: -694rpx; /*定位让其隐藏起来*/

  z-index: 91;

  background: white;

  border-top-left-radius: 16rpx;

  border-top-right-radius: 16rpx;

  overflow: hidden;

  height: 304rpx;

}

.rollslowly   /*这个样式 主要是实现从底部缓慢 弹出的效果。使用过渡属性transition

 {

  /* 从-694rpx距离过渡到0rpx */

  bottom: 0;

  transition: bottom 0.5s ease;

}

/*下面是对内容框 顶部 样式的书写----小伙伴们自己可以根据自己的业务需求进行改动*/

.top {

  height: 98rpx;

  background:rgba(244,244,244,1);

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 24rpx;

  box-sizing: border-box;

}

.modify_top_left {

  font-weight:400;

  color:rgba(153,153,153,1);

}

.modify_top_right {

  font-weight:500;

  color:rgba(51,51,51,1);

}

js

data: {

 showmodify:false  //开始默认不展示 底部弹出内容框效果

  }

closemask （） {

//点击蒙层要关闭  该弹出框

//点击取消 按钮  需要关闭 

//点击 完成按钮   需要关闭

//这里我 传递参数 来区别点击的是取消  还是完成

var name = e.currentTarget.dataset.name

if (name =='cancel'){

点击了取消按钮  

进行业务逻辑~~~~~~

}

if (name =='confirm') {

点击了完成按钮  

进行业务逻辑~~~~~~

}

//最后 三者都执行 关闭操作功能
this.setData({

      showmodify: !this.data.showmodify

    })

}