小程序实现导航栏的两种方式

小程序实现导航栏的两种方式

1. 使用微信自带API组件tabBar
2. 自定义导航栏。

使用微信自带API组件tabBar

在app.json中进行设置
“tabBar”: {
“borderStyle”: “black”,
“position”: “bottom”,
“backgroundColor”: “#FFFFFF”,
“color”: “gray”,
“selectedColor”: “#DF5054”,
“list”: [
{
“pagePath”: “pages/main/main”,
“iconPath”: “/images/home.png”,
“selectedIconPath”: “/images/home.png”
},
{
“pagePath”: “pages/ARscan/ARscan”,
“iconPath”: “/images/AR.png”,
“selectedIconPath”: “/images/AR.png”
},
{
“pagePath”: “pages/mailer/mailer”,
“iconPath”: “/images/mailer.png”,
“selectedIconPath”: “/images/mailer.png”
}
]
}

自定义导航栏。

1.先定义一个模板template,建立wxml和wxss两个文件
template.wxml

<template name="tabbar">
  <view class='footer'>
    <view class='footer_list' wx:for="{{listInfo}}" data-current="{{index}}" wx:key="this" bindtap="chooseImg">
      <image class="footer-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
      <image class="footer-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
      <view class="footer-text">{{item.title}}</view>
    </view>
  </view>
</template>

template.wxss

/*自定义底部导航  */
.footer {
height:110rpx;
width:100%;
position: fixed;
bottom:0;
left:0;
border-top:1px solid #ddd;
}
.footer_list{
float: left;
width:17%;
height:100%;
text-align:center;
padding-top:25rpx;
margin-left:60rpx;
margin-right:62rpx;
}
.footer-image{
   width:40%;
   height:45%;
}
.footer-text{
    font-size: 22rpx;
}
/*底部导航  */

2.在需要展示导航栏的页面引入模板
main.wxml(其中listInfo和curIdx是需要传输给模板的数据)

<import src ="../logs/logs.wxml"/>
<template is="tabbar" data="{{listInfo,curIdx}}"/>

3.引入模板的css样式
main.wxss

@import "/pages/logs/logs.wxss";

4.在使用模板的main.js页面传入需要传给模板的数据

// pages/main/main.js
Page({
  data: {
    curIdx: 0,
    listInfo: [
      {
        imgUrl: '/images/home.png',
        curUrl: '/images/home.png',
      },
      {
        imgUrl: '/images/AR.png',
        curUrl: '/images/AR.png',
      },
      {
        imgUrl: '/images/mailer.png',
        curUrl: '/images/mailer.png',
      },
    ]
  },
  chooseImg: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
    //  console.log(e)
    console.log(this.data.curIdx)
    if (this.data.curIdx == 0) {
      wx.navigateTo({
        url: '../main/main',
      })
    } else if (this.data.curIdx == 1) {
      wx.navigateTo({
        url: '../AR/AR',
      })
    }else{
    wx.navigateTo({
        url: '../mailer/mailer',
      })
    }
  }
})

5.在另外两个页面同样仿照main引入的方法引入模板。

两种方式优劣

第一种用官方自带的导航我在使用时有一个缺点就是不能跳转到第三方的接口界面。

第二种自定义的导航跳转界面整体都会跳转，视觉效果没有tabBar组件好用。