vue 纵向滑动模块

代码

<template>
  <div>
 
 <!-- 左侧的滑动模块 -->
         <div
          class="scroll-box"
          :style="{width: 410.7*screenWidth/1920+'px', height:730*screeHeight/1080+'px',top:130*screeHeight/1080+'px'}"
        >
          <div class="item" v-for="(item,index) of book" :key="index">
            <div
              class="boximg1"
              :style="{width: 410.7*screenWidth/1920+'px', height:208.45*screeHeight/1080+'px',marginTop:28.83*screeHeight/1080+'px'}"
            >
 
                <!-- <div
                  class="boximg3"
                  :style="{width: 166.92*screenWidth/1920+'px', height:208.45*screeHeight/1080+'px'}"
                >
 
                </div> -->
               <div class="text" :style="{top:25*screeHeight/1080+'px'}">{{item.dc}}</div>
 
            </div>
          </div>
        </div>
 
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      screenWidth: 1000, //宽屏幕尺寸
      screeHeight: 1000,
      book: [
        {
          id: 1,
          zm: "A",
          dc: "A",
          dcfy: "ə",
          zwfy: "a字母",
          zwpy: "a",
          dctp: "图片",
          dcyp: "音频",
          fiex01: null,
          fiex02: null
        },
        {
          id: 2,
          zm: "A",
          dc: "Alligator",
          dcfy: "ˈælɪɡeɪtər",
          zwfy: "鳄鱼",
          zwpy: "è yú",
          dctp: null,
          dcyp: null,
          fiex01: null,
          fiex02: null
        },
        {
          id: 3,
          zm: "A",
          dc: "Ant",
          dcfy: "ænt",
          zwfy: "蚂蚁",
          zwpy: "mǎ yǐ",
          dctp: null,
          dcyp: null,
          fiex01: null,
          fiex02: null
        },
        {
          id: 4,
          zm: "A",
          dc: "Apple",
          dcfy: "ˈæpl",
          zwfy: "苹果",
          zwpy: "píng guǒ",
          dctp: null,
          dcyp: null,
          fiex01: null,
          fiex02: null
        }
      ]
    };
  },
 
  mounted() {
    //获取屏幕长宽
    (this.screenWidth = document.documentElement.clientWidth),
      (this.screeHeight = document.documentElement.clientHeight),
      (window.onresize = () => {
        //屏幕尺寸变化就重新赋值
        return (() => {
          this.screenWidth = document.documentElement.clientWidth;
          this.screeHeight = document.documentElement.clientHeight;
        })();
      });
  }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.scroll-box {
  /* 给父盒子设置相对定位 */
  position: relative;
  /* position: relative; */
  box-shadow: 0 0 5px 2px #25c985;
  text-align: center;
  white-space: nowrap;
  overflow-y: scroll;
  overflow-x: hidden;
  /* 让父盒子水平居中
  margin: 0 auto; */
}
/* 隐藏滚动条 */
   ::-webkit-scrollbar {
     width: 0 !important;
   }
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
/* 横线滑动 */
/* .item {
  white-space: nowrap;
  display: inline-block;
} */
.boximg1 {
  /* 给父盒子设置相对定位 */
  position: relative;
 
  box-shadow: 0 0 0 1px #0f0b00;
  /* background: #f7aa05; */
  /* margin:0 20px */
  /* 边框圆角 */
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.boximg3 {
  /* 给父盒子设置相对定位 */
  position: relative;
  display: flex;
  /* 给父盒子设置相对定位 */
  box-shadow: 0 0 0 2px #a09e9ee3;
  background: hsl(60, 9%, 98%);
  margin: 0 auto;
  /* margin:0 20px */
}
.text {
  /* 给父盒子设置相对定位 */
  position: relative;
  color: hsl(60, 9%, 98%);
  font-size: 20px;
 
  -webkit-text-stroke: 0.2px rgb(15, 15, 15);
}
</style>

效果