clteam / h5skills

移动端页面一些坑

h5skills

移动端页面一些坑

h5skills's Issues

ios position fixed 坑

这个还没找到好的解决方法，先 mark

可能最好的解决方法就是不用 fixed 😏

关于Uglifyjs，在build时对于一些组件es6语法无法正确转译的情况

Vue.js渲染函数错误

😡 错误描述

在页面{{xxxx.toLocalString()}}的时候Vue显示如下警告：

Error in render function: "TypeError: Cannot read property 'toLocaleString' of undefined"

后改为过滤器方式{{xxxx | convertNum}}

filters: {
    convertNum (val) {
        return val.toLocalString()
    }
}

依然报错。

😃 正解

filters: {
    convertNum (val) {
        if (val) return val.toLocalString()
    }
}

加一个 if 判断即可

截断文字，后面显示...

如下代码，Sass

// 截断文字，后面显示...
@mixin textEllipsis($showLine:2) {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  /* autoprefixer: off */
  -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776
  /* autoprefixer: on */
  -webkit-line-clamp:$showLine;
}

问题
-webkit-box-orient: vertical属性不被Webpack处理，被忽略

解决方案
/* autoprefixer: off /
-webkit-box-orient: vertical; // 参考 postcss/autoprefixer#776
/ autoprefixer: on */

iPhone 5s input placeholder 偏上

input 的placeholder会出现文本位置偏上的情况：

PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal;