美文网首页
weex踩坑记录(1)

weex踩坑记录(1)

作者: 自律财富自由 | 来源:发表于2019-08-15 14:52 被阅读0次

    1、<text>组件会被转为p标签,对于字体的样式直接写在<text>组件上,写在外层div无效。
    2、背景图片直接用<image>标签,背景图片上的内容放在<image>标签之后,这样会自动放在背景图之上,不用设置层级。
    3、图片必须设置固定宽高,图片地址用绝对路径(http或者https)
    4、padding可简写, margin不要简写,因为margin简写在有的手机上会失效。
    5、border不要简写
    6、border-radius如果四个圆角大小相同,可简写;圆角大小不同,就拆开写。
    7、设置背景色,不要简写,在手机上无效。直接写background-color。
    8、文字溢出展示的css要用lines: 1;来指定最多显示的行数。然后加上以下代码:

      overflow: hidden;
      text-overflow: ellipsis;
      lines: 1; // 指定溢出的行数
      max-width: 492px;
    

    9、文字的颜色值要么六位颜色值#2B313D,要么简写的三位#fff, 要么英文red。
    10、如果使用了scroller, 要为它设置边框border的话,不要直接在scroller上写border, 手机上是无效的。可在外层包裹一个div, 在该div上设置border。
    11、weex一般使用flex布局,默认排列方向的column,不需要写display: flex。如果要横向布局,需加上flex-direction; row;来声明。最外层元素要居中显示的话,直接对该元素使用align-self: center; 不要使用margin; 0 auto;或者position: relative; left: 50%;transform: translateX(-50%);这种形式,在手机上是无效的。
    12、地址跳转请使用weex内置模块nav。

    const nav = weex.requireModule('nav')
    // 跳转
    nav.push({
      url: '',
      animation: true
    })
    

    相关文章

      网友评论

          本文标题:weex踩坑记录(1)

          本文链接:https://www.haomeiwen.com/subject/sjdzjctx.html