9.better-scroll 和ref的使用

解决一些问题

h5布局整个复元素要加一个100%的宽vw 定死的高度vh 使用弹性盒子，头，底bar 固定.

Header 和Home页 里面的固定定位删掉

position: fixed;

top: 0;

left: 0;

.ly-tab {

position: fixed;

top: 1.2rem;

left: 0;

}

然后在Home中给加一个固定定位

 给.home 

swiper组件里面的 margin-top: 2.5rem; 删除 

在home页section中添加 margin-top: 2.5rem;

tabbr的固定定位去掉

 

安装better-scroll

cnpm i better-scroll -S

home页面中引入  import.......

<template>
  <div class="home">
    <div class="headers">
      <div class="headers-main">
        <Header />
        <ly-tab v-model="selectedId" :items="items" :options="options">
        </ly-tab>
      </div>
    </div>
    <section ref="wrapper">
      <div>
        <Swiper />
        <Icons />
        <Recommend />
      </div>
    </section>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import Header from "@/components/home/Header.vue";
import Swiper from "@/components/home/Swiper";
import Icons from "@/components/home/Icons";
//引入better-scroll
import BetterScorll from "better-scroll";
import Recommend from "@/components/home/Recommend";

export default {
  components: {
    Tabbar,
    Header,
    Swiper,
    Icons,
    Recommend,
  },
  name: "Home",
  mounted() {
    // console.log(this.$data, this.$el);
    new BetterScorll(this.$refs.wrapper, {
      movable: true,
      zoom: true,
    });
  },
  data() {
    return {
      selectedId: 0,
      items: [
        { label: "首页" },
        { label: "大红荼" },
        { label: "红荼" },
        { label: "绿荼" },
        { label: "黑荼" },
        { label: "蓝荼" },
        { label: "荼具" },

        { label: "设计" },
      ],
      options: {
        activeColor: "#4ac23f",
        // 可在这里指定labelKey为你数据里文字对应的字段
      },
    };
  },
};
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.headers {
  width: 100%;
  height: 0.3rem;
}
.headers-main {
  position: fixed;
  top: 0;
  left: 0;
}
section {
  flex: 1;
  margin-top: 2.5rem;
  overflow: hidden;
}
::v-deep .ly-tab {
  box-shadow: none;
  border-bottom: none;
}
</style>

 

 效果滚动效果：

子元素高度 比父元素高度要高，必须加在mounted 中

vue中的ref 

获取dom

设置：<div ref="justion"></div>

获取：this.$refs.justion