vue中使用vant移动端开发，indexBar 进行城市选择列表

1.按需引入组件，在 babel.config.js 中配置

https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian

module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};

2.移动端使用Rem 适配,在根目录下新建postcss.config.js(如果设计稿是375 的， rootValue的值设设为37.5，也就是页面渲染的html的font-size大小是37.5，这个值可以根据设计稿来变化，配置好之后，设计稿量的页面字体，图片大小就可以根据稿来，直接页面使用px,也就是你量的是多少写多少即可

先安装postcss-pxtorem用于将单位转化为 rem

npm install postcss-pxtorem --save-dev
npm i -S amfe-flexible
//在main.js中引用
import 'amfe-flexible/index.js'

module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
},
}

3.按需引入，可以直接在main.js中按需引入，也可以新建个文件，建议新建个文件专门按需引入页面中需要使用的组件，在引入main.js入口文件中

import Vue from 'vue'
import 'vant/lib/index.css'
import {IndexBar, IndexAnchor ,Cell} from 'vant'
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);

4.城市json数据：https://github.com/wwjjss/city,(下载本地，记得vuecli新版本的静态数据放在public下，不然报404的错误

获取数据成功

<van-index-bar
highlight-color="#fb6463" :index-list="list">
<div v-for="(cityname,index) in city" :key="index">
<van-index-anchor
:index="list[index]" :title="list[index]">
</van-index-anchor>
<van-cell v-for="(item,cindex) in cityname.list" :key="cindex">
{{item.name}}
</van-cell>
</div>
</van-index-bar>

右侧数据有可能是A,B,C，可以用index-list来控制显示，默认是滑动吸顶的效果，如果不想吸顶，stick设置为false,效果图如下：

最后

以上就是等待飞鸟为你收集整理的vue中使用vant移动端开发，indexBar 进行城市选择列表的全部内容，希望文章能够帮你解决vue中使用vant移动端开发，indexBar 进行城市选择列表所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。