08.影院页面（this.$nextTick()、documen

1.编写影院页面

//===>src/views/Cinema.vue
<template>
  <div>
    <ul>
      <li v-for="data in datalist" :key="data.cinemaId">{{data.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      datalist: []
    };
  },
  mounted() {
    axios({
      url: "https://m.maizuo.com/gateway?cityId=120100&ticketFlag=1&k=4160565",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"159065562332628866547713"}',
        "X-Host": "mall.film-ticket.cinema.list"
      }
    }).then(res => {
      console.log(res.data);
      this.datalist = res.data.data.cinemas;
    });
  }
};
</script>

<style lang="scss" scoped>
li {
  height: 50px;
}
</style>

优化一下滑动组件

引入better-scroll
在cmd中
cnpm install --save better-scroll
2.修改影院页面
this.$nextTick()函数的作用：当dom刷新后，自动执行一次

//===>src/views/Cinema.vue
<template>
  <div class="cinema" :style="mystyle">
    <ul>
      <li v-for="data in datalist" :key="data.cinemaId">{{data.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import BetterScroll from "better-scroll";
export default {
  data() {
    return {
      datalist: [],
      mystyle: {
        height: "0px"
      }
    };
  },
  mounted() {
    console.log(document.documentElement.clientHeight);
    this.mystyle.height = document.documentElement.clientHeight - 50 + "px";
    axios({
      url: "https://m.maizuo.com/gateway?cityId=120100&ticketFlag=1&k=4160565",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"159065562332628866547713"}',
        "X-Host": "mall.film-ticket.cinema.list"
      }
    }).then(res => {
      console.log(res.data);
      this.datalist = res.data.data.cinemas;
    });

    this.$nextTick(() => {
      new BetterScroll(".cinema", {
        scrollbar: {
          fade: true,
          interactive: false
        }
      });
    });
  }
};
</script>

<style lang="scss" scoped>
li {
  height: 50px;
}
.cinema {
  overflow: hidden;
  position: relative;
}
</style>