微信小程序实现底部导航


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 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
TypeScript入门-接口
Mar 30 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
Openlayers实现地图全屏显示
Sep 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
详解Django中间件执行顺序
2018/07/16 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python 去除字符串中指定字符串
2020/03/05 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
python+opencv实现车道线检测
2021/02/19 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
行政办公室岗位职责
2014/03/18 职场文书
青春寄语大全
2014/04/09 职场文书
2014年度培训工作总结
2014/11/27 职场文书
自荐信模板大全
2015/03/27 职场文书
公司转让协议书
2016/03/19 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL