首页 > 其他分享 >js 默认展示两行多余隐藏滑动及添加滑动条

js 默认展示两行多余隐藏滑动及添加滑动条

时间:2023-12-08 15:55:23浏览次数:31  
标签:box sX 默认 js item 宽度 let 滑动 scroll

<div class="nav-box" @scroll="scroll">
  <div for="list" class="nav">
    <div class="item-box">item</div>
  </div>
</div>
<div class="scroll-box" v-show="list.length/2 > 2">
  <div class="scroll" :style="'transform: translateX('+sX+')'"></div>
</div>
data() {
  return {
    sX: 0, //等比偏移量
    c_W: 0, //最外围容器宽度
    s_b_W: 0, //自定义滚动条盒子宽度
    s_W: 0, //自定义滚动条移动盒子宽度
    list:[],
  };
},
methods: {
  scroll(e) {
    let {
      sX,
      s_b_W,
      s_W,
      c_W,
      list
    } = this.$data

    let nW = e.target.scrollWidth // 得到scroll-view的总宽度
    let nwl = nW / (list / 2) //得到单个item的宽度
    let itemCount = c_W/nwl //得到显示的item数量
    let l = (list - (itemCount * 2)) / 2 //算出隐藏了多少item
    let nX = e.target.scrollLeft // 得到滑动的偏移量
    let sW = s_b_W - s_W + 2 //总宽度减去滑块的宽度,得出剩下的宽度,+2是为了去掉
    sX = sW / ((nwl * l) / nX) / 2 + 'px' // 最终得出等比偏移量
    this.sX = sX
  },
},
mounted() {
  this.c_W = document.getElementByClassName('nav-box')[0].offsetWidth
  this.s_b_W =  document.getElementByClassName('scroll-box')[0].offsetWidth
  this.s_W = document.getElementByClassName('scroll')[0].offsetWidth
}
.nav-box{
  overflow-x: scroll;
}
.nav{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
}
.item-box{
  width:81px;
}
.scroll-box {
  width: 70rpx;
  height: 10rpx;
  background: #f5e6e6;
  border-radius: 5rpx;
  margin: 24rpx auto 0;
}
.scroll {
  width: 30rpx;
  height: 100%;
  background: #efab67;
  border-radius: 5rpx;
}

效果展示:
image

标签:box,sX,默认,js,item,宽度,let,滑动,scroll
From: https://www.cnblogs.com/cyapi/p/17888330.html

相关文章

  • tesseract.js 又一个基于webassembly 的tesseract ocr 包装
    tesseract.js是基于webassembly的jstesseract实现,可以在web以及node中运行,我以前简单介绍过一个基于webassembly的工具tesseract-wasm的实现相对简单(包括构建),当然技术上都是基于了emscripten进行的构建,tesseract.js包装了tesseract.js-core功能相比tesseract-wasm丰富......
  • 用html+css+js做canvas烟花模拟网页动画代码
    圣诞节、元旦就要到了,本案例我们将用html+css+js做canvas烟花模拟网页动画代码,程序员的浪漫这不就来了嘛,与家人朋友一起看烟花吧!   附源码<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"/> <title>烟花模拟器</title> <metaname="viewport"......
  • Gson与FastJson详解
    Gson与FastJson详解Java与JSON做什么?将Java中的对象快速的转换为JSON格式的字符串.将JSON格式的字符串,转换为Java的对象.Gson将对象转换为JSON字符串转换JSON字符串的步骤:引入JAR包在需要转换JSON字符串的位置编写如下代码即可:Stringjson=newGson().toJSON(要......
  • JSP判断两个时间的时间差
    varqueryStartTime=$("#queryStartTime").val();varqueryEndDate=$("#queryEndDate").val();if(queryStartTime==null||queryEndDate==null){alertx("开始日期、结束日期都不可为空");return;}vartemp_field1=$("#querySta......
  • SpringBoot+线程池实现高频调用http接口并多线程解析json数据
    场景Springboot+FastJson实现解析第三方http接口json数据为实体类(时间格式化转换、字段包含中文):https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/134872936Java中ExecutorService线程池的使用(Runnable和Callable多线程实现):https://blog.csdn.net/BADAO_LIUMAN......
  • java JSON对象与字符串间的转换
    importcom.alibaba.fastjson.JSON;importcom.alibaba.fastjson.JSONObject;//字符串转为JSON对象StringstrParam="{\"callerid\":\"013941128270\",\"timestart\":\"2021-07-2709:37:42\",\"status\"......
  • Springboot+FastJson实现解析第三方http接口json数据为实体类(时间格式化转换、字段包
    场景若依前后端分离版手把手教你本地搭建环境并运行项目:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662在上面搭建SpringBoot项目的基础上,并且在项目中引入fastjson、hutool、lombok等所需依赖后。系统需要对接第三方http接口获取返回的数据,并将json数......
  • uniapp滑动页面时警告Unable to preventDefault inside passive event listener due t
    翻译:没有添加被动事件监听器来阻止’touchstart‘事件,请考虑添加事件管理者’passive’,以使页面更加流畅。原因:由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault(),这就导致了浏览器不能及时响应滚动,略有延迟。所以为了让页面滚动的效果如丝般顺滑......
  • C++(默认参数、占位参数)
    在C++中,函数默认参数和占位参数都是用于提供函数参数的一些默认值或占位符,从而增加函数的灵活性。默认参数(DefaultParameters):在C++中,可以为函数的一个或多个参数提供默认值。这意味着调用函数时,如果没有提供相应的实参,将使用默认值。默认参数必须从函数声明开始定义,然后只......
  • 使用js和定位排版创建内联广告
    HTML+JS<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><linkrel="stylesheet"href="../css/index.css"><title>使用js和定位排版创建内联广告</title></head&g......