如何編寫小程序的tab組件？

小討論：我們都知道小程序可以用template編寫一些模版，后來小程序又可以實現(xiàn)與vue類似組件的編寫——Component構造器。但是個人覺得功能還是沒有vue組件來得強大，不過實現(xiàn)一些平時用到的業(yè)務場景還是可以的。

下面我給大家來表演如何實現(xiàn)tab組件

tab的話就是上面一排標簽，點擊標簽實現(xiàn)底下的面板進行切換顯示，這個其實是不難實現(xiàn)的，但是我們要整點復雜的，才可以寫在簡書里。
思路：借鑒了一些vue第三方組件的封裝思路，我們讓tab組件由tab和tab-panel兩個組件以父子關系組成，然后我們根據tab-panel的一些屬性和數(shù)量來生成tab，這就涉及到Component構造器父子組件之間的聯(lián)系。

項目結構圖

tab效果圖

我們新建一個Component 名為tab
tab.js

Component({
  // 關聯(lián)子組件
  relations: {
    '../tab-panel/tab-panel': {
      type: 'child',
      linked(target) {},
      linkChanged(target) {},
      unlinked(target) {}
    }
  },

  properties: {
    // 內聯(lián)樣式
    iStyle: {
      type: String,
      value: ''
    },
    // 用來初始化顯示某個panel
    value: {
      type: String,
      value: ''
    },
    // tab標簽數(shù)組
    tab: {
      type: Array,
      value: []
    }
  },

  data: {
    selectIndex: 0,
    tabIndex: 0,
    scrollLeft: 0,
    width: 0,
    ml: 0,
    initMl: 0,
    svWidth: 0,
    panelNodes: [],
    isLower: false,
    lastLeft: 0,
    lastWidth: 0
  },
  ready() {
    this.getAllPanel();
    this.initCal();
  },
  methods: {
    /**
     * @desc 獲取子組件tab-panel,用來生成tab
     */
    getAllPanel() {
      const { value } = this.data;
      const ttab = [];
      const panelNodes = this.getRelationNodes('../tab-panel/tab-panel');

      this.setData({ panelNodes });
      panelNodes.map((item, i) => {
        const {
          data: { label, name }
        } = item;
        if (value === name) this.setData({ selectIndex: i });
        ttab.push({ text: label });
      });
      this.setData({ tab: ttab });
    },
    /**
     * @desc 初始化tab及一些元素的計算
     */
    initCal() {
      wx.createSelectorQuery()
        .in(this)
        .selectAll('.tab__item')
        .boundingClientRect(rects => {
          const { tab } = this.data;
          tab.map((item, i) => {
            if (i === tab.length - 1) {
              this.setData({
                lastLeft: rects[i].left,
                lastWidth: rects[i].width
              });
            }
            item.left = rects[i].left;
          });

          this.setData({
            tab
          });
        })
        // 設置第一個tab元素的left
        .select('.first')
        .boundingClientRect(rect => {
          this.setData({ initMl: rect.left });
        })
        // 獲取tab外層滾動的view的寬度
        .select('.scroll-view')
        .boundingClientRect(rect => {
          this.setData({ svWidth: rect.width });
          const { selectIndex, tab } = this.data;
          this.changeTabFun(selectIndex, tab[selectIndex].left);
        })
        .exec();
    },
    /**
     * @desc 切換tab事件
     */
    changeTab({
      currentTarget: {
        dataset: { index, left }
      }
    }) {
      if (this.data.tabIndex === index) return;
      this.changeTabFun(index, left);
    },
    /**
     * @desc 切換tab事件，計算scroll-view顯示位置
     */
    changeTabFun(index, left) {
      const { tab, initMl, svWidth, panelNodes } = this.data;
      tab.map((item, i) => (item.active = i === index));

      this.setData({ tab, tabIndex: index });
      wx.createSelectorQuery()
        .in(this)
        .select('.active')
        .boundingClientRect(rect => {
          // 計算scrollleft
          const sc = left - (svWidth - rect.width) / 2 - initMl;
          this.setData({
            width: rect.width,
            scrollLeft: sc
          });
          // 延遲底部橫線切換效果
          setTimeout(() => {
            this.setData({
              ml: left - initMl
            });
          }, 80);
        })
        .exec();

      panelNodes.map((item, i) => {
        item.setData({ isShow: index === i });
      });

      this.triggerEvent('changeTab', { name: panelNodes[index].data.name });
    },
    /**
     * @desc 綁定滾動，判斷是否滾動到最右側來顯示漸變蒙版
     */
    bindscroll({ detail: { scrollLeft } }) {
      const { svWidth, initMl, lastLeft, lastWidth } = this.data;
      const l = Math.floor(lastLeft - svWidth + lastWidth - initMl);
      if (scrollLeft >= l - 1) {
        this.setData({ isLower: true });
      } else {
        this.setData({ isLower: false });
      }
    },
    /**
     * @desc 切換到某個面板
     */
    toPanel(panelName) {
      const { panelNodes } = this.data;
      this.setData({ selectIndex: 0 });
      panelNodes.map((item, i) => {
        const {
          data: { name }
        } = item;
        if (panelName === name) this.setData({ selectIndex: i });
      });
      this.initCal();
    }
  }
});

我們可以看到tab.js Component有幾個大屬性組成，分別是relations【定義與子組件關系】，properties【父組件傳遞接收】，data【組件內部data】，ready【組件生命周期函數(shù)，在組件布局完成后執(zhí)行，此時可以獲取節(jié)點信息】，這里只用到所有生命周期中的ready，可查閱組件的生命周期，methods【組件內部方法】。
this.getRelationNodes('../tab-panel/tab-panel') 我們有了小程序獲取所有子組件這個方法的支持，讓我們與子組件的操作更加便利。

tab.wxml

<view class="tab" style="{{iStyle}}">
  <view class="tab__scroll">
    <view class="tab__scroll-wrapper {{isLower?'lower':''}}">
      <scroll-view class="scroll-view" scroll-x="{{true}}" scroll-with-animation="{{true}}" bindscroll="bindscroll" scroll-left="{{scrollLeft}}">
        <view class="tab__list">
          <view class="tab__item {{index===0?'first':''}} {{index===tab.length-1?'last':''}} {{item.active?'active':''}}" wx:for="{{tab}}" wx:key="{{index}}" bindtap="changeTab" data-index="{{index}}" data-left="{{item.left}}">
            {{item.text}}
          </view>
        </view>
        <view class="tab__line transition" style="width:{{width}}px; margin-left:{{ml}}px;"></view>
      </scroll-view>
    </view>
  </view>

  <slot></slot>

</view>

加入了scroll-view 實現(xiàn)tab標簽多了之后可以進行滾動，而且在scroll-view可以加入平滑滾動效果，slot插槽是用來放置tab-panel組件的

tab.wxss

.tab__scroll {
  padding: 20rpx 30rpx 0rpx;
  font-size: 28rpx;
  color: #9b9b9b;
  position: relative;
}
.tab__scroll-wrapper {
  border-bottom: 1rpx solid #f0f0f0;
  -webkit-mask-image: linear-gradient(to right, #1a1a1a 80%, transparent);
  mask-image: linear-gradient(to right, #1a1a1a 80%, transparent);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.tab__scroll-wrapper.lower {
  -webkit-mask-image: linear-gradient(#1a1a1a 100%, transparent);
  mask-image: linear-gradient(#1a1a1a 100%, transparent);
}
.tab__list {
  white-space: nowrap;
  width: 100%;
}
.tab__item {
  vertical-align: top;
  display: inline-block;
  margin-right: 40rpx;
  padding-top: 10rpx;
  padding-bottom: 5rpx;
  padding-left: 5rpx;
  padding-right: 5rpx;
}
.tab__item:last-child {
  margin-right: 0;
}
.tab__item.active {
  color: #383538;
}
.tab__line {
  width: 56rpx;
  height: 4rpx;
  background: #ffe700;
  border-radius: 4rpx;
}
.tab .transition {
  transition: all 0.3s ease 0s;
}

我們可以看到wxss有這樣的樣式

  /* ... */
 -webkit-mask-image: linear-gradient(to right, #1a1a1a 80%, transparent);
  mask-image: linear-gradient(to right, #1a1a1a 80%, transparent);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* ... */

這是實現(xiàn)右側漸變蒙版的效果，可以看下我之前寫的 css篇-mask-image + linear-gradient 優(yōu)雅顯示富文本過長

tab的父組件就這樣完成了，接下來我們來看下子組件tab-panel的編寫

我們新建一個Component 名為tab-panel
tab-panel.js

Component({
  relations: {
    '../tab/tab': {
      type: 'parent',
      linked(target) {},
      linkChanged(target) {},
      unlinked(target) {}
    }
  },
  properties: {
    // 內聯(lián)樣式
    iStyle: {
      type: String,
      value: ''
    },
    // label用來顯示tab的標簽名
    label: {
      type: String,
      value: ''
    },
    // name為panel的唯一標識，用來確定要顯示哪個panel
    name: {
      type: String,
      value: ''
    }
  },
  data: {
    // 是否顯示當前panel
    isShow: false
  }
});

tab-panel.wxml

<view class="tab-panel" style="display:{{isShow?'block':'none'}};{{iStyle}}">
  <slot></slot>
</view>

slot 插槽用來放置實際的內容

tab-panel.wxss

.tab-panel {
  box-sizing: border-box;
  padding: 0 30rpx 0;
}

css可以自己定義，根據需求

這樣子我們就完成了tab-panel子組件了

我們可以看到主要的代碼編寫還是在tab.js里面，因為tab-panel 說白了就支持了tab顯示需要的數(shù)組，接下我們們看看在index頁面中如何調用這個組件。

index.js

Page({
  data: {},
  onLoad() {},
  // 子組件事件觸發(fā)
  onChangeTab({ detail: { name } }) {
    console.log('name :', name);
  },
  // 跳轉到制定panel
  toPanel({
    currentTarget: {
      dataset: { panelName }
    }
  }) {
    this.selectComponent('#tab').toPanel(panelName);
  }
});
/* 
這里的onChangeTab是子組件觸發(fā)調用的，
類似vue中的$emit的用法，
this.selectComponent('#tab').toPanel(panelName) 為調用子組件方法，
類似vue中的this.$refs['xxx'].func()
*/

index.json

{
  "usingComponents": {
    "tab": "../../components/tab/tab/tab",
    "tab-panel": "../../components/tab/tab-panel/tab-panel"
  }
}

指定使用的組件 tab、tab-panel

index.wxml

<view class="index">
  <tab i-style="height:100%;" id="tab" value="panel2" bind:changeTab="onChangeTab">
    <tab-panel label="我是panel1" name="panel1">
      <view class="index__panel">
        <view>第一個panel</view>
        <button bindtap="toPanel" data-panel-name="{{'panel6'}}">跳轉到panel6</button>
      </view>
    </tab-panel>
    <tab-panel i-style="height:calc(100% - 86rpx);box-sizing:border-box;" label="我是panel2我比較長" name="panel2">
      <scroll-view class="index__scroll-view" scroll-y="{{true}}">
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
        <view>第二個panel</view>
      </scroll-view>
    </tab-panel>
    <tab-panel label="我是panel3" name="panel3">
      <view class="index__panel">第三個panel</view>
    </tab-panel>
    <tab-panel label="我是panel4" name="panel4">
      <view class="index__panel">第四個panel</view>
    </tab-panel>
    <tab-panel label="我是panel5" name="panel5">
      <view class="index__panel">第五個panel</view>
    </tab-panel>
    <tab-panel label="我是panel6" name="panel6">
      <view class="index__panel">
        <view class="index__panel">
          <view>第六個panel</view>
          <button bindtap="toPanel" data-panel-name="{{'panel1'}}">跳轉到panel1</button>
        </view>
      </view>
    </tab-panel>
    <tab-panel label="我是panel7" name="panel7">
      <view class="index__panel">第七個panel</view>
    </tab-panel>
    <tab-panel label="我是panel8" name="panel8">
      <view class="index__panel">第八個panel</view>
    </tab-panel>
  </tab>
</view>

我們這里寫了8個panel作為例子，tab-panel為自定義的內容，我們現(xiàn)在需要管理維護的就只是tab-panel里面的內容啦。

index.wxss

page {
  height: 100%;
}
.index {
  height: 100%;
}
.index__scroll-view {
  height: 100%;
  box-sizing: border-box;
  padding: 10rpx 0;
}

表演結束！

學會了組件的編寫，我們可以舍棄template模版的那種不靈活的編寫方式，雖然組件一些方法需要微信客戶端更高版本，我們有時需要去兼容低版本微信，但是我們秉持擁抱高版本，擁抱新增功能的態(tài)度。
——尼古拉斯·峰

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

小程序篇-tab組件

小程序篇-tab組件

如何編寫小程序的tab組件？

下面我給大家來表演如何實現(xiàn)tab組件

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

小程序篇-tab組件

如何編寫小程序的tab組件？

下面我給大家來表演如何實現(xiàn)tab組件

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

如何編寫小程序的tab組件？