vue中利用vant插件实现一个无限加载和标签切换功能

　　介绍

本篇文章为大家展示了vue中利用vant插件实现一个无限加载和标签切换功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强>样例:

vue中利用vant插件实现一个无限加载和标签切换功能

<强> 1。创建vue项目,不再详述

<强> 2。引入vant

之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我

安装依赖

npm我vant - s

在主要。js中引入

从& # 39;进口Vant vant& # 39;;
　　进口& # 39;vant/lib/index.css& # 39;;
　　Vue.use (Vant);

<强> 3。在页面中使用

官方写的比我写的好多了,大家可以借鉴,看源代码可能比官方给的文档更直观

官方文档

我在文件中的使用,没有使用下拉刷新的功能,大家可以直接看官网代码:

& lt; template> 　　& lt; div类=癿yOffice"祝辞 　　& lt; van-tabs v模型=癮ctive"祝辞 　　& lt; van-tab title=霸な芾怼氨? 　　& lt; van-list v模型=發oading1":完成=癴inished1"完成的文本=懊挥懈嗔恕癅load=皁nLoad1":error.sync=癳rror1"错误文本=扒肭笫О?点击重新加载“比; 　　& lt; van-cell v=發ist1"(项目,指数);:关键=癷tem.PROJID"@click=按?& # 39;1 & # 39;指数)“比; 　　& lt; div类=皀um"在{{item.PROJID}} & lt;/div> 　　& lt; div类=皀ame"在{{item.SERVICENAME}} & lt;/div> 　　& lt; div类=癱leatFloat detailInfo"比; 　　& lt; div类=癴loatLeft deptName"比; 　　& lt; i> & lt;/i> 　　& lt; span> {{item.DEPTNAME}} & lt;/span> 　　& lt;/div> 　　& lt; div类=癴loatRight time"比; 　　& lt; i> & lt;/i> 　　& lt; span> {{item.ACCEPTTIME.slice (0, item.ACCEPTTIME.length-2)}} & lt;/span> 　　& lt;/div> 　　& lt;/div> 　　& lt;/van-cell> 　　& lt;/van-list> 　　& lt;/van-tab> 　　& lt; van-tab title=罢诖怼氨? 　　& lt; van-list v模型=發oading2":完成=癴inished2"完成的文本=懊挥懈嗔恕癅load=皁nLoad2":error.sync=癳rror2"错误文本=扒肭笫О?点击重新加载“比; 　　& lt; van-cell v=發ist2"(项目,指数);:关键=癷tem.flowroleid"@click=按?& # 39;2 & # 39;指数)“比; 　　& lt; div类=皀um"在{{item.PROJID}} & lt;/div> 　　& lt; div类=皀ame"在{{item.SERVICENAME}} & lt;/div> 　　& lt; div类=癱leatFloat detailInfo"比; 　　& lt; div类=癴loatLeft deptName"比; 　　& lt; i> & lt;/i> 　　& lt; span> {{item.DEPTNAME}} & lt;/span> 　　& lt;/div> 　　& lt; div类=癴loatRight time"比; 　　& lt; i> & lt;/i> 　　& lt; span> {{item.ACCEPTTIME.slice (0, item.ACCEPTTIME.length-2)}} & lt;/span> 　　& lt;/div> 　　& lt;/div> 　　& lt;/van-cell> 　　& lt;/van-list> 　　& lt;/van-tab> 　　& lt;/van-tabs> 　　& lt;/div> 　　& lt;/template> & lt; script> 　　出口默认{ 　　名称:& # 39;MyOffice& # 39; 　　数据(){ 　　返回{ 　　活动:0, 　　list1: [], 　　loading1:假的, 　　finished1:假的, 　　error1:假的, 　　所述:1、 　　用于:[], 　　loading2:假的, 　　finished2:假的, 　　error2:假的, 　　所以page2: 1 　　} 　　}, 　　方法:{>从& # 39;进口Vue Vue # 39;; 　　进口{按钮}& # 39;vant& # 39;; 　　 　　Vue.use(按钮);

我的写法:

& lt; template> 　　& lt; van-popup v模型=皊how"位置=皌op":/比; 　　& lt; van-cell-group> 　　& lt; van-cell title=暗ピ瘛?值=https://www.yisu.com/zixun/蹦谌?/> 　　从& # 39;进口Vant vant& # 39; 　　进口& # 39;vant/lib/index.css& # 39; 　　 　　Vue.use (Vant);

——未修改之前的.babelrc文件

{ 　　“presets":( 　　(“env", { 　　“modules":假的, 　　“targets": { 　　“browsers":(“比;“1%,“去年2 versions",“不是ie & lt;=8,) 　　} 　　}), 　　“stage-2" 　　), 　　“plugins":(“transform-vue-jsx",“transform-runtime"] 　　}

vue中利用vant插件实现一个无限加载和标签切换功能