小程序模板网

flex实现小程序导航

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

实现示意: 

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

wxml:

 

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

wxss:

 

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

如果需要字数限制的话:

 

					
  1. text{
  2. display:block;
  3. overflow:hidden;
  4. white-space:nowrap;
  5. text-overflow:ellipsis;
  6. }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23577.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询