// 引入弹框组件
import * as iakit from 'iakit'
// 引入请求接口
import { queryInterestListInfo, interestDetailInfo } from 'services'
// 引入判断是否是页面底部函数
import isReachBottom from 'helper/isReachBottom'
export default create({
data() {
return {
//此处数据为在页面上显示的数据
listData: [],
detailInfo: [],
current: {
basic: {},
newcomer: [],
new_come_rate: '',
activity: [],
commission: []
},
rate: 0,
page: 1,
// 是否有更多数据
hasMore: true,
// 是否显示加载更多数据信息
isShowLoading: true
}
},
’
created() {
this.queryInterestList()
// 为窗体添加滚动事件 RreachBottom,判断是否滑动到了页面底部
window.addEventListener('scroll', this.RreachBottom)
},
methods: {
// 找到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()
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。
这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）
《前端开发四大模块核心知识笔记》
最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
