<强>微信小程序flex实现导航实例详解
实现示意:
1。链接顶部内边距,留出圆形图标的位置。
2.伪元素:在绘制圆形。
3.圆形中添加图标。
4 .左右外边距控制间距,及促使在需要的地方换行。
wxml:
& lt;视图类=皊erviceMenu”比;
& lt;导航器url=" http://xwbline.com/"祝辞资本& lt;/navigator>
……
& lt;/view>
之前
wxs:
.serviceMenu {
显示:flex; & # 8195;//使用flex布的局
flex-wrap:包装;& # 8195;//子元素换行
justify-content:中心;& # 8195;//子元素居中对齐
填充:30 rpx 0; & # 8195;//留出上下边距
}
.serviceMenu航海家{
位置:相对;& # 8195;//为了绝对定位
padding-top: 120 rpx; & # 8195;//留出圆形图标的位置
flex-basis: 140 rpx; & # 8195;//设定基础宽度
保证金:15 rpx; & # 8195;//触发换行位置(小程序会自动换算,不必考虑适配)
text-align:中心;
字体大小:24 rpx;
}//创建图标
.serviceMenu导航:{之前
内容:“\ 20”;
位置:绝对的;
上图:0;
左:50%;
margin-left: -55 rpx;
宽度:110 rpx;
身高:110 rpx;
这个特性:50%;
背景:# bbc1cd;
}//设定不同图标。注意链接地址是绝对地址,因为小程序不支持相对地址的背景图。只支持形象相对地址。
{前.serviceMenu导航:nth-child (1):
背景:# fc6e51 url (http://xwbline.com/icon_service_big01.png)没有重演中心中心;
}
{前.serviceMenu导航:nth-child (2):
背景:# 48 cfad url (http://xwbline.com/icon_service_big02.png)没有重演中心中心;
}
………………
之前
如果需要字数限制的话:
文本{
显示:块;
溢出:隐藏;
空白:nowrap;}
文本溢出:省略;
}
之前
,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
