Small program custom bullet box effect

In this paper, we share the specific code of the small program custom bullet box effect for your reference. The specific contents are as follows

wxml

<!--button-->
<view class="btn" bindtap="powerDrawer" data-statu="open"> Have some of me </view>
 
<!--mask-->
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<!--content-->
<!-- Use animation Property specifies the animation that needs to be performed -->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">
 
 <!--drawer content-->
 <view class="drawer_title"> Pop-up title </view>
 <view class="drawer_content">
  <view class="top grid">
   <label class="title col-0"> Title </label>
   <input class="input_base input_h30 col-1" name="rName" value=" Self-defining content "></input>
  </view>
  <view class="top grid">
   <label class="title col-0"> Title </label>
   <input class="input_base input_h30 col-1" name="mobile" value="110"></input>
  </view>
  <view class="top grid">
   <label class="title col-0"> Title </label>
   <input class="input_base input_h30 col-1" name="phone" value=" Refusing to reach out "></input>
  </view>
  <view class="top grid">
   <label class="title col-0"> Title </label>
   <input class="input_base input_h30 col-1" name="Email" value=" For study only "></input>
  </view>
  <view class="top bottom grid">
   <label class="title col-0"> Remarks </label>
   <input class="input_base input_h30 col-1" name="bz"></input>
  </view>
 </view>
 <view class="btn_ok" bindtap="powerDrawer" data-statu="close"> Determine </view>
</view>

wxss

/*button*/
.btn {
 width: 80%;
 padding: 20rpx 0;
 border-radius: 10rpx;
 text-align: center;
 margin: 40rpx 10%;
 background: #000;
 color: #fff;
}
 
/*mask*/
.drawer_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1000;
 background: #000;
 opacity: 0.75;
 overflow: hidden;
}
 
/*content*/
.drawer_box {
 width: 650rpx;
 overflow: hidden;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 1001;
 background: #FAFAFA;
 margin: -150px 50rpx 0 50rpx;
 border-radius: 3px;
}
 
.drawer_title{
 padding:15px;
 font: 20px "microsoft yahei";
 text-align: center;
}
.drawer_content {
 height: 210px;
 overflow-y: scroll; /* Scroll beyond the height of parent box */
}
 
.btn_ok{
 padding: 10px;
 font: 20px "microsoft yahei";
 text-align: center;
 border-top: 1px solid #E8E8EA;
 color: #3CC51F;
}
 
.top{
  padding-top:8px;
}
.bottom {
  padding-bottom:8px;
}
.title {
  height: 30px;
  line-height: 30px;
  width: 160rpx;
  text-align: center;
  display: inline-block;
  font: 300 28rpx/30px "microsoft yahei";
}
 
.input_base {
  border: 2rpx solid #ccc;
  padding-left: 10rpx;
  margin-right: 50rpx;
}
.input_h30{
  height: 30px;
  line-height: 30px;
}
.input_h60{
  height: 60px;
}
.input_view{
  font: 12px "microsoft yahei";
  background: #fff;
  color:#000;
  line-height: 30px;
}
 
input {
  font: 12px "microsoft yahei";
  background: #fff;
  color:#000 ;
}
radio{
  margin-right: 20px;
}
.grid { display: -webkit-box; display: box; }
.col-0 {-webkit-box-flex:0;box-flex:0;}
.col-1 {-webkit-box-flex:1;box-flex:1;}
.fl { float: left;}
.fr { float: right;}

js

Page({
 data: {
  showModalStatus: false
 },
 powerDrawer: function (e) {
  var currentStatu = e.currentTarget.dataset.statu;
  this.util(currentStatu)
 },
 util: function(currentStatu){
  /*  Animation part  */
  //  No. 1 1 Step: Create an animated instance 
  var animation = wx.createAnimation({
   duration: 200, // Duration of animation 
   timingFunction: "linear", // Linear 
   delay: 0 //0 There is no delay 
  });
   
  //  No. 1 2 Step: Assign this animation instance to the current animation instance 
  this.animation = animation;
 
  //  No. 1 3 Step: Execute the first 1 Group animation 
  animation.opacity(0).rotateX(-100).step();
 
  //  No. 1 4 Step: Export animation object and assign it to data object for storage 
  this.setData({
   animationData: animation.export()
  })
   
  //  No. 1 5 Step: After setting the timer to the specified time, execute the 2 Group animation 
  setTimeout(function () {
   //  Executive part 2 Group animation 
   animation.opacity(1).rotateX(0).step();
   //  The number stored for data objects 1 Group animation, replaced by executing the first 2 Animation object of group animation 
   this.setData({
    animationData: animation
   })
    
   // Shut down 
   if (currentStatu == "close") {
    this.setData(
     {
      showModalStatus: false
     }
    );
   }
  }.bind(this), 200)
  
  //  Display 
  if (currentStatu == "open") {
   this.setData(
    {
     showModalStatus: true
    }
   );
  }
 }
 
})

For reference only.

I recommend a WeChat applet tutorial with high attention: "WeChat applet development tutorial". This site is carefully organized for everyone, and I hope I like it.