微信小程序 flex实现导航实例详解


Posted in Javascript onApril 26, 2017

微信小程序 flex实现导航实例详解

微信小程序 flex实现导航实例详解

实现示意:

微信小程序 flex实现导航实例详解

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

wxml:

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

wxss:

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

如果需要字数限制的话:

text{ 
 display:block; 
 overflow:hidden; 
 white-space:nowrap; 
 text-overflow:ellipsis; 
}

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
微信扫码支付零云插件版实例详解
Apr 26 #Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 #Javascript
微信小程序 实例开发总结
Apr 26 #Javascript
AngularJS 霸道的过滤器小结
Apr 26 #Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 #Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 #Javascript
xmlplus组件设计系列之列表(4)
Apr 26 #Javascript
You might like
深入PHP curl参数的详解
2013/06/17 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
解决python 自动安装缺少模块的问题
2018/10/22 Python
Python的缺点和劣势分析
2019/11/19 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
python脚本和网页有何区别
2020/07/02 Python
python实现逻辑回归的示例
2020/10/09 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
回门宴父母答谢词
2014/01/26 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
校庆标语集锦
2014/06/25 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js