2-4 vant

索引栏
实现城市列表页

一、安装

npm i vant -S

二、使用

//main.js中配置
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)

三、代码

<template>
  <van-index-bar class="content">
    <div>
      <h1>热门城市</h1>
      <ul class="wrapper">
        <li v-for="city of hotCities" :key="city.name">{{city.name}}</li>
      </ul>
    </div>
    <div v-for="(item,index) of cities" :key="index">
      <van-index-anchor :index="index" />
      <van-cell v-for="city of item" :key="city.name" :title="city.name" />
    </div>
  </van-index-bar>
</template>
<script>
export default {
  name: "City",
  data() {
    return {
      hotCities: [],
      cities: ""
    };
  },
  mounted: async function() {
    var url = "https://easy-mock.com/mock/5d313b5dcac88245d6b0b79a/movie/city";
    var res = await this.axios.get(url);
    var data = res.data.data;
    this.handleCity(data);
  },
  methods: {
    handleCity(data) {
      var { hotCities, cities } = data;
      this.hotCities = hotCities;
      this.cities = cities;
    }
  }
};
</script>
<style scoped >
.wrapper{
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
  grid-row-gap: 20px;
}
.wrapper>li{
    width:80%;
    height: 60px;
    border:1px solid #eee;
    text-align: center;
    border-radius: 15px;
    line-height: 60px;
}
.content {
  font-size: 30px;
  margin-top: 250px;
}
.content >>>.van-index-bar__index {
  margin-top: 20px;
}
.content >>> .van-hairline--bottom {
  z-index: 0 !important;
}
.content >>> .van-cell {
  line-height: 60px;
}
</style>