《移动端UI框架》Vant

基于Vue-cli3搭建的Vue项目

按需引入：

npm安装Vant：npm i vant -S；
安装babel-plugin-import：npm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

在babel.config.js 中添加配置：

plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]

引入需要的组件：

import { Button } from 'vant'
Vue.use(Button)<van-button type="primary">主要按钮</van-button>

`<van-list></van-list>`：

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

<div style="height:100%;overflow:auto;"><van-listv-model="loading":finished="finished"finished-text="没有更多了":error.sync="error"error-text="请求失败，点击重新加载":immediate-check="false":offset="10"@load="onLoad"
><div class="article-item" v-for="(item,index) in articleData" :key="index" @click="handleGoToDetail(item.id)">{{item.body}}</div>
</van-list>
</div>data(){return {pageNum: 1,pageSize: 10,totalPage: '',articleData: [],loading: false,finished: false,error: false}
},
mounted(){this.getArticleData();
},
methods:{//文章列表getArticleData() {//总页数小于所要请求的页数，修改长列表状态为完成if (this.totalPage && this.totalPage < this.pageNum) {if (this.loading) {this.loading = false;}this.finished = true;return false;}getArticleList({current: this.pageNum,size: this.pageSize,}).then(res => {if(res.code === 0){this.articleData = this.articleData.concat(res.data.list)this.totalPage = res.data.totalPage;if (this.loading) {this.loading = false;}//没有数据的情况下，修改长列表状态为完成if (!this.articleData || this.articleData.length === 0) {this.finished = true;}}})},//滚动触底加载下一页onLoad(){this.pageNum++;this.getArticleData();}
}

van-list的父元素必须设置height和overflow不为hidden，否则无法滚动。
van-list的父元素设置height为100%时，其祖先元素也必须设置height，确保父元素能获取到明确的高度。

`<van-tabs></van-tabs>`与`<van-list></van-list>`结合使用：

<van-tabs :ellipsis="false" v-model="activeTab" @click="handleChangeTab"><van-tab v-for="(item,index) in tabData" :title="item.columnName" :key="index"><van-listv-model="loading":finished="finished"finished-text="没有更多了":error.sync="error"error-text="请求失败，点击重新加载":immediate-check="false":offset="10"@load="onLoad"><div class="article-item" v-for="(item,index) in articleData" :key="index" @click="handleGoToDetail(item.id)">{{item.body}}</div></van-list></van-tab>
</van-tabs>data(){return {activeTab:0,tabData: [],pageNum: 1,pageSize: 10,totalPage: '',articleData: [],loading: false,finished: false,error: false}
},
mounted(){this.getArticleData();
},
methods:{getArticleData(){},onLoad(){},//切换tabhandleChangeTab (index) {this.activeTab = index;//tab切换，需要重新初始化van-list的加载状态，否则瀑布流滚动加载将不会被再次触发this.loading = false;this.finished = false;this.pageNum = 1;this.totalPage = '';this.articleData = [];this.getArticleData();}
}::v-deep .van-tab__pane{height:calc(100% - 60px);overflow-y: auto;
}

`<van-tabs></van-tabs>`与`<van-pull-refresh></van-pull-refresh>`、`<van-list></van-list>`结合使用：

<van-tabs :ellipsis="false" v-model="activeTab" @click="handleChangeTab"><van-tab v-for="(item,index) in tabList" :title="item" :key="index"><van-pull-refresh v-model="refreshing" @refresh="onRefresh"><van-listv-model="loading":error.sync="error"error-text="请求失败，点击重新加载":finished="finished"finished-text="没有更多了"@load="onLoad":immediate-check="false":offset="10"><div class="article-item" v-for="(item,index) in articleData" :key="index" @click="handleGoToDetail(item.id)">{{item.body}}</div></van-list></van-pull-refresh></van-tab>
</van-tabs>data(){return {activeTab:0,tabData: [],pageNum: 1,pageSize: 10,totalPage: '',articleData: [],loading: false,finished: false,error: false}
},
mounted(){this.getArticleData();
},
methods:{getArticleData(){},onLoad(){},handleChangeTab (index) {},//下拉刷新加载下一页onRefresh(){this.pageNum++this.getList()}
}::v-deep .van-tab__pane{height:calc(100% - 60px);overflow-y: auto;
}

《移动端UI框架》Vant相关推荐

vue移动端ui框架vant如何自定义引入阿里巴巴图标库
vant如何自定义引入阿里巴巴图标库框架虽然本身有提供部分icon,但是很多时候都无法满足我们得需要,这个时候我们就需要自定义引入icon,这里我是使用的阿里巴巴图标库. 首先,我们先打开阿里巴巴图 ...
手机/移动端的UI框架-Vant和NutUI
下面推荐2款手机/移动端的UI框架. 其实还有很多的框架,各个大厂都有UI框架.目前,找来找去,只有腾讯的移动端是setup语法写的TDesign,其他大厂,虽然都是VUE3写的,但是都还未改成set ...
vue3使用的移动端UI框架,vue移动端ui框架哪个好
号称目前最火的前端框架Vue,它有什么显著特点呢? 1.Vue是什么是目前最火的一个前端框架,除了可以开发网站,还可以开发手机App.是前端的主流框架之一,和.一起,并成为前端三大主流框架. 是一套构 ...
Vue PC端框架和Vue移动端UI框架
Vue PC端框架和Vue移动端UI框架在学习Vue的过程之中,我发现不管是 BAT 大厂,还是创业公司,Vue 都有着广泛的应用,而且框架层出不穷,学习文档也越来越多,Vue也越来越受欢迎.下面是 ...
Touch UI：高质量的移动端UI框架介绍
Hi,我们做了一款高质量的.免费的移动端UI框架. 经过将两年多开发和项目实践,我们终于把Touch UI开放出来了.这是一套基于vue.js打造的移动端UI框架,包含近百种组件,几乎囊括了开发移动应 ...
aui移动端UI框架
aui 简介 aui 是一套基于原生javascript开发的移动端UI框架.包含常用js API(如:字符校验.本地定时存储.数组对象处理.ajax原生封装.设备信息获取.手势事件-):插件(如:l ...
移动端UI框架小汇总
前言:随着前端技术的更新,Vue,React,Angular等JS类框架不断的深入使用,各种WebApp.混合App.微信H5等应用的发展,各种配套的前端UI框架应运而生.最近,通过在Github.前 ...
vue3使用的移动端UI框架,vue一般用什么ui框架
用vue 一般都配合什么 UI 框架 vue只是一个js库,不算框架,他不限制你使用使用UI框架,理论上你可以使用任意UI框架. 常见的vue的UI框架有:elementUI(饿了么的UI框架),Vu ...
基于vue移动端UI框架
1.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式 ...
vue 移动端ui框架
vue移动端ui框架合集转载于:https://www.cnblogs.com/knuzy/p/9508042.html

《移动端UI框架》Vant

按需引入：

`<van-list></van-list>`：

`<van-tabs></van-tabs>`与`<van-list></van-list>`结合使用：

`<van-tabs></van-tabs>`与`<van-pull-refresh></van-pull-refresh>`、`<van-list></van-list>`结合使用：

《移动端UI框架》Vant相关推荐

最新文章

热门文章

《移动端UI框架》Vant

按需引入：

<van-list></van-list>：

<van-tabs></van-tabs>与<van-list></van-list>结合使用：

<van-tabs></van-tabs>与<van-pull-refresh></van-pull-refresh>、<van-list></van-list>结合使用：

《移动端UI框架》Vant相关推荐

最新文章

热门文章

`<van-list></van-list>`：

`<van-tabs></van-tabs>`与`<van-list></van-list>`结合使用：

`<van-tabs></van-tabs>`与`<van-pull-refresh></van-pull-refresh>`、`<van-list></van-list>`结合使用：