微信小程序实现底部导航


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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
利用js实现简易红绿灯
Oct 15 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
对javascript继承的理解
2016/10/11 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
微信小程序自定义弹出层效果
2020/05/26 Javascript
python封装对象实现时间效果
2020/04/23 Python
python日志记录模块实例及改进
2017/02/12 Python
Python清空文件并替换内容的实例
2018/10/22 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
如何基于python实现归一化处理
2020/01/20 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
质检部职责
2013/12/28 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
商场收银员岗位职责
2015/04/07 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
详细总结Python常见的安全问题
2021/05/21 Python