• 如何快速生成一个H5滑动的卡片（单页和分页都有）

  ---

   单页

   
  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>
        

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

分页

这里以vant的轮播图组件

 结构

 
class="combo-swiper">
         <van-swipe class="my-swipe" indicator-color="white" :loop="false" v-if="info.event.length">
           <van-swipe-item v-for="(slice, sliceIndex) in comboArrChunks" :key="sliceIndex">
        <div class="combo-swiper-box">
          <div v-for="(item, itemIndex) in slice" :key="itemIndex" class="swiper-son">
            <div class="li-title">{{ item.spec }}div>
            <div class="li-text">{{ item.activityName }}div>
            <div class="li-bnt" @click="handleImmediatelyData(item, sliceIndex * 3 + itemIndex)">
              立即办理
            div>
          div>
        div>
      van-swipe-item>
        
      van-swipe>
  

 样式

 .combo-swiper{
       width: 100%;
     
        .my-swipe .van-swipe-item {
            width: 100%;
            height: 100px;
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            margin-bottom: 20px;
            margin-top: 10px;
            .combo-swiper-box{
              display: flex;
              // justify-content: center;
              align-items: center;
              flex-wrap: wrap;
              flex-direction: row;
              .swiper-son{
                width: 100px;
                height: 90px;
                margin-right: 10px;
                padding: 5px;
                border-radius: 8px;
                background-color: #fff;
                text-align: center;
                &:nth-child(3){
                   margin-right:0;
                }   
                .li-title{
                    font-size: 14px;
                    margin-top: 5px;
                    line-height: 20px;
                    font-weight: bold;
                    color: #575757;
                    padding-top: 2px;
                  }
                
                  .li-text {
                    font-size: 12px;
                    margin: 5px 0px;
                    height: 20px;
                    line-height: 20px;
                    color: #fca418;
                  }
                  .li-bnt {
                    width: 80%;  
                    height: 18px;
                    font-size: 12px;
                    line-height: 18px;
                    padding: 2px 6px;
                    margin:0 auto;
                    background: #fca418;
                    color: #fff;
                    border-radius: 40px 40px 40px 40px;
                  } 
              }
             }
          } 
    }

 方法函数

data(){
   return{
     comboArr: [
      { spec: 'Spec A', activityName: 'Activity 1' },
      { spec: 'Spec B', activityName: 'Activity 2' },
      { spec: 'Spec C', activityName: 'Activity 3' },
      { spec: 'Spec D', activityName: 'Activity 4' },
      { spec: 'Spec E', activityName: 'Activity 5' }
    ],
     itemsPerSwipe: 3, // 每个  包含的数据数量
},
computed: {
    comboArrChunks() {
      const chunks = [];
      if (this.info.event) {
        for (let i = 0; i < this.comboArr.length; i += this.itemsPerSwipe) {
          chunks.push(this.comboArr.slice(i, i + this.itemsPerSwipe));
        }
      }
      return chunks;
    },
 
  },  
methods：{
   handleImmediatelyData(item, index){
        console.log(item，index);
        //需要处理的逻辑
    }
}

计算属性用于将原始的 comboArr 数组切分成多个子数组，每个子数组包含 itemsPerSwipe 个元素。这样可以确保每个轮播项内都有相同数量的组合套餐信息。这个方法返回一个包含子数组的数组，用于在轮播组件中进行循环渲染。