微信小程序实现底部导航

<import src=\"../../template/nav\" />
 <view class=\"flex fix_nav_wp\">
 <block wx:for=\"{{navData}}\">
   <template is=\"nav\" data=\"{{...item}}\"/>
</block>
</view> 

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\'
   },
  ],
 
 },
 
})

/**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;
}