1、a、安装vant :npm i vant -S
b、按需引入组件:安装webpack插件:babel-plugin-import
//在当前项目下安装:
npm install babel-plugin-import -D
// .babelrc 中配置 // 注意:webpack 1 无需设置 libraryDirectory { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } // 对于使用 babel7 的用户,可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };
//在mian.js或者需要的组件中引入所需的组件 import { Button, Cell } from 'vant';
2、实现下拉刷新上拉加载:<van-pull-refresh>是下拉刷新的组件,需要监听refresh事件;<van-list>组件是上拉加载的组件,需要监听load事件,load事件每次进入页面时会被调用
<template> <van-pull-refresh class="mt-head" v-model="refreshing" @refresh="onRefresh(0)" > <van-list class="mt-head" v-model="loading" //数据加载完要主动设置loading为false :finished="finished" //后台数据是否已经没有数据了
:immediate-check="false" //设置首次进入页面是否直接触发load事件,默认为true
finished-text="没有更多了" @load="onLoad()" > <div> <div class="list-item" v-for="(item, index) in lists" :key="index"> <h5>{{ item.Name }}</h5> <dl> <dt>地址:</dt> <dd>{{ item.Address }}</dd> <dt>电话:</dt> <dd>{{ item.Phone }}</dd> <dt>类型:</dt> <dd>{{ item.Channel }}</dd> </dl> </div> </div> </van-list> </van-pull-refresh> </template> <script> import eventVue from '../eventVue.js' export default { data () { return { url: '', page: 1, refreshing: false, loading: false, error: false, finished: false, lists: [], searchData: { page: 0 } } }, created () { }, methods: { async getStoreList (url, data) { const res = await this.$http.post(url, data) if (res.status == 200) { let resData = res.data if (resData) { let data = resData.data this.refreshing = false //停止转圈 this.loading = false //停止转圈 if (data.list.length > 0) { this.lists = this.lists.concat(data.list) //拼接数据 } else { this.finished = true } let search = data.search eventVue.$emit('getCateData', search) } else { Toast(resData.errcode + resData.errmsg) } console.log('接口成功') } else { console.log('失败') } }, onLoad() {this.searchData.page ++ this.getStoreList(this.url, this.searchData) }, onRefresh(index) { this.searchData.page = 1 this.lists = [] this.getStoreList(this.url, this.searchData) }, } } </script>
3、实现向上展开的选择弹窗: 需要同时用到van-popup组件和van-picker组件,这是个组件,数据由父组件传过来的
<template> <van-popup v-model="show" :close-on-click-overlay="false" //禁止点击遮罩层关闭弹窗 position="bottom"> //设置弹窗弹出的位置 <van-picker show-toolbar :title="title" :columns="columns" //是一个数组 如果想改成对象显示值的key一定要是text,然后其他值可以自定义 @cancel="onCancel" @confirm="onConfirm" @change="onChange"/> </van-popup> </template> <script>
export default { props:['columns','title','show','tag'], methods: { onConfirm(value, index) { let data = {}; if (this.tag == 'chooseType') { data.tag = 'channel' } else if (this.tag == 'chooseProvice') { data.tag = 'province' } else if (this.tag == 'chooseCity') { data.tag = 'city' } data.chooseItem = value this.$emit('showChange', data) }, onCancel() { this.$emit('showChange') }, onChange(picker, values) { // console.log(picker) // console.log(values) // picker.setColumnValues(1, citys[values[0]]); }, } } </script>