微信小程序实现底部导航


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 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
javascript判断复选框是否选中的方法
Oct 16 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
React组件生命周期详解
Jul 03 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
详解vue 组件注册
Nov 20 Vue.js
javascript实现计算器功能详解流程
Nov 01 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
对 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
Angular4学习笔记router的简单使用
2018/03/30 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python创建系统目录的方法
2015/03/11 Python
python 如何在测试中使用 Mock
2021/03/01 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
2013年高中生自我评价
2013/10/23 职场文书
自荐信怎么写呢?
2013/12/09 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
创业融资计划书
2014/04/25 职场文书
避暑山庄导游词
2015/02/04 职场文书
部队2015年终工作总结
2015/04/02 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android
go goth封装第三方认证库示例详解
2022/08/14 Golang