vant 下拉刷新 上拉加载

<template>
<div class="joblist_cotainer">
<nav-bar :title="t('tipObj.loosing')"
:pulling-text="t('recruit.employer.jobList.loading')"
:finished-text="t('recruit.employer.jobList.on') : t('recruit.employer.jobList.workHome')}}</span>
<span v-else>{{item.countyName}}wewqewqewqewqewqwqewqe</span>
<span class="createTime">{{item.createTimeFormat}}</span>
</p>
</div>
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
<div v-if="!listTimeShow" class="company_list">
<img class="no_img" src="@img/nojob.png" alt="">
<p class="no_text">{{t('recruit.employer.jobList.postJob')" :isclick="true" @ConfirmClick="ConfirmClick" />
</div>
</template>

<script>
import NavBar from '@/components/common/NavBar'
import FootBtn from '@/components/common/FootBtn'
import PositionApi from '@/api/employer/position'
import { mapGetters } from 'vuex'
export default {
name: 'JobList',
components: {
NavBar,
FootBtn
},
data() {
return {
SearchValue: '',
numTime: 0,
tabNum: 1,
tabTitle: [
{ name: this.t('recruit.employer.jobList.on'), status: 1 },
{ name: this.route'(to, from) {
if (from.path === '/jobtimedetails' && this.isEdit) {
this.reloadPart()
}
}
},
mounted() {
window.createPartTimeJobBack = this.reloadPart
},
created() {
this.from = this.bridge.close('{ "method": "close", "data": "joblist" }')
},
ConfirmClick() { // 兼职
this.bridge.editJobPartTime('{ "method": "editJobPartTime", "data": {"jobId": "" }}')
},
goSearch() { // 跳到原生页面去搜索，从职位列表进入的
this.$bridge.jobSearch('{ "method": "jobSearch" }')
},
clickTabTime(index, status) { // 上线下线兼职
if (index === this.numTime) {
return
}
this.numTime = index
this.pageNumTime = 1
this.statusTime = status
this.getListTime()
},
getListTime() { // 兼职列表
const data = {
currentPage: this.pageNumTime,
pageSize: this.pageSizeTime,
status: this.statusTime
}
PositionApi.getJobByConPartTime(data).then(res => {
if (res.code === 0) {
this.loadingTime = false // 加载状态结束
this.totalNumTime = res.body.total
const records = res.body.records

      if (records === 0 || records === null) {
        // 加载结束
        this.finishedTime = true
        return
      }
      if (records.length < this.pageSizeTime) {
        // 不足10条
        this.finishedTime = true
      }

      // 处理数据
      if (this.pageNumTime === 1) {
        this.listTime = records
      } else {
        this.listTime = this.listTime.concat(records)
        this.listTime = this.$unique(this.listTime)
      }
      if (this.listTime.length >= this.totalNumTime) {
        this.finishedTime = true
      }
      if (this.listTime.length === 0) {
        this.listTimeShow = false
      } else {
        this.listTimeShow = true
      }
    } else {
      this.$toast.fail(res.message)
    }
  }).catch(() => {
    this.$toast.fail(this.$t('tipObj.failed'))
  }).finally(() => {
    this.refreshingTime = false
    this.loadingTime = false
  })
},
onRefreshTime() { // 下拉刷新兼职
  this.pageNumTime = 1
  this.finishedTime = false
  this.getListTime()
},
onLoadTime() { // 上拉加载兼职
  this.pageNumTime++
  this.getListTime()
},
goJobDetailsTime(id) {
  this.$store.dispatch('app/setIsEdit', false)
  this.$router.push({ path: '/jobtimedetails', query: { id: id, from: 'list' }})
}

}
}
</script>
export function unique(newarr) {
const res = new Map()
return newarr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
}

<style scoped lang="scss">
.joblist_cotainer_search{
position: fixed;
width: 100%;
top: 46px;
/height: 110px;/
z-index: 20;
}
.job_type_title{
width: 100%;
padding: 0 15px;
height: 48px;
line-height: 48px;
background: colorText;
span{
margin-right: 40px;
}
.active {
color: backgroundColor;
border-radius: 2px;
position: absolute;
bottom: -4px;
left: 50%;
margin-left: -22px;
}
}
}
.refresh_box{
margin-top: 48px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 3s;
}
.joblist_cotainer {
height: 100vh;
background: #f7f8fb;
display: flex;
flex-direction: column;
.van-search .van-cell {
height: 44px;
line-height: 44px;
border-radius: 8px;
padding: 0 10px 0 0;
}
&_tab {
padding: 0 20px;
font-size: 16px;
color: backgroundColor;
font-weight: bold;
position: relative;
font-size: 18px;
}
}
/deep/ .van-list{
padding-bottom:colorF7;
margin-top: 10px;
padding: 10px;
box-sizing: border-box;
color: font16;
color: font14;
margin: 5px 0;
}
.tips {
font-size: w: 300px, c: #fff, backgroundColor);
left: 50%;
margin-left: -150px;
}
}
.joblistItem {
background-color: font14;
color: #60666e;
border-bottom: 10px solid #f1f2f4;
.title {
@include flexbox(ai: flex-start, colorInput;
line-height: 21px;
font-weight: bold;
}
.type {
min-width: 30px;
position: relative;
color: #fff;
display: inline-block;
padding: 2px 6px;
background: #7CBB53;
border-radius: 2px;
}
}
.info{
font-size: colorF7;
.no_img {
display: block;
width: 204px;
height: 172px;
margin: 0 auto;
}

.no_text {
  color: $colorInput;
  font-size: $font16;
  font-weight: bold;
  margin-top: 20px;
  text-align: center;
}

}
</style>