realtorEasier-webSite/pc/src/page/service/temp/qa.vue

<template>
  <div class="use-layout" :class="language">
    <lselect :options="navs" :selected="navActive" class="select" :class="{oy: navs.length > 15}" @change="handleChange" />
    <div class="use-con" ref="dcon" id="dcon">
      <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/qa/${current.id}/${language==='en'?'en':'zh'}/${i+1}.jpg`" :key="i" :alt="i+1">
    </div>
  </div>
</template>

<script>
import lselect from '@/components/lselect'
import {mapState} from 'vuex'

export default {
  props: ['data'],
  computed: {
    ...mapState({
      language: state => state.language.current
    })
  },
  methods: {
    handleChange (nav) {
      setTimeout(async () => {
        let items = Array.from(this.$refs.dcon.querySelectorAll('img'))
        let offTop = 0
        items.forEach(item => {
          // item.style.background = '#fff'
          // let txt = item.querySelectorAll('span')[1].innerText
          if (String(item.alt) === String(nav.cover)) {
            offTop = item.offsetTop
          }
        })

        this.$refs.dcon.removeEventListener('scroll', this.listen)
        document.querySelector('#dcon').scrollTop = offTop
        setTimeout(() => {
          this.$refs.dcon.addEventListener('scroll', this.listen)
        }, 500)
      }, 0)
    },
    listen (e) {
      let sTop = e.target.scrollTop
      let items = Array.from(this.$refs.dcon.querySelectorAll('img'))
      let active = ''
      let nav = ''
      items.forEach(item => {
        if (sTop > item.offsetTop - 1) {
          active = item.alt
        }
      })
      this.navs.forEach(sub => {
        if (String(active) === String(sub.cover)) {
          nav = sub
        }
      })
      this.navActive = nav
    }
  },
  watch: {
    data: {
      immediate: false,
      deep: true,
      handler (newVal) {
        this.navs = this.data.data
        this.current = this.data.detail
        this.navActive = this.data.data[0]
        this.$refs.dcon.removeEventListener('scroll', this.listen)
        this.$refs.dcon.scrollTo(0, 0)
        setTimeout(() => {
          this.$refs.dcon.addEventListener('scroll', this.listen)
        }, 500)
      }
    }
  },
  data () {
    return {
      active: '',
      navs: this.data.data,
      current: this.data.detail,
      navActive: this.data.data[0]
    }
  },
  mounted () {
    setTimeout(() => {
      this.$refs.dcon.addEventListener('scroll', this.listen)
    }, 0)
  },
  components: {lselect}
}
</script>

<style lang="scss" scoped>
  $lw: 220px;
  $cw: 430px;
  $encw: 430px;

.use-layout {
  position: relative;
  max-width: 800px;
  margin: 50px auto 72px;
  overflow: hidden;
  padding-left: $lw + 18px;
  padding-right: 10px;
  box-sizing: border-box;

  .select {
    min-width: $lw;
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100%;
    overflow-y: auto;
  }
  .img{
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
  }
  .use-con{
    max-height: 100%;
    height: calc(100vh - 380px);
    overflow-y: auto;
    width: $cw;
    text-align: center;
    .img{
      &:last-of-type{
       margin-bottom: 200px;
      }
    }
    &::-webkit-scrollbar {
      width: 5px;
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: rgba(221, 221, 221, 0.2);
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
    }

    &::-webkit-scrollbar-thumb:hover {
      height: 50px;
      background-color: #9f9f9f;
      -webkit-border-radius: 4px;
    }
  }
}
.en{
  max-width: 800px;
  padding-left: $lw + 58px;
  .use-con{
    width: $encw;
  }
}
</style>