小程序底部导航栏仿真自定义

小程序底部导航栏仿真自定义

最近做了一个小项目，涉及到这个的应用先上图:(不好意思哈，不会做gif效果就这样展示了)

                 

前言：

其实直接用navigatTo 或者 navigatBack 就可以实现自定义导航栏的效果了；

为什么会 不嫌麻烦的 想到做一个这样的自定义仿真导航栏呢？

不妨先把代码拿回去试试效果！

下面直接粘代码了啊:

由于多个页面需要用到同样的代码块，所以这里用了小程序模板组件 template

先上template代码：/pages/template/template.wxml

<template name="tabbars">
  <view class='tabs'>
    <navigator open-type='navigate{{t.page1}}' delta='{{t.p1}}' url="{{t.url1}}" class="tab beside {{t.choosed == 0 ? 'blue':'dark'}}" hover-class='tabhover'>
      <image src="/images/fang{{t.choosed == 0 ? '1':'2'}}.png"></image>
      <view>首页</view>
   </navigator>

    <navigator open-type='navigate{{t.page2}}' delta='{{t.p2}}' url="{{t.url2}}" class="tab mid  {{t.choosed == 1 ? 'blue':'dark'}}" hover-class='tabhover'>
      <image src="/images/bed{{t.choosed == 1 ? '1':'2'}}.png"></image>
      <view>房型</view>
    </navigator> 

    <navigator open-type='navigate{{t.page3}}' delta='{{t.p3}}' url="{{t.url3}}" class="tab beside {{t.choosed == 2 ? 'blue':'dark'}}" hover-class='tabhover'>
      <image src="/images/ren{{t.choosed == 2 ? '1':'2'}}.png"></image>
      <view>我的</view>
    </navigator>
  </view>
</template>

template wxss部分：/pages/template/template.wxss

.tabs{
  background-color: rgb(255,255,255);
  height: 100rpx;
  position: fixed;
  z-index: 99;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-top:3rpx solid rgb(243,243,243);
  /* border: 1rpx red solid; */
}
.beside{
  width: 33%;
}
.mid{
  width: 34%;
}
.tab{
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  /* border: 1rpx red solid; */
  font-size: 22rpx;
}
.tab image{
  height: 60%;
  width: 60rpx;
}

.blue{
  color: rgb(71,176,231);
}

.dark{
  color: rgb(114,114,114);
}
.tabhover{
  background-color: rgb(203,203,203);
}

这里就是三个页面引入 template 以及 js 跳转参数设置的代码（仅包含自定义跳转相关的代码）

首页 index ：/pages/index/index.wxml
 

<navigator url="/pages/chooseRoom/chooseRoom"> 预定酒店</navigator>

 房型选择 choosRoom wxml： /pages/chooseRoom/choosRoom.wxml

<import src="/pages/template/template.wxml" />
   <template is="tabbars" data="{{t}}">
   </template>

房型选择 chooseRoom wxss：/pages/chooseRoom/chooseRoom.wxss

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

房型选择 choosRoom js : /pages/chooseRoom/chooseRoom.js

  data: {
    //优化页面跳转参数
    t: {
      choosed: 1,                  //选中状态判断参数 
      url1: '/pages/index/index',  // url1首页路径
      url2: '',                    // url2 chooseRoom路径
      url3: '/pages/myCenter/myCenter',  //url3 myCenter页面路径
      p1: '',                       //返回首页delta值
      p2: '',                       //返回 chooseRoom页面的 delta值
      p3: '',                       //返回 myCneter 页面的 delta值 
      page1: '',    // 到首页的optenType字符串，决定是 navigatTo 还是navigatBack
      page2: '',    // 到chooseRoom页的optenType字符串，决定是 navigatTo 还是navigatBack
      page3: ''     // 到myCenter页的optenType字符串，决定是 navigatTo 还是navigatBack
    } 
  },

  //页面跳转优化，参数设置
  betterNavigator: function() {
    var t_ = this.data.t
    var pages = getCurrentPages();
    //遍历历史页面信息
    for (let i = pages.length - 1; i >= 0; i--) {
      //如果历史页面有index页面 就设置 navigateback
      if (pages[i].route == "pages/index/index") {
        t_.p1 = pages.length - 1 - i
        t_.page1 = 'Back'
        t_.url1 = ''
        // console.log("i2:", i);
        break
      }
    }

    //如果历史页面有myCenter页面 就设置 navigateback
    for (let i = pages.length - 1; i >= 0; i--) {
      if (pages[i].route == "pages/myCenter/myCenter") {
        t_.p3 = pages.length - 1 - i
        t_.page3 = 'Back'
        t_.url3 = ''
        break
      }
    }
    this.setData({
      t: t_
    })
    // console.log("t_2:",t_);
  },

个人中心 myCenter  wxml : /pages/myCenter/myCenter.wxml

<import src="/pages/template/template.wxml" />
    <template is="tabbars" data="{{t}}" />

个人中心 myCenter  css : /pages/myCenter/myCenter.wxss

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

个人中心 myCenter  js : /pages/myCenter/myCenter.js

 data: {
    //优化页面跳转参数
    t: {
      choosed: 2,                  //选中状态判断参数 
      url1: '/pages/index/index',  // url1首页路径
      url2: '',                    // url2 chooseRoom路径
      url3: '/pages/myCenter/myCenter',  //url3 myCenter页面路径
      p1: '',                       //返回首页delta值
      p2: '',                       //返回 chooseRoom页面的 delta值
      p3: '',                       //返回 myCneter 页面的 delta值 
      page1: '',    // 到首页的optenType字符串，决定是 navigatTo 还是navigatBack
      page2: '',    // 到chooseRoom页的optenType字符串，决定是 navigatTo 还是navigatBack
      page3: ''     // 到myCenter页的optenType字符串，决定是 navigatTo 还是navigatBack
    } 
}

 //页面跳转优化，参数设置
 betterNavigator: function() {
    var t_ = this.data.t
    var pages = getCurrentPages();
    // console.log("pages3:", pages[0].route)
    //如果历史页面有index页面 就设置 navigateback
    for (let i = pages.length - 1; i >= 0; i--) {
      // console.log("i1:", i);
      if (pages[i].route == "pages/index/index") {
        t_.p1 = pages.length - 1 - i
        t_.page1 = 'Back'
        t_.url1 = ''
        //  console.log("i2:",i);
        break
      }
    }
    //如果历史页面有chooseRoom页面 就设置 navigateback
    for (let i = pages.length - 1; i >= 0; i--) {
      if (pages[i].route == "pages/chooseRoom/chooseRoom") {
        t_.p2 = pages.length - 1 - i
        t_.page2 = 'Back'
        t_.url2 = ''

        break
      }
    }
    this.setData({
      t: t_
    })
    // console.log("t_3:", t_);
 },

以上内容主要涉及到微信小程序的 navigator组件

后记：

为什么我要 做一个这样的自定义的 仿真 导航栏呢？？

如果把代码拿下去体验了的可能会注意到：

1.这个页面跳转的时候，滑动效果的视觉体验比navigatBack要 好；

2.如果仅仅用navigatTo 也有滑动效果啊，但是呢，这样会造成 currentPage 里面积累的页面太多，手机会很卡，而且页面单一的向左滑动也会造成审美疲劳，

综上所述：做一个这样的自定义仿真导航栏是为了更好的用户体验。

好了好了：该装的b都装完了，该贴的代码也贴了，

        有需要进一步交流的小伙伴，可以加qq群找我：635248448