使用事件代理實現vue的手風琴元件
阿新 • • 發佈：2019-01-07
// 找到li子節點
getNode(node) {
if (node.nodeName === 'LI') {
return node
} else if (node.nodeName === 'UL') {
return false
} else {
return this.getNode(node.parentNode)
}
},
toggle(e) {
var target = e.target || e.srcElement
var $li = document.querySelectorAll('li')
// thisLi 當前點選li的e.target
var thisLi = this.getNode(target)
// 獲取所有列表項，生成陣列
var $details = document.querySelectorAll('.earnDetail')
// 獲取所有旋轉圖示，生成陣列
var $icons = document.querySelectorAll('.eranIcon')
for (let i = 0, length = $li.length; i < length; i++) {
if (thisLi === $li[i]) {
if ($details[i].style.display === '') {
// div展開時，將它隱藏
$details[i].style.display = 'none'
$icons[i].className = 'eranIcon'
} else {
// 隱藏時，將它展開
// 如果當前詳情項數組裡無對應此項資料
if (!this.detailInfo[i]) {
let ctime = thisLi.children[0].children[0].innerHTML
interestDetailInfo(
{
'data': ctime
}
).then((resp) => {
// 將請求到的詳情項放入詳情陣列中
this.detailInfo[i] = resp
// 將請求詳情項賦值給當前詳情項，以供顯示
this.current = resp
if (!this.activity) {
this.rate = 0
} else {
this.rate = this.activity.rate
}
}).catch((err) => {
iakit.alert('', err.message, [
{
text: '朕知道了'
}
])
})
} else {
// 如果詳情項陣列中有對應此項資料，就將陣列中的資料賦值給當前詳情項，以供顯示
this.current = this.detailInfo[i]
}
$details[i].style.display = ''
$icons[i].className = 'eranIcon rotate'
}
} else {
$details[i].style.display = 'none'
$icons[i].className = 'eranIcon'
}
}
},
queryInterestList() {
// 判斷資料是否正在載入中，以防重複載入
if (this.fetching) {
return
}
this.fetching = true
this.isShowLoading = true
this.loadingTip = '正在載入中...'
queryInterestListInfo({
page: this.page,
len: 15
}).then((resp) => {
const data = resp.list
// 成功後不顯示提示資訊，資料載入完畢
this.isShowLoading = false
this.fetching = false
if (data && data.length > 0) { // 存在資料，用concat連線每次請求的陣列項
this.listData = this.listData.concat(data)
} else { // 沒有更多資料了
this.hasMore = false
this.isShowLoading = true
this.loadingTip = '沒有更多資料了'
}
// 請求頁標誌加1,即當再次請求時請求下一頁
this.page += 1
}).catch((err) => {
this.fetching = false
iakit.alert('', err.message, [
{
text: '朕知道了'
}
])
})
},
RreachBottom() {
// 如果滾動到頁面底部，並且當前選項卡為投資項
if (isReachBottom()) {
// 判斷介面還有無資料 ，如果有，就再次請求介面
if (this.hasMore) {
this.queryInterestList()
} else {
// 如果沒有資料，就解綁此事件
window.onscroll = null
}
}
}
}
})
getNode(node) {
if (node.nodeName === 'LI') {
return node
} else if (node.nodeName === 'UL') {
return false
} else {
return this.getNode(node.parentNode)
}
},
toggle(e) {
var target = e.target || e.srcElement
var $li = document.querySelectorAll('li')
// thisLi 當前點選li的e.target
var thisLi = this.getNode(target)
// 獲取所有列表項，生成陣列
var $details = document.querySelectorAll('.earnDetail')
// 獲取所有旋轉圖示，生成陣列
var $icons = document.querySelectorAll('.eranIcon')
for (let i = 0, length = $li.length; i < length; i++) {
if (thisLi === $li[i]) {
if ($details[i].style.display === '') {
// div展開時，將它隱藏
$details[i].style.display = 'none'
$icons[i].className = 'eranIcon'
} else {
// 隱藏時，將它展開
// 如果當前詳情項數組裡無對應此項資料
if (!this.detailInfo[i]) {
let ctime = thisLi.children[0].children[0].innerHTML
interestDetailInfo(
{
'data': ctime
}
).then((resp) => {
// 將請求到的詳情項放入詳情陣列中
this.detailInfo[i] = resp
// 將請求詳情項賦值給當前詳情項，以供顯示
this.current = resp
if (!this.activity) {
this.rate = 0
} else {
this.rate = this.activity.rate
}
}).catch((err) => {
iakit.alert('', err.message, [
{
text: '朕知道了'
}
])
})
} else {
// 如果詳情項陣列中有對應此項資料，就將陣列中的資料賦值給當前詳情項，以供顯示
this.current = this.detailInfo[i]
}
$details[i].style.display = ''
$icons[i].className = 'eranIcon rotate'
}
} else {
$details[i].style.display = 'none'
$icons[i].className = 'eranIcon'
}
}
},
queryInterestList() {
// 判斷資料是否正在載入中，以防重複載入
if (this.fetching) {
return
}
this.fetching = true
this.isShowLoading = true
this.loadingTip = '正在載入中...'
queryInterestListInfo({
page: this.page,
len: 15
}).then((resp) => {
const data = resp.list
// 成功後不顯示提示資訊，資料載入完畢
this.isShowLoading = false
this.fetching = false
if (data && data.length > 0) { // 存在資料，用concat連線每次請求的陣列項
this.listData = this.listData.concat(data)
} else { // 沒有更多資料了
this.hasMore = false
this.isShowLoading = true
this.loadingTip = '沒有更多資料了'
}
// 請求頁標誌加1,即當再次請求時請求下一頁
this.page += 1
}).catch((err) => {
this.fetching = false
iakit.alert('', err.message, [
{
text: '朕知道了'
}
])
})
},
RreachBottom() {
// 如果滾動到頁面底部，並且當前選項卡為投資項
if (isReachBottom()) {
// 判斷介面還有無資料 ，如果有，就再次請求介面
if (this.hasMore) {
this.queryInterestList()
} else {
// 如果沒有資料，就解綁此事件
window.onscroll = null
}
}
}
}
})