better-scroll

gistfile1.txt

<template>
  <!--<div class="ignore">-->
  <div class="app-container">
    <div ref="top" class="top">
    </div>
    <div ref="tab-containter" :class="['tab-warp',isFixed?'isFixed':'']">
      <div class="tab" ref="tab" id="tab">
        <ul class="tab_content" ref="tabWrapper">
          <li class="tab_item" v-for="(item,index) in itemList" ref="tabitem" :key="index" @click="checkStatus(index)" :class="{'check':index == checkIndex}">
            <div class="inner"> {{item.title}}</div>
          </li>
        </ul>
      </div>
      <i :class="'more-bot'" @click="()=>flag=!flag"></i>
      <div class="dropList" v-if="flag" key="1">
        <div class="list-title">
          <span class="status">切换楼层</span>
          <i :class="'more-top'" @click="()=>flag=!flag"></i>
        </div>
        <div class="statusIndex">
          <span v-for="(item,index) in itemList" :key="index" @click="checkStatus(index,true)" :class="{'check':index == checkIndex}">{{item.title}}</span>
        </div>
      </div>
      <div class='popContainer' v-if="flag" key="2" @click="()=>flag=false"></div>
    </div>
    <div ref="content" class="content">
      <div class="inner" :style="isFixed?'padding-top:50px':''">
        <div class="content_item0" ref="contentItem0"></div>
        <div class="content_item1" ref="contentItem1">
          <div class="brand-swiper">
            <mt-swipe @change="handleChange" :auto="5000" class="scroll-images">
              <mt-swipe-item v-for="(item,index) in swipeImgList" :key="index">
                <img @click="brandDetail('s-newer-weapp.png')" :src="item">
              </mt-swipe-item>
            </mt-swipe>
          </div>
        </div>
        <div class="content_item2" ref="contentItem2"></div>
        <div class="content_item3" ref="contentItem3"></div>
        <div class="content_item4" ref="contentItem4"></div>
        <div class="content_item5" ref="contentItem5"></div>
        <div class="content_item6" ref="contentItem6"></div>
        <div class="content_item7" ref="contentItem7">
          <div class="comment-swiper">
            <swiper :options="swiperOption" ref="mySwiper">
              <!-- slides -->
              <swiper-slide v-for="(item,index) in swipeCommentList" :key="index">
                <img class="comment-images" :src="item" alt="">
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="content_item8" ref="contentItem8">
          <div class="video-warp">
            <!-- <video class="videos" src="{{src}}" title="{{title}}" controls autoplay="true" enable-play-gesture="true"></video> -->
            <!-- <video class="video-player-box" src="https://tweapp.top1buyer.com/preview/quality-video.mp4" controls  enable-play-gesture="true"></video> -->
            <video class="video-player-box" id="myvideo" controls="controls" src="https://tweapp.top1buyer.com/preview/quality-video1.mp4"
              resize="true" preload="none" :poster="poster"></video>
            <!-- <video-player class="video-player-box" ref="videoPlayer" :options="playerOptions" :playsinline="true" customEventName="customstatechangedeventname">
            </video-player>    -->
          </div>
        </div>
        <div class="content_item9" ref="contentItem9"></div>
        <div class="content_item10" ref="contentItem10"></div>
      </div>
    </div>
  </div>
  <!--</div>-->

</template>
<script>
  import BScroll from 'better-scroll'
  import 'swiper/dist/css/swiper.css'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'
  export default {
    data() {
      return {
        poster: require('../../assets/common/images/quality/quality-video.jpg'),
        swiperOption: {
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          loop: true,
          coverflowEffect: {
            rotate: 0,
            stretch: 0,
            depth: 200,
            modifier: 1,
            slideShadows: true
          }
        },
        swipeIndex: {
          nowIndex: 1
        },
        flag: false,
        checkIndex: 0,
        isFixed: false,
        swipeImgList: [
          require('../../assets/common/images/quality/logo1.jpg'),
          require('../../assets/common/images/quality/logo2.jpg'),
          require('../../assets/common/images/quality/logo3.jpg'),
          require('../../assets/common/images/quality/logo4.jpg'),
          require('../../assets/common/images/quality/logo5.jpg'),
          require('../../assets/common/images/quality/logo6.jpg')
        ],
        swipeCommentList: [
          require('../../assets/common/images/quality/comment_01.jpg'),
          require('../../assets/common/images/quality/comment_02.jpg'),
          require('../../assets/common/images/quality/comment_03.jpg'),
          require('../../assets/common/images/quality/comment_04.jpg'),
          require('../../assets/common/images/quality/comment_05.jpg')
        ],

        itemList: [{
          'title': '战略升级'
        },
        {
          'title': '官方授权'
        },
        {
          'title': '100%正品'
        },
        {
          'title': '全链路监管'
        },
        {
          'title': '阳光保险'
        },
        {
          'title': '售后无忧'
        },
        {
          'title': '专业仓储'
        },
        {
          'title': '用户好评'
        },
        {
          'title': '媒体监督'
        },
        {
          'title': '资质公示'
        }

        ],
        contentH: [],
        tabToTop: 0, // 头部高度
        tabHeight: 0, // tab高度
        tabRealHeight: 0 // tab真正高度
      }
    },
    components: {
      swiper,
      swiperSlide
      //  videoPlayer
    },
    mounted() {
      this.$nextTick(() => {
        window.addEventListener('scroll', this.handleScroll) // 监听滚动事件
        this.InitTabScroll() // 初始化滚动
      })
    },
    methods: {
      handleChange(index) {
        this.swipeIndex.nowIndex = index + 1
      },
      // 滚动事件
      handleScroll() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
          document.body.scrollTop
        // 吸顶效果
        const isFixed = scrollTop >= this.tabToTop
        if (isFixed !== this.isFixed) {
          this.isFixed = isFixed
        }
        // 当页面滚动时候标签也要滚动

        for (var i = 0; i < this.contentH.length; i++) {
          // 高度小于第一个大于第二个设置
          if (scrollTop + 151 > this.contentH[i] && scrollTop + 151 < this.contentH[i + 1]) {
            if (this.checkIndex !== i) {
              this.checkIndex = i
              this.scroll.scrollToElement(this.$refs.tabitem[i], 300, -100)
            }
          }
        }
      },
      brandDetail(name) {
        // console.log(name)
        // this.$router.push(`/images?img=${name}`)
      },
      InitTabScroll() {
        // 头部高度
        this.tabToTop = this.$refs['tab-containter'].offsetTop
        // tab 带面板高度
        this.tabRealHeight = this.$refs['tab-containter'].offsetHeight
        // tab 高度
        this.tabHeight = this.$refs['tabitem'][0].offsetHeight
        // 内容高度
        for (let i = 0; i < 11; i++) {
          this.contentH.push(this.$refs['contentItem' + i].offsetTop)
        }
        // 横向滚动宽度
        let width = 0
        for (let i = 0; i < this.itemList.length; i++) {
          width += this.$refs.tabitem[i].getBoundingClientRect().width // getBoundingClientRect() 返回元素的大小及其相对于视口的位置
        }
        this.$refs.tabWrapper.style.width = width + 'px'
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.tab, {
              startX: 0,
              click: true,
              scrollX: true,
              scrollY: false,
              eventPassthrough: 'vertical'
            })
          } else {
            this.scroll.refresh()
          }
        })
      },
      checkStatus(index, pop) {
        this.checkIndex = index
        // 点击展开面板的选项
        if (pop) {
          this.flag = !this.flag
        }
        // tab回滚
        this.scroll.scrollToElement(this.$refs.tabitem[index], 300, -100)
        // 距离dom顶部高度
        const offsetTop = this.$refs['contentItem' + index].offsetTop
        window.scrollTo(0, offsetTop - this.tabHeight)
      }
    }

  }

</script>
<style lang="scss">
  @import '~assets/common/css/mixin.scss'; // .ignore {
  .top {
    height: 912px;
    background: url('../../assets/common/images/quality/uality1.jpg') no-repeat center center;
    background-size: 100% 100%;
  }



  .tab-warp {
    background-color: #fff;
    border-bottom: 1px solid #ECECEC;
    overflow: hidden;
    position: relative;
    width: 750px; // 一定要给宽度
    &.isFixed {
      position: fixed;
      background-color: #fff;
      top: 0;
      z-index: 999;
      .more-bot {
        position: fixed;
      }
      .more-top {
        position: fixed;
      }
    }
    .tab {
      width: 100%;
      overflow: hidden;
    }
    .tab_item.check .inner {
      height: 100%;
      border-bottom: 4px solid $red;
      color: $red;
    }
    .tab_item {
      position: relative;
      display: block;
      float: left;
      padding-left: 50px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      box-sizing: border-box;
      font-size: 28px;
      &:last-child {
        padding-right: 100px;
      }
    }
    .more-bot {
      right: 0;
      top: 0;
      height: 99px;
      width: 70px;
      position: absolute;
      z-index: 1;
      background: #fff;
    }
    .more-bot::after {
      border: solid 2px #c8c8cd;
      border-bottom-width: 0;
      border-left-width: 0;
      content: " ";
      top: 50%;
      right: 25px;
      position: absolute;
      width: 25px;
      height: 25px;
      -webkit-transform: translateY(-50%) rotate(45deg);
      transform: translateY(-50%) rotate(135deg);
    }
    .dropList {
      width: 100%;
      background-color: #fff;
      margin-top: -100px;
      .list-title {
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: inherit;
        height: 101px;
        line-height: 101px;
        display: block;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        padding-left: 55px;
        border-bottom: 1px solid #ECECEC;
        .status {
          font-size: 28px;
          color: #333333;
        }
        .more-top {
          right: 0;
          top: 0;
          height: 99px;
          width: 70px;
          position: absolute;
          z-index: 2;
          background: #fff;
        }
        .more-top::after {
          border: solid 2px #c8c8cd;
          border-bottom-width: 0;
          border-left-width: 0;
          content: " ";
          top: 60%;
          right: 20px;
          position: absolute;
          width: 25px;
          height: 25px;
          -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(-45deg);
        }
      }
      .statusIndex {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 20px;
        width: 750px;
        span {
          flex: 0 0 25%;
          font-size: 28px;
          line-height: 90px;
          line-height: 90px;
          text-align: center;
        }
        .check {

          color: $red;
        }

      }
    }
    .popContainer {
      position: fixed;
      z-index: -1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
    }
  }


  .content {
    .inner {
      background: #ffffff;

      .content_item0 {
        height: 329px;
        background: url('../../assets/common/images/quality/uality3.jpg') no-repeat center center;
        background-size: 100% 100%;
      }
      .content_item1 {
        position: relative;
        height: 1095px;
        background: url('../../assets/common/images/quality/uality4.jpg') no-repeat center center;
        background-size: 100% 100%;
        .brand-swiper {
          position: absolute;
          bottom: 40px;
          width: 100%;
          height: 681px;
          img {
            width: 100%;
            height: 681px;
          }
          .mint-swipe-indicators {
            bottom: 0;
            .mint-swipe-indicator {
              opacity: 1;
              background: #ddd;
              width: 18px;
              height: 18px;
              border-radius: 18px;
              &.is-active {
                background: #555555 !important;
              }
            }

          }

        }
      }
      .content_item2 {
        height: 365px;
        background: url('../../assets/common/images/quality/uality6.jpg') no-repeat center center;
        background-size: 100% 100%;
      }
      .content_item3 {
        height: 558px;
        background: url('../../assets/common/images/quality/uality7.jpg') no-repeat center center;
        background-size: 100% 100%;
      }

      .content_item4 {
        height: 842px;
        background: url('../../assets/common/images/quality/uality8.jpg') no-repeat center center;
        background-size: 100% 100%;
      }


      .content_item5 {
        height: 827px;
        background: url('../../assets/common/images/quality/uality9.jpg') no-repeat center center;
        background-size: 100% 100%;
      }
      .content_item6 {
        height: 810px;
        background: url('../../assets/common/images/quality/uality10.jpg') no-repeat center center;
        background-size: 100% 100%;
      }

      .content_item7 {
        position: relative;
        height: 764px;
        background: url('../../assets/common/images/quality/uality11.jpg') no-repeat center center;
        background-size: 100% 100%;
        .comment-swiper {
          position: absolute;
          bottom: 50px;
          width: 100%;
          height: 400px;
          display: flex;
          flex-direction: row;
          overflow-x: scroll;
          .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 500px;
            height: 400px;
            box-sizing: content-box;
            .comment-images {
              padding: 0 50px;
              width: 400px;
              height: 400px; //   box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
              text-align: center;

            }
          }




        }
      }
      .content_item8 {
        height: 862px;
        position: relative;
        background: url('../../assets/common/images/quality/uality12.jpg') no-repeat center center;
        background-size: 100% 100%;
        .video-warp {
          position: absolute;
          bottom: 20px;
          width: 750px;
          height: 550px;
          .video-player-box {
            width: 750px;
            height: 550px;
            .video-js {
              width: 750px;
              height: 550px;
            }
          }
        }
      }
      .content_item9 {
        height: 764px;
        background: url('../../assets/common/images/quality/uality121.jpg') no-repeat center center;
        background-size: 100% 100%;
      }
      .content_item10 {
        height: 137px;
        background: url('../../assets/common/images/quality/uality13.jpg') no-repeat center center;
        background-size: 100% 100%;
      }

    }
  } // }

</style>