美文网首页
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入门踩坑记录

    Weex入门踩坑记录

  • weex踩坑记录(1)

    1、组件会被转为p标签,对于字体的样式直接写在组件上,写在外层div无效。2、背景图片直接...

  • uniApp-study

    1. weex-image(nvue)踩坑 https://weex.apache.org/zh/docs/com...

  • weex踩坑记录

    weex版本1.5.3npm版本 6.4.1 请求 调用本地包,文件请求使用nat.js http://natjs...

  • Weex 踩坑记录

    1、运行 npm start ,报错如下:webpack-dev-server: command not foun...

  • weex踩坑记录(2)

    1、在使用storage客户端存储的时候, 变量不能使用局部变量的形式,也就是下面这种是获取不到的,或者获取到了,...

  • weex踩坑记录(4)

    1、weex中默认的css样式不要写: 2、color属性都写全,不然爆出警告(这个可能跟项目的配置有关)colo...

  • weex踩坑记录(3)

    1、loadmore事件不会在web端触发2、不支持百分比单位3、垂直水平居中: justify-content:...

  • weex踩坑记录(5)

    1、如果你想让你scroller容器内的元素平均分配空间, 那么 在scroller外层包裹一个div, 给这个d...

  • weex填坑指南和自己的感受

    最近,在做新版app的遇到了一堆的坑,是时候总结一波!谨防踩坑!1.weex很多样式不支持具体可以看weex官方文...

网友评论

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

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