How to realize the bottom pop-up box encapsulation of wechat applet

This article “ How to realize the bottom pop-up box encapsulation of wechat applet ” Most people don't quite understand the knowledge points of the article , So I made up the following summary for you , Detailed content , The steps are clear , It has certain reference value , I hope you can gain something after reading this article , Let's take a look at this article “ How to realize the bottom pop-up box encapsulation of wechat applet ” Article bar .

<!--index.wxml--><view>  <button  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.jsComponent({    /**     *  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 () {        },    }})

That's about “ How to realize the bottom pop-up box encapsulation of wechat applet ” The content of this article , I believe we all have a certain understanding , I hope the content shared by Xiaobian will be helpful to you , If you want to know more about it , Please pay attention to the Yisu cloud industry information channel .