<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-refreshv-model="ye_isLoading"success-text="刷新成功"@refresh="ye_onRefresh"><van-listv-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=thissetTimeout(() => {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>
增加分页：
<template><div class="huibj"><div class="listtab"><!--Tab 标签--><van-tabs v-model="yeactive" color="#f59a23" title-active-color="#f59a23"@change="Tabnav"><van-tab v-for="(item,index) in yetabList":key="index":title="item.title":name="item.namep"></van-tab></van-tabs></div><div class="ye_mxlist"><van-pull-refreshv-model="isRefresh"success-text="刷新成功"@refresh="onRefresh"><van-empty v-if="total == 0" description="暂无数据" /><van-listv-model="loadingMore":finished="isfinished"finished-text="-- END --"@load="onLoadMore"><van-cell v-for="(item,index) in dataList" :key="index"><div class="ye_dljl_mx" @click="goyuemx(item)" style="height: 40px"><div class="ye_dljl"><p class="ye_dljl_mc">{{item.dealReasonStr}}</p><p class="ye_dljl_sj">{{item.dealTime}}</p></div><div :class="item.dealType == 1 ? 'ye_jemx ye_add_je':'ye_jemx'">{{item.dealType == 1 ? '+': '-'}}{{item.dealAmount/100}}</div></div></van-cell></van-list></van-pull-refresh></div></div>
</template>
<script>//新的路径josn
import axios from '@/utils/axios';
import url from '@/ui/URL.js';
//新的路径josn end
export default {name: 'yemxZ',data() {return {//Tab 标签yetabList: [{title: "全部",name: "0"},{title: "收入",name: '1'},{title: "支出",name: '2'},],yeactive: '0', //tab默认值//上拉加载下拉刷新isRefresh: false, //是否下拉刷新loadingMore: false,// 加载更多是否显示加载中isfinished: false, // 加载是否已经没有更多数据dataList: [],//列表total: 1,pageNum: 0,pageSize:10,};},components: {topnav,},mounted() {},methods: {//tab切换Tabnav() {this.dataList=[];this.pageNum=0;this.isfinished=false; // 加载是否已经没有更多数据this.backtop();},//下拉刷新onRefresh() {this.isfinished=true; // 加载是否已经没有更多数据this.dataList=[]; // 清空列表数据this.pageNum=1;this.getList();},//加载更多onLoadMore() {console.log('加载更多')this.pageNum++;this.getList();},// 获取列表getList() {//模拟// setTimeout(() => {// for (let i = 0; i < 2; i++) {// this.dataList.push(this.dataList.length + 1);// }// this.loadingMore = false;// if (this.dataList.length >= 6) {// this.isfinished = true;// }// }, 1000);let that=this;let bdlx=this.yeactive == 0 ? '': this.yeactive;//变动类型:1收入,2支出let csData={pageNum:that.pageNum,pageSize:that.pageSize,dealType:bdlx};axios.ajax({method: 'get',url: url.zzzzz.xxxx,params:csData}).then((res) => {if (res.success) {// 加载状态结束this.loadingMore = false;this.isRefresh=false; //是否下拉刷新//数据追加到列表if (this.pageNum > 1) {this.dataList = this.dataList.concat(res.data.list)} else {this.dataList = res.data.list}this.total=res.data.total;if (this.total <= this.dataList.length) {console.log("没有更多")this.isfinished = true}else{this.isfinished = false}} else {this.$toast(res.message);}});},//返回顶部backtop () {document.documentElement.scrollTop=0},//说额明细goyuemx(val) {this.$router.push('yemxxqZ');}}
};
</script><style scoped></style>
