vue横向滑动
代码
<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横向滑动的更多相关文章
- 横向滑动页面,导航条滑动居中的 js 实现思路
最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导 ...
- 横向滑动的HorizontalListView滑动指定位置的解决方法
项目中用到了自定义横向滑动的控件:HorizontalListView,点击其中一项,跳转到另外一个大图界面,大图界面也是HorizontalListView,想使用setSelection方法设定 ...
- UICollectionView 图片横向滑动居中偏移量的解决
1.在使用UICollectionView 来显示横向滑动图片的时候,cell与cell之间有间隙,每次滑动后cell都会向左偏移,在使用过这两个方法才解决每次向左偏移的部分. 2.使用方法前不要开启 ...
- 使GridView可以单行横向滑动
最近做的练手的小项目中存在一个横向滑动的问题,需要HorizontalScroll中嵌套GridView,但是GridView默认是竖直排放的item,况且HorizontalScroll与GridV ...
- ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题
ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...
- android--解--它们的定义tabhost(动态添加的选项+用自己的主动性横向滑动标签+手势切换标签页和内容特征)
在本文中,解决他们自己的定义tabhost实现,并通过代码集成动态加入标签功能.自己主动标签横向滑动功能.和手势标签按功能之间切换. 我完成了这个完美的解决方案一起以下: 1.定义tabwidget布 ...
- overflow-x: scroll;横向滑动详细讲解
overflow-x: scroll;横向滑动(移动端使用详解) css3 , ie8以上 <!DOCTYPE html> <html lang="en"> ...
- 一个 Vue 的滑动按钮组件
git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...
- UITableView 的横向滑动实现
UITableView 的横向滑动实现 概述 为了实现横向滑动的控件,可以继承类 UIScrollView 或类 UIView 自定义可以横向滑动的控件,这里通过 UITableView 的旋转,实现 ...
- 用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...
随机推荐
- rdlc 中文在win10中显示异常,在非win10中显示正常
RDLC中的默认字体Arial. 在win10中,RDLC为Arial时,显示中文会异常,这个时候,只需要将Font修改为中文字体就可以了,例如修改为宋体.
- 【SQL Server】numeric——精确数字的数据类型
NUMERIC数据类型是一种精确数字数据类型. numeric是标准sql的数据类型,格式是numeric(m,n).最多精确位数为38位,其中m表示总位数,n表示保留的小数点位数. 参数 含义 默认 ...
- 解决appium-doctor报各种 cannot be found问题
解决appium-doctor报各种 cannot be found问题 1.opencv4nodejs cannot be found.cmake --version 查看cmake是否安装已安装执 ...
- HCIA-ICT实战基础12-网络设备安全特性
HCIA-ICT实战基础-网络设备安全特性 目录 常见设备安全加固策略 网络设备安全加固部署示例 本机防攻击配置 1 常见设备安全加固策略 1.1 为什么需要网络设备安全 网络安全是一个系统工程, 网 ...
- Linux系统安装&VMware安装二
第八步: 完成后,选择刚刚创建好的系统
- 开发Unity3D移动端输入插件 UGUI Touch Input Component
UGUI Touch Input Component 为了在移动设备上操控角色,本人便开发了UGUI Touch Input Component输入类插件. 特点 本插件中总共包含三种组件:the v ...
- vs2019 debug 出现: printf is ambiguous
在vs中写c++代码时,莫名其妙出现:printf is ambiguous 的错误. 第一步,有设置std namespace 删除后再输入 using namespace std; 第二步.删除u ...
- 因为更新了ipykernel 导致 VS Code 中Jupyter 一直处于连接状态的 解决办法
重新安装VS Code 当中的Jupyter插件即可(我选择的是upgrade当前的jupyter插件)
- C的基础常识
C是可移植性语言,因此可以在许多环境中使用,包括UNIX.Linux.MS-DOS.Windows和Macintosh OS. 使用C语言编写的内容的文本,称为源代码文件(source code fi ...
- Linux_MySQL
MySQL 安装 AB复制 安装 1.编译安装 2.yum安装 [https://www.mysql.com/] yum安装的方式 1.在官网下载mysql rpm包 # wget https://d ...