代码
<template>
<div>
<!-- 左侧的滑动模块 -->
<div
class="scroll-box"
:style="{width: 1106*screenWidth/1920+'px', height:336.52*screeHeight/1080+'px',top:130*screeHeight/1080+'px'}"
>
<div class="item" v-for="(item,index) of book" :key="index">
<div
class="boximg1"
:style="{width: 285.51*screenWidth/1920+'px', height:315.52*screeHeight/1080+'px',top:10*screeHeight/1080+'px',marginLeft:50*screenWidth/1920+'px'}"
>
<div
class="boximg3"
:style="{width: 166.92*screenWidth/1920+'px', height:223.15*screeHeight/1080+'px',top:12*screeHeight/1080+'px'}"
>
<img
:src="item.bookImg"
:width="166.92*screenWidth/1920+'px'"
:height="223.15*screeHeight/1080+'px'"
>
</div>
<div class="text" :style="{top:25*screeHeight/1080+'px'}">{{item.bookName}}</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>
效果
vue横向滑动的相关教程结束。
