『总结』常见开发问题解决

2024年4月12日 165次阅读 来源: isNaN

移动端开发

a标签中的href属性，在去除跳转需求，事件选用click而不是tap，tap使用会失效。

$(document).on('click', '.J_Remove', function(e) {
    return false;
    //或者
    e.preventDefault();
})

此外注意的地方有两点：

  1. 在用jquery写事件相关代码时，要使用事件委托的形式；
  2. return false的时效要比e.preventDefault()要快。

强制文本显示

单行显示语法：

white-space:nowrap;

让一段文字在固定宽度在一行显示，最后一个字符为省略标记(…)，css样式如下

div{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

多行文本最后省略号：

div{
  display: -webkit-box; 
  overflow: hidden; 
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

这里用到了文本溢出显示省略号的，即设置溢出文本显示为省略标记：

语法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;

clip：表示直接裁切溢出的文本；
ellipsis：表示文本溢出时，显示省略标记(…)，省略标记代替最后一个字符；
ellipsis-word：表示文本溢出时，也是显示省略标记(…),不同的是，省略标记代替的是最后一个词)

吸顶效果的实现

css3新增position：sticky,可采用此方法，但有兼容问题
在此推荐一个版本解决方案：

if(IOS){
    $(target).css({
        "position": "sticky",
        "top"："0",
        "left": "0"//由项目需求决定
    })
}else{
    $(target).css({
        "position": "position",
        "top"："0",
        "left": "0"//由项目需求决定
    })
}

Flex兼容性解决方案

flex为布局而生，但在目前浏览器中仍有不支持的特例。

display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex;

2017.09.08待续

    原文作者：isNaN
    原文地址: https://segmentfault.com/a/1190000011058611
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞