9. Use of better scroll and ref

Solve some problems

h5 The layout of the whole complex element needs to add one 100% The width of vw Dead height vh Use elastic boxes , head , At the end of bar Fix .

Header and Home page Delete the fixed positioning inside

position: fixed;

top: 0;

left: 0;

.ly-tab {

position: fixed;

top: 1.2rem;

left: 0;

}

And then in Home Middle feeding Add a fixed positioning

  to .home 

swiper In the component  margin-top: 2.5rem; Delete  

stay home page section Add  margin-top: 2.5rem;

tabbr Remove the fixed position of

 

install better-scroll

cnpm i better-scroll -S

home Page in   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";
// introduce 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: " home page " },
        { label: " Big red tea " },
        { label: " Red tea " },
        { label: " Green tea " },
        { label: " Black tea " },
        { label: " Blue tea " },
        { label: " Tea set " },

        { label: " Design " },
      ],
      options: {
        activeColor: "#4ac23f",
        //  You can specify here labelKey For the field corresponding to the text in your data 
      },
    };
  },
};
</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>

 

  Effect scrolling effect ：

Sub element height Higher than the height of the parent element , Must be added to mounted in

vue Medium ref 

obtain dom

Set up ：<div ref="justion"></div>

obtain ：this.$refs.justion