ionic4中menu制作页面

实现效果如下：单击按钮跳转到menu页面

介绍一下：此功能将霸占整个屏幕替换掉modal或者页面，去除滑动改为点击效果，由于弹框页面 实现不了数据绑定，我们借助此功能来实现效果

HTML代码

 <!-- 注意将 此代码放到content 和header外面 -->
 
<ion-menu type="overlay" swipeGesture="false" side="start" swipe-gesture="true" menuId="custom" class="my-custom-menu">
  <ion-header>
    <ion-toolbar class="cll" color="darkTurquoise">
      <ion-title style="text-align:center;margin-left: -5%;font-size: 120%;" class="cll">
        <ion-icon name="arrow-round-back" class="imgl" (click)="closenume()"></ion-icon>
        积分兑换
        <!-- <ion-icon name="settings" class="imgr" ></ion-icon> -->
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="cllContent">

    <div id="divclick" (click)="onClick()">
      <span>
        <img style="max-width:15%; margin-left: -9%;" src="assets/images/backge.png">
      </span>

      <span>
        <img id="alert-1-msg" (click)="ECoinAdd()" style="max-width:10%; margin:2%; float:right" src="assets/home/加_.png">
      </span>

      <span style="float: right; margin-top:5%;">{{eCoinExchange}}</span>

      <span> <img (click)="ECoinReduce()" style="max-width:10%;margin:2%; float:right" src="assets/home/减_.png">
      </span>
    </div>

    <div style="margin-right: 10%;">
      <img style="max-width:20%;margin-top:10%;margin-left: -25%;" src="assets/home/money.png">

      <p style="text-align:center;margin-top:17%; float:right; text-decoration: underline;margin-right:15%">
        {{integralExchange}}
      </p>
    </div>
    <div class="btninstance">
      <ion-button name="password" expand="block" shape="round" color="warning" (click)="IntegralExchange()">兑换</ion-button>
    </div>
  </ion-content>
</ion-menu>

<!-- 设置功能可用，但是不显示 -->
<div style="display: none;">
  <ion-router-outlet main></ion-router-outlet>
</div>

TS代码

    // 积分兑换：当前E币数
    private eCoinExchange: any =  0;
    // 积分兑换：当前积分数
    private integralExchange: any = 0;
  
// 声明组件
    constructor(
        public alertController: AlertController,
        public router: Router,
        public http: InterceptorService,
         private menu: MenuController
    ) {
        super();
    }


    /**
     * @description: 打开侧边栏
     * @param {type} 无
     * @return: 无
     * @author: 白爱民
     */
      openCustom() {
//         this.menu.enable(true, 'custom');
        this.menu.open('custom');
      }
     /**
     * @description: 关闭侧边栏
     * @param {type} 无
     * @return: 无
     * @author: 白爱民
     */
      closenume() {
        this.menu.close('custom');
      }

     /**
     * @description: 积分加操作
     * @param {type} 无
     * @return: 无
     * @author: 白爱民
     */
    ECoinAdd() {
    // 获取当前E币，不能大于此值
        this.eCoinExchange  = this.eCoinExchange + 20;
        this.integralExchange = this.eCoinExchange / 20;
    }

    /**
     * @description: 积分减操作
     * @param {type} 无
     * @return: 无
     * @author: 白爱民
     */
    ECoinReduce() {
        if (this.eCoinExchange > 0 ) {
            this.eCoinExchange  = this.eCoinExchange - 20;
            this.integralExchange = this.eCoinExchange / 20;
        }
    }
  /**
     * @description: 积分兑换
     * @param {type} 无
     * @return: 无
     * @author: 白爱民
     */
    IntegralExchange() {
        if  (this.integralExchange > 0)  {
            const url = '';
            this.http.post(url).subscribe(
                res => {
                    if (res.json().code === ResponseCode.SUCCESSCODE){
                        super.showTopToast(this.toastController, '成功添加'  + this.integralExchange + '分');
                    }
                }
            );
        }
    }

CSS代码

// -----------------------------------------侧边栏------------------------
// 侧边栏
.my-custom-menu{
  --width: 100%;
}

// toolbar 样式
// .cll1{
//   background-color: rgba(19, 185, 199, 1);
//   color: white;
// }
.cllContent {
  --background: rgba(240,240,244,1);
  text-align: center;
}
#divclick{
  margin-top: 30%;
  margin-right: 10%;
}
.btninstance{
  margin-top: 20%;
  margin-left:10%;
  width: 80%;
  // background-color: #e08600;
}

.cll {
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  line-height: 100%;  // 相对于自身高度
  background-color: rgba(19, 185, 199, 1);
  // background: #13B9c7;
  color: rgb(255, 255, 255);
  font-size: 20px;  // 字体大小
  text-align: center;
  font-family: Arial;  // 设置段落字体
}


.cll1 {
  left: 0px;
  top: 0px;
  width: 50%;
  height: 50%;
  line-height: 100%;  // 相对于自身高度
  background-color: rgba(19, 185, 199, 1);
  // background: #13B9c7;
  color: rgb(255, 255, 255);
  font-size: 14px;  // 字体大小
  text-align: center;
  font-family: Arial;  // 设置段落字体

}


// 返回键
.imgl {
  text-align: center;
  float: left;
  margin-left: 5%
  // width: 100%;

}
.imgl img{
  width: 80%;
  height: 80%;
}
// -----------------------------------------侧边栏------------------------