如何快速生成一个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,'滚动距离超过第一个盒子的宽度!');
        // 在这里进行你的打印操作或其他操作
      }
    },
相关推荐
雨过天晴而后无语11 分钟前
Windchill中MVC选中事件级联另一MVC内容
java·javascript·html·mvc
wsWmsw4 小时前
[译] 浏览器里的 Liquid Glass:利用 CSS 和 SVG 实现折射
前端·css·svg
银安5 小时前
CSS排版布局篇(2):文档流(Normal Flow)
前端·css
折翼的恶魔7 小时前
前端学习之样式设计
前端·css·学习
街尾杂货店&8 小时前
css word-spacing属性
前端·css
无尽夏_15 小时前
HTML5(前端基础)
前端·html·html5
angleoldhen18 小时前
网页版的点名/抽奖程序
html·抽奖·点名
Never_Satisfied19 小时前
在JavaScript / HTML中,调整div的边框
html·边框
Never_Satisfied21 小时前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html
前端Hardy1 天前
HTML&CSS&JS:纯前端图片打码神器:自定义强度 + 区域缩放,无需安装
前端·javascript·css