资讯专栏INFORMATION COLUMN

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

Wildcard / 482人阅读

摘要:移动端开发标签中的属性,在去除跳转需求,事件选用而不是,使用会失效。或者此外注意的地方有两点在用写事件相关代码时,要使用事件委托的形式的时效要比要快。老版本语法老版本语法混合版本语法新版本语法待续

移动端开发 a标签中的href属性,在去除跳转需求,事件选用click而不是tap,tap使用会失效。
$(document).on("click", ".J_Remove", function(e) {
    return false;
    //或者
    e.preventDefault();
})

此外注意的地方有两点:

在用jquery写事件相关代码时,要使用事件委托的形式;

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待续

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88436.html

相关文章

  • 总结常见开发问题解决

    摘要:移动端开发标签中的属性,在去除跳转需求,事件选用而不是,使用会失效。或者此外注意的地方有两点在用写事件相关代码时,要使用事件委托的形式的时效要比要快。老版本语法老版本语法混合版本语法新版本语法待续 移动端开发 a标签中的href属性,在去除跳转需求,事件选用click而不是tap,tap使用会失效。 $(document).on(click, .J_Remove, function(...

    xiaoxiaozi 评论0 收藏0
  • 内存 问题- 收藏集 - 掘金

    摘要:然而,中依然有可能发生内存泄漏。所以你的安卓快速定位解决内存泄漏掘金昨天是个好日子,程序员的节日,在这里给所有的程序员送上一份迟到的祝福。应用内存泄漏的定位分析与解决策略掘金,大家好,我是。 Android 性能优化之巧用软引用与弱引用优化内存使用 - Android - 掘金前言: 从事Android开发的同学都知道移动设备的内存使用是非常敏感的话题,今天我们来看下如何使用软引用与弱...

    TIGERB 评论0 收藏0
  • 总结开发过程踩到的坑(一)

    摘要:触摸情况下,如果释放时没有达到过渡条件而回弹时不会触发这个函数获取当前索引回调函数,当你轻触后执行。设置回调函数,用来处理服务器响应,使用。 在日常工作中,时常会碰到各种各样的坑,有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上,希望自己能够跨越重重阻碍,越走越远。学会时常总结,不断提升自己。 本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,一方面加深自...

    instein 评论0 收藏0

发表评论

0条评论

Wildcard

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<