vue 는 vant 플러그 인 을 사용 하여 tabs 전환 과 무한 로드 기능 의 실현 을 합 니 다.

샘플:

1.vue 프로젝트 를 만 들 고 더 이상 설명 하지 않 습 니 다.
2.vant 도입
이전에 많은 플러그 인 을 사용 하여 이 기능 을 했 지만 효과 가 만 족 스 럽 지 못 하고 여러 가지 문제 가 발생 했 습 니 다.vant 라 는 플러그 인 을 만 날 때 까지 이런 작은 문 제 를 완벽 하 게 해결 하 였 습 니 다.문제 가 있 으 면 연락 주세요.
설치 의존
npm i vant -S
main.js 에 도입

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

3.페이지 에서 사용
공식 적 으로 쓴 것 이 제 가 쓴 것 보다 훨씬 좋 습 니 다.여러분 은 참고 할 수 있 습 니 다.소스 코드 를 보면 공식 적 으로 준 문서 보다 더욱 직관 적일 수 있 습 니 다.
공식 문서
제 가 파일 에서 사용 한 것 은 드 롭 다운 새로 고침 기능 을 사용 하지 않 았 습 니 다.여러분 은 홈 페이지 코드 를 직접 볼 수 있 습 니 다.

<template>
 <div class="myOffice">
  <van-tabs v-model="active">
    <van-tab title="   ">
     <van-list v-model="loading1" :finished="finished1" finished-text="     " @load="onLoad1" :error.sync="error1" error-text="    ，      ">
      <van-cell v-for="(item,index) in list1" :key="item.PROJID" @click="handle('1',index)">
       <div class="num">{{item.PROJID}}</div>
       <div class="name">{{item.SERVICENAME}}</div>
       <div class="cleatFloat detailInfo">
        <div class="floatLeft deptName">
         <i></i>
         <span>{{item.DEPTNAME}}</span>
        </div>
        <div class="floatRight time">
         <i></i>
         <span>{{item.ACCEPTTIME.slice(0,item.ACCEPTTIME.length-2)}}</span>
        </div>
       </div>
      </van-cell>
     </van-list>
    </van-tab>
    <van-tab title="    ">
     <van-list v-model="loading2" :finished="finished2" finished-text="     " @load="onLoad2" :error.sync="error2" error-text="    ，      ">
      <van-cell v-for="(item,index) in list2" :key="item.flowroleid" @click="handle('2',index)">
       <div class="num">{{item.PROJID}}</div>
       <div class="name">{{item.SERVICENAME}}</div>
       <div class="cleatFloat detailInfo">
        <div class="floatLeft deptName">
         <i></i>
         <span>{{item.DEPTNAME}}</span>
        </div>
        <div class="floatRight time">
         <i></i>
         <span>{{item.ACCEPTTIME.slice(0,item.ACCEPTTIME.length-2)}}</span>
        </div>
       </div>
      </van-cell>
     </van-list>
    </van-tab>
   </van-tabs>
 </div>
</template>

<script>
export default {
 name:'MyOffice',
 data(){
  return {
   active: 0,
   list1: [],
   loading1: false,
   finished1: false,
   error1: false,
   page1: 1,
   list2: [],
   loading2: false,
   finished2: false,
   error2: false,
   page2: 1
  }
 },
 methods:{
  onLoad1(){
   var _vm = this;
   _vm.param.pageNo = _vm.page1;
   _vm.param.handleState = '1';
   _vm.axios.post('*************',_vm.param).then(response => {
    _vm.page1 ++;
    var moreList = response.data.data.data;
    if(moreList){
     _vm.list1.push(...moreList);
     _vm.loading1 = false;
     _vm.finished1 = false;
    }else{
     _vm.loading1 = false;
     _vm.finished1 = true;
    }
   }).catch(error => {
    _vm.error1 = true;
    _vm.loading1 = false;
   })
  },
  onLoad2(){
   var _vm = this;
   _vm.param.pageNo = _vm.page2;
   _vm.param.handleState = '2';
   _vm.axios.post('******************',_vm.param).then(response => {
    _vm.page2 ++;
    var moreList = response.data.data.data;
    if(moreList){
     _vm.list2.push(...moreList);
     _vm.loading2 = false;
     _vm.finished2 = false;
    }else{
     _vm.loading2 = false;
     _vm.finished2 = true;
    }
   }).catch(error => {
    console.log(error);
    _vm.error2 = true;
    _vm.loading2 = false;
   })
  },
  handle(type,index){
   this.$router.push('/itemDetail?type=' + type + '&index=' + index);
  }
 }
}
</script>

추가 지식:Vant vue 에서 필요 에 따라 도입 및 모든 로드
1.문제 설명:
vue-cli 2.x 비계 에서 vant 구성 요소 라 이브 러 리 를 사용 하 는 연습 을 합 니 다.main.js 에서 구성 요소 에 사용 할 때 Vant is not defined 를 잘못 알 렸 습 니 다.
나 는 테스트 연습 vant 이기 때문이다.demo 는 모든 로드 와 필요 에 따라 로드 하 는 두 가지 방식 으로 나 뉜 다.
필요 에 따라 불 러 오기
1.먼저 vue 비 계 를 구축 하고,
2.vant 다운로드
3.babel-plugin-import 다운로드(필요 에 따라 불 러 오기 사용)
3.다운로드 가 완료 되면.vue 파일 에서 사용 할 수 있 습 니 다.
vant:cnpm install vant-S 다운로드
다운로드 babel-plugin-import:cnpm install babel-plugin-import-S
우선 도입:(공식 문서):

import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

나의 쓰기:

<template>
 <van-popup v-model="show" position="top" :style="{ height: '30%' }" />
  <van-cell-group>
   <van-cell title="   " value="  " />
   <van-cell title="   " value="  " label="    " />
  </van-cell-group>
</template>
<script>
import { Popup } from "vant";
import { Cell, CellGroup } from "vant";

components:{
  [Cell.name]: Cell,
  [CellGroup.name]: CellGroup,
}
</script>

여러분 은 계산 속성 에서 당신 이 도입 한 구성 요 소 를 인쇄 해서 안에 무엇이 있 는 지 볼 수 있 습 니 다.
모두 불 러 오기
STEP 1:vue 비계 다운로드
vue init webpack 프로젝트 이름;
STEP 2:vant 다운로드
cnpm install vant -S
main.js 에서 도입 및 사용

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant);

-수정 되 지 않 은.babelrc 파일

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "plugins": ["transform-vue-jsx", "transform-runtime"]
}

세 번 째 단계:babel-plugin-import 를 설치 합 니 다.
cnpm install babel-plugin-import -S
-babel-plugin-import 를 다운로드 한 후.babelrc 파일 수정

{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]],
 "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
  }
 }
}

넷 째,babel-plugin-import 이 걸 설치 하고 이 걸 마 운 트 해제 하고 프로젝트 를 다시 시작 해 야 합 니 다.babel-plugin-import 이 파일 을 마 운 트 해제 할 때.babelrc 이 파일 도 처음에 수정 되 지 않 은 모습 으로 복원 해 야 합 니 다.
cnpm uninstall babel-plugin-import -S
이제 프로젝트 를 다시 시작 하면 될 것 같 습 니 다.
이상 의 vue 는 vant 플러그 인 을 사용 하여 tabs 전환 과 무한 로드 기능 을 실현 하 는 것 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.