vue 使用vant插件做tabs切换和无限加载功能的实现


Posted in Javascript onNovember 04, 2020

样例:

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>

大家可以在计算属性中打印一下你引入的组件,看看里面有什么了

全部加载

第一步: 下载vue脚手架

vue init webpack 项目名;

第二步: 下载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这个文件也要恢复到一开始没修改的样子偶(就是上面的''未修改之前的 .babelrc 文件)

cnpm uninstall babel-plugin-import -S

接下来重启项目就应该可以了。

以上这篇vue 使用vant插件做tabs切换和无限加载功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
如何编写jquery插件
Mar 29 jQuery
Vue触发式全局组件构建的方法
Nov 28 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
Vue获取微博授权URL代码实例
Nov 04 #Javascript
基于vue实现微博三方登录流程解析
Nov 04 #Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 #Javascript
解决vant中 tab栏遇到的坑 van-tabs
Nov 04 #Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 #Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 #Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 #Javascript
You might like
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
eslint 的三大通用规则详解
2019/05/16 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python求素数示例分享
2014/02/16 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
大学生创业计划书的用途
2014/01/08 职场文书
共产党员公开承诺书
2014/03/25 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server