微信小程序自定义导航栏组件

时间  2019-11-08
标签 微信 程序 自定义 导航 组件 繁體版
原文   原文链接

相信不少小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求，不够要说明的是小程序右上角的胶囊是不能自定义的哦，除了胶囊其余地方都是能够根据本身的项目而定了，在一次小程序开发中就须要对顶部进行自定义在此记录一下本身封装这个组件的过程。json

组件编写

既然今天须要把导航栏封装为组件那么就须要如下几个步骤：小程序

组件结构搭建

首先搭建一个以下图的结构：微信小程序

而后在index中引入刚刚建立好的组件：

记得在json文件中添加引用路径如图一，此时就会看到首页效果以下：

组件基础代码编写

此时咱们就须要根据官方文档查看得知若是要定制必须在配置文件中修改默认的配置文件，其实这里能够针对某个页面page进行设置，以index为例在index.json文件中配置以下代码便可看到以下效果：api

这个时候咱们就能够开始写本身想要的样子了，首先写一个简单的就只有一个返回按钮，当开始写的时候就会发现一个很大的问题，这块高度多少？最上面的状态栏高度又是多少？貌似被这两个问题难住了，这个时候再去看看官方的api文档你会发现能够获取系统当前更多参数里面就有状态栏高度，如图：

其实想一想咱们只知道状态栏高度，除了状态栏的高度其他高度呢？又是一个问题。从微信小程序的官方设计文档中能够知道这部分高度貌似同样高，如图：

貌似这块多高均可以，毕竟还能够向下延伸，通过屡次测试(可能不许确)在苹果好安卓仍是会有差异的，因此本身弄了一个适配一部分的(貌似旧手机不支持沉沉侵式)。可能废话太多，直接上代码吧

结构
<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view>
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>
复制代码

这里的主要思路就是用fixed定位，后面会有内容顶到底部的布局，因此所有用定位会方便些，总体就两个部分一个是状态栏一个就是标题和按钮的部分了。bash

样式
.topbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.status {
  width: 100%;
}
.navbar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.navbar_back {
  padding: 0 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.navbar_back image {
  width: 21rpx;
  height: 34rpx;
}

.navbar_title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
}
.navbar_title view {
  width: 40%;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 38rpx;
}
复制代码

样式中没有太多的东西，惟一须要说的就是大部分模块都是定位作的，惟一没考虑好的就是标题太长很差处理，这里用了简单粗暴的方法给设定一个宽度。微信

逻辑处理
Component({
  properties: {
    /**
     * 自定义返回事件处理
     * customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
     */
    customBackReturn: {
      type: Boolean,
      value: false
    }
  },
  data: {

  },
  methods: {
    backClick() {
      if (this.data.customBackReturn) {
        this.triggerEvent("customBackReturn")
      } else {
        if (getCurrentPages().length == 1) {
          wx.switchTab({
            url: '/pages/index/index',
          })
        } else {
          wx.navigateBack({
            delta: 1
          })
        }
      }
    }
  },
  attached() {
    var self = this;
    wx.getSystemInfo({
      success(res) {
        var isIos = res.system.indexOf('iOS') > -1;
        self.setData({
          statusHeight: res.statusBarHeight,
          navHeight: isIos ? 44 : 48
        })
      }
    })
  }
})
复制代码

逻辑中主要在两个地方一个是获取系统信息时对于导航高度的判断，另一个是返回上一页的逻辑，默认就是打开首页(注意用的api)，若是有自定义事件就用自定义事件customBackReturnapp

效果

目前效果就和没有自定义以前差很少就是一个普通的返回按钮和标题文字，以下图：布局

那么这样一个简单的自定义导航栏就ok了，可是若是是这样那我还自定义干吗用小程序自带的不是更好，因此咱们要继续改进，给加一个返回主页的按钮。

带返回按钮的导航

小程序中特别是分享出去的页面，若是没有一个返回主页的按钮，用户更本不知道怎么回到小程序的主页，因此给用户带来了很大的不便，所以这样的需求就必需要有了，若是实现呢？其实很简单，毕竟已经出来一个了，须要的就是加一个上去就好了。测试

结构
<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_home'>
      <image src='../images/black_back.png' bindtap='backClick'></image>
      <image src='../images/home_black.png' bindtap='homeClick'></image>
    </view>
    <!-- <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view> -->
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>
复制代码

你们注意到我把以前的代码注释了而不是直接在前面的代码上修改，其实这里留着是为了后面能够自定义想要那种导航形式。flex

样式
.navbar_home {
  margin-left: 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 33rpx;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0,0,0,0.2);
  box-sizing: border-box;
  padding: 10rpx 0;
}

.navbar_home image:first-child {
  width: 21rpx;
  height: 34rpx;
  padding: 0 32rpx;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.navbar_home image:last-child {
  width: 37rpx;
  height: 35rpx;
  padding: 0 32rpx;
}
复制代码

一样的样式也只是在以前的基础上增长了上面这些样式。

逻辑
homeClick() {
      wx.switchTab({
        url: '/pages/index/index',
      })
    }
复制代码

逻辑也只是在methods中添加一个返回主页的事件而已，这里须要你们根据本身的项目状况而定。

效果

样式你们能够根据本身项目而定。

到这两部分的功能都完成了，可是若是如今咱们在首页中添加一些内容你就会发现问题了，以下：

咱们的内容也跑到上面了，不过这么一想内容顶到顶部不就是这种效果吗，因此解决了这个问题，可如今的问题是不想要这种怎么办呢？想一想这个应该很好办啊，我在这一部分给加一个等高的块不定位不就能够了，因此如今就来实现它，代码以下： 

<view style="height:{{statusHeight+navHeight}}px" hidden='{{false}}'></view>
<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_home'>
      <image src='../images/black_back.png' bindtap='backClick'></image>
      <image src='../images/home_black.png' bindtap='homeClick'></image>
    </view>
    <!-- <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view> -->
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>
复制代码

效果以下：

当咱们把false改成true是就能够获得内容顶到顶部的效果了，因此这样就实现了两种效果，既然咱们这里是封装为组件，那么咱们不可能就这样写的，须要进行一些封装，而后给其余页面配置而后使用，因此须要改造。

封装导航栏使其可定制化

为了能使使用更加方便，须要对上面的导航栏进行进一步封装以适应不一样需求。

结构改造

首先须要改造的就是结构，让更多的选项可以进行配置，结构改造以下：

<view style="height:{{statusHeight+navHeight}}px" hidden='{{header.hiddenBlock}}'></view>
<view class='topbar' style="background:{{header.headerbg}}">
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <block wx:if="{{header.slot}}">
      <slot></slot>
    </block>
    <block wx:else>
      <view class='navbar_home' wx:if="{{header.homeCapsule}}" style="background:{{header.capsulebg}};border:{{header.capsuleborder}}">
        <image src='../images/black_back.png' bindtap='backClick' style="border-right:{{header.capsulesep}}"></image>
        <image src='../images/home_black.png' bindtap='homeClick'></image>
      </view>
      <view class='navbar_back' bindtap='backClick' wx:else>
        <image src='../images/black_back.png'></image>
      </view>
      <view class='navbar_title' style="height:{{navHeight}}px">
        <view style="color:{{header.fontColor}};font-size:{{header.fontSize}}">{{header.title}}</view>
      </view>
    </block>
  </view>
</view>
复制代码

上面全部的参数都是能够配置的，这就大大的给了开发者定制不一样风格了，若是仍是有不符合的建议你直接修改上面的代码或者本身封装一个更好。

逻辑改造
Component({
  properties: {
    header: {
      type: Object,
      value: {
        homeCapsule: false,
        headerbg: "#fff",
        title: "",
        fontColor: "#000",
        fontSize: '16',
        hiddenBlock: false,
        capsulebg: 'rgba(0,0,0,0.2)',
        capsuleborder: '1px solid rgba(0, 0, 0, 0.1)',
        capsulesep: '1px solid rgba(255,255,255,0.2)',
        slot: false
      }
    },
    /**
     * 自定义返回事件处理
     * customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
     */
    customBackReturn: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    backClick() {
      if (this.data.customBackReturn) {
        this.triggerEvent("customBackReturn")
      } else {
        if (getCurrentPages().length == 1) {
          wx.switchTab({
            url: '/pages/index/index',
          })
        } else {
          wx.navigateBack({
            delta: 1
          })
        }
      }
    },
    homeClick() {
      wx.switchTab({
        url: '/pages/index/index',
      })
    }
  },
  attached() {
    var self = this;
    wx.getSystemInfo({
      success(res) {
        var isIos = res.system.indexOf('iOS') > -1;
        self.setData({
          statusHeight: res.statusBarHeight,
          navHeight: isIos ? 44 : 48
        })
      }
    })
  }
})
复制代码

结构的改造其实就是添加一些可以传入的值来定制化。

到这里基本上这个组件就封装好了，接下来就是使用这个组件了。

常规带有一个返回按钮的案例

这种方式的应用很简单直接配置一些参数便可。

先引入组件以下：
{
  "navigationStyle":"custom",
  "usingComponents": {
    "header":"../../components/navbar/navbar"
  }
}
复制代码

须要配置导航栏自定义，否则就没有效果，根据本身的路径引入便可，若是全部页面都须要用到，建议直接在app.json中配置，这样就不用每一个页面去配置了。

wxml中使用组件标签
<header header='{{header}}'></header>
<view>内容区域哦</view>
复制代码

在须要用到的页面使用header标签便可

js文件中配置参数
Page({
  data: {
    header:{
      homeCapsule: false,
      title: '标题',
      fontColor: "#000",
      fontSize: '36rpx',
      headerbg: '#f40',
      hiddenBlock: false,
      slot: false
    }
  },
  onLoad: function() {}
});
复制代码

这里有三个参数是必需要配置的：homeCapsule,hiddenBlock,slot三个参数分别表明的含义是是否显示带有home按钮的，是否隐藏整个顶部(后面会介绍)，是否须要自定义结构

效果

那么这个最基本的就实现了。

内容置顶的实例

有时候须要将内容置顶，看起来会比较好看，因此就须要对hiddenBlock进行配置了，看代码：

<header header='{{header}}'></header>
<image src='../../images/timg.jpg' style="width:100%" mode="aspectFill"></image>
<view>内容区域哦</view>
复制代码

重要的是如何配置，以下：

Page({
  data: {
    header:{
      homeCapsule: false,
      title: '',
      headerbg: 'transparent',
      hiddenBlock: true,
      slot: false
    }
  },
  onLoad: function() {}
});
复制代码

效果以下：

带有home按钮的导航

分享页须要带有返回首页的按钮，如何配置呢？有了这个组件就很容易配置了，配置以下：

Page({
  data: {
    header:{
      homeCapsule: true,
      title: '测试标题',
      headerbg: '#f40',
      hiddenBlock: false,
      slot: false
    }
  },
  onLoad: function() {}
});
复制代码

效果以下：

彻底自定义

若是以上都不能知足需求，那么只有本身写了，简单实例以下：

<header header='{{header}}'>
  <view>测试的标题哦</view>
</header>
<image src='../../images/timg.jpg' style="width:100%" mode="aspectFill"></image>
<view>内容区域哦</view>
复制代码

配置以下：

Page({
  data: {
    header:{
      headerbg: 'transparent',
      hiddenBlock: false,
      slot: true
    }
  },
  onLoad: function() {}
});
复制代码

效果以下：

固然啦，这里只是简单的举个栗子而已，具体靠你们本身去实现了。 到此这组件大部分的封装就完成了。谢谢你们哦！
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程