vue ---＞Vant组件库

安装Vant组件库

Vant 2 - 轻量、可靠的移动端组件库 (gitee.io) 看官网引入

npm i vant@latest-v2 -S 

如果报错则 npm i vant@latest-v2 -S  --legacy-peer-deps

–legacy-peer-deps：在安装时忽略所有 peerDependencies，采用 npm 版本 4 到版本 6 的样式。

配置

参考文档引入 mina.js  第三种方式 

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Tabbar 标签栏

v-model 默认绑定选中标签的索引值，通过修改 v-model 即可切换选中的标签。

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

export default {
  data() {
    return {
      active: 0,
    };
  },
};

路由模式

标签栏支持路由模式，用于搭配 vue-router 使用。路由模式下会匹配页面路径和标签的 to 属性，并自动选中对应的标签。

<router-view />

<van-tabbar route>
  <van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
</van-tabbar>

 配置相应路由规则

const routes = [
  { path: '/', component: Home },
  { path: '/user', component: User }
]

修改navbar默认样式 

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;

  .van-nav-bar {
    background-color: red;
  }

  /deep/ .van-nav-bar__title{
    color: #f2f5f6;
  }

}
</style>

 安装axios     npm i axios -S --legacy-peer-deps

封装request.js模块

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://applet-base-api-t.itheima.net'
})

export default request

为提高复用性封装API

import request from '@/utils/request'

export const getArticleListAPI = function(_page, _limit) {
  return request.get('/articles', {
    params: {
      _page,
      _limit
    }
  })
}

使用时

<script>
import { getArticleListAPI } from '@/api/articleAPI'

export default {
  name: 'myHome',
  data() {
    return {
      page: 1,
      limt: 10

    }
  },
  created() {
    this.getArticleListAPI()
  },
  methods: {
    async getArticleListAPI() {
      const { data: res } = await getArticleListAPI(this.page, this.limit)
      console.log(res)
    }
  }
}
</script>

封装article组件   导入 注册 使用

 <ArticleInfo v-for="item in artlist" :key="item.id"></ArticleInfo>

数据渲染

自定义属性 

// 自定义属性
  props: {
    // 文章的标题
    title: {
      type: String,
      default: ''
    },
    // 作者名字
    author: {
      type: String,
      default: ''
    },
    // 评论数
    cmtCount: {
      // 通过数组形式，为当前属性定义多个可能的类型
      type: [Number, String],
      default: 0
    },
    // 发布日期
    time: {
      type: String,
      default: ''
    },
    // 封面的信息对象
    cover: {
      type: Object,
      // 通过 default 函数，返回 cover 属性的默认值
      default: function() {
        // 这个 return 的对象就是 cover 属性的默认值
        return { type: 0 }
      }
    }
  }

然后在组件上使用

<ArticleInfo v-for="item in artlist" :key="item.id"
    :title="item.title"
    :author="item.aut_name"
    :cmtCount="item.comm_count"
    :time="item.pubdate"
    :cover="item.cover"
    ></ArticleInfo>

文本下拉刷新  ---》List 列表Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
   <ArticleInfo></ArticleInfo>
</van-list>

 

export default {
  data() {
    return {
      list: [],
      // 每当下一页数据请求回来之后，千万要记得，把 loading 从 true 改为 false
      loading: true,
      // 所有数据是否加载完毕了，如果没有更多数据了，一定要把 finished 改成 true
      finished: false,
    };

 // 只要 onLoad 被调用，就应该请求下一页数据
    onLoad() {
      console.log('触发了 load 事件！')
      // 1. 让页码值 +1
      this.page++
      // 2. 重新请求接口获取数据
      this.initArticleList()
    },
    // 下拉刷新的处理函数
    onRefresh() {
      console.log('触发了下拉刷新！')
      // 1. 让页码值 +1
      this.page++
      // 2. 重新请求接口获取数据
      this.initArticleList(true)
    }
  },

 if (res.length === 0) {
        // 证明没有下一页数据了，直接把 finished 改为 true，表示数据加载完了！
        this.finished = true
      }

下拉刷新 --》下拉刷新Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

List 组件可以与 PullRefresh 组件结合使用，实现下拉刷新的效果。

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <p>刷新次数: {{ count }}</p>
</van-pull-refresh>

 refreshing: false

Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

// 下拉刷新的处理函数
    onRefresh() {
      console.log('触发了下拉刷新！')
      // 1. 让页码值 +1
      this.page++
      // 2. 重新请求接口获取数据
      this.initArticleList(true)
    }

 

 async initArticleList(isRefresh) {
      // 发起 GET 请求，获取文章的列表数据
      const { data: res } = await getArticleListAPI(this.page, this.limit)

      if (isRefresh) {
        // 证明是下拉刷新；新数据在前，旧数据在后
        // this.artlist = [新数据在后, 旧数据在前]
        this.artlist = [...res, ...this.artlist]
        this.isLoading = false
      } else {
        // 证明是上拉加载更多；旧数据在前，新数据在后
        // this.artlist = [旧数据在前, 新数据在后]
        this.artlist = [...this.artlist, ...res]
        this.loading = false
      }