说个我一直纠结的apicloud应用页面美观性的问题!!!

qing

我们用过的原生的app很多,大家肯定也看到了原生app跟webApp的区别.一句话来说就是原生app的界面很精细,线条各种优美,而我们群里目前做出的app呢?一看就跟原生的差一个档次,就像是网页的排版,原因呢也就是我们确实是用Html+css写的,
下面我就举个最明显的例子,原生app与apicloud做出来的app的线条区别,就是这个区别导致我们做出来的app档次跟原生的档次差了一大截(就算UI设计的再好,线条还是粗的一比...)
但是看到官方demo用的ListView模块我又看到了希望,我觉得官方可以把原生的UI风格封装成更多漂亮的UI模块给开发者使用,让我们的apicloud开发出的app更高大上,下面上图大家看看比较下区别:

手机qq的页面

我们做的页面

官方demo里的LisView

所以,优美的风格肯定是能实现的,就看AC了

毛腿

谁说不能1px
这是 正常的 实际上1px 被 缩放到了 2px 或者 3px




这是处理后的 真1px



用渐变方案 1px 被放到2px 50%就是1px

.border-top {
  background-image:-webkit-linear-gradient(top,#e4e4e4 50%,transparent 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position:top;
}

.border-bottom {
  background-image:-webkit-linear-gradient(bottom,transparent 50%,#e4e4e4 50%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position:bottom;
}

.border-left {
   background-image:-webkit-linear-gradient(left,transparent 50%,#e4e4e4 50%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
   background-position:left;
}

.border-right {
   background-image:-webkit-linear-gradient(right,#e4e4e4 50%,transparent 50%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
   background-position:right;
}
特么，老子手贱，见了lz 的 帖子，费了我2个小时。
一个div 只能用 一个样式 不能同时使用 .border-bottom 和 .border-top 如果要上下都有border，就在下面建个div 在设置 border-top

YonBIP社区

必须美观，必须高大上

梁红博

其实HTML也可以做细线条，就是不要用px，用em单位，然后设置小时值，比如0.01em

qing

梁红博 发表于 2014-11-20 19:48
其实HTML也可以做细线条，就是不要用px，用em单位，然后设置小时值，比如0.01em ...

不行的,都试过了,1px换算成em后是0.0625em,你小于这个值就会无效,就是没样式了,大于他就还是粗线条,你可以试试

qing

梁红博 发表于 2014-11-20 19:48
其实HTML也可以做细线条，就是不要用px，用em单位，然后设置小时值，比如0.01em ...

不行的,都试过了,1px换算成em后是0.0625em,你小于这个值就会无效,就是没样式了,大于他就还是粗线条,你可以试试

大爱杰伦

qing 发表于 2014-11-20 20:53
不行的,都试过了,1px换算成em后是0.0625em,你小于这个值就会无效,就是没样式了,大于他就还是粗线条,你可 ...

即将 推出 支持 完全自定义的listView,敬请期待.  

毛腿

可以了 真1px 见楼上

陈汝冰

期待楼上的源码分享

笨阿哼

马克 收藏