微信小程序开发笔记2——自定义导航栏组件

本文主要是熟悉微信小程序自定义组件的开发，以一个常见的导航栏（Tabbar）需求为例。

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

首先我们先看一下最终实现的效果：

这是一个非常简单的例子，就用这个例子敲开自定义组件的大门。如果你对vue的组件很熟的话，那么你应该会轻松上手。

思路

改组件应该具备最基本的属性和方法：

• 每个tab页签显示的文字
• 页签被选中时的颜色
• 选中某个页签时，父组件应该知道这个被选中的页签信息，从而做一些逻辑操作

这里我还给页签切换时添加了slider的滑动动画，为了更好的用户体验

编码实现

组件 wxml

<view class='tabbar-container'>   <view class='tabbar'>   <!-- 页签 -->     <block wx:for="{{tabItems}}" wx:key="ti+{{index}}">       <view id="{{index}}"             class='tabbar-item'             style='{{ activedIndex == index ? ("color: " + activedColor) : "" }}'                   bindtap="clickTab">         <view class="tabbar-title">{{item}}</view>       </view>     </block>     <!--      	slider 滑块，会随着选中的页签而滑动至对应的位置,     	使用了CSS3的translateX属性      	-->     <view class='selected-slider'           style="transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);background-color: {{activedColor}}">     </view>   </view> </view> 

组件js

Component({   properties: {     tabItems: Array,     // 选中标签页的颜色(文字颜色+小滑块颜色)     activedColor: {       type: String,       value: '#d5001c'     }   },   data: {     activedIndex: 0,     // slider的左偏移量，用这个来控制其移动的距离     sliderOffset: 0   },   methods: {     // 切换tab时调用的方法     clickTab(e) {       this.setData({         activedIndex: e.currentTarget.id,         sliderOffset: e.currentTarget.offsetLeft       })       // 触发父组件的tab-change方法，并将当前选中的tab作为参数传递给父组件       this.triggerEvent('tab-change', { activedTab: e.currentTarget.id })     }   } }) 

组件的 wxss

.tabbar {   display: flex;   align-items: center;   position: relative;   font-size: 28rpx;   box-shadow: 0 6rpx 6rpx 0 #f0f0f0; }  .tabbar-item {   flex: 1;   text-align: center;   padding: 30rpx 0;   color: #b5b4ba; }  .tabbar-title{   display: inline-block; } .selected-slider {   position: absolute;   content: " ";   left: 0;   bottom: 0;   width: 33.33%;   height: 6rpx;   /* 选中页签时滑动的移动动画 */     -webkit-transition: -webkit-transform 0.3s;   transition: transform 0.3s; } 

组件json

{   "component": true,   "usingComponents": {} } 

使用该组件

注册组件

不要忘了在使用该组件的页面或父组件的json文件中注册该组件：

"usingComponents": {     "tabbar": "/components/tabbar/tabbar"   } 

页面/父组件 的wxml

<view class='tab'>   <tabbar tab-items="{{tabOptions}}" actived-color="green"    		 bind:tab-change="onTabChange">   </tabbar> </view> <view class='tab-content tab-{{currentTabIndex}}'>   {{'当前Tab: ' + currentTabIndex}} </view> 

页面/父组件 的js

Page({   data: {     tabOptions: ['全部', '我的好友', '特别关注'],     currentTabIndex: 0   },   onTabChange(e){     // 接受来自组件传递的参数     const detail = e.detail     this.setData({       currentTabIndex: detail.activedTab     })   } }) 

页面/父组件 的wxss

.tab-content{   margin-top: 10rpx;   height: 200px;   width: 100%;   text-align: center;   padding: 100px 0; } .tab-0{   background-color: lightblue; } .tab-1{   background-color: lightgreen; } .tab-2{   background-color: lightpink; } 

github

demo源码：https://github.com/JerryYuanJ/mini-app-pratice
如果对你有帮助，欢迎star。或者你发现bug也欢迎issue。