<template>
<div class="huibj">
<div class="listtab">
<!--顶部导航-->
<div class="topdh">
<topnav topname="余额明细"></topnav>
</div>
<!--Tab 标签-->
<van-tabs v-model="yeactive"
@change="Tabnav">
<van-tab v-for="(item,index) in yetabList"
:key="index"
:title="item.title"
:name="item.name">
</van-tab>
</van-tabs>
</div>
<div class="ye_mxlist">
<van-pull-refresh
v-model="ye_isLoading"
success-text="刷新成功"
@refresh="ye_onRefresh">
<van-list
v-model="ye_loading"
:finished="ye_finished"
finished-text="-- END --"
@load="ye_onLoad">
<van-cell v-for="(item,index) in ye_list" :key="index">
<div class="ye_dljl_mx" @click="goyuemx(item)" style="height: 40px">
{{index}}
</div>
</van-cell>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script>
//以下是组件 #
import topnav from '@/components/topnav/topnav'; //顶部导航
export default {
name: 'yemxZ',
data() {
return {
//Tab 标签
yetabList: [
{
title: "aa",
name: "0"
},
{
title: "bb",
name: '1'
},
{
title: "cc",
name: '2'
},
],
yeactive: '0', //tab默认值
//上拉加载下拉刷新
ye_isLoading: false, //是否下拉刷新
ye_loading: false,//是否处于加载状态
ye_finished: false, // 是否已加载完成
ye_list: [],
};
},
components: {
topnav,
},
mounted() {
//this.getData()
},
methods: {
//tab切换
Tabnav() {
console.log(2)
console.log(this.yeactive)
},
//下拉刷新
ye_onRefresh() {
let that=this
setTimeout(() => {
that.ye_isLoading = false;
that.ye_onLoad();
}, 1000);
},
ye_onLoad() {// 滚动条与底部距离小于 offset 时触发 offset可以自定义
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.ye_list.push(this.ye_list.length + 1);
}
this.ye_loading = false;
if (this.ye_list.length >= 40) {
this.ye_finished = true;
}
}, 1000);
},
goyuemx(val) {
console.log(5)
}
}
};
</script>
<style scoped>
</style>