android 微信sliderbar,微信小程序自定义NavBar组件开发教程

组件化本身是一个可以讲的很大，也可以浓缩为封装可复用的，基于模版组件的微信小程序当然也支持这一特性。这种开发模式有点类似与网页开发中的header和footer分离式封装的特性。其实工具类的组装也可以作为组件化的一种形式。

小程序的组件化挺有意思的基于Component，自行实现了一套比较深的实现(这篇不讲实现)，第一次看感觉跟Page好，或者说是换汤不换药。但内部组件(页面)的生命周期，事件处理等有自己的特点。从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

目录结构

蓝色是自定义的组件，红色是引用他的首页

实现

功能来源是组件库中提取出来的，就是把本来Page页面改成Component，然后给大家理一理过程。

首先是提取功能代码在dist/example/navbar目录下

navbar.json

{

component: true,

usingComponents: {}

}

如果有用到其他组件，那就定义一下，没有的话可以不管。

component要为true。

这边任意一个点击都会触发tabClick()这个方法

class=”weui-navbar__slider”的这个view用来绘制内容偏移的动画。样式这块，空间本身有一些属性，然后微信这套设计有一个自己的风格，复制的时候从多个地方扣过来。

navbar.wxss

.weui-navbar {

margin-top: 50px;

display: -webkit-box;

display: -webkit-flex;

display: flex;

position: absolute;

z-index: 500;

top: 0;

width: 100%;

border-bottom: 1rpx solid #ccc;

}

.weui-navbar__item {

position: relative;

display: block;

-webkit-box-flex: 1;

-webkit-flex: 1;

flex: 1;

padding: 13px 0;

text-align: center;

font-size: 0;

}

.weui-navbar__item.weui-bar__item_on {

color: #F5CD79;

}

.weui-navbar__slider {

position: absolute;

content: ;

left: 0;

bottom: 0;

width: 50%;

height: 3px;

background-color: #F5CD79;

-webkit-transition: -webkit-transform 0.3s;

transition: -webkit-transform 0.3s;

transition: transform 0.3s;

transition: transform 0.3s, -webkit-transform 0.3s;

}

.weui-navbar__title {

display: inline-block;

font-size: 15px;

max-width: 8em;

width: auto;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

}

.weui-tab__panel {

box-sizing: border-box;

height: 100%;

padding-top: 50px;

overflow: auto;

-webkit-overflow-scrolling: touch;

}

然后就是逻辑navbar.js

var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置

Component({

properties: {

// 这里定义了tabs属性，属性值可以在组件使用时指定，类似于react的props

proptype

tabs: {

type: [],

value: [PHOTO1, BLOG1],

}

},

data: {

// 初始化一些默认值ß

activeIndex: 0,

sliderOffset: 0,

sliderLeft: 0

},

created: function () {

//空间被创建时触发

console.log(\'--->navbar Component created\')

var that = this;

wx.getSystemInfo({

success: function (res) {

that.setData({

sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,

sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex

});

}

});

},

methods: {

// 按钮行为触发状态机变化

tabClick: function (e) {

this.setData({

sliderOffset: e.currentTarget.offsetLeft,

activeIndex: e.currentTarget.id

});

}

}

});

触发生命周期如图

也是由内向外计算，渲染，加载

主页面调用。首先，先添加引用

{

usingComponents: {

Nav: ../../common/navbar/navbar

}

}

然后在页面里像使用普通控件一样使用就行了

总结：

网上有许多自定义tab的一些方案，无非就是写复杂的viewgroup然后用hidfe show替换或者是改写swipe来实现。

本文的例子更偏向第一种，但是又有像swipe的滑动动画。