微信小程序实现底部导航


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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 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 运行效率总结(提示程序速度)
2009/11/26 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
深入分析PHP设计模式
2020/06/15 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
python中偏函数partial用法实例分析
2015/07/08 Python
Tornado 多进程实现分析详解
2018/01/12 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
授权委托书范本
2014/04/03 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
销售会议开幕词
2015/01/28 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS