123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 |
- // components/tabs/index.js
- Component({
- externalClasses: ['l-class-header', 'l-class-active', 'l-class-inactive', 'l-class-line', 'l-class-tabimage',
- 'l-header-class', 'l-active-class', 'l-inactive-class', 'l-line-class', 'l-tabimage-class'
- ],
- relations: {
- '../tabpanel/index': {
- type: 'child',
- },
- linked() {
- // 每次有子节点被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后
- this.initTabs();
- }
- },
- options: {
- multipleSlots: true // 在组件定义时的选项中启用多slot支持
- },
- /**
- * 组件的属性列表
- */
- properties: {
- activeKey: {
- type: String,
- value: '',
- observer: 'changeCurrent'
- },
- placement: {
- type: String,
- value: 'top',
- },
- aminmated: Boolean,
- scrollable: Boolean,
- swipeable: {
- type: Boolean,
- value: true,
- },
- hasLine: {
- type: Boolean,
- value: true
- },
- activeColor: {
- type: String,
- value: '#333333'
- },
- inactiveColor: {
- type: String,
- value: '#bbbbbb'
- },
- },
- data: {
- tabList: [],
- currentIndex: 0,
- transformX: 0,
- transformY: 0,
- },
- ready() {
- this.initTabs();
- },
- /**
- * 组件的方法列表
- */
- methods: {
- initTabs() {
- this.initTabList();
- this.initActiveIndex();
- },
- initActiveIndex(val = this.data.activeKey) {
- let activeKey = val,
- currentIndex = this.data.currentIndex;
- this.data.tabList.forEach((item, index) => {
- activeKey = !val && index == 0 ? item.key : activeKey;
- currentIndex = item.key === activeKey ? index : currentIndex;
- });
- this.setData({
- activeKey,
- currentIndex,
- }, () => {
- if (this.data.scrollable) {
- this.queryMultipleNodes();
- }
- });
- },
- initTabList() {
- let items = this.getRelationNodes('../tabpanel/index');
- if (items.length > 0) {
- const tabList = [];
- items.forEach((item) => {
- const tabIndex = tabList.findIndex(tabItem => tabItem.tab === item.data.tab);
- let tab = {};
- if (tabIndex === -1) {
- tab = {
- tab: item.data.tab,
- key: item.data.key,
- icon: item.data.icon,
- iconStyle: item.data.iconStyle,
- image: item.data.image,
- subTabs: [],
- };
- tabList.push(tab);
- }
- const targetTab = tabIndex === -1 ? tab : tabList[tabIndex];
- if (item.data.subTab) {
- targetTab.subTabs = targetTab.subTabs || [];
- const subTabItem = {
- tab: item.data.subTab,
- key: item.data.subKey,
- };
- targetTab.subTabs.push(subTabItem);
- targetTab.activeSubKey = this.data.subActiveKey || targetTab.subTabs[0].key;
- targetTab.subCurrentIndex = 0;
- }
- });
- this.setData({
- tabList,
- });
- }
- },
- swiperChange(e) {
- const {
- source,
- current
- } = e.detail;
- if (source == 'touch') {
- const currentIndex = current;
- const activeKey = this.data.tabList[current].key;
- const subCurrentIndex = this.data.tabList[currentIndex].subCurrentIndex;
- const activeSubKey = this.data.tabList[currentIndex].activeSubKey;
- this._setChangeData({
- activeKey,
- currentIndex,
- subCurrentIndex,
- activeSubKey,
- });
- }
- },
- subSwiperChange(e) {
- const {
- source,
- current
- } = e.detail;
- if (source == 'touch') {
- const {
- currentIndex,
- activeKey
- } = this.data;
- const subCurrentIndex = current;
- const activeSubKey = this.data.tabList[currentIndex].subTabs[subCurrentIndex].key;
- const tabs = this.data.tabList[currentIndex];
- tabs.activeSubKey = activeSubKey;
- tabs.subCurrentIndex = subCurrentIndex;
- this.setData({
- [`tabList[${currentIndex}]`]: tabs
- });
- this._setChangeData({
- activeKey,
- currentIndex,
- activeSubKey,
- subCurrentIndex
- });
- }
- },
- handleChange(e) {
- const isSubHeader = e.currentTarget.dataset.headerType === 'subTab';
- const {
- currentIndex,
- activeKey
- } = this.data;
- const clickIndex = e.currentTarget.dataset.index;
- const subCurrentIndex = isSubHeader ? clickIndex : this.data.tabList[clickIndex].subCurrentIndex;
- const activeSubKey = isSubHeader ? this.data.tabList[currentIndex].subTabs[subCurrentIndex].key : this.data.tabList[clickIndex].activeSubKey;
- if (isSubHeader) {
- const tabs = this.data.tabList[currentIndex];
- tabs.activeSubKey = activeSubKey;
- tabs.subCurrentIndex = subCurrentIndex;
- this.setData({
- [`tabList[${currentIndex}]`]: tabs
- });
- this._setChangeData({
- activeKey,
- currentIndex,
- activeSubKey,
- subCurrentIndex
- });
- } else {
- const activeKey = e.currentTarget.dataset.key;
- this._setChangeData({
- activeKey,
- currentIndex: clickIndex,
- subCurrentIndex,
- activeSubKey
- });
- }
- },
- _setChangeData({
- activeKey,
- currentIndex,
- activeSubKey = '',
- subCurrentIndex = null,
- }) {
- this.setData({
- activeKey,
- currentIndex
- }, () => {
- if (this.data.scrollable) {
- this.queryMultipleNodes();
- }
- });
- this.triggerEvent('linchange', {
- activeKey,
- currentIndex,
- activeSubKey,
- subCurrentIndex,
- });
- },
- queryMultipleNodes() {
- const {
- placement,
- activeKey,
- tabList
- } = this.data;
- this._getRect('#' + activeKey)
- .then((res) => {
- if (['top', 'bottom'].indexOf(placement) !== -1) {
- this.setData({
- transformX: res.left - tabList.length / 2 * res.width,
- transformY: 0
- });
- } else {
- this._getRect('.l-tabs-header')
- .then((navRect) => {
- const transformY = res.top - navRect.top - navRect.height / 2;
- this.setData({
- transformX: 0,
- transformY: transformY
- });
- });
- }
- });
- },
- _getRect(selector) {
- return new Promise((resolve, reject) => {
- const query = wx.createSelectorQuery().in(this);
- query.select(selector).boundingClientRect((res) => {
- if (!res) return reject('找不到元素');
- resolve(res);
- }).exec();
- });
- }
- }
- });
|