vue移动端 滚动

better-scroll: https://better-scroll.github.io/docs/zh-CN/guide/

影院列表数据使用better-scroll来完成数据的展示，此插件对于移动站点的滚动非常友好

安装   cnpm i -S better-scroll

html结构一定要规定好

<template>
  <div>
    <nav>
      <router-link to="/cities">恩施</router-link>
    </nav>
    <!-- 列表容器外层的盒子 -->
    <div class="box" :style="{ height }">
      <!-- 所有列表项的容器 -->
      <div class="item" v-for="item in cinemas" :key="item.cinemaId" @clikc="fn">
        <div class="left">
          <div>{{ item.name }}</div>
          <div>{{ item.address }}</div>
        </div>
        <div class="right">
          <div>￥25起</div>
          <div>5km</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
// 引入组件
import { Toast, Notify } from 'vant'
import BetterScroll from 'better-scroll'
import { cinemaData } from './api/api'
Vue.use(Toast)
Vue.use(Notify)
export default {
  data() {
    return {
      cinemas: [],
      // 滚动容器的高度 计算出来
      height: 0,
      // 滚动对象
      scroll: null
    }
  },
  mounted() {
    this.getData()
    // 外层滚动容器高度
    this.height = document.documentElement.clientHeight - 50 + 'px'
    // 异步执行完毕后执行的方法
    this.$nextTick(() => {
      this.scroll = new BetterScroll('.box', {
        // 上拉事件
        pullUpLoad: true,
        // 下拉
        pullDownRefresh: true,
        click: true
      })
      //   上拉事件
      this.scroll.on('pullingUp', () => {
        this.getData(2)
        this.scroll.finishPullUp()
      })
      // 下拉
      this.scroll.on('pullingDown', () => {
        this.getData(1)
        this.scroll.finisPullDown()
      })
    })
  },
  beforeDestroy() {
    //   组件销毁之前要清掉所创建的动画
    this.scroll = null
    Toast.clear()
  },
  methods: {
    fn() {
      console.log('我点击了')
    },
    //   获取数据
    async getData(flag = 1) {
      // 加载提示框==》 动态创建组件
      Toast.loading({
        // 持续加载中
        duration: 0,
        message: '加载中。。。。',
        // 透明蒙层
        forbidClick: true
      })
      //   异步，在刚开始没有数据
      const ret = await cinemaData()
      if (flag == 1) {
        // 从顶部添加数据分页数据
        this.cinemas = [...ret.data.dta.cinemas, ...this.cinemas]
      } else {
        this.cinemas = [...this.cinemas, ...ret.data.data.cinemas]
      }
      //   关闭提示
      Toast.clear()
      // 通知一下
      Notify({ type: 'success', message: '这里是通知内容' })
    }
  }
}
</script>

<style lang="scss" scoped>

nav {

  height: 50px;

  background: white;

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 1;

}

.box {

  width: 100%;

  overflow: hidden;

  .itembox {

    margin-top: 50px;

    .item {

      margin-top: 5px;

      padding: 5px;

      border-bottom: 1px solid #ccc;

      display: flex;

      .left {

        flex: 2;

        div:nth-of-type(1) {

          color: #191a1b;

          font-size: 16px;

        }

        div:nth-of-type(2) {

          color: #797d82;

          font-size: 12px;

        }

      }

      .right {

        margin-top: 5px;

        div:nth-of-type(1) {

          color: #ff5f16;

          font-size: 12px;

        }

        div:nth-of-type(2) {

          color: #797d82;

          font-size: 12px;

        }

      }

    }

  }

}

</style>

异步获取数据时封装的cinemaData()

// 引入封装头信息和请求域名的axios对象

import http from './http'

// 引入请求的url地址

import {

  // 请求uri地址

  cinemaUri

} from '../config/uri'

export const cinemaData = () => {
  return http.get(cinemaUri, {
    headers: {
      // 由于请求头信息中不同的需求不同的请求头，所以要判断所用的条件
      'info': 'cinema'
    }
  })
}

封装请求头信息和axios

import Vue from 'vue'
import axios from "axios"

axios.defaults.baseURL = 'https://maaaaaa.com'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  let host = "mall.film-ticket.film.list"
  let info = config.headers.info

 if ('cinema' == info) {

    host = 'mall.film-ticket.cinema.list'

  }

config.headers = {

    "X-Client-Info":

      '{"a":"3000","ch":"1002","v":"5.0.4","e":"1598087896889693885431809","bc":"110100"}',

    "X-Host": host,

  }

  // 在发送请求之前做些什么

  return config;

}, function (error) {

  // 对请求错误做些什么

  return Promise.reject(error);

});

export default axios