微信小程序实现底部导航

2018-11-05 37 w10322331

之前我的做微信小程序的时候,需要一个底部导航样式,但是我搜索的时候,大部分都是写的一些小程序自定义的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有关的小细节
Apr 02 35
探讨JavaScript中的Rest参数和参数默认值
Jul 29 41
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 46
微信小程序 获取相册照片实例详解
Nov 16 40
Vue组件tree实现树形菜单
Apr 13 45
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 48
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 111
手机访问当前页面