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 相关文章推荐
flexigrid 参数说明
Nov 23 Javascript
jquery form 加载数据示例
Apr 21 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 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
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP下常用正则表达式整理
2010/10/26 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
使用Python读取大文件的方法
2018/02/11 Python
python微信好友数据分析详解
2018/11/19 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
大四学年自我鉴定
2013/11/13 职场文书
省三好学生申请材料
2014/01/22 职场文书
十八大感想感言
2014/02/10 职场文书
大学生秋游活动方案
2014/02/17 职场文书
我爱我家教学反思
2014/05/01 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书