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

 

        

          
{{ item.A }}
          
{{ item.B }}
          

            立即办理
          
        
      
 

  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;
        }
      }
    }

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

    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,'滚动距离超过第一个盒子的宽度！');
        // 在这里进行你的打印操作或其他操作
      }
    },