如何快速生成一个H5滑动的卡片

javascript 复制代码
 <ul class="combo">
        <li v-for="(item, index) in arr" :key="index">
          <div class="combo-name">{{ item.A }}</div>
          <div class="combo-price">{{ item.B }}</div>
          <div class="combo-button" @click="handleImmediatelyData(item, idx)">
            立即办理
          </div>
        </li>
      </ul> 

  arr: [
        {
          A: "套餐打折",
          B: "五G套餐专享",
       
        },
        {
          A: "套餐打折",
          B: "五G套餐专享",
          
        },
        {
          A: "套餐打折",
          B: "五G套餐专享",
          
        },
        {
          A: "套餐打折",
          B: "五G套餐专享",
       
        },
        {
          A: "套餐打折",
          B: "五G套餐专享",
    
        },
        {
          A: "套餐打折",
          B: "五G套餐专享",
   
        },
        {
          A: "套餐打折",
          B: "五G套餐专享",
  
        },
        {
          A: "套餐打折",
          B: "五G套餐专享",
  
        },
        {
          A: "套餐打折",
          B: "五G套餐专享",

        },
      ],




  .combo {
      width: 100%;
      // height: 86px;
      box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.05);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      margin-top: 12px;
      display: -webkit-box;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      .combo::-webkit-scrollbar {
        display: none;
        // width: 0px;
        opacity: 0;
      }
      li {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        width: 90px;
        height: 90px;
        // background: linear-gradient(320deg, #ffffff 0%, #f9daa4 100%);
        background-color: #fff;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        // border: 1px solid #ffffff;
        margin-left: 10px;
        margin-bottom: 5px;
        &:first-child{
          margin-left: 0;
        }
        .combo-title {
          line-height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: blue;
        }
        .combo-price {
          font-size: 13px;
          font-weight: 600;
          color: #fca418;
          height: 20px;
          line-height: 20px;
          margin-top: 6px;
          margin-bottom: 6px;
        }
        .combo-button {
          border-radius: 40px 40px 40px 40px;
          font-size: 12px;
          background: #fca418;
          font-weight: 400;
          color: #fff;
          line-height: 20px;
          width: 65px;
        }
      }
    }

当要对滚动做一些处理的时候可以参考下面的代码

javascript 复制代码
    handleScroll(event) {
          // 获取滚动的距离
      const scrollDistance = event.target.scrollLeft;
        当前视口的宽度
      var viewportWidth = window.innerWidth || document.documentElement.clientWidth;

      // 获取第一个 li 元素的宽度
      const firstItemWidth = this.$refs.comboList.querySelector('.combo li:first-child').clientWidth;
      // console.log(scrollDistance,'滚动');
      // 判断滚动的距离是否超过第一个盒子的宽度,外边距10*(n-1)+视口内边距20 = 30+20
      if (scrollDistance >= 4*firstItemWidth-viewportWidth+50) {
        console.log(scrollDistance,viewportWidth-20,4*firstItemWidth,'滚动距离超过第一个盒子的宽度!');
        // 在这里进行你的打印操作或其他操作
      }
    },
相关推荐
大怪v7 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
WebDesign_Mu11 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
做好一个小前端11 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
携欢11 小时前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
Bellafu66616 小时前
selenium的css定位方式有哪些
css·selenium·tensorflow
我有一棵树17 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
rising start18 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied19 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
im_AMBER19 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父19 小时前
前端速通—CSS篇
前端·css