ionic 自定义弹框

最新推荐文章于 2022-07-22 10:13:00 发布

原创最新推荐文章于 2022-07-22 10:13:00 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic

ionic 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在ionic应用中创建自定义弹框，通过$ionicPopup实现，并隐藏头部和尾部，仅保留主体内容区域。同时，利用templateUrl或template加载自定义模板。

在工作过程中往往需要自定义的弹框。因此，将内容整理如下，以方便学习。若有不当之处，敬请斧正！
思路

利用ionic自带的弹框$ionicPopup。
隐藏头部和尾部，只保留body部分
在利用templateUrl或者template，引入需要的模板

代码

$ionicPopup.show({
        cssClass:'team-popup',
        template: "<div class='list popup-form'>" +
        "<div class = 'form-title'>{{tempItem.name}}</div>" +
        "<div class='form-content'>" +
          "<div class='input-name'>input1:</div>" +
          "<div class='input-area'><input type='number' placeholder='10.00' ng-model='tempItem.input1'></div>" +
        "</div>" +
        "<div class='form-content'>" +
          "<div class='input-name'>input2:</div>" +
          "<div class='input-area'><input type='number' ng-model='tempItem.input2'></div>" +
        "</div>" +
        "<div class='form-button'>" +
          "<button class='button wyl-left-button' ng-click='fnClosePopup()' >cancel</button>" +
          "<button class='button wyl-right-button' ng-click='fnExchangeGoods()' >submit</button>" +
        "</div>" +
        "</div>",
        scope: $scope
      });

/**弹出窗popup 无titlecss*/
.team-popup .popup-head{
  display: none;
}
.team-popup .popup{
  padding: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius:5px;
}
.team-popup .popup-body{
  padding: 0;
  /*overflow-y:scroll;*/
}
/*自定义表单*/
.popup-form{
  font-size:15px
}
.form-title{
  margin: 10px;
  text-align:center
}
.form-content{
  width: 90%;
  height: 36px;
  background-color: white;
  padding-left: 10px;
  margin:10px auto;
  position: relative;
  border-radius: 5px;
}
.form-content input{
  line-height: 36px;
  padding-left:10px
}
.input-name{
  float: left;
  line-height: 36px;
}
.input-area{
  width: 50%;
  float: left;
  height: 36px;
}
.form-button{
  width: 90%;
  height: 36px;
  margin:10px auto;
  position: relative;
}
.form-button button{
  width: 50%;
  border-radius: 5px;
  min-height: 10px;
  height: 100%;
  line-height: 100%;
}