https://www.yortoob.com/assets/js/unit/tab-list.js

1class ScriptTabList extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.$tabWarpLists = this.$dom.querySelector(".unit-tab-list__items")
6    this.$tabListItems = this.$dom.querySelectorAll(".unit-tab-list__item")
7    this.$tabContentList = this.$dom.querySelector(".unit-tab-content_list")
8    this.$tabWarpIconPrev = this.$dom.querySelector(".swiper-button-prev")
9    this.$tabWarptIconNext = this.$dom.querySelector(".swiper-button-next")
10    this.$tabContentIconLeft = this.$dom.querySelector(".unit-tab-content_iconleft")
11    this.$tabContentIconRight = this.$dom.querySelector(".unit-tab-content_iconright")
12    this.$contentItem = this.$dom.querySelectorAll(".unit-tab-content_item")
13    this.activeIndex = 0
14    this.swiperVideo = null
15    this.colInfo = JSON.parse(this.utilts.htmlDecode(params.colInfo))
16    this.dataLen = params.dataLen * 1
17    this.sliding_step = 0
18    this.slidesPerView = 3
19    this.fullBorderVal = 0
20
21    // 工具
22    this.utilts = window.app.utilts
23  }
24
25  init() {
26    this.initNodeEvent()
27    if (window.innerWidth > 768) {
28      Array.from(this.$tabListItems).forEach(_val => _val.classList.add(`unit-tab-list__item-hover`))
29    } else {
30      if (this.$tabListItems.length) this.initMobile()
31    }
32    window.addEventListener('resize', () => {
33      if (window.innerWidth < 768) {
34        // this.sliding_step = 0
35        this.$tabWarpIconPrev.removeEventListener('click', this.tabIconPrev, false)
36        this.$tabWarpIconPrev.removeEventListener('click', this.tabIconNext, false)
37        this.initMobile()
38      } else {
39        if (this.$tabWarpLists) this.$tabWarpLists.style.transform = `translate3d(0,0,0)`
40        if (this.$tabWarptIconNext) this.$tabWarptIconNext.classList.remove('disabled-icon')
41        if (this.$tabWarpIconPrev) this.$tabWarpIconPrev.classList.add('disabled-icon')
42      }
43    })
44  }
45  initNodeEvent() {
46    if (this.$tabListItems.length) this.$tabListItems[this.activeIndex].classList.add('active')
47    this.setContentShowFn()
48    Array.from(this.$tabListItems).forEach(($el, index) => {
49      $el.addEventListener("click", () => {
50        this.activeIndex = index
51        this.setTabActiveFn()
52        this.setContentShowFn()
53        this.setDisabledFn()
54      })
55    })
56    if (this.$tabContentIconLeft) {
57      this.$tabContentIconLeft.addEventListener('click', () => {
58        if (!this.$tabContentIconLeft.className.includes('icon-disabled')) {
59          if (this.activeIndex <= 0) return
60          this.activeIndex--
61          this.setTabActiveFn()
62          this.setContentShowFn()
63          this.setDisabledFn()
64        }
65      })
66    }
67    if (this.$tabContentIconRight) {
68      this.$tabContentIconRight.addEventListener('click', () => {
69        if (!this.$tabContentIconRight.className.includes('icon-disabled')) {
70          if (this.activeIndex >= this.dataLen) return
71          this.activeIndex++
72          this.setTabActiveFn()
73          this.setContentShowFn()
74          this.setDisabledFn()
75        }
76      })
77    }
78  }
79  async initMobile() {
80    const $tabWrap = this.$dom.querySelector('.unit-tab-wrap')
81    if (window.innerWidth <= 480) {
82      this.slidesPerView = $tabWrap.getAttribute('default-full-columns')
83      if (Boolean($tabWrap.getAttribute('default-full-border'))) this.fullBorderVal = $tabWrap.getAttribute('default-border-val').replace('px', '') - 0
84    } else if (window.innerWidth <= 768) {
85      if (Boolean($tabWrap.getAttribute('md-full-border'))) this.fullBorderVal = $tabWrap.getAttribute('md-border-val').replace('px', '') - 0
86      this.slidesPerView = $tabWrap.getAttribute('md-full-columns')
87    }
88    if (this.dataLen > this.slidesPerView == 12 ? 1 : this.slidesPerView == 1 ? 12 : this.slidesPerView) {
89      let swiperButtons = this.$dom.querySelectorAll('.swiper-button')
90      Array.from(swiperButtons).forEach(_val => _val.classList.remove('d-none'))
91      this.$dom.querySelector(".unit-tab-wrap").classList.add('set-slide')
92      this.$tabWarpIconPrev.addEventListener('click', this.tabIconPrev, false)
93      this.$tabWarptIconNext.addEventListener('click', this.tabIconNext, false)
94    }
95  }
96  tabIconPrev = () => {
97    let sliding_width = this.$tabListItems[0].getBoundingClientRect().width
98    const style = this.utilts.getNodeStyle(this.$tabListItems[0])
99    const item_ml = parseFloat(style.marginLeft) || 0
100    sliding_width += item_ml
101
102    const slidesPerView = this.slidesPerView == 12 ? 1 : this.slidesPerView == 1 ? 12 : this.slidesPerView
103    if (this.sliding_step != 0) {
104      this.sliding_step = this.sliding_step - 1
105      if (this.sliding_step < (this.dataLen - slidesPerView)) this.$tabWarptIconNext.classList.remove('disabled-icon')
106      if (this.sliding_step == 0) this.$tabWarpIconPrev.classList.add('disabled-icon')
107      let resBorderVal = slidesPerView == 1 ? 0 : this.sliding_step * this.fullBorderVal
108      if (item_ml) resBorderVal = 0
109      this.$tabWarpLists.style.transform = `translate3d(-${this.sliding_step * sliding_width - resBorderVal}px, 0, 0)`
110    }
111  }
112  tabIconNext = () => {
113    let sliding_width = this.$tabListItems[0].getBoundingClientRect().width
114    const style = this.utilts.getNodeStyle(this.$tabListItems[0])
115    const item_ml = parseFloat(style.marginLeft) || 0
116    sliding_width += item_ml
117
118    const slidesPerView = this.slidesPerView == 12 ? 1 : this.slidesPerView == 1 ? 12 : this.slidesPerView
119    if (this.sliding_step != (this.dataLen - slidesPerView)) {
120      this.sliding_step = this.sliding_step + 1
121      if (this.sliding_step > 0) this.$tabWarpIconPrev.classList.remove('disabled-icon')
122      this.$tabWarptIconNext.classList.remove('disabled-icon')
123      if (this.sliding_step == (this.dataLen - slidesPerView)) this.$tabWarptIconNext.classList.add('disabled-icon')
124      let resBorderVal = slidesPerView == 1 ? 0 : this.sliding_step * this.fullBorderVal
125      if (item_ml) resBorderVal = 0
126      this.$tabWarpLists.style.transform = `translate3d(-${this.sliding_step * sliding_width - resBorderVal}px, 0, 0)`
127    }
128  }
129  setTabActiveFn(name) {
130    if (name) {
131      setTimeout(() => {
132        let tabListItems = this.$dom.querySelectorAll('.unit-tab-list__item')

133        Array.from(tabListItems).forEach(_val => _val.classList.remove('active'))
134        this.$dom.querySelector('.swiper-slide-active').classList.add('active')
135      }, 0);
136      return false
137    }
138    if (!this.$tabListItems.length) return
139    Array.from(this.$tabListItems).forEach(_val => _val.classList.remove('active'))
140    this.$tabListItems[this.activeIndex].classList.add('active')
141  }
142  setContentShowFn() {
143    if (!this.$contentItem.length) return
144    Array.from(this.$contentItem).forEach(_val => _val.classList.remove('show'))
145    this.$contentItem[this.activeIndex].classList.add('show')
146  }
147  setDisabledFn() {
148    if (this.activeIndex == 0) {
149      this.$tabContentIconLeft.classList.add('icon-disabled')
150      this.$tabContentIconRight.classList.remove('icon-disabled')
151    } else if (this.activeIndex == this.dataLen - 1) {
152      this.$tabContentIconRight.classList.add('icon-disabled')
153      this.$tabContentIconLeft.classList.remove('icon-disabled')
154    } else {
155      this.$tabContentIconLeft.classList.remove('icon-disabled')
156      this.$tabContentIconRight.classList.remove('icon-disabled')
157    }
158  }
159  initBetween() {
160    const target = this.$dom.querySelector('.unit-tab-wrap')
161    const id = 'swiper-wrapper'
162    this.$itemFirst = target.querySelector(`.unit-list__item`)
163    if (!this.$itemFirst) return
164    const style = this.utilts.getNodeStyle(this.$itemFirst)
165    const item_pr = parseFloat(style.paddingRight) || 0
166    const item_pl = parseFloat(style.paddingLeft) || 0
167    const item_mr = parseFloat(style.marginRight) || 0
168    const item_ml = parseFloat(style.marginLeft) || 0
169    const $style = document.createElement('style')
170    let html = `.${id} .unit-list__item{margin-left:0!important;padding:0!important; max-width: unset; flex: none;} .${id}{flex-wrap: unset;}`
171    $style.innerHTML = html
172    target.appendChild($style)
173    return item_pr + item_pl + item_mr + item_ml // 清理数据
174  }
175}