ionic3安卓平台下actionSheet显示为ios样式效果

    在ionic开发中,actionSheet在ios和android两个平台中,显示的效果有很大的区别,我个人更倾向于ios的样式风格.这里我就大概描述下怎么在android平台下也让actionSheet显示出ios的风格样式.

一、在app.css文件里面添加如下样式,记住一定要在app.css里面添加,不然会无效

.action-sheet-md {
  text-align: center;
}

.action-sheet-md .action-sheet-container {
  padding: 0 10px;
}

.action-sheet-md .action-sheet-group {
  overflow: hidden;
  margin-bottom: 8px;
  border-radius: 13px;
  background: #f9f9f9;
}

.action-sheet-md .action-sheet-group:last-child {
  margin-bottom: 10px;
}

.action-sheet-md .action-sheet-title {
  padding: 1.5rem;
  border-bottom: 0.55px solid #d6d6da;
  border-radius: 0;
  font-size: 1.3rem;
  font-weight: 400;
  text-align: center;
  color: #8f8f8f;
}

.action-sheet-md .action-sheet-button {
  margin: 0;
  padding: 18px;
  min-height: 5.6rem;
  border-bottom: 0.55px solid #d6d6da;
  font-size: 1.6rem;
  color: #007aff;
  background: transparent;
}

.action-sheet-md .action-sheet-button:last-child {
  border-bottom: 0;
}

.action-sheet-md .action-sheet-button.activated {
  margin-top: -0.55px;
  border-top: 5px solid #cccccc;
  border-bottom-color: #cccccc;
  background: #ebebeb;
}

.action-sheet-md .action-sheet-selected {
  font-weight: bold;
  background: #fff;
}

.action-sheet-md .action-sheet-destructive {
  color: #007aff;
}

.action-sheet-md .action-sheet-cancel {
  font-weight: 600;
  background: #fff;
}
.action-sheet-md .action-sheet-group:last-child {
   margin-bottom: 8px;
}

.action-sheet-md .action-sheet-group:last-child {
  padding-bottom: 0rem;
}

二、actionSheet代码,我这里只是把图片改成null,因为ios的样式本身就没有加图片

/**
 * 更多选择,actionSheet方法
 */
moreSelect() {
  let actionSheet = this.actionsheetCtrl.create({
    cssClass: 'action-sheets-basic-page',
    buttons: [
      {
        text: '刷新',
        role: 'destructive',
        icon: null,
        handler: () => {
          this.readData();    //刷新数据
        }
      },
      {
        text: '查询',
        icon:  null,
        handler: () => {
          this.navCtrl.push("CollectRecordPage");
        }
      },
      {
        text: '上传',
        icon:  null,
        handler: () => {

        }
      }
    ]
  });
  actionSheet.present();
}

 三、运行效果图如下,发现没有居中,解决方案可参考如下链接:

Ionic3 修改Actionsheet样式

加上之后效果如下:

    至此,在android里面actionSheet显示为ios样式就大功告成了,是不是很简单呢。

    转载链接:Ionic3 修改Actionsheet样式