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

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

相关文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

a、新建组件

新建文件夹命名：components，之后所有的组件都建立在这个文件夹下

在components文件夹下新建组件文件夹，然后在组件文件夹下新建组件：

组件和页面一样，也有.js、.json、.wxml、.wxss四个文件

b、自定义组件生命周期

Component({   lifetimes: {     attached: function() {       // 在组件实例进入页面节点树时执行     },     detached: function() {       // 在组件实例被从页面节点树移除时执行     },   },   // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容   attached: function() {     // 在组件实例进入页面节点树时执行   },   detached: function() {     // 在组件实例被从页面节点树移除时执行   },   // ... }) 

c、组件的事件绑定

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

<!-- 在自定义组件中 --> <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button> 

Component({   properties: {},   methods: {     onTap: function(){       var myEventDetail = {} // detail对象，提供给事件监听函数       var myEventOption = {} // 触发事件的选项       this.triggerEvent('myevent', myEventDetail, myEventOption)     }   } }) 

设计一个自定义导航栏，要要求上方展示用户的头像，并且可以点击

a、样式 .wxml .wxss文件

.wxml文件

<view class="navbar" style='height:{{navH}}px;background:{{bgColor}}'>   <view class="navbar-action-wrap" wx:if="{{showNav}}">     <view wx:if="{{showUser}}" class="userinfo-avatar" bindtap="showUser">       <open-data type="userAvatarUrl"></open-data>     </view>   </view>   <view class='navbar-title' style='background:{{bgColor}};color:{{bgColor=="#fff"?"#333":"#fff"}}'>     {{pageName}}   </view> </view>  

.wxss文件

.navbar {   width: 100%;   overflow: hidden;   position: relative;   top: 0;   left: 0;   background-color: #fff;   z-index: 90; }     .navbar-title {   width: 100%;   height: 46px;   line-height: 46px;   text-align: center;   position: absolute;   bottom: 0;   left: 0;   z-index: 10;   /* background-color: #fff;   color: #333; */   font-size: 18px; }   .navbar-action-wrap{   position: absolute;   left: 10px;   bottom: 7px;   z-index: 100; } .navbar-action_item{   padding:3px 0;   color: #333; } .navbar-action-group .navbar-action_item{  border-right: 1px solid #e8e8e8;  padding:3px 12px; } .userinfo-avatar {   overflow: hidden;   width: 60rpx;   height: 60rpx;   margin: 20rpx;   margin-top: 90rpx;   border-radius: 50%; } .shareIcon{    width: 28rpx;   height: 28rpx;   /* left: 10px;   bottom: 7px; */ } .backView{   position: absolute;   left: 0;   bottom: -5px;   padding: 0 30px 7px 0;   z-index: 100; } .backIcon{   width: 20rpx;   height: 36rpx;   /* left: 0px; */ }  image.back{   position: absolute;   width: 20rpx;   height: 36rpx;   float: left;   top: 28rpx;   left: 30rpx; } 

b、事件绑定

可以看到，点击头像的时候触发事件"showUser"，在.js文件新建事件showUser

  methods: {     showUser() {       this.triggerEvent('showUser');     },   } }) 

c、页面使用

1、配置文件.json

{   "usingComponents": {     "navbar": "/components/nav/nav"   },   "navigationStyle":"custom" } 

2、界面文件.wxml

<view class="homeView">   <navbar page-name="我是标题" bindshowUser="showUser" show-user="{{showUser}}" bg-color="{{showList?'#fff':'#FFDA6C'}}"></navbar>   <text></text> </view> 

3、数据绑定.js

/**    * 页面的初始数据    */   data: {     showUser:true,     bgColor:'#fff',     showList:true,    },    showUser: function() {     console.log('这里是父组件的方法')     wx.navigateTo({       url: '/pages/userPage/userPage',     })   }, 

当用户点击，就可以把事件转发到页面的showUser事件中，由此完成自定义导航