Vue移动端完美适配布局且内容区域滚动效果

一、布局

1.HTML基本结构分为三块，头，身体，尾部

<template>
  <div id="app">
    <header></header>
    <vue-custom-scrollbar class="scroll-area" @ps-scroll-y="scrollHanle"> 内容滚动区域 </vue-custom-scrollbar>
    <footer></footer>
  </div>
</template>

2.然后去style设置样式

* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
header {
  width: 750px;
  height: 70px;
}
.scroll-area {
  position: relative;
  margin: auto;
  width: 750px;
  flex: 1;
}
footer {
  width: 750px;
  height: 70px;
}

注：html,body,#app三个要连在一块写，否则将会出现滚动条覆盖头部和尾部的效果

基本结构就搭建好了，接下来就可以给内容区域添加滑动效果了

二、滚动效果

：利用vue-custom-scrollbar依赖实现效果

1.安装依赖 

npm install vue-custom-scrollbar

2.使用：实例代码:

<template>
 <div>
 <vue-custom-scrollbar class="scroll-area"  :settings="settings" @ps-scroll-y="scrollHanle">
    <img src="https://raw.githubusercontent.com/Binaryify/vue-custom-scrollbar/master/docs/azusa.jpg" height="720" width="1280" alt="">
  </vue-custom-scrollbar>
 </div>
</template>
<script>
import vueCustomScrollbar from 'vue-custom-scrollbar'
import "vue-custom-scrollbar/dist/vueScrollbar.css"
export default {
  components: {
    vueCustomScrollbar
  },
  data() {
    return {
      settings: {
        suppressScrollY: false,
        suppressScrollX: false,
        wheelPropagation: false
      }
    }
  },
  methods: {
    scrollHanle(evt) {
      console.log(evt)
    }
  }
}
</script>
<style >
.scroll-area {
  position: relative;
  margin: auto;
  width: 600px;
  height: 400px;
}
</style>

常用参数配置

suppressScrollX {Boolean}

设置为 true 时，无论内容宽度如何，X 轴上的滚动条都将不可用。

Default: false

suppressScrollY {Boolean}

设置为 true 时，无论内容高度如何，Y 轴上的滚动条都将不可用。

Default: false

wheelPropagation {Boolean}

如果此选项为 true，则当滚动到达边的末尾时，mousewheel 事件将传播到父元素。

Default: true

具体配置可参考官方文档

https://binaryify.github.io/vue-custom-scrollbar/ 文档链接