首页 > 其他分享 >vue横向滑动

vue横向滑动

时间:2023-03-02 11:56:00浏览次数:40  
标签:vue 盒子 zwpy 横向 relative position 滑动 null 给父

代码 

<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,盒子,zwpy,横向,relative,position,滑动,null,给父
From: https://www.cnblogs.com/xbinbin/p/17171311.html

相关文章

  • 基于vue3+el-upload 获取视频第一帧截图并上传服务器
    //视频上传成功consthandleVideoSuccess:UploadProps['onSuccess']=(response,uploadFile)=>{  if(response.status=='500005'){   detailInfo.v......
  • 学习vue3遇到的问题
    1.toReftoRef是用来给抽离响应式对象(被reactive包裹的对象)中的某一个属性的,并且把这个属性包裹成ref对象,使其和原对象产生链接。或许有人就回有人有疑问了?这个toRef存在......
  • vue真实项目结构
    我明白你的需求。如果你想看一个真实企业项目使用的复杂目录结构,你可以参考以下几个例子:根据1的介绍,一个vue项目的目录结构可以细分为以下几个部分:|-src||-api存......
  • docker vue dist 部署
    1.准备vue打包后的dist2.部署docker 1.准备vue打包后的dista:1个dist目录;1个Dockerfile文件。内容如下:FROMnginxCOPYdist//usr/share/nginx/html/ 说明:自动......
  • vue3 门户网站搭建6-wangeditor
    门户网站的新闻、公告等文章,内容可配置,故引入wagneditor 1、安装:npmi wangeditor 2、方便调用,抽成组件:<template><divref='editor'></div></template><......
  • VUE前端请求跨域问题解决
    解决方法:vue.config.js文件配置:module.exports={devServer:{open:true,host:'192.168.1.193',port:8080,https:fals......
  • 路飞:路飞前端全局css,全局配置文件、配置axios实现前后台交互、安装vue-cookies、安装e
    目录一、路飞前端全局css,全局配置文件1.1整理项目1.2设置全局css1.3配置全局js二、配置axios实现前后台交互三、安装vue-cookies四、安装elementui五、安装bootstrap和j......
  • ShopWind 多商户商城更新,Vue 3 前后端分离,页面自定义装修
    本次为V4版本更新,新系统架构(技术栈)vue3 + vite (打包编译工具)+ Composition API(组合式 API setup) + Element Plus + vueRouter (路由)第三方组件:axios (数据......
  • vue 模拟set del 方法
    上篇主要对数组格式数据进行响应式处理,vue 有set 和del 方法可以对数组和对象进行修改和删除。代码如下:数组类型的数据修改和删除时候,只需要调用splice方法就可以,在上......
  • VUE2 条件渲染
    条件渲染v-show特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉了。<divv-show="flag"></div><script>data(){return{flag:true......