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

最新推荐文章于 2024-08-16 13:40:27 发布

荔枝吖

最新推荐文章于 2024-08-16 13:40:27 发布

阅读量4.4k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43650973/article/details/106904799

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

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,效果图如下：