微信小程序实现底部导航


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中创建对象的几种方法总结
Nov 01 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
基于node.js之调试器详解
Aug 22 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 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 之入门篇
2006/12/04 PHP
php session安全问题分析
2011/06/24 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php简单实现MVC
2015/02/05 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
JavaScript 创建对象
2009/07/17 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python解析xml文件实例分享
2013/12/04 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
临床医师个人自我评价
2014/04/06 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
python_tkinter事件类型详情
2022/03/20 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang