用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

flex实现小程序导航

纸飞机 2018-3-8 09:33

作者:武兵,来自公众号 图说前端 实现示意: 1.链接顶部内边距,留出圆形图标的位置。 2.伪元素:before绘制圆形。 3.圆形中添加图标。 4.左右外边距控制间距,及促使在需要的地方换行。wxml: 资本 ……wxss:. ...

作者:武兵,来自公众号 图说前端

实现示意:

1.链接顶部内边距,留出圆形图标的位置。
2.伪元素:before绘制圆形。
3.圆形中添加图标。
4.左右外边距控制间距,及促使在需要的地方换行。

wxml:

  1. class="serviceMenu">
  2. url="http://xwbline.com/">资本
  3. ……

wxss:

  1. .serviceMenu{
  2. display:flex; //使用flex布局
  3. flex-wrap:wrap; //子元素换行
  4. justify-content:center; //子元素居中对齐
  5. padding:30rpx 0; //留出上下边距
  6. }
  7. .serviceMenu navigator{
  8. position:relative; //为了绝对定位
  9. padding-top:120rpx; //留出圆形图标的位置
  10. flex-basis:140rpx; //设定基础宽度
  11. margin:15rpx; //触发换行位置(会自动换算,不必考虑适配)
  12. text-align:center;
  13. font-size:24rpx;
  14. }
  15. //创建图标
  16. .serviceMenu navigator:before{
  17. content:"\20";
  18. position:absolute;
  19. top:0;
  20. left:50%;
  21. margin-left:-55rpx;
  22. width:110rpx;
  23. height:110rpx;
  24. border-radius:50%;
  25. background:#bbc1cd;
  26. }
  27. //设定不同图标。注意链接地址是绝对地址,因为小程序不支持相对地址的背景图。只支持image相对地址。
  28. .serviceMenu navigator:nth-child(1):before{
  29. background:#fc6e51 url(http://xwbline.com/icon_service_big01.png) no-repeat center center;
  30. }
  31. .serviceMenu navigator:nth-child(2):before{
  32. background:#48cfad url(http://xwbline.com/icon_service_big02.png) no-repeat center center;
  33. }
  34. ………………

如果需要字数限制的话:

  1. text{
  2. display:block;
  3. overflow:hidden;
  4. white-space:nowrap;
  5. text-overflow:ellipsis;
  6. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏