微信小程序实现底部导航


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学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
sails框架的学习指南
Dec 22 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
seajs下require书写约定实例分析
May 16 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
Seajs源码详解分析
Apr 02 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
vue router 动态路由清除方式
May 25 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
杏林同学录(四)
2006/10/09 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP开发负载均衡指南
2010/07/17 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
JavaScript小技巧 2.5 则
2010/09/12 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python实用代码片段收集贴
2015/06/03 Python
Python Socket编程详细介绍
2017/03/23 Python
Django验证码的生成与使用示例
2017/05/20 Python
Django中Forms的使用代码解析
2018/02/10 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
2014年国培研修感言
2014/03/09 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby