[pop up box at the bottom of wechat applet package] I

【 Pop up box 1 at the bottom of wechat applet packaging 】

<!--index.wxml-->
<view>
  <button style="margin-top: 300px;" catchtap="changeRange2"> Click to evoke the pop-up window 222</button>

  <!--  bounced  -->
  <dialogA id='dialog' catchtouchmove="preventTouchMove" bind:customEventHandler="customEvent"></dialogA>
</view>

{
    
  "usingComponents": {
    
    "dialogA":"/components/dialogA/dialog",
    "dialog":"/components/dialog/dialog"
  }
}

// index.js
//  Get application instance 
const app = getApp()

Page({
    

    /** *  Life cycle function -- Listening page first rendering completed  */
    onReady: function () {
    
        this.popup = this.selectComponent("#dialog"); // obtain 
    },
    
    
    //  Call subcomponent Events --- Popup 2
    changeRange2(e) {
    
        var _this = this;
        _this.popup.changeRange(); // Call the function in the subcomponent 

    },
    
})

<!--components/dialog/dialog.wxml-->

<view class="half-screen" catchtouchmove="preventTouchMove">
    <!-- The screen background darkens the background  -->
    <view class="background_screen" catchtap="hideModal" wx:if="{
     {showModalStatus}}"></view>
    <!-- pop-up  -->
    <view animation="{
     {animationData}}" class="attr_box" wx:if="{
     {showModalStatus}}">
        <view class="dialog-box">
            <view class="dialog-head">
                <view class="dialog-title"> Commodity type </view>
                <view class="close2ImgBox">
                    <image src="/img/close2.png" class="close2Img" catchtap="hideModal"></image>
                </view>
            </view>
            <view class='dialog-content'>
                <view class="select-box">
                    <view wx:for="{
     {tabData.val}}" wx:key="index" class="select-item {
     {index==tabData.toValIndex?'selectedItem':''}}" data-dialogid="{
     {index}}" catchtap="getValueTap">{
   {item}}</view>
                </view>
                <view class="btnBox">
                    <button class="btn" catchtap="hideModal"> confirm </button>
                </view>
            </view>

        </view>
    </view>
</view>

/* components/dialog/dialog.wxss */
/* Modal frame */
/* Darken the screen  */
.background_screen {
    
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}

/* Dialog box  */
.attr_box {
    
  background: #FFFFFF;
  opacity: 1;
  /* border-radius: 0px 0px 0px 0px; */
  /* height: 500rpx; */
  height: auto;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  /* background: rgba(66, 66, 66, .6); */
  padding-top: 40rpx;
  padding-bottom: 90rpx;
  box-sizing: border-box;

}


.dialog-box {
    
  width: 100%;
  height: 100%;
  /* background-color: pink; */
}

.dialog-head {
    
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60rpx;
  /* background-color: rgb(215, 255, 192); */
}

.dialog-title {
    
  width: 80%;
  height: 100%;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  /* line-height: 40rpx; */
  color: rgba(0, 0, 0, .9);
  /* background-color: rgb(255, 254, 192); */

  display: flex;
  align-items: center;
  justify-content: center;
}

.close2ImgBox {
    
  width: 10%;
  height: 100%;
  display: flex;
  align-items: center;
}

.close2Img {
    
  width: 44rpx;
  height: 44rpx;
}

.dialog-content {
    
  height: calc(100% - 60rpx);
  /* background-color: rgb(192, 237, 255); */
  box-sizing: border-box;
  padding: 40rpx 0;
}

/*  Main content  */
.select-box {
    
  /* background-color: rgb(240, 230, 146); */
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  box-sizing: border-box;
  padding: 10rpx;
  padding: 0 0 30rpx 0rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.select-item {
    
  width: 80%;
  height: 88rpx;
  line-height: 68rpx;
  background: #f6f5f8;
  opacity: 1;
  border-radius: 40rpx;
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #151521;
  /* margin-right: 10rpx; */
  margin-bottom: 32rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectedItem {
    
  background: #ff5050;
  color: #fff;
  border: 1px solid #ff5050;
}

.btnBox {
    
  width: 100%;
  /* height: auto; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
    
  width: 90% !important;
  height: 88rpx;
  background: #FF3B3B;
  opacity: 1;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  opacity: 1;
  border-radius: 48rpx;
  border: none;
  outline: none;
  position: absolute;
  bottom: 50rpx;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}

// // components/dialog/dialog.js
Component({
    
    /** *  A list of properties of a component  */
    properties: {
    },

    /** *  The initial data of the component  */
    data: {
    
        // Pop up display control 
        showModalStatus: false,
        // isShowDialog: false, // Whether to display prompt control components 

        //  Click on the added data 
        tabData: {
    
            // title: ' Refuse to deliver ',
            val: [' stock ', ' Cross border spot ', ' Hot style ', ' New product '],
            toValIndex: null,
        }, // Value to be passed 
    },
    /** *  A list of methods for a component  */
    methods: {
    
        // Click the bottom of the display to pop up 
        changeRange: function () {
    
            this.showModal();
            console.log(' I opened the pop-up window ----');
        },

        // Bottom pop-up 
        showModal: function () {
    
            //  Background mask layer 
            var animation = wx.createAnimation({
    
                duration: 50,
                timingFunction: "linear",
                delay: 0
            })
            //this.animation = animation
            animation.translateY(50).step()
            this.setData({
    
                animationData: animation.export(),
                showModalStatus: true
            })
            setTimeout(function () {
    
                animation.translateY(0).step()
                this.setData({
    
                    animationData: animation.export()
                })
            }.bind(this), 50)
        },

        // Click anywhere on the background , Pop up box hidden 
        hideModal: function (e) {
    
            // Pop up box disappear animation 
            var animation = wx.createAnimation({
    
                duration: 10,
                timingFunction: "linear",
                delay: 0
            })
            //this.animation = animation
            animation.translateY(10).step()
            this.setData({
    
                animationData: animation.export(),
            })
            setTimeout(function () {
    
                animation.translateY(0).step()
                this.setData({
    
                    animationData: animation.export(),
                    showModalStatus: false
                })
            }.bind(this), 10)
        },



        //  Select options ----- The pop-up box selects the add type 
        getValueTap(e) {
    
            console.log(e);
            let dialogid = e.currentTarget.dataset.dialogid;
            console.log(dialogid);
            this.setData({
    
                ['tabData.toValIndex']: dialogid, // to update 
            })
            // var toNum = this.data.tabData.index;
        },
    },
    //  Life cycle 
    lifetimes: {
    
        ready: function () {
    

        },
    }
})