微信小程序实现底部导航


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 相关文章推荐
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
详解JavaScript树结构
Jan 09 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 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对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
vue中的scope使用详解
2017/10/29 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
django 单表操作实例详解
2019/07/30 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python 创建TCP服务器的方法
2020/07/28 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
红旗团支部事迹材料
2014/01/27 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
班长自荐书范文
2014/02/11 职场文书
商超业务员岗位职责
2014/03/12 职场文书
搞笑创意广告语
2014/03/17 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
股权转让协议书
2014/12/07 职场文书
个人工作能力自我评价
2015/03/05 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS