一些前端的小技巧

 

本人原本是java后台程序员一枚，因为最近接触到微信公众号，不得不从事一些前端的工作。

作为一名前端小白，在项目的学习过程中，本着学习的原则，记录和累积自己收集和运用到的一些小技巧，方便以后的学习也希望能给其他小白一些干货和指出一些坑吧。大神勿喷，欢迎指导。

1，利用js遍历json对象数组(列表)

可以使用for in 没错，但是！！！（特别是有java或其他基础的人来说）坑点在于in前面的参数是下标！！！不是一个数组的元素（不是一个列表的一个项），所以注意！网上有些答案还是错的！正确例子如下：(当然也可以使用最基本的for循环的语句)

var all = ItemList for (var p in all) { 
    // 遍历json数组时，这么写p为索引，
    var Item = all[p] ;// 取出json对象 
}

2，单选按钮radio点击选项即可选中（不必要点按钮）简单，使用一个即可，如下：

    //方式一:
    男
    

    //方式二:
    
      男
    

3，使标签始终置于页面底部（顶端等 以此类推）
如手机端网页常见的下端的按钮，只需配置css样式：

 

   .atbottom{
    position:fixed;  // 这里最新更正，始终在底部的应该用position:fixed,absolute是相对于父级有position属性的元素进行的定位
    bottom: 0;
    width: 100%;
  }

 

 

4，当内容太长时用省略号代替

• 使用css的方法：

.title{ 
    width:300px; /* 一定要指定一个宽度 */ 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}

参考：http://blog.csdn.net/u012531787/article/details/18553885

 

• 使用js的方法： 其实就是进行字段截取，然后用“...”替换拼接，个人很不建议，字数其实无法确认，还涉及到分辨率的问题，所以不推荐，所以也并不想描述。

 

• 如果是微信小程序的话：你会发现上面的css根本不起作用，不过还是有其特有的写法：

    单行：

 

.team-content {
  width: 500rpx;
  display:-webkit-box;
  -webkit-line-clamp:1;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  word-break:break-all;
}

     多行：

.homework {
  display: -webkit-box;  /*设置为弹性盒子*/
  -webkit-line-clamp: 5;  /*最多显示5行*/
  overflow: hidden;  /*超出隐藏*/
  text-overflow: ellipsis;  /*超出显示为省略号*/
  -webkit-box-orient: vertical;
  word-break: break-all;  /*强制英文单词自动换行*/
}

参考：https://www.jianshu.com/p/ecf3910e2008

 

 

 

*************************目前只积累到这些，后期将不定期更新，欢迎批评指正！

对于与vue相关的实用技巧将单独整理

 

结束和声明

 

以上纯属个人观点和体会希望这篇文章能对你有所帮助！欢迎大家来一起讨论分享干货，或者批评指正！更加热切盼望各路大神前辈给些指导和建议！以后会不定期更新心得和总结，包括学习过程中各种异常和解决办法等等。再见！

转载请注明出处！或者联系我！（[email protected]）