《移动端UI框架》Vant

基于Vue-cli3搭建的Vue项目

按需引入：

1. npm安装Vant：

   npm i vant -S

   ；
2. 安装babel-plugin-import：

   npm i babel-plugin-import -D

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

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

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

4. 引入需要的组件：

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

<van-list></van-list>

：

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

<div style="height:100%;overflow:auto;">
	<van-list
     v-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-list
			     v-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(){},
	//切换tab
    handleChangeTab (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-list
                    v-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;
}