项目1.0-ionic

Tab-1首页

---

Q1：下拉刷新再现：github mos-refresher
自带的ion-refresher也有一些参数，但是不够用，mos没搞明白，先往下看吧。

ionic，Demo好像demo框架一定，好像不能自己新加文件之类，也不是。

项目结构调整，但仅限业务部分，工程默认配置文档没敢动，怕出现问题。
结合接口文档，制作本地数据，读取本地数据，等做完了，再一并替换成外网接口。现阶段不需要涉及跨域问题。

结构调成，把controllers拆开了。

ionic底层就是angular嘛？ionic底层就是angular，ionic就是手机端的一层皮，相对于angular+Bootstrap的Web端一样，angular+ionic。

Done-Q2:路径都拼对了，可总是显示不出照片来，$ionicSlideBoxDelegate.update()在数据加载完后来一句，得刷新一下，就出来了，这算一个bug吧。

Done-Q3:同样的设置为什么，ion-slide-box循环滚动失灵，已经设置了does-continue属性不好使？ 不知道怎么回事又好了。

Done-Q4:菜单栏不对，目标用的是跳转页，ionic creator，深化了解ionic页面跳转机制。去掉了menu，大发现总报错，Controller ‘ionNavBar’, required by directive ‘ionNavTitle’, can’t be found! 在index页面，ion-nav-view上面，恢复了ion-nav-bar，其实人家已经说得很清楚了，ionnavbar找不到，在ionnavtitle调用它时。

别想的太复杂，要什么给什么。

Done-Q5：自定义pager样式，找不到修改方法，先往下做，后面再说。
链接：https://github.com/driftyco/ionic/issues/916
I noticed that the pager icon is hard coded. 解决

到首页下面的推荐板块了，既然还是angular，就重复出现的元素就还是应该做成组件。

Tip1：将文字显示在图片上有两个方式，一是以图片当背景，而是组合，照片设置position属性，absolute，外边div设置relative；

Tip2：个人觉得了解盒模型是掌握布局的关键，margin是外边距-透明的，border是边框，padding是内边距-透明的，content是内容。
W3C规定，width属性设置的是content的宽度，

Q6：iOS里的2x3x、120point，在ionic里面是多少？怎么转换啊？

Tip3：设置上下左右，好多时候不是不管用，是你忘了加单位了！0的时候是建议无单位，但有值的时候就得把单位加上。

Done-Q7：width在CSS里写单位；但是在标签做属性时却看到直接写数字，没加单位？这是怎么回事？有什么说法？ 参见Tip7。

Tip4: 注意，在ionic cloud上先创建项目，才有的app_id，不是本地生成的。之前因为拷贝，并没有新生成app，app_id也一直没有变，所以不管你怎么重新上传，发现还是原来那版。自编一个app_id也没用，因为ionic cloud上没有。正确姿势：1.现在ionic cloud上新建项目，获得app_id，然后在本地项目上更新app_id；2.上传本地项目到ionic cloud。

Tip5:修改代码后，重新upload，这时候需要在ionic view上先选择清除全部缓存，之后才可以见到修改后的效果。

明天把人气企业彻底调教好后，制成自定义指令。

Tip6：命令ionic resources ios/android之后，项目就具备了解析诸如iOS@2x@3x，及设置启动等待页面的能力。

Done-Q8：真机测试，发现JQuery动画全部失灵；用浏览器调试，经常需要刷新一遍才好使。什么情况？不知与此前提到的ionic底层是angular、不适合与JQuery通用、冲突什么的有无关系？ 见Q12

进度节点：眼下CSS已经看完了，界面可以推荐了，后面工作的重心转向angular、页面导航、跳转、事件触发、快速完善框架，MEAN也要马上展开。

先把界面做进一步完善
Done-Q9：怎么解决谷歌浏览器chrome css font-size小于12px时无效
我知道了，在Chrome高级选项里，有个设置浏览器最小字号，原来是12，所以不管怎么设更小都没变化。当前我设的最小值是6px。

Tip7：关于单位问题：在CSS范畴下，一律待px像素单位，不带就错了，但是在属性端，不写单位也没报错，大小跟像素一样，但是还是写上尾号，要么%，要么px，要么0，这样指定不会错。

CSS选择器问题还得再深挖，想刚才我想表达class是test的img，我就写成了.img.test，实际不对，应该写成img.test。

Tip8：把当前首页部分的样式，能抽象的，都抽象到style.css文件里，那里就是写用户自己定义的样式：/* Empty. Add your own CSS if you like */

CSS样式抽象好以后，再组件化，即写指令。在铺首页！这周，务必把首页界面全部码出来，全部数据。

进度：ion iOS端已码，剩一个1024没使用。

2016.12.2
Q10: ion-item有选中效果，需要取消。 一时不知道该怎么解决，Pass。

将滚动item指令化。 Done

Q11：ionic中，拖拽、滑动不好使？

Done-Q12：ionic中，JQuery的动画都不灵，但是在浏览器调试模式下就好使，但也得刷一次才行？ 因为在浏览器上时毕竟不是手机，ionic-angular用不了JQuery所以不灵，maybe。 但是， 通过angular.element()使用JQuery。

2016.12.5
近期因为家事繁忙，导致工期严重delay，随即调整时间表，按照新的时间表，今天也要把首页写完，具体点击进详情页先不管，先把大样写出来再说。

Tip8：angular的一个坑，在写自定义指令的时候，绑定作用域是，如果映射左右有写错，导致没有对上，会导致数据调用失败，担忧不报错看不出什么问题来，甚至怀疑是不是angular坏了，就比如，将blockName写成了bolckName，等着眼看都没看出来，我去！

Tip9:当发现定不了位的时候，看看是不是没写单位px。

Done-Q13：总有scroll404not found，就好像还没准备好就去请求照片。
使用ng-src解决。解释：跟scroll没关系，在写img标签数据源涉及{{}}的时候，对于src而言，初始值不是合法url，所以汇报404，但是用ng-src就是走angular的语法了，这时的意思是，当你后面的url确实有值得时候，再作为照片数据源读取，所以404就没有了，也就是说，用src代表静态的图片url，是现成的；而ng-src是动态的。

stackoverflow给出的解释：
Use ng-src instead. Need that for images to use angular data.
If you don't, your initial src value isn't a valid url, so it causes your browser errors.
But, if you use ng-src instead, angular solves that problem on your behalf.
<img ng-src="{{Object.image}}" />
With that little gem, angular won't set the element's src property until it's ready with actual data.

Q14：首页各图片尺寸，跑马灯：414*233 … 不行啊，都对不上…

节点：2016.12.6首页大样搭建完毕。
测试：
Q15.首次加载时发现有些卡，尤其是顶部标题的位置不对，过一会儿自己蹦到正常，这是什么现象，该如何解释？

Q16：自定义ion-tab样式方法？ 未解决。

Tab-2通告库

---

ion-slide-box的定位需要通过ion-slide来实现。其他套件，应该也是通过改变子控件实现定位。

Tip10:关于absolute和relative的心得，absolute绝对行为相对于父控件，而relative相对于旁边的控件，一个范围内的子控件适合用relative。

JavaScript里的数组定义是用[], {}定义的是JavaScript对象。

Tip11：如何修改ionic icon大小 - - -> CSS

// 前面是你要修改的icon  注意before 注意！important
.ion-minus-circled:before{
  font-size: 28px !important;
}

ionic没什么东西，就ionic1+angular1而言，就是angular，只不过前面用的不是Bootstrap，而是ionic罢了。你就当在写angular Web应用，前面的那个后台Web端完全可以参考。

插播：<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。就是画中画。

Done-Q17：在ionic中，如何表示按钮选中前后的样式，都有哪些策略，CSS伪类？CSS动画？按钮点击事件？ng-if ng-show？
解释：JQuery addClass；ng-class三目运算符；

在ionic angular框架下，JQuery不好使，抓取元素方面，只能借助angular，我相信一定有办法。找到了，是angular.element()。这应该是angular给JQuery留的一个后门。

Done-Q18：我不知道怎样点击按钮让游标响应，除非我能获得当前点击按钮的坐标。我可能用错组件了，相关例子指向了ion-slide。
解释：ng-if；ng-class三目运算符；双向数据绑定记录当前index

不想了，卡的我难受，pass it，先往下做。

Done-Q19：底部的自定义cell组件用什么来实现，首选CSS3好像有些东西？卡片式图片？
解释：用ionic卡片 div class=”card”

可以直接搜你要实现的组件名称，网上应该有现成的，有时比直接从技术的角度搜更快。

Tip12：在选择icon时除了使用类名外，还可以使用content：“\f209”，像是一种编码。即CSS Content， icon它是一种字体，所以通过font-size改变icon大小。

Tip13：修改ion-item背景色，不是直接对其进行CSS修改，而是对其内部的item-content的CSS的background-color进行修改。

Q20：通告cell左页眉要根据数据种类决定显示图片颜色，估计得做个字典。

Tip14：在html范畴下，想表达照片层叠文字，方案只有两种，一种是两个子标签，通过二标签设置absolute属性重叠；一种是div设置背景图（background-image:url();background-size:100%;background-repeat:no-repeat;），然后里面是子span内容。

Tip15:有时你调了半天CSS没反应，不是你写的不对，而是那面儿还没挂上线儿。

Tip16：p标签的换行属性是white-space:normal; 行间距属性是line-height。

Q21：通告库页，上下滑动，会出现cell数据闪烁丢失现象，需查明解决。

Done-Q22：顶部横向滚动条明明已经禁止显示了，还是会看到有一个灰色的横条。
详见Q26

**节点：**2016.12.10 21:41 Tab-2 通告库页大样搭建完毕。细节不予纠缠，先往下做。

Tab-3工作

---

Q23:自定义icon事情受阻，摸到了阿里巴巴矢量图标库，找到的思路是，仿照ionic系统icon套路，自定义icon，然后在项目中引用，但是照做了一个没做通，卡住了，怎么办，先往下做！

Done-Q24：顶部导航条有选中效果

Q25：字体运用也是一个问题。

Tip17：我先记一笔，关于angular页面相应问题，通常在html页面没有加载完毕时，涉及一些js，页面会出问题，这个时候可以讲js相关代码延迟执行，语法如下：
setTimeout()和setInterval()
因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次。而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式，所以,完全是不一样的。

Tip18：有两种导航条前置方法，一种是使用z-index，另一种是外边套层<ion-header-bar>

Tip19:另外<ion-nav-bar> 不放在外面了，改放每页里面。结构为：

<ion-nav-bar>
  <ion-nav-title></ion-nav-title>
  <ion-nav-buttons><ion-nav-buttons>
</ion-nav-bar>

Tip20：关于CSS层，不存在以面盖点，只存在以点概面，点CSS决定最终式样。

Done-Q26:首次出现浏览器调试和手机ionic view调试界面不一致现象。
解释：还是一致的，引起混淆的原因就是ion-scroll底部那个莫名其妙的横向滚动条，其实坐标算的是没问题的，是那个横向滚动条引起的错位，官网论坛查到将其隐藏方法如下：

.scroll-view.scroll-x {
    overflow-x: hidden;  /* default value is 'scroll' */
}

Tip21：发现一个现象，像ion-scroll、ion-slide-box，如果设置成absolute，scroll的滚动代理就会失效，slide-box就会显示不正常，pager也不显示了，不全是受代理刷新影响。所以带滚动效果的ionic控件是否都应该设置成relative。

Tip22：我又悟到了一个道理，我感觉挺重要的，就是，在搭建ionic界面时，div等传统html组件元素都要写到ion-开头的标签内，这样ionic界面才能更好地工作；如果平级写在外面，就很有可能出现一些界面显示问题，如显示错位，就是你把div什么的写到外面，就好像某种泄露一样。所以，外面最好都是ion-什么，里面才是传统html元素。

Done-明天把工作cell码完，就做Tab-4。

Tip23：复合组件，通常情况下，都是一个absolute，一个relative；通常将游标图片设置为absolute。就是你感觉哪个是需要凭空放位置的，就需要将position设置成absolute。

**节点：**2016.12.14 17:49 Tab-3工作页大样搭建完毕，细节不予纠缠，先往下做。

Tab-4艺人库

---

ion-pane 也是一个ionic容器，但试了，不好使，所以沿用了ion-header-bar

草 突然 下岗了