微信小程序实现底部导航


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变量作用域更轻松
Oct 25 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
php生成随机数的三种方法
2014/09/10 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PDO::rollBack讲解
2019/01/29 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
Python使用folium excel绘制point
2019/01/03 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
装修设计师求职信
2014/02/26 职场文书
演讲稿格式
2014/04/30 职场文书
签约仪式策划方案
2014/06/02 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
结婚堵门保证书
2015/05/08 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android