1.ionic中popover在android上的样式很丑,ios上的样式就漂亮多了,不知道他们为什么不统一用相同的样式,反正android上的样式丑到他妈都不认识了。想要达到和ios上一样的效果可以这样设置 。
如果不行就直接改ionic的css文件,将找到popover css样式的位置,找到.platform-ios .popover开头的css样式全部复制覆盖下面以.platform-android .popover开头的文件并将复制部分的.platform-ios替换成platform-android(注意只是将复制部分的.platform-ios换成.platform-android,不要全换,不然ios上面就没有样式了)
2.ionic中Action Sheet在android中的样式也很奇怪,首先按钮中的文字是靠左显示的,其次是取消按钮也不会显示,而且按钮之间也没有分割线,反正就是丑爆了,谁看谁都会吐掉。
解决方式是可以直接在buttons中的text中写样式如下
$scope.show = function() { // Show the action sheet var hideSheet = $ionicActionSheet.show({ buttons: [ { text: '<div align="center"><i style="color: red" ></i> 删除</div>' }, { text: '<div align="center" ><i style="color: #4b8bf4" ></i> 取消</div>' } ], buttonClicked: function(index) { if(index==0){ deleteObj(); } if(index==1){ hideSheet(); } return true; } }); // For example's sake, hide the sheet after two seconds $timeout(function() { hideSheet(); }, 50000); function deleteObj(){ } };效果如下
但是样式还是和不敬人意。现在只有来狠招了,那就是该ionic的css样式。打开ionic的css文件找到下面相关的css。不要客气,选中这些css样式然后Ctrl+shift+?(直接注释)
然后就是奇迹的时刻