vue + vantUI的列表上拉加载更多和下拉刷新（带tab标签页）
html部分：
<!-- 头部导航区域 -->
<div class="nav" ref="navWrap">
<ul ref="navContent">
<li v-for="(item, index) in askNavData" :key="index"><a :class="{active: index === currIndex}" @click.prevent="handleNavClick(item, index)" href="javascript:;">{{ item.name }}</a></li>
</ul>
</div>
<van-pull-refresh v-model="isLoading" style="flex:1;overflow:auto" @refresh="_onRefresh">
<van-list
v-model="loading"
:finished="finished"
:immediate-check='false'
finished-text="没有更多了...."
@load="_onLoad"
:offset="10">
<!-- 数据 -->
<div class="list-box">
<ul>
<li v-for="item in questionList" :key="item.index">
<!-- 标题部分 -->
<div class="title">
<div class="icon">
<span v-show="item.extra_state === 2">顶</span>
<span v-show="item.extra_state === 1">精</span>
</div>
<a @click.prevent="handleQuesClick(item.question_id)" href="javascript:;">{{ item.title }}</a>
</div>
<!-- 数据部分 -->
<div class="data">
<div class="left">
<img :src="item.from.avatar" alt="头像">
<span>{{ item.from.nickname }}</span>
<span>|</span>
<span>{{ item.create_time }}</span>
</div>
<div class="right">
<i class="iconfont icon-chakan"></i>
<span>{{ item.watch_num }}</span>
<i class="reply iconfont icon-chakantiezihuifu"></i>
<span>{{ item.answer_num }}</span>
</div>
</div>
</li>
</ul>
</div>
</van-list>
</van-pull-refresh>
data部分：
data(){
return {
questionList: [
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
{
_id: "5e81a5e329a65a359d6a2b27",
watch_num: 11,
answer_num: 1,
state: 1,
extra_state: 2,
question_id: 8,
cate_id: 1,
user_id: 7,
title: "冲哈---",
description: "gogogo",
create_time: "2020-03-30 15:55:15",
from:{
_id: "5e81972c29a65a359d6a2b26",
avatar: "http://47.99.74.241:5000/public/images/1585551210986.png",
gender: "保密",
bio: "",
birthday: "",
user_id: 7,
phone: "18279979690",
password: "18279979690",
nickname: "feiji",
create_time: "2020-03-30 14:52:28"
}
},
],
askNavData = [
{
name: '全部',
},
{
name: '精华问题',
extra_state: 1
},
{
name: '置顶问题',
extra_state: 2
},
{
name: '已解决问题',
state: 1
},
{
name: '待解决问题',
state: 0
},
]
}
}
methods部分：
// 处理点击导航
handleNavClick (item, index) {
this.currIndex = index
this.page = 1
this._reqQuestion()
},
handleSearch(){
if (!this.title) {
return Toast('请输入要搜索的关键词')
}
},
// 获取列表数据
_reqQuestion () {
console.log(this.page, this.currIndex,'输出点击')
// 请求数据
},
// 刷新
_onRefresh(){
this.isLoading = true;
this.page = 1
setTimeout(()=>{
// 模拟请求，开启请求数据时关闭延时器
this.isLoading = false;
},1000)
// 请求数据
console.log('下拉刷寻，正在请求数据~~')
// 请求数据
},
_onLoad() { //上拉加载
this.page ++
this.loading = false
// 请求数据
console.log('上拉加载更多')
// 请求数据，判断最后一页请求的数据条数，如果少于一页现实的条数，说明是最后一页，设置请求完成，关闭loading
if (6 < config.limit) {
this.finished = true
}
}