电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

vue 使用vant插件做tabs切換和無(wú)限加載功能的實(shí)現(xiàn)

瀏覽:3日期:2022-11-06 11:49:11

樣例:

vue 使用vant插件做tabs切換和無(wú)限加載功能的實(shí)現(xiàn)

1.創(chuàng)建vue項(xiàng)目,不再詳述

2.引入vant

之前用過(guò)很多插件做這個(gè)功能,但是效果都不盡人意,出現(xiàn)各種問(wèn)題,直到遇到vant這個(gè)插件,完美的解決了這些小問(wèn)題,如有問(wèn)題,歡迎聯(lián)系我

安裝依賴

npm i vant -S

在main.js中引入

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

3.在頁(yè)面中使用

官方寫的比我寫的好多了,大家可以借鑒,看源代碼可能比官方給的文檔更直觀

官方文檔

我在文件中的使用,沒(méi)有使用下拉刷新的功能,大家可以直接看官網(wǎng)代碼:

<template> <div class='myOffice'> <van-tabs v-model='active'> <van-tab> <van-list v-model='loading1' :finished='finished1' finished-text='沒(méi)有更多了' @load='onLoad1' :error.sync='error1' error-text='請(qǐng)求失敗,點(diǎn)擊重新加載'> <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> <van-list v-model='loading2' :finished='finished2' finished-text='沒(méi)有更多了' @load='onLoad2' :error.sync='error2' error-text='請(qǐng)求失敗,點(diǎn)擊重新加載'> <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>

補(bǔ)充知識(shí):Vant 在vue中 按需引入和全部加載

1. 問(wèn)題描述:

在vue-cli 2.x 腳手架中練習(xí)使用vant組件庫(kù), 在main.js用于組件的時(shí)候 報(bào)錯(cuò) Vant is not defined

因?yàn)槲沂菧y(cè)試練習(xí)vant的 ; demo分為 全部加載 和按需加載兩種方式

按需加載

1.首先搭建vue腳手架,

2.下載vant

3. 下載 babel-plugin-import (按需加載使用)

3.當(dāng)下載好了以后,就可以在 .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' : /> <van-cell-group> <van-cell value='內(nèi)容' /> <van-cell value='內(nèi)容' label='描述信息' /> </van-cell-group></template><script>import { Popup } from 'vant';import { Cell, CellGroup } from 'vant';components:{ [Cell.name]: Cell, [CellGroup.name]: CellGroup,}</script>

大家可以在計(jì)算屬性中打印一下你引入的組件,看看里面有什么了

全部加載

第一步: 下載vue腳手架

vue init webpack 項(xiàng)目名;

第二步: 下載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 (這部是按需加載的時(shí)候需要用到的,如果你全部引入了 就不需要)

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 這個(gè) 然后需要把這個(gè)卸載掉, 然后重新項(xiàng)目; 在你卸載掉babel-plugin-import 這個(gè)的時(shí)候 .babelrc這個(gè)文件也要恢復(fù)到一開(kāi)始沒(méi)修改的樣子偶(就是上面的’’未修改之前的 .babelrc 文件)

cnpm uninstall babel-plugin-import -S

接下來(lái)重啟項(xiàng)目就應(yīng)該可以了。

以上這篇vue 使用vant插件做tabs切換和無(wú)限加載功能的實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 深圳南财多媒体有限公司介绍| 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 金属波纹补偿器厂家_不锈钢膨胀节价格_非金属伸缩节定制-庆达补偿器 | 中央空调温控器_风机盘管温控器_智能_液晶_三速开关面板-中央空调温控器厂家 | 污水处理设备-海普欧环保集团有限公司 | 热工多功能信号校验仪-热电阻热电偶校验仿真仪-金湖虹润仪表 | 上海刑事律师|刑事辩护律师|专业刑事犯罪辩护律师免费咨询-[尤辰荣]金牌上海刑事律师团队 | 威廉希尔WilliamHill·足球(中国)体育官方网站 | 不锈钢监控杆_监控立杆厂家-廊坊耀星光电科技有限公司 | 环氧铁红防锈漆_环氧漆_无溶剂环氧涂料_环氧防腐漆-华川涂料 | 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 香蕉筛|直线|等厚|弧形|振动筛|香蕉筛厂家-洛阳隆中重工 | 球磨机 选矿球磨机 棒磨机 浮选机 分级机 选矿设备厂家 | MTK核心板|MTK开发板|MTK模块|4G核心板|4G模块|5G核心板|5G模块|安卓核心板|安卓模块|高通核心板-深圳市新移科技有限公司 | 镀锌钢格栅_热镀锌格栅板_钢格栅板_热镀锌钢格板-安平县昊泽丝网制品有限公司 | 自动钻孔机-全自动数控钻孔机生产厂家-多米(广东)智能装备有限公司 | 防火阀、排烟防火阀、电动防火阀产品生产销售商-德州凯亿空调设备有限公司 | 昆明网络公司|云南网络公司|昆明网站建设公司|昆明网页设计|云南网站制作|新媒体运营公司|APP开发|小程序研发|尽在昆明奥远科技有限公司 | 大型果蔬切片机-水果冬瓜削皮机-洗菜机切菜机-肇庆市凤翔餐饮设备有限公司 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 湖州织里童装_女童男童中大童装_款式多尺码全_织里儿童网【官网】-嘉兴嘉乐网络科技有限公司 | 交通信号灯生产厂家_红绿灯厂家_电子警察监控杆_标志杆厂家-沃霖电子科技 | 团建-拓展-拓展培训-拓展训练-户外拓展训练基地[无锡劲途] | 北京网站建设首页,做网站选【优站网】,专注北京网站建设,北京网站推广,天津网站建设,天津网站推广,小程序,手机APP的开发。 | 整合营销推广|营销网络推广公司|石家庄网站优化推广公司|智营销 好物生环保网、环保论坛 - 环保人的学习交流平台 | 球磨机 选矿球磨机 棒磨机 浮选机 分级机 选矿设备厂家 | TYPE-C厂家|TYPE-C接口|TYPE-C防水母座|TYPE-C贴片-深圳步步精 | 液氮罐_液氮容器_自增压液氮罐_杜瓦瓶_班德液氮罐厂家 | 塑料瓶罐_食品塑料瓶_保健品塑料瓶_调味品塑料瓶–东莞市富慷塑料制品有限公司 | 医用酒精_84消毒液_碘伏消毒液等医用消毒液-漓峰消毒官网 | 天命文免费算命堂_自助算命_自由算命系统_长文周易 | Akribis直线电机_直线模组_力矩电机_直线电机平台|雅科贝思Akribis-杭州摩森机电科技有限公司 | 成都APP开发-成都App定制-成都app开发公司-【未来久】 | 药品仓库用除湿机-变电站用防爆空调-油漆房用防爆空调-杭州特奥环保科技有限公司 | ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 | 照相馆预约系统,微信公众号摄影门店系统,影楼管理软件-盟百网络 | 油漆辅料厂家_阴阳脚线_艺术漆厂家_内外墙涂料施工_乳胶漆专用防霉腻子粉_轻质粉刷石膏-魔法涂涂 | 铣床|万能铣床|立式铣床|数控铣床|山东滕州万友机床有限公司 | 硅PU球场、篮球场地面施工「水性、环保、弹性」硅PU材料生产厂家-广东中星体育公司 | 致胜管家软件服务【在线免费体验】| 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 |