微信小程序 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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现视频展示效果
May 30 jQuery
Vue实现移动端拖拽交换位置
Jul 29 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加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
Python中的装饰器用法详解
2015/01/14 Python
python 队列详解及实例代码
2016/10/18 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
用matplotlib画等高线图详解
2017/12/14 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
python内置数据类型之列表操作
2018/11/12 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
python中的对数log函数表示及用法
2020/12/09 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
化学相关工作求职信
2013/10/02 职场文书
高中生物教学反思
2014/02/05 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
庆七一宣传标语
2014/10/08 职场文书
简历中自我评价范文
2015/03/11 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
小学数学教学反思范文
2016/02/16 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server