微信小程序实现底部导航


Posted in Javascript onNovember 05, 2018

之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的tabBar的样式,而当时我在网上有一个地方找到了这个模板,现在介绍给大家参考。

微信小程序实现底部导航

WXML代码:

<import src="../../template/nav" />
 <view class="flex fix_nav_wp">
 <block wx:for="{{navData}}">
   <template is="nav" data="{{...item}}"/>
</block>
</view>

JS代码:

Page({
 data: {
  navData: [
   {
    name: "购物车", //文本
    current: 1,  //是否是当前页,0不是 1是
    style: 0,   //样式
    ico: 'icon-qiugouguanli', //不同图标
    fn: 'gotoCompanyIndex'  //对应处理函数
   }, {
    name: "我的名片",
    current: 0,
    style: 0,
    ico: 'icon-mingpianjia',
    fn: 'gotobusinessCard'
   }, {
    name: "发布中心",
    current: 0,
    style: 1,
    ico: '',
    fn: 'gotopublish'
   }, {
    name: "消息中心",
    current: 0,
    style: 0,
    ico: 'icon-yikeappshouyetubiao35',
    fn: 'gotoMessages'
   }, {
    name: "个人中心",
    current: 0,
    style: 0,
    ico: 'icon-wode',
    fn: 'bindViewMy'
   },
  ],
 
 },
 
})

WXSS代码:

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}
 
.userinfo-nickname {
 color: #aaa;
}
 
.usermotto {
 margin-top: 200px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
jquery foreach使用示例
Sep 12 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 #Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 #Javascript
微信小程序http连接访问解决方案的示例
Nov 05 #Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 #Javascript
浅谈Vue数据响应
Nov 05 #Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 #Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 #Javascript
You might like
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
家长对孩子的寄语
2015/02/26 职场文书
今日说法观后感
2015/06/08 职场文书
酒店开业主持词
2015/07/02 职场文书
中学教师教学工作总结
2015/08/13 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
redis数据一致性的实现示例
2022/03/18 Redis
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android