微信小程序--Tabs组件

Tabs组件

上一篇讲的是 Loading组件的编写，后来发现微信自己也有一个Loading，如果想要个性的话，可以自己修改了。

这次是写一个Tabs的组件，根据不同的状态，回来切换操作，标记一下，先看一下效果图：

本试例的全部代码 点击 获取，试例里用导入的引用，都可以从github里找到。

---

目录结构

tabs 三个文件

tabs.wxml

<template name="XtnTabs">  <view class="tabsCss">    <view class="tab" wx:for="{{Tabs}}"  wx:for-item="tab" wx:key="Id"    bindtap="onSelectTab" id="{{index}}" data-hi="{{tab}}" >      <view class="col" id="{{index}}" data-hi="{{tab}}">        <text class="name {{index === CurrentIndex ? 'select' : ''}}">{{tab.Name}}</text>      </view>    </view>  </view></template>

tabs.wxss 文件

  .tabsCss {    display: flex;    font-size: 14pt;    border: 1px solid #f0f0f0;    margin: 5px 0px;  }  .tabsCss .tab {    flex: 1;    text-align: center;    border-right: 1px solid #e0e0e0;    display: -webkit-box;    -webkit-box-align: center;    -webkit-box-pack: center;  }  .tabsCss:last-child {    border-right: none;  }  .tabsCss .tab .col {    padding: 5px;  }  .tabsCss .tab .col .name {    padding: 8px 0px 5px 0px;  }  .tabsCss .tab .col .select {    border-bottom: 2px solid red;  }

tabs.js文件

import { Utility, BaseComponent } from '../Core';class tabs extends BaseComponent {  constructor() {    super();  }  /**   * 初始化参数   *    * @param {any} tabInfo {    *    SelectIndex:0,   *    List: [   *      {Id: 1, Name: ' ', onSelect: ()=>{ }}   *    ]   *  }   * @memberof tabs   */  OnInit(tabInfo) {    let { List, SelectIndex } = tabInfo || {}    this.__Init(Utility);    if (!List) {      List = [];    }    if (!Utility.$IsArray(List)) {      let i = 0;      for (i; i < 4; i++) {        const tab = {};        tab.Id = i;        tab.Name = 'Tab_' + i;        tab.onSelect = this.__onDefaultSelect.bind(this, tab);        List.push(tab);      }    }    this.data.TTabs = { CurrentIndex: SelectIndex || 0, Tabs: List };    this.__UpdateRender();    this.__CurrentPage.onSelectTab = this.onSelectTab.bind(this);  }  __onDefaultSelect(event, args) {    console.log('__onDefaultSelect---');  }  onSelectTab(event) {    const { currentTarget } = event;    if (!currentTarget) {      return;    }    const { id } = currentTarget;    this.data.TTabs.CurrentIndex = Number(id);    this.__UpdateRender();    const currentTab = this.data.TTabs.Tabs[id];    const { onSelect } = currentTab;    if (onSelect) {      onSelect(currentTab);    }  }}const Tabs = new tabs;export { Tabs };

导出

App.js里引入

页面使用

wxml 中引用

<import src="../../components/tabs/tabs.wxml" /><template is="XtnLoading" data="{{...TData}}" /><view class="testCss">  <template is="XtnTabs" data="{{...TTabs}}" />  <view class="tab1">    <view wx:if="{{CurrentSelectTab}}">      <text class="name">{{CurrentSelectTab.Name}}</text>    </view>  </view></view>

js 中使用，初始化

  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    const __TabInfo = {      SelectIndex: 2,      List: [        { Id: 1, Name: '状态1', onSelect: this.__OnSelectTab.bind(this) },        { Id: 2, Name: '状态2', onSelect: this.__OnSelectTab.bind(this) },        { Id: 3, Name: '状态3', onSelect: this.__OnSelectTab.bind(this) },      ]    };    this.data.CurrentSelectTab = __TabInfo.List[2];    getApp().Tabs.OnInit(__TabInfo);  },

以上就可以使用了。