个人ionic小萌新,就最近用ionic写的前端页面遇到的问题进行下总结,方便自己日后查看,也为大家日后遇到相同问题能给个小小的提示,有什么不妥的地方还望指教(鞠躬,卖萌^_^)
进入正题
是公司想用ionic重新写一个app页面让我练手,我用的这种写法按照师傅告诉我的貌似是最新的(原谅我ionic几我不是很清楚@-@),所以遇到了几个问题网上找的解决方式都没用,那些写法拷过来run的时候都是黑屏,完全显示不出来,所以只能研究官网的代码,具体问题如下:
1、图片轮播时想改动底下圆点的样式:
样式是ionic自己本身的蓝色(active)居中圆点
要改成居右白色(active)圆点
这里在官网找到slides这个组件,然后在浏览器里查看元素,查找浏览器解析完后的代码,找到控制圆点样式的scss类swiper-pagination和子类.swiper-pagination-bullet-active,然后在自己的scss文件里填上如上两个类,父类里改位置,子类里改样式,如果不放心可以在最后加上!importent
2、然后是内类似于footer的tabs条感觉得菜单栏
因为tab不能在content里用,所以想把tab样式用在content里就得换个方式,肯定有很多方式,小白这里放个自己的解决方式:
<ion-row class="option-box" text-center="">
<ion-col col-3="" class="sbox" >
<ion-icon name="ios-american-football-outline" ></ion-icon>
<p>你好</p>
</ion-col>
<ion-col col-3="" class="sbox">
<ion-icon name="ios-analytics-outline"></ion-icon>
<p>很好</p>
</ion-col>
<ion-col col-3="" class="sbox">
<ion-icon name="ios-aperture-outline"></ion-icon>
<p>好吗</p>
</ion-col>
<ion-col col-3="" class="sbox">
<ion-icon name="ios-archive-outline"></ion-icon>
<p>不错</p>
</ion-col>
</ion-row>
QWQ当时蠢蠢的用了两行row来强行对其,强行上下行,人家标签p能自动换行忘得一干二净,这也算是个记性
3、在card里加上list然后加入输入框,然后在输入框加入放大镜icon
这个的解决方法是
<ion-card>
<ion-list>
<ion-item>
<ion-input type="text" placeholder="随便输入"></ion-input>
<ion-icon name="ios-search" item-end="" ></ion-icon>
</ion-item>
</ion-card>
就在icon那行加入item-end就可以了~,要是没记错,这个item-end只能在item标签里才有用
4、再记录个图片位置问题,这是之前遇到的,不知道要把图片存在什么地址下,倒腾了很久也找了很多博客啥的,我这里找的办法:自己的工程文件夹\src\assets\自己起的图片文件夹名字(一般都是什么img,image啥的) 。写在工程里就是如下(当时看到还有写全部目录的,但是小白我这里不好使)
5.想让文字居中可以直接在需要的那行加上text-center就好了(单独写样式textalign:center小白我这里是不认QWQ)
<ion-row class="option-box" text-center="">