微信小程序-自定義NavBar組件（1）
|
最近公司項(xiàng)目忙得不可開(kāi)交，各種不可描述的事情，然后學(xué)習(xí)基本停機(jī)。這個(gè)周末沒(méi)出去浪，就在家把之前王夫人給我設(shè)計(jì)的小程序做了做，然后一步步分享做的過(guò)程中遇到的問(wèn)題和積累，希望大家爬坑過(guò)程中能幫到一些吧 組件化組件化本身是一個(gè)可以講的很大，也可以濃縮為 封裝可復(fù)用的，模版組件 基于mvvm的微信小程序當(dāng)然也支持這一特性，我們做項(xiàng)目的時(shí)候也可以把注入公用的header footer之類的封一封（其實(shí)工具類的組裝也可以作為組件化的一種形式） 小程序的組件化挺有意思的基于Component，自行實(shí)現(xiàn)了一套比較深的實(shí)現(xiàn)（這篇不講實(shí)現(xiàn)），第一次看感覺(jué)跟Page好，或者說(shuō)是換湯不換藥。但內(nèi)部組件（頁(yè)面）的生命周期，事件處理等有自己的特點(diǎn)，這個(gè)之后再寫(xiě)的時(shí)候再提吧 然后微信，本身的sample已經(jīng)寫(xiě)清楚了一些要素，那我這邊也就在這個(gè)基礎(chǔ)上做發(fā)散，官方傳送門(mén)如下： https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 目錄結(jié)構(gòu)這邊貼一下代碼結(jié)構(gòu)
藍(lán)色是自定義的組件(啊呀，好像沒(méi)取components/nav這類名字) 紅色是引用他的首頁(yè) 設(shè)計(jì)圖長(zhǎng)這樣
做的長(zhǎng)這樣（UI還沒(méi)調(diào)，效果先實(shí)現(xiàn)吧，反正大家也就看個(gè)思路，長(zhǎng)啥樣無(wú)所謂了）
實(shí)現(xiàn)首先是提取功能代碼在 dist/example/navbar目錄下，有3個(gè)文件
我們先完全copy過(guò)來(lái)，然后添加一個(gè)navbar.json文件 navbar.json
{
"component": true,
"usingComponents": {}
}
如果有用到其他組件，那就定義一下，沒(méi)有的話可以不管。 component要為true。（證明我是誰(shuí)嘛，這個(gè)好理解） 因?yàn)樵O(shè)計(jì)圖只需要2個(gè)tab頁(yè)，所以把navbar.wxml文件進(jìn)行了微調(diào)（沒(méi)有重要步驟的我就不多做解釋了）
<view class="page">
<view class="page__bd">
<view class="weui-tab">
<view class="weui-navbar">
<block wx:for="{{tabs}}" wx:key="*this">
<view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
<view class="weui-navbar__title">{{item}}</view>
</view>
</block>
<view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
</view>
<view class="weui-tab__panel">
<view class="weui-tab__content" hidden="{{activeIndex != 0}}">PHOTO</view>
<view class="weui-tab__content" hidden="{{activeIndex != 1}}">BLOG</view>
</view>
</view>
</view>
</view>
這邊任意一個(gè)點(diǎn)擊都會(huì)觸發(fā)tabClick()這個(gè)方法 class=”weui-navbar__slider”的這個(gè)view用來(lái)繪制內(nèi)容偏移的動(dòng)畫(huà) 樣式這塊，空間本身有一些屬性，然后微信這套設(shè)計(jì)有一個(gè)自己的風(fēng)格，復(fù)制的時(shí)候從多個(gè)地方扣過(guò)來(lái)。 navbar.wxss
/*!
* WeUI v1.1.1 (https://github.com/weui/weui-wxss)
* Copyright 2017 Tencent, Inc.
* Licensed under the MIT license
*/
.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 (解釋我寫(xiě)在注釋里吧)
var sliderWidth = 96; // 需要設(shè)置slider的寬度，用于計(jì)算中間位置
Component({
properties: {
// 這里定義了tabs屬性，屬性值可以在組件使用時(shí)指定，類似于react的props和proptype
tabs: {
type: [],
value: ["PHOTO1", "BLOG1"],
}
},
data: {
// 初始化一些默認(rèn)值ß
activeIndex: 0,
sliderOffset: 0,
sliderLeft: 0
},
created: function () {
//空間被創(chuàng)建時(shí)觸發(fā)
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: {
// 按鈕行為觸發(fā)狀態(tài)機(jī)變化
tabClick: function (e) {
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: e.currentTarget.id
});
}
}
});
觸發(fā)生命周期如圖 也是由內(nèi)向外計(jì)算，渲染，加載
主頁(yè)面調(diào)用 首先，先添加引用
{
"usingComponents": {
"Nav": "../../common/navbar/navbar"
}
}
然后在頁(yè)面里像使用普通控件一樣使用就行了
<Nav tabs="{{數(shù)據(jù)源}}"></Nav>
總結(jié)：網(wǎng)上有許多自定義tab的一些方案，無(wú)非就是寫(xiě)復(fù)雜的viewgroup然后用hidfe show替換 或者是改寫(xiě)swipe來(lái)實(shí)現(xiàn)。 本文的例子更偏向第一種，但是又有像swipe的滑動(dòng)動(dòng)畫(huà) 具體的內(nèi)容分析，之后會(huì)補(bǔ)上，這一篇作為開(kāi)始，先擼個(gè)東西，之后再努力做好吧！ 源碼等這一系列結(jié)束后，放出吧（但是跟著步驟做的話一定是可以把demo擼出來(lái)的） |
