之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的标签栏的样式，而当时我在网上有一个地方找到了这个模板，现在介绍给大家参考。

WXML代码：

导入src='http:/./template/nav/view class=' flex fix _ nav _ WP ' block wx : for=' { { nav data } } '模板为=' nav '数据=' { }.item}}'//block/view JS代码：

页面({ data : { nav data : [{ name : })购物车', //文本current: 1，//是否是当前页，0不是一是style: 0，//样式ico : '图标-仇家观里',//不同图标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-yikeappshouetubiao 35 '，fn: 'gotoMessages' }，{ name: '个人中心，current: 0，style: 0，ico : '图标-沃德，fn: ' bindViewMy ' }，]，}，})WXSS代码：

/**index.wxss**/.user info { display : flex flex-direction :柱；align-items:居中；} .用户信息-头像{ width : 128 rpx高度： 128rpxmargin: 20rpx边界半径： 50%;} .用户信息-昵称{ color: # aaa}。用户座右铭{页边距-top : 200 px；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。